test_AI_Agent

Sleeping

App Files Files Community

SarahXia0405 commited on Dec 19, 2025

Commit

760b33c

verified ·

1 Parent(s): 6cbfd2a

Upload 72 files

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

web/README.md +11 -0
web/index.html +15 -0
web/package.json +59 -0
web/src/.DS_Store +0 -0
web/src/App.tsx +377 -0
web/src/Attributions.md +3 -0
web/src/components/.DS_Store +0 -0
web/src/components/ChatArea.tsx +343 -0
web/src/components/FileUploadArea.tsx +273 -0
web/src/components/FloatingActionButtons.tsx +111 -0
web/src/components/GroupMembers.tsx +57 -0
web/src/components/Header.tsx +79 -0
web/src/components/LearningModeSelector.tsx +94 -0
web/src/components/LeftSidebar.tsx +121 -0
web/src/components/MemoryLine.tsx +108 -0
web/src/components/Message.tsx +221 -0
web/src/components/RightPanel.tsx +398 -0
web/src/components/UserGuide.tsx +151 -0
web/src/components/figma/ImageWithFallback.tsx +27 -0
web/src/components/ui/accordion.tsx +66 -0
web/src/components/ui/alert-dialog.tsx +157 -0
web/src/components/ui/alert.tsx +66 -0
web/src/components/ui/aspect-ratio.tsx +11 -0
web/src/components/ui/avatar.tsx +53 -0
web/src/components/ui/badge.tsx +46 -0
web/src/components/ui/breadcrumb.tsx +109 -0
web/src/components/ui/button.tsx +58 -0
web/src/components/ui/calendar.tsx +75 -0
web/src/components/ui/card.tsx +92 -0
web/src/components/ui/carousel.tsx +241 -0
web/src/components/ui/chart.tsx +353 -0
web/src/components/ui/checkbox.tsx +32 -0
web/src/components/ui/collapsible.tsx +33 -0
web/src/components/ui/command.tsx +177 -0
web/src/components/ui/context-menu.tsx +252 -0
web/src/components/ui/dialog.tsx +137 -0
web/src/components/ui/drawer.tsx +132 -0
web/src/components/ui/dropdown-menu.tsx +257 -0
web/src/components/ui/form.tsx +168 -0
web/src/components/ui/hover-card.tsx +44 -0
web/src/components/ui/input-otp.tsx +77 -0
web/src/components/ui/input.tsx +21 -0
web/src/components/ui/label.tsx +24 -0
web/src/components/ui/menubar.tsx +276 -0
web/src/components/ui/navigation-menu.tsx +168 -0
web/src/components/ui/pagination.tsx +127 -0
web/src/components/ui/popover.tsx +48 -0
web/src/components/ui/progress.tsx +31 -0
web/src/components/ui/radio-group.tsx +45 -0
web/src/components/ui/resizable.tsx +56 -0

web/README.md ADDED Viewed

	@@ -0,0 +1,11 @@

+  # Clare AI Tutor UI Redesign (Copy)
+  This is a code bundle for Clare AI Tutor UI Redesign (Copy). The original project is available at https://www.figma.com/design/yC1iBsNtBGpBH8sXO43uah/Clare-AI-Tutor-UI-Redesign--Copy-.
+  ## Running the code
+  Run `npm i` to install the dependencies.
+  Run `npm run dev` to start the development server.

web/index.html ADDED Viewed

	@@ -0,0 +1,15 @@

+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Clare AI Tutor UI Redesign (Copy)</title>
+    </head>
+    <body>
+      <div id="root"></div>
+      <script type="module" src="/src/main.tsx"></script>
+    </body>
+  </html>

web/package.json ADDED Viewed

	@@ -0,0 +1,59 @@

+  {
+      "name": "Clare AI Tutor UI Redesign (Copy)",
+      "version": "0.1.0",
+      "private": true,
+      "dependencies": {
+          "@radix-ui/react-accordion": "^1.2.3",
+          "@radix-ui/react-alert-dialog": "^1.1.6",
+          "@radix-ui/react-aspect-ratio": "^1.1.2",
+          "@radix-ui/react-avatar": "^1.1.3",
+          "@radix-ui/react-checkbox": "^1.1.4",
+          "@radix-ui/react-collapsible": "^1.1.3",
+          "@radix-ui/react-context-menu": "^2.2.6",
+          "@radix-ui/react-dialog": "^1.1.6",
+          "@radix-ui/react-dropdown-menu": "^2.1.6",
+          "@radix-ui/react-hover-card": "^1.1.6",
+          "@radix-ui/react-label": "^2.1.2",
+          "@radix-ui/react-menubar": "^1.1.6",
+          "@radix-ui/react-navigation-menu": "^1.2.5",
+          "@radix-ui/react-popover": "^1.1.6",
+          "@radix-ui/react-progress": "^1.1.2",
+          "@radix-ui/react-radio-group": "^1.2.3",
+          "@radix-ui/react-scroll-area": "^1.2.3",
+          "@radix-ui/react-select": "^2.1.6",
+          "@radix-ui/react-separator": "^1.1.2",
+          "@radix-ui/react-slider": "^1.2.3",
+          "@radix-ui/react-slot": "^1.1.2",
+          "@radix-ui/react-switch": "^1.1.3",
+          "@radix-ui/react-tabs": "^1.1.3",
+          "@radix-ui/react-toggle": "^1.1.2",
+          "@radix-ui/react-toggle-group": "^1.1.2",
+          "@radix-ui/react-tooltip": "^1.1.8",
+          "class-variance-authority": "^0.7.1",
+          "clsx": "*",
+          "cmdk": "^1.1.1",
+          "embla-carousel-react": "^8.6.0",
+          "input-otp": "^1.4.2",
+          "lucide-react": "^0.487.0",
+          "next-themes": "^0.4.6",
+          "react": "^18.3.1",
+          "react-day-picker": "^8.10.1",
+          "react-dom": "^18.3.1",
+          "react-hook-form": "^7.55.0",
+          "react-resizable-panels": "^2.1.7",
+          "recharts": "^2.15.2",
+          "sonner": "^2.0.3",
+          "tailwind-merge": "*",
+          "vaul": "^1.1.2"
+      },
+      "devDependencies": {
+          "@types/node": "^20.10.0",
+          "@vitejs/plugin-react-swc": "^3.10.2",
+          "vite": "6.3.5"
+      },
+      "scripts": {
+          "dev": "vite",
+          "build": "vite build"
+      }
+  }

web/src/.DS_Store ADDED Viewed

Binary file (6.15 kB). View file

web/src/App.tsx ADDED Viewed

	@@ -0,0 +1,377 @@

+import React, { useState, useEffect } from 'react';
+import { Header } from './components/Header';
+import { LeftSidebar } from './components/LeftSidebar';
+import { ChatArea } from './components/ChatArea';
+import { RightPanel } from './components/RightPanel';
+import { FloatingActionButtons } from './components/FloatingActionButtons';
+import { Menu, X, User } from 'lucide-react';
+import { Button } from './components/ui/button';
+import { Toaster } from './components/ui/sonner';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  references?: string[];
+  sender?: GroupMember; // For group chat
+}
+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 type FileType = 'syllabus' | 'lecture-slides' | 'literature-review' | 'other';
+export interface UploadedFile {
+  file: File;
+  type: FileType;
+}
+export type LearningMode = 'concept' | 'socratic' | 'exam' | 'assignment' | 'summary';
+export type Language = 'auto' | 'en' | 'zh';
+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);
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: '1',
+      role: 'assistant',
+      content: "👋 Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. 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 [learningMode, setLearningMode] = useState<LearningMode>('concept');
+  const [language, setLanguage] = useState<Language>('auto');
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [memoryProgress, setMemoryProgress] = useState(36);
+  const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
+  const [rightPanelOpen, setRightPanelOpen] = useState(false);
+  const [rightPanelVisible, setRightPanelVisible] = useState(true);
+  const [spaceType, setSpaceType] = useState<SpaceType>('individual');
+  const [exportResult, setExportResult] = useState('');
+  const [resultType, setResultType] = useState<'export' | 'quiz' | 'summary' | null>(null);
+  // 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' },
+  ]);
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', isDarkMode);
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+  }, [isDarkMode]);
+  const handleSendMessage = (content: string) => {
+    if (!content.trim() || !user) return;
+    // In group mode, add sender info
+    const sender: GroupMember | undefined = spaceType === 'group'
+      ? { id: user.email, name: user.name, email: user.email }
+      : undefined;
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content,
+      timestamp: new Date(),
+      sender,
+    };
+    setMessages(prev => [...prev, userMessage]);
+    // In group mode, only respond if @Clare or @clare is mentioned
+    const shouldAIRespond = spaceType === 'individual' ||
+      content.toLowerCase().includes('@clare');
+    if (shouldAIRespond) {
+      // Simulate AI response
+      setTimeout(() => {
+        const responses: Record<LearningMode, string> = {
+          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.",
+        };
+        const assistantMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          role: 'assistant',
+          content: responses[learningMode],
+          timestamp: new Date(),
+          references: ['Module 10, Section 2.3', 'Lecture Notes - Week 5'],
+          sender: spaceType === 'group' ? groupMembers.find(m => m.isAI) : undefined,
+        };
+        setMessages(prev => [...prev, assistantMessage]);
+      }, 1000);
+    }
+  };
+  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
+    ));
+  };
+  const handleClearConversation = () => {
+    setMessages([{
+      id: '1',
+      role: 'assistant',
+      content: "👋 Hi! I'm Clare, your AI teaching assistant for Module 10 – Responsible AI. 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 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!');
+  };
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <Toaster />
+      <Header
+        user={user}
+        onMenuClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
+        onUserClick={() => setRightPanelOpen(!rightPanelOpen)}
+        isDarkMode={isDarkMode}
+        onToggleDarkMode={() => setIsDarkMode(!isDarkMode)}
+      />
+      <div className="flex-1 flex overflow-hidden">
+        {/* Mobile Sidebar Toggle - Left */}
+        {leftSidebarOpen && (
+          <div
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            onClick={() => setLeftSidebarOpen(false)}
+          />
+        )}
+        {/* Left Sidebar */}
+        <aside
+          className={`
+            fixed lg:static 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'}
+            lg:translate-x-0
+            flex flex-col
+            mt-16 lg:mt-0
+          `}
+        >
+          <div className="lg:hidden 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}
+            onSpaceTypeChange={setSpaceType}
+            groupMembers={groupMembers}
+          />
+        </aside>
+        {/* Main Chat Area */}
+        <main className="flex-1 flex flex-col min-w-0">
+          <ChatArea
+            messages={messages}
+            onSendMessage={handleSendMessage}
+            uploadedFiles={uploadedFiles}
+            onFileUpload={handleFileUpload}
+            onRemoveFile={handleRemoveFile}
+            onFileTypeChange={handleFileTypeChange}
+            memoryProgress={memoryProgress}
+            isLoggedIn={!!user}
+            learningMode={learningMode}
+            onClearConversation={handleClearConversation}
+            onLearningModeChange={setLearningMode}
+            spaceType={spaceType}
+          />
+        </main>
+        {/* Mobile Sidebar Toggle - Right */}
+        {rightPanelOpen && (
+          <div
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            onClick={() => setRightPanelOpen(false)}
+          />
+        )}
+        {/* Right Panel */}
+        {rightPanelVisible && (
+          <aside
+            className={`
+              fixed lg:static inset-y-0 right-0 z-50
+              w-80 bg-card border-l border-border
+              transform transition-transform duration-300 ease-in-out
+              ${rightPanelOpen ? 'translate-x-0' : 'translate-x-full'}
+              lg:translate-x-0
+              flex flex-col
+              mt-16 lg:mt-0
+            `}
+          >
+            <div className="lg:hidden p-4 border-b border-border flex justify-between items-center">
+              <h3>Account & Actions</h3>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setRightPanelOpen(false)}
+              >
+                <X className="h-5 w-5" />
+              </Button>
+            </div>
+            <RightPanel
+              user={user}
+              onLogin={setUser}
+              onLogout={() => setUser(null)}
+              isLoggedIn={!!user}
+              onClose={() => setRightPanelVisible(false)}
+              exportResult={exportResult}
+              setExportResult={setExportResult}
+              resultType={resultType}
+              setResultType={setResultType}
+            />
+          </aside>
+        )}
+        {/* Toggle Right Panel Button - Desktop only */}
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => setRightPanelVisible(!rightPanelVisible)}
+          className={`hidden lg:flex fixed top-20 z-[70] h-8 w-5 shadow-lg transition-all rounded-l-full rounded-r-none border-r-0 ${
+            rightPanelVisible
+              ? 'right-[320px]'
+              : 'right-0'
+          }`}
+          title={rightPanelVisible ? 'Close panel' : 'Open panel'}
+        >
+          {rightPanelVisible ? (
+            <ChevronRight className="h-3 w-3" />
+          ) : (
+            <ChevronLeft className="h-3 w-3" />
+          )}
+        </Button>
+        {/* Floating Action Buttons - Desktop only, when panel is closed */}
+        {!rightPanelVisible && (
+          <FloatingActionButtons
+            user={user}
+            isLoggedIn={!!user}
+            onOpenPanel={() => setRightPanelVisible(true)}
+            onExport={handleExport}
+            onQuiz={handleQuiz}
+            onSummary={handleSummary}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+export default App;

web/src/Attributions.md ADDED Viewed

	@@ -0,0 +1,3 @@


1	+ 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).
2	+
3	+ This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).

web/src/components/.DS_Store ADDED Viewed

Binary file (6.15 kB). View file

web/src/components/ChatArea.tsx ADDED Viewed

	@@ -0,0 +1,343 @@

+import React, { useState, useRef, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+import { Send, ArrowDown, AlertCircle, Trash2, Share2 } from 'lucide-react';
+import { Message } from './Message';
+import { FileUploadArea } from './FileUploadArea';
+import { MemoryLine } from './MemoryLine';
+import { Alert, AlertDescription } from './ui/alert';
+import { Badge } from './ui/badge';
+import type { Message as MessageType, LearningMode, UploadedFile, FileType, SpaceType } from '../App';
+import { toast } from 'sonner';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+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;
+  onLearningModeChange: (mode: LearningMode) => void;
+  spaceType: SpaceType;
+}
+export function ChatArea({
+  messages,
+  onSendMessage,
+  uploadedFiles,
+  onFileUpload,
+  onRemoveFile,
+  onFileTypeChange,
+  memoryProgress,
+  isLoggedIn,
+  learningMode,
+  onClearConversation,
+  onLearningModeChange,
+  spaceType,
+}: ChatAreaProps) {
+  const [input, setInput] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+  useEffect(() => {
+    const handleScroll = () => {
+      if (scrollContainerRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+        setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
+      }
+    };
+    const container = scrollContainerRef.current;
+    container?.addEventListener('scroll', handleScroll);
+    return () => container?.removeEventListener('scroll', handleScroll);
+  }, []);
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || !isLoggedIn) return;
+    onSendMessage(input);
+    setInput('');
+    setIsTyping(true);
+    setTimeout(() => setIsTyping(false), 1500);
+  };
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+  const modeLabels: Record<LearningMode, string> = {
+    concept: 'Concept Explainer',
+    socratic: 'Socratic Tutor',
+    exam: 'Exam Prep',
+    assignment: 'Assignment Helper',
+    summary: 'Quick Summary',
+  };
+  const handleClearClick = () => {
+    if (messages.length <= 1) {
+      toast.info('No conversation to clear');
+      return;
+    }
+    if (window.confirm('Are you sure you want to clear the conversation? This cannot be undone.')) {
+      onClearConversation();
+      toast.success('Conversation cleared');
+    }
+  };
+  const handleShareClick = () => {
+    if (messages.length <= 1) {
+      toast.info('No conversation to share');
+      return;
+    }
+    // Create a shareable text version of the conversation
+    const conversationText = messages
+      .map(msg => `${msg.sender === 'user' ? 'You' : 'Clare'}: ${msg.content}`)
+      .join('\n\n');
+    // Copy to clipboard
+    navigator.clipboard.writeText(conversationText).then(() => {
+      toast.success('Conversation copied to clipboard!');
+    }).catch(() => {
+      toast.error('Failed to copy conversation');
+    });
+  };
+  return (
+    <div className="flex flex-col h-full">
+      {/* Chat Area with Floating Input */}
+      <div className="flex-1 relative border-b-2 border-border">
+        {/* Action Buttons - Fixed at top right */}
+        {messages.length > 1 && (
+          <div className="absolute top-4 right-12 z-10 flex gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleShareClick}
+              disabled={!isLoggedIn}
+              className="gap-2 bg-background/95 backdrop-blur-sm shadow-sm hover:shadow-md transition-all group"
+            >
+              <Share2 className="h-4 w-4" />
+              <span className="hidden group-hover:inline">Share</span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClearClick}
+              disabled={!isLoggedIn}
+              className="gap-2 bg-background/95 backdrop-blur-sm shadow-sm hover:shadow-md transition-all group"
+            >
+              <Trash2 className="h-4 w-4" />
+              <span className="hidden group-hover:inline">Clear</span>
+            </Button>
+          </div>
+        )}
+        {/* Messages Area */}
+        <div
+          ref={scrollContainerRef}
+          className="h-full max-h-[600px] overflow-y-auto px-4 py-6 pb-36"
+        >
+          <div className="max-w-4xl mx-auto space-y-6">
+            {messages.map((message) => (
+              <Message
+                key={message.id}
+                message={message}
+                showSenderInfo={spaceType === 'group'}
+              />
+            ))}
+            {isTyping && (
+              <div className="flex gap-3">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center flex-shrink-0">
+                  <span className="text-white text-sm">C</span>
+                </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>
+        {/* Scroll to Bottom Button - Floating above input */}
+        {showScrollButton && (
+          <div className="absolute bottom-24 left-1/2 -translate-x-1/2 z-20">
+            <Button
+              variant="secondary"
+              size="icon"
+              className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-background"
+              onClick={scrollToBottom}
+            >
+              <ArrowDown className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+        {/* Floating Input Area */}
+        <div className="absolute bottom-0 left-0 right-0 bg-background/95 backdrop-blur-sm z-10">
+          <div className="max-w-4xl mx-auto px-4 py-4">
+            <form onSubmit={handleSubmit}>
+              <div className="relative">
+                {/* Mode Selector - ChatGPT style at bottom left */}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="absolute bottom-3 left-2 gap-1.5 h-8 px-2 text-xs z-10 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('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>
+                <Textarea
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={
+                    isLoggedIn
+                      ? spaceType === 'group'
+                        ? "Type a message... (mention @Clare to get AI assistance)"
+                        : "Ask Clare anything about the course..."
+                      : "Please log in on the right to start chatting..."
+                  }
+                  disabled={!isLoggedIn}
+                  className="min-h-[80px] pl-4 pr-12 resize-none bg-background border-2 border-border"
+                />
+                <Button
+                  type="submit"
+                  size="icon"
+                  disabled={!input.trim() || !isLoggedIn}
+                  className="absolute bottom-2 right-2 rounded-full"
+                >
+                  <Send className="h-4 w-4" />
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+      {/* Course Materials Section */}
+      <div className="bg-card">
+        <div className="max-w-4xl mx-auto px-4 py-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <FileUploadArea
+              uploadedFiles={uploadedFiles}
+              onFileUpload={onFileUpload}
+              onRemoveFile={onRemoveFile}
+              onFileTypeChange={onFileTypeChange}
+              disabled={!isLoggedIn}
+            />
+            <MemoryLine progress={memoryProgress} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/FileUploadArea.tsx ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -0,0 +1,111 @@

+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Download, ClipboardList, Sparkles } from 'lucide-react';
+import { toast } from 'sonner@2.0.3';
+import type { User } from '../App';
+interface FloatingActionButtonsProps {
+  user: User | null;
+  isLoggedIn: boolean;
+  onOpenPanel: () => void;
+  onExport: () => void;
+  onQuiz: () => void;
+  onSummary: () => void;
+}
+export function FloatingActionButtons({
+  user,
+  isLoggedIn,
+  onOpenPanel,
+  onExport,
+  onQuiz,
+  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: 'quiz',
+      icon: ClipboardList,
+      label: "Let's Try (Micro-Quiz)",
+      action: onQuiz,
+      openPanel: false, // Don't open panel for quiz
+    },
+    {
+      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 ADDED Viewed

	@@ -0,0 +1,57 @@

+import React from 'react';
+import { Users, Bot } from 'lucide-react';
+import { Badge } from './ui/badge';
+import type { GroupMember } from '../App';
+interface GroupMembersProps {
+  members: GroupMember[];
+}
+export function GroupMembers({ members }: GroupMembersProps) {
+  return (
+    <div className="space-y-3">
+      <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>
+      <div className="space-y-2">
+        {members.map((member) => (
+          <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 ${
+              member.isAI
+                ? 'bg-gradient-to-br from-purple-500 to-blue-500'
+                : 'bg-muted'
+            }`}>
+              {member.isAI ? (
+                <Bot className="h-4 w-4 text-white" />
+              ) : (
+                <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>
+                {member.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>
+    </div>
+  );
+}

web/src/components/Header.tsx ADDED Viewed

	@@ -0,0 +1,79 @@

+import React from 'react';
+import { Menu, User, BookOpen, Moon, Sun } from 'lucide-react';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import type { User as UserType } from '../App';
+interface HeaderProps {
+  user: UserType | null;
+  onMenuClick: () => void;
+  onUserClick: () => void;
+  isDarkMode: boolean;
+  onToggleDarkMode: () => void;
+}
+export function Header({ user, onMenuClick, onUserClick, isDarkMode, onToggleDarkMode }: HeaderProps) {
+  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-[60]">
+      <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 bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
+            <BookOpen className="h-6 w-6 text-white" />
+          </div>
+          <div>
+            <h1 className="text-lg sm:text-xl tracking-tight">
+              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">
+        <Badge variant="secondary" className="hidden md:flex">
+          Module 10 – Responsible AI
+        </Badge>
+        <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 ? (
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={onUserClick}
+          >
+            <User className="h-4 w-4" />
+            <span className="hidden sm:inline">{user.name}</span>
+          </Button>
+        ) : (
+          <Button
+            variant="default"
+            className="gap-2 lg:hidden"
+            onClick={onUserClick}
+          >
+            <User className="h-4 w-4" />
+            <span>Login</span>
+          </Button>
+        )}
+      </div>
+    </header>
+  );
+}

web/src/components/LearningModeSelector.tsx ADDED Viewed

	@@ -0,0 +1,94 @@

+import React from 'react';
+import { Card } from './ui/card';
+import {
+  Lightbulb,
+  MessageCircleQuestion,
+  GraduationCap,
+  FileEdit,
+  Zap
+} from 'lucide-react';
+import type { LearningMode } from '../App';
+interface ModeSelectorProps {
+  selectedMode: LearningMode;
+  onModeChange: (mode: LearningMode) => void;
+}
+const modes = [
+  {
+    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,
+    icon: MessageCircleQuestion,
+    title: 'Socratic Tutor',
+    description: 'Learn through questions',
+    color: 'from-purple-500 to-purple-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 ADDED Viewed

	@@ -0,0 +1,121 @@

+import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { LearningModeSelector } from './LearningModeSelector';
+import { UserGuide } from './UserGuide';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group';
+import { Label } from './ui/label';
+import { Button } from './ui/button';
+import { RotateCcw, Settings, User, Users } from 'lucide-react';
+import { Separator } from './ui/separator';
+import { GroupMembers } from './GroupMembers';
+import type { LearningMode, Language, SpaceType, GroupMember } from '../App';
+interface LeftSidebarProps {
+  learningMode: LearningMode;
+  language: Language;
+  onLearningModeChange: (mode: LearningMode) => void;
+  onLanguageChange: (lang: Language) => void;
+  spaceType: SpaceType;
+  onSpaceTypeChange: (type: SpaceType) => void;
+  groupMembers: GroupMember[];
+}
+export function LeftSidebar({
+  learningMode,
+  language,
+  onLearningModeChange,
+  onLanguageChange,
+  spaceType,
+  onSpaceTypeChange,
+  groupMembers,
+}: LeftSidebarProps) {
+  return (
+    <div className="flex-1 overflow-auto">
+      {/* Space Selector */}
+      <div className="p-4 border-b border-border space-y-3">
+        <Label>Workspace</Label>
+        <RadioGroup value={spaceType} onValueChange={(value) => onSpaceTypeChange(value as SpaceType)}>
+          <div className="flex items-center space-x-2 p-2 rounded-lg hover:bg-muted/50 transition-colors">
+            <RadioGroupItem value="individual" id="individual" />
+            <Label htmlFor="individual" className="cursor-pointer flex items-center gap-2 flex-1">
+              <User className="h-4 w-4" />
+              Individual Space
+            </Label>
+          </div>
+          <div className="flex items-center space-x-2 p-2 rounded-lg hover:bg-muted/50 transition-colors">
+            <RadioGroupItem value="group" id="group" />
+            <Label htmlFor="group" className="cursor-pointer flex items-center gap-2 flex-1">
+              <Users className="h-4 w-4" />
+              Group Space
+            </Label>
+          </div>
+        </RadioGroup>
+      </div>
+      {/* Group Members - Only show in group mode */}
+      {spaceType === 'group' && (
+        <div className="p-4 border-b border-border">
+          <GroupMembers members={groupMembers} />
+        </div>
+      )}
+      <Tabs defaultValue="settings" className="h-full flex flex-col">
+        <div className="px-4 pt-4">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+            <TabsTrigger value="guide">Guide</TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent value="settings" className="flex-1 mt-0 p-4 space-y-6">
+          <div className="space-y-4">
+            <div>
+              <h3>Model Settings</h3>
+            </div>
+            <div className="space-y-2">
+              <Label>Model</Label>
+              <div className="px-3 py-2 bg-muted rounded-md">
+                <code className="text-sm">gpt-4.1-mini</code>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label>Language</Label>
+              <RadioGroup value={language} onValueChange={(value) => onLanguageChange(value as Language)}>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="auto" id="auto" />
+                  <Label htmlFor="auto" className="cursor-pointer">Auto</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="en" id="en" />
+                  <Label htmlFor="en" className="cursor-pointer">English</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="zh" id="zh" />
+                  <Label htmlFor="zh" className="cursor-pointer">简体中文</Label>
+                </div>
+              </RadioGroup>
+            </div>
+          </div>
+          <Separator />
+          <div className="space-y-3">
+            <Button variant="outline" className="w-full gap-2" disabled>
+              <Settings className="h-4 w-4" />
+              System Settings
+            </Button>
+            <p className="text-xs text-muted-foreground text-center">
+              © 2025 Clare AI Teaching Assistant
+            </p>
+          </div>
+        </TabsContent>
+        <TabsContent value="guide" className="flex-1 mt-0 p-4">
+          <UserGuide />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

web/src/components/MemoryLine.tsx ADDED Viewed

	@@ -0,0 +1,108 @@

+import React from 'react';
+import { Card } from './ui/card';
+import { Button } from './ui/button';
+import { Progress } from './ui/progress';
+import { Brain, Calendar, Download, Info } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './ui/tooltip';
+import { Badge } from './ui/badge';
+interface MemoryLineProps {
+  progress: number;
+}
+export function MemoryLine({ progress }: MemoryLineProps) {
+  const nextReview = progress < 25 ? 'T+7' : progress < 50 ? 'T+14' : progress < 75 ? 'T+30' : 'Complete';
+  return (
+    <Card className="p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Brain className="h-4 w-4 text-purple-500" />
+          <h4 className="text-sm">Memory Line</h4>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-5 w-5">
+                  <Info className="h-3 w-3" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs">
+                <p className="text-sm">
+                  Track your learning retention using spaced repetition. Regular reviews help solidify understanding!
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+        <Badge variant="outline" className="text-xs">
+          {progress}%
+        </Badge>
+      </div>
+      {/* Progress Bar with Milestones */}
+      <div className="space-y-2">
+        <div className="relative">
+          <Progress value={progress} className="h-2" />
+          {/* Milestone Markers */}
+          <div className="absolute top-0 left-0 w-full h-2 flex justify-between pointer-events-none">
+            {[0, 25, 50, 75, 100].map((milestone) => (
+              <div
+                key={milestone}
+                className={`
+                  w-3 h-3 rounded-full border-2 -mt-0.5
+                  ${progress >= milestone
+                    ? 'bg-primary border-primary'
+                    : 'bg-background border-border'
+                  }
+                `}
+              />
+            ))}
+          </div>
+        </div>
+        {/* Milestone Labels */}
+        <div className="flex justify-between text-xs text-muted-foreground">
+          <span>T+0</span>
+          <span>T+7</span>
+          <span>T+14</span>
+          <span>T+30</span>
+          <span>Done</span>
+        </div>
+      </div>
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" className="flex-1 gap-2">
+          <Calendar className="h-3 w-3" />
+          Next: {nextReview}
+        </Button>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="sm" className="gap-2">
+                <Download className="h-3 w-3" />
+                Report
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Download your learning progress report</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      {/* Review Explanation */}
+      <div className="pt-2 border-t border-border">
+        <p className="text-xs text-muted-foreground">
+          Based on spaced repetition for optimal retention
+        </p>
+      </div>
+    </Card>
+  );
+}

web/src/components/Message.tsx ADDED Viewed

	@@ -0,0 +1,221 @@

+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import {
+  Copy,
+  ThumbsUp,
+  ThumbsDown,
+  ChevronDown,
+  ChevronUp,
+  Check,
+  Bot
+} from 'lucide-react';
+import { Badge } from './ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
+import { Textarea } from './ui/textarea';
+import { Label } from './ui/label';
+import type { Message as MessageType } from '../App';
+import { toast } from 'sonner@2.0.3';
+interface MessageProps {
+  message: MessageType;
+  showSenderInfo?: boolean; // For group chat mode
+}
+export function Message({ message, showSenderInfo = false }: MessageProps) {
+  const [feedback, setFeedback] = useState<'helpful' | 'not-helpful' | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [referencesOpen, setReferencesOpen] = useState(false);
+  const [showFeedbackDialog, setShowFeedbackDialog] = useState(false);
+  const [feedbackType, setFeedbackType] = useState<'helpful' | 'not-helpful' | null>(null);
+  const [feedbackText, setFeedbackText] = useState('');
+  const isUser = message.role === 'user';
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(message.content);
+    setCopied(true);
+    toast.success('Message copied to clipboard');
+    setTimeout(() => setCopied(false), 2000);
+  };
+  const handleFeedback = (type: 'helpful' | 'not-helpful') => {
+    setFeedback(type);
+    toast.success(`Thanks for your feedback!`);
+  };
+  const handleFeedbackDialogOpen = (type: 'helpful' | 'not-helpful') => {
+    setFeedbackType(type);
+    setShowFeedbackDialog(true);
+  };
+  const handleFeedbackDialogClose = () => {
+    setShowFeedbackDialog(false);
+    setFeedbackType(null);
+    setFeedbackText('');
+  };
+  const handleFeedbackDialogSubmit = () => {
+    if (feedbackType) {
+      setFeedback(feedbackType);
+      toast.success(`Thanks for your feedback!`);
+    }
+    handleFeedbackDialogClose();
+  };
+  return (
+    <div className={`flex gap-3 ${isUser && !showSenderInfo ? 'justify-end' : 'justify-start'}`}>
+      {/* Avatar */}
+      {showSenderInfo && message.sender ? (
+        <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+          message.sender.isAI
+            ? 'bg-gradient-to-br from-purple-500 to-blue-500'
+            : 'bg-muted'
+        }`}>
+          {message.sender.isAI ? (
+            <Bot className="h-4 w-4 text-white" />
+          ) : (
+            <span className="text-sm">
+              {message.sender.name.split(' ').map(n => n[0]).join('').toUpperCase()}
+            </span>
+          )}
+        </div>
+      ) : !isUser ? (
+        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center flex-shrink-0">
+          <span className="text-white text-sm">C</span>
+        </div>
+      ) : null}
+      <div className={`flex flex-col gap-2 max-w-[80%] ${isUser && !showSenderInfo ? 'items-end' : 'items-start'}`}>
+        {/* 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">{message.content}</p>
+        </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 */}
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1"
+            onClick={handleCopy}
+          >
+            {copied ? (
+              <>
+                <Check className="h-3 w-3" />
+                <span className="text-xs">Copied</span>
+              </>
+            ) : (
+              <>
+                <Copy className="h-3 w-3" />
+                <span className="text-xs">Copy</span>
+              </>
+            )}
+          </Button>
+          {!isUser && (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={`h-7 gap-1 ${feedback === 'helpful' ? 'text-green-600' : ''}`}
+                onClick={() => handleFeedbackDialogOpen('helpful')}
+              >
+                <ThumbsUp className="h-3 w-3" />
+                <span className="text-xs">Helpful</span>
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className={`h-7 gap-1 ${feedback === 'not-helpful' ? 'text-red-600' : ''}`}
+                onClick={() => handleFeedbackDialogOpen('not-helpful')}
+              >
+                <ThumbsDown className="h-3 w-3" />
+                <span className="text-xs">Not helpful</span>
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+      {isUser && !showSenderInfo && (
+        <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
+          <span className="text-sm">👤</span>
+        </div>
+      )}
+      {/* Feedback Dialog */}
+      <Dialog open={showFeedbackDialog} onOpenChange={handleFeedbackDialogClose}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Provide Feedback</DialogTitle>
+            <DialogDescription>
+              {feedbackType === 'helpful' ? 'Tell us why you found this message helpful.' : 'Tell us why you found this message not helpful.'}
+            </DialogDescription>
+          </DialogHeader>
+          <Textarea
+            className="h-20"
+            value={feedbackText}
+            onChange={(e) => setFeedbackText(e.target.value)}
+            placeholder="Type your feedback here..."
+          />
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleFeedbackDialogClose}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleFeedbackDialogSubmit}
+            >
+              Submit
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

web/src/components/RightPanel.tsx ADDED Viewed

	@@ -0,0 +1,398 @@

+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 { Separator } from './ui/separator';
+import { Textarea } from './ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import {
+  LogIn,
+  LogOut,
+  Download,
+  ClipboardList,
+  FileText,
+  Sparkles,
+  ChevronUp,
+  ChevronDown,
+  PanelRightClose,
+  MessageSquare
+} from 'lucide-react';
+import type { User } from '../App';
+import { toast } from 'sonner@2.0.3';
+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;
+}
+export function RightPanel({ user, onLogin, onLogout, isLoggedIn, onClose, exportResult, setExportResult, resultType, setResultType }: RightPanelProps) {
+  const [showLoginForm, setShowLoginForm] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
+  const [feedbackText, setFeedbackText] = useState('');
+  const [feedbackCategory, setFeedbackCategory] = useState<'general' | 'bug' | 'feature'>('general');
+  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 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 handleFeedbackSubmit = () => {
+    if (!feedbackText.trim()) {
+      toast.error('Please provide feedback text');
+      return;
+    }
+    // Here you can add logic to send feedback to your server or handle it as needed
+    console.log('Feedback submitted:', feedbackText, feedbackCategory);
+    setFeedbackDialogOpen(false);
+    setFeedbackText('');
+    toast.success('Feedback submitted!');
+  };
+  return (
+    <div className="flex-1 overflow-auto p-4 space-y-4">
+      {isExpanded && (
+        <>
+          {/* Login Section */}
+          <Card className="p-4">
+            {!isLoggedIn ? (
+              <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>
+            ) : (
+              <div className="space-y-4">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white">
+                    {user.name.charAt(0).toUpperCase()}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h4 className="truncate">{user.name}</h4>
+                    <p className="text-sm text-muted-foreground truncate">{user.email}</p>
+                  </div>
+                </div>
+                <Button
+                  variant="destructive"
+                  onClick={handleLogout}
+                  className="w-full gap-2"
+                >
+                  <LogOut className="h-4 w-4" />
+                  Log Out
+                </Button>
+              </div>
+            )}
+          </Card>
+          <Separator />
+          {/* Actions section removed - functionality available via floating buttons */}
+          {/* <div className="space-y-3">
+            <h3>Actions</h3>
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="w-full justify-start gap-2"
+                  disabled={!isLoggedIn}
+                  onClick={handleExport}
+                >
+                  <Download className="h-4 w-4" />
+                  Export Conversation
+                </Button>
+              </DialogTrigger>
+            </Dialog>
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="w-full justify-start gap-2"
+                  disabled={!isLoggedIn}
+                  onClick={handleQuiz}
+                >
+                  <ClipboardList className="h-4 w-4" />
+                  Let's Try (Micro-Quiz)
+                </Button>
+              </DialogTrigger>
+            </Dialog>
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="w-full justify-start gap-2"
+                  disabled={!isLoggedIn}
+                  onClick={handleSummary}
+                >
+                  <Sparkles className="h-4 w-4" />
+                  Summarization
+                </Button>
+              </DialogTrigger>
+            </Dialog>
+            {!isLoggedIn && (
+              <p className="text-xs text-muted-foreground text-center pt-2">
+                Log in to unlock all features
+              </p>
+            )}
+          </div> */}
+          <Separator />
+          {/* Results Section */}
+          <div className="space-y-3">
+            <h3>
+              {resultType === 'export' && 'Exported Conversation'}
+              {resultType === 'quiz' && 'Micro-Quiz'}
+              {resultType === 'summary' && 'Summarization'}
+              {!resultType && 'Results'}
+            </h3>
+            <Card className="p-4 min-h-[200px] bg-muted/30">
+              {exportResult ? (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <FileText className="h-4 w-4 text-muted-foreground" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        navigator.clipboard.writeText(exportResult);
+                        toast.success('Copied to clipboard!');
+                      }}
+                    >
+                      Copy
+                    </Button>
+                  </div>
+                  <div className="text-sm whitespace-pre-wrap text-foreground">
+                    {exportResult}
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center justify-center h-full text-sm text-muted-foreground text-left">
+                  Results (export / summary / quiz) will appear here after using the actions above
+                </div>
+              )}
+            </Card>
+          </div>
+          <Separator />
+          {/* Feedback Section */}
+          <div className="space-y-3">
+            <h3>Feedback</h3>
+            <Button
+              variant="outline"
+              className="w-full justify-start gap-2"
+              onClick={() => setFeedbackDialogOpen(true)}
+            >
+              <MessageSquare className="h-4 w-4" />
+              Provide Feedback
+            </Button>
+          </div>
+          {/* Feedback Dialog */}
+          <Dialog open={feedbackDialogOpen} onOpenChange={setFeedbackDialogOpen}>
+            <DialogContent className="sm:max-w-[425px]">
+              <DialogHeader>
+                <DialogTitle>Provide Feedback</DialogTitle>
+                <DialogDescription>
+                  Help us improve Clare by sharing your thoughts and suggestions.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-3">
+                <div className="space-y-2">
+                  <Label htmlFor="feedbackCategory">Category</Label>
+                  <Select value={feedbackCategory} onValueChange={(value) => setFeedbackCategory(value as 'general' | 'bug' | 'feature')}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a category" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="general">General Feedback</SelectItem>
+                      <SelectItem value="bug">Bug Report</SelectItem>
+                      <SelectItem value="feature">Feature Request</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="feedbackText">Feedback</Label>
+                  <Textarea
+                    id="feedbackText"
+                    value={feedbackText}
+                    onChange={(e) => setFeedbackText(e.target.value)}
+                    placeholder="Enter your feedback here..."
+                    className="min-h-[100px]"
+                  />
+                </div>
+              </div>
+              <DialogFooter>
+                <Button
+                  variant="outline"
+                  onClick={() => setFeedbackDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={handleFeedbackSubmit}
+                >
+                  Submit
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      )}
+    </div>
+  );
+}

web/src/components/UserGuide.tsx ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -0,0 +1,137 @@

+"use client";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog@1.1.6";
+import { XIcon } from "lucide-react@0.487.0";
+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,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <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-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}
+      >
+        {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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -0,0 +1,257 @@

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

web/src/components/ui/form.tsx ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 };