diff --git a/.gitignore b/.gitignore
index 2fc81b60..c78eed20 100644
--- a/.gitignore
+++ b/.gitignore
@@ -266,6 +266,10 @@ out
 .nuxt
 dist
 
+# Vite cache directories
+.vite
+**/.vite
+
 # Gatsby files
 .cache/
 # Comment in the public line in if your project uses Gatsby and not Next.js
@@ -279,6 +283,10 @@ dist
 .temp
 .cache
 
+# Temporary build files
+.tmp
+**/.tmp
+
 # vitepress build output
 **/.vitepress/dist
 
@@ -288,6 +296,14 @@ dist
 # Docusaurus cache and generated files
 .docusaurus
 
+# Turbo cache
+.turbo
+**/.turbo
+
+# Vite SSR dist
+dist-ssr
+**/dist-ssr
+
 # Serverless directories
 .serverless/
 
@@ -346,3 +362,7 @@ apps/backend/logs/
 
 # GitHub instructions
 .github/instructions/sonarqube_mcp.instructions.md
+
+# VS Code MCP configuration
+.vscode/mcp.json
+.playwright-mcp/
diff --git a/.markdownlint-cli2.yaml b/.markdownlint-cli2.yaml
index 4d26384b..0a21b5cc 100644
--- a/.markdownlint-cli2.yaml
+++ b/.markdownlint-cli2.yaml
@@ -38,7 +38,8 @@ gitignore: true
 globs:
   - '**/*.{md,markdown}'
 
-# 5) Ignore patterns - exclude prompts folder and Serena memories
+# 5) Ignore patterns - exclude prompts folder, Serena memories, and new frontend docs
 ignores:
   - 'prompts/**/*.{md,markdown}'
   - '.serena/memories/**/*.{md,markdown}'
+  - 'apps/frontend/src/**/*.{md,markdown}'
diff --git a/.serena/memories/architecture_overview.md b/.serena/memories/architecture_overview.md
index f56fc031..3422be98 100644
--- a/.serena/memories/architecture_overview.md
+++ b/.serena/memories/architecture_overview.md
@@ -43,45 +43,55 @@ External Systems (Redis, Git, Filesystem)
 ### Key Services
 
 #### 1. **gitService** (`services/gitService.ts`)
+
 - Git operations: clone, log extraction, repository analysis
 - Streaming support for large repositories (50k+ commits)
 - Batch processing with configurable batch sizes
 - Integration with `repositoryCoordinator` for shared repository access
 
 **Key Methods:**
+
 - `getCommits(repoPath)` - Extract commits from local repository
 - `cloneRepository(repoUrl, options)` - Clone with configurable depth
 - Streaming capabilities for memory-efficient large repo handling
 
 #### 2. **cache** (`services/cache.ts`)
+
 Multi-tier caching strategy:
+
 - **Tier 1 - Raw Commits** (60% memory): Direct Git extraction results, TTL 1h
 - **Tier 2 - Filtered Commits** (25% memory): Author/date filtered, TTL 30min
 - **Tier 3 - Aggregated Data** (15% memory): Processed visualizations, TTL 15min
 
 **Backends:**
+
 - **Redis**: Primary distributed cache (via ioredis)
 - **hybridLruCache**: In-memory LRU + disk persistence fallback
 - Automatic fallback and health checks
 
 **Key Functions:**
+
 - `getFromCache(key)` - Multi-tier read with fallback
 - `setInCache(key, value, ttl)` - Multi-tier write with replication
 - `isCacheHealthy()` - Health status of cache backends
 - `switchCacheBackend(backend)` - Runtime backend switching
 
 #### 3. **repositoryCoordinator** (`services/repositoryCoordinator.ts`)
+
 Prevents duplicate repository clones and manages shared access:
+
 - **Operation Coalescing**: Combines identical concurrent operations
 - **Reference Counting**: Tracks active users of each repository
 - **Automatic Cleanup**: Removes unused repositories
 - **Lock Management**: Deadlock-free concurrent access via `lockManager`
 
 **Key Functions:**
+
 - `withSharedRepository(repoUrl, operation)` - Execute with shared repo access
 - `coordinatedOperation(repoUrl, operationType, operation)` - Coordinated execution
 
 **Architecture:**
+
 ```
 Request 1 ─┐
 Request 2 ─┼─→ Coordinator ─→ Single Clone ─→ Shared Access
@@ -89,21 +99,27 @@ Request 3 ─┘                    (Reference Counted)
 ```
 
 #### 4. **repositoryCache** (`services/repositoryCache.ts`)
+
 Physical repository caching on disk:
+
 - Max repositories: 50 (configurable)
 - Max age: 24 hours (configurable)
 - LRU eviction when limits reached
 - Integration with coordinator for reuse
 
 #### 5. **fileAnalysisService** (`services/fileAnalysisService.ts`)
+
 File type distribution analysis:
+
 - Categorizes files (code, documentation, config, assets, other)
 - Extension-based statistics
 - Directory-level breakdown
 - Performance optimized with streaming
 
 #### 6. **repositorySummaryService** (`services/repositorySummaryService.ts`)
+
 Repository metadata extraction:
+
 - Sparse clone approach (95-99% bandwidth savings)
 - Creation date determination (first commit or API)
 - Last commit info with relative time
@@ -111,7 +127,9 @@ Repository metadata extraction:
 - Total commits and contributor count
 
 #### 7. **metrics** (`services/metrics.ts`)
+
 Prometheus metrics collection:
+
 - Request counters and latencies
 - Cache hit rates
 - Memory usage
@@ -119,7 +137,9 @@ Prometheus metrics collection:
 - Custom business metrics
 
 #### 8. **logger** (`services/logger.ts`)
+
 Winston logging with:
+
 - Daily log rotation
 - Multiple log levels (error, warn, info, debug)
 - Structured logging with context
@@ -128,34 +148,44 @@ Winston logging with:
 ### Utilities
 
 #### **hybridLruCache** (`utils/hybridLruCache.ts`)
+
 Hierarchical LRU cache:
+
 - In-memory primary cache
 - Disk-based secondary cache
 - Automatic tier promotion/demotion
 - Memory pressure-aware eviction
 
 #### **lockManager** (`utils/lockManager.ts`)
+
 Distributed locking:
+
 - Redis-based locks with TTL
 - Lock cleanup on timeout
 - Prevents race conditions in coordinator
 - Supports lock renewal
 
 #### **memoryPressureManager** (`utils/memoryPressureManager.ts`)
+
 Memory monitoring and protection:
+
 - Thresholds: Warning (75%), Critical (85%), Emergency (95%)
 - Circuit breakers for memory protection
 - Request throttling under pressure
 - Emergency cache eviction
 
 #### **urlSecurity** (`utils/urlSecurity.ts`)
+
 Repository URL validation:
+
 - Blocks malicious URLs (file://, javascript:, etc.)
 - Validates Git hosting platforms (GitHub, GitLab, Bitbucket)
 - Normalizes URLs
 
 #### **routeHelpers** (`utils/routeHelpers.ts`)
+
 Common route patterns extracted for reuse:
+
 - `setupRouteRequest()` - Initialize request context
 - `recordRouteSuccess()` - Success response with metrics
 - `recordRouteError()` - Error handling with logging
@@ -173,6 +203,7 @@ Common route patterns extracted for reuse:
 ### Routes
 
 #### **repositoryRoutes** (`routes/repositoryRoutes.ts`)
+
 - `GET /repositories/summary` - Repository metadata
 - `GET /repositories/churn` - Code churn analysis
 - `GET /repositories/commits` - All commits
@@ -181,9 +212,11 @@ Common route patterns extracted for reuse:
 - `GET /repositories/full-data` - Complete repository data
 
 #### **commitRoutes** (`routes/commitRoutes.ts`)
+
 - Legacy commit endpoints (being refactored)
 
 #### **healthRoutes** (`routes/healthRoutes.ts`)
+
 - `GET /health` - Basic health check
 - `GET /health/detailed` - Comprehensive system status
 - `GET /health/memory` - Memory pressure status
@@ -204,23 +237,24 @@ Request → Tier 1 (Raw Commits, 60%)
 ```
 
 ### Cache Key Design
+
 ```typescript
 // Tier 1: Raw commits
 `commits:${repoUrlHash}`
-
 // Tier 2: Filtered commits
 `commits:filtered:${repoUrlHash}:${filterHash}`
-
 // Tier 3: Aggregated data
-`heatmap:${repoUrlHash}:${timePeriod}:${filterHash}`
+`heatmap:${repoUrlHash}:${timePeriod}:${filterHash}`;
 ```
 
 ### TTL Strategy
+
 - **Raw data**: 1 hour (highest reusability)
 - **Filtered data**: 30 minutes (medium reusability)
 - **Aggregated data**: 15 minutes (specific use case)
 
 ### Backends Priority
+
 1. **Redis** (primary) - Distributed, fast, persistent
 2. **Memory** (fallback) - Local, fastest, volatile
 3. **Disk** (last resort) - Local, slow, persistent
@@ -250,6 +284,7 @@ Request → Coordinator.withSharedRepository()
 ```
 
 ### Benefits
+
 - **Efficiency**: Single clone for concurrent identical requests
 - **Resource Management**: Reference counting prevents premature cleanup
 - **Consistency**: Lock-based coordination prevents race conditions
@@ -258,6 +293,7 @@ Request → Coordinator.withSharedRepository()
 ## Memory Management
 
 ### Monitoring
+
 ```
 Normal (< 75%) → Allow all operations
 Warning (75-85%) → Log warnings, continue
@@ -266,11 +302,13 @@ Emergency (> 95%) → Reject new requests, aggressive eviction
 ```
 
 ### Emergency Eviction Order
+
 1. Tier 3 cache (aggregated data) - least reusable
 2. Tier 2 cache (filtered data) - medium reusability
 3. Tier 1 cache (raw commits) - highest reusability
 
 ### Circuit Breakers
+
 - Automatic request rejection at emergency threshold
 - Prevents system overload and crashes
 - Self-recovery when memory drops below threshold
@@ -278,50 +316,101 @@ Emergency (> 95%) → Reject new requests, aggressive eviction
 ## Streaming for Large Repositories
 
 ### Activation
+
 - Automatically enabled for repositories with 50k+ commits
 - Configurable threshold via `STREAMING_COMMIT_THRESHOLD`
 
 ### Batch Processing
+
 - Default batch size: 1000 commits
 - Configurable via `STREAMING_BATCH_SIZE`
 - Memory-efficient processing of massive histories
 
 ### Benefits
+
 - Handles repositories with 100k+ commits
 - Prevents memory exhaustion
 - Progressive data delivery to frontend
 
 ## Frontend Architecture
 
-### Component Structure
+### Component Structure (Redesigned with shadcn/ui)
+
 ```
 App.tsx (Root)
     ↓
-MainPage.tsx (Main layout)
-    ├─ RepoInput.tsx (URL input)
-    ├─ ActivityHeatmap.tsx (Visualization)
-    ├─ CommitList.tsx (Commit display)
-    └─ RiveLoader.tsx (Loading animation)
+├─ Header.tsx (Top navigation with theme toggle)
+├─ Footer.tsx (Bottom footer)
+├─ LandingPage.tsx (Entry page with repo input)
+├─ DashboardPage.tsx (Main analytics dashboard)
+│   ├─ CommitHeatmap.tsx (GitHub-style heatmap)
+│   ├─ ActivityChart.tsx (Time-series activity)
+│   ├─ CodeChurnChart.tsx (Code change visualization)
+│   ├─ FileDistributionChart.tsx (File type distribution)
+│   ├─ FileTypeList.tsx (Detailed file breakdown)
+│   ├─ GraphViewTimeline.tsx (Git graph timeline)
+│   ├─ GitDiffViewer.tsx (Commit diff display)
+│   ├─ AIInsights.tsx (AI-powered repository insights)
+│   └─ PremiumFeatures.tsx (Premium feature showcase)
+├─ SettingsDrawer.tsx (Settings panel)
+├─ NewsDrawer.tsx (News/changelog panel)
+├─ InfoModal.tsx (Information modals)
+└─ RiveLoader.tsx (Loading animation)
 ```
 
+### UI Component Library (shadcn/ui)
+
+Located in `components/ui/`, includes:
+
+- **Primitives**: button, input, textarea, label, select, checkbox, radio-group, switch, slider
+- **Layout**: card, tabs, accordion, collapsible, separator, sheet, drawer, sidebar
+- **Overlays**: dialog, alert-dialog, popover, hover-card, tooltip, dropdown-menu, context-menu
+- **Data Display**: table, badge, avatar, progress, skeleton, alert
+- **Navigation**: navigation-menu, menubar, breadcrumb, pagination
+- **Charts**: chart component (recharts wrapper)
+- **Forms**: form components with React Hook Form integration
+- **Advanced**: carousel, command, scroll-area, resizable, sonner (toast)
+- **Utilities**: utils.ts (cn function for className merging), use-mobile.ts hook
+
+All components built on:
+
+- **Radix UI primitives** for accessibility and headless UI
+- **class-variance-authority (CVA)** for variant-based styling
+- **tailwind-merge** for className conflict resolution
+- **clsx** for conditional classNames
+
 ### API Communication
+
 - **Centralized API client**: `services/api.ts`
 - **Axios-based**: Configured with base URL and interceptors
 - **Type-safe**: All requests/responses use types from `@gitray/shared-types`
 
 ### State Management
+
 - React hooks for local state
 - No global state management (Redux/Context) currently
 - Direct API calls from components
+- Theme state managed via next-themes
+
+### UI/UX Features
+
+- **Dark/Light Mode**: System-aware theme switching with next-themes
+- **Toast Notifications**: Sonner for user feedback
+- **Loading States**: Rive animations for engaging loading experiences
+- **Responsive Design**: Mobile-first with Tailwind responsive utilities
+- **Animations**: Framer Motion for smooth transitions
+- **Accessibility**: Full keyboard navigation and screen reader support via Radix UI
 
 ## Shared Types Package
 
 ### Purpose
+
 - Single source of truth for TypeScript types
 - Prevents type duplication between frontend/backend
 - Exported as `@gitray/shared-types` workspace package
 
 ### Key Exports
+
 - `Commit`, `Author`, `CommitFilterOptions`
 - `CommitHeatmapData`, `CommitAggregation`, `TimePeriod`
 - `FileTypeDistribution`, `FileInfo`, `FileCategory`
@@ -331,6 +420,7 @@ MainPage.tsx (Main layout)
 - Constants: `HTTP_STATUS`, `TIME`, `ERROR_MESSAGES`, `GIT_SERVICE`
 
 ### Build Process
+
 - Must be built before backend/frontend (`pnpm build:shared-types`)
 - Produces both CommonJS and ESM outputs
 - Consumed via TypeScript project references
@@ -338,6 +428,7 @@ MainPage.tsx (Main layout)
 ## Performance Optimizations
 
 ### Backend
+
 - Multi-tier caching reduces Git operations by ~90%
 - Repository coordination eliminates duplicate clones
 - Streaming mode for large repositories
@@ -345,12 +436,14 @@ MainPage.tsx (Main layout)
 - LRU eviction maintains optimal cache size
 
 ### Frontend
+
 - Vite for fast HMR and optimized builds
 - React 19 with automatic batching
 - Lazy loading of heavy components
 - Efficient re-rendering with proper key usage
 
 ### Network
+
 - Compressed responses (gzip/brotli via helmet)
 - Cache headers for static assets
 - Minimal payload sizes via selective data fetching
@@ -367,6 +460,7 @@ MainPage.tsx (Main layout)
 ## Monitoring & Observability
 
 ### Metrics (Prometheus)
+
 - Request count, duration, status codes
 - Cache hit/miss rates per tier
 - Memory usage and pressure levels
@@ -374,6 +468,7 @@ MainPage.tsx (Main layout)
 - Git operation durations
 
 ### Logging (Winston)
+
 - Structured JSON logs
 - Log levels: error, warn, info, debug
 - Daily rotation with compression
@@ -381,6 +476,7 @@ MainPage.tsx (Main layout)
 - Contextual metadata in all logs
 
 ### Health Checks
+
 - Basic: Service up/down
 - Detailed: Redis status, memory usage, cache health
 - Memory: Current pressure level and thresholds
@@ -388,11 +484,13 @@ MainPage.tsx (Main layout)
 ## Scalability Considerations
 
 ### Current Design Supports
+
 - Multiple concurrent users on single server
 - Horizontal scaling limited by Redis as single point
 - Repository cache shared via filesystem
 
 ### Future Scaling Options
+
 - Redis Cluster for distributed caching
 - Load balancer with sticky sessions
 - Shared filesystem (NFS/S3) for repository cache
diff --git a/.serena/memories/codebase_structure.md b/.serena/memories/codebase_structure.md
index a862016d..cab81897 100644
--- a/.serena/memories/codebase_structure.md
+++ b/.serena/memories/codebase_structure.md
@@ -46,28 +46,56 @@ gitray/
 │   │   ├── package.json
 │   │   └── tsconfig.json
 │   │
-│   └── frontend/              # React UI
+│   └── frontend/              # React UI (redesigned with shadcn/ui)
 │       ├── src/
 │       │   ├── components/    # React components
-│       │   │   ├── ActivityHeatmap.tsx
-│       │   │   ├── CommitList.tsx
-│       │   │   ├── RepoInput.tsx
+│       │   │   ├── ui/        # shadcn/ui component library
+│       │   │   │   ├── button.tsx
+│       │   │   │   ├── card.tsx
+│       │   │   │   ├── tabs.tsx
+│       │   │   │   ├── dialog.tsx
+│       │   │   │   ├── drawer.tsx
+│       │   │   │   ├── alert.tsx
+│       │   │   │   ├── badge.tsx
+│       │   │   │   ├── avatar.tsx
+│       │   │   │   ├── chart.tsx
+│       │   │   │   ├── sonner.tsx (toast)
+│       │   │   │   ├── form.tsx
+│       │   │   │   ├── table.tsx
+│       │   │   │   ├── select.tsx
+│       │   │   │   ├── input.tsx
+│       │   │   │   ├── textarea.tsx
+│       │   │   │   ├── utils.ts
+│       │   │   │   └── [47+ more shadcn components]
+│       │   │   ├── figma/     # Figma design references
+│       │   │   ├── Header.tsx
+│       │   │   ├── Footer.tsx
+│       │   │   ├── LandingPage.tsx
+│       │   │   ├── DashboardPage.tsx (main analytics view)
+│       │   │   ├── CommitHeatmap.tsx
+│       │   │   ├── ActivityChart.tsx
+│       │   │   ├── CodeChurnChart.tsx
+│       │   │   ├── FileDistributionChart.tsx
+│       │   │   ├── FileTypeList.tsx
+│       │   │   ├── GraphViewTimeline.tsx
+│       │   │   ├── GitDiffViewer.tsx
+│       │   │   ├── AIInsights.tsx
+│       │   │   ├── PremiumFeatures.tsx
+│       │   │   ├── SettingsDrawer.tsx
+│       │   │   ├── NewsDrawer.tsx
+│       │   │   ├── InfoModal.tsx
+│       │   │   ├── LoadingSpinner.tsx
 │       │   │   ├── RiveLogo.tsx
 │       │   │   └── RiveLoader.tsx
-│       │   ├── pages/         # Page components
-│       │   │   └── MainPage.tsx
 │       │   ├── services/      # API clients
 │       │   │   └── api.ts
-│       │   ├── utils/         # Utility functions
-│       │   │   └── dateUtils.ts
-│       │   ├── styles/        # CSS files
-│       │   │   └── heatmap.css
-│       │   ├── types/         # TypeScript type definitions
-│       │   │   └── react-calendar-heatmap.d.ts
-│       │   ├── assets/        # Static assets
+│       │   ├── styles/        # CSS files (minimal, mostly Tailwind)
 │       │   ├── App.tsx        # Root component
 │       │   ├── main.tsx       # Application entry
-│       │   └── test-setup.ts  # Vitest setup
+│       │   ├── index.css      # Global styles + Tailwind imports
+│       │   ├── test-setup.ts  # Vitest setup
+│       │   └── vite-env.d.ts  # Vite type declarations
+│       ├── public/            # Static assets (Rive animations, etc.)
 │       ├── package.json
 │       ├── tsconfig.json
 │       └── vite.config.ts
@@ -108,6 +136,7 @@ gitray/
 ## Important File Locations
 
 ### Configuration Files
+
 - **Root TypeScript**: `tsconfig.json` (composite project references)
 - **Backend Config**: `apps/backend/src/config.ts`
 - **Environment**: `.env` (not checked in)
@@ -116,16 +145,19 @@ gitray/
 - **Vitest**: `vitest.config.ts` (workspace-aware)
 
 ### Entry Points
+
 - **Backend Server**: `apps/backend/src/index.ts`
 - **Frontend App**: `apps/frontend/src/main.tsx`
 - **Shared Types**: `packages/shared-types/src/index.ts`
 
 ### Testing
+
 - **Backend Tests**: Co-located with source files as `*.test.ts`
 - **Frontend Tests**: Co-located with components as `*.test.tsx`
 - **Performance Tests**: `apps/backend/perf/`
 
 ## Build Artifacts (Gitignored)
+
 - `dist/` - Compiled TypeScript output
 - `*.tsbuildinfo` - TypeScript incremental build cache
 - `coverage/` - Test coverage reports
@@ -138,6 +170,7 @@ gitray/
 ## Key Architectural Components
 
 ### Backend Services
+
 - **gitService**: Git operations (clone, log, analysis)
 - **cache**: Multi-tier caching (Redis + Memory + Disk)
 - **repositoryCoordinator**: Shared repository management
@@ -148,10 +181,53 @@ gitray/
 - **logger**: Winston logging with daily rotation
 
 ### Backend Utilities
+
 - **hybridLruCache**: LRU cache with hierarchical tiers
 - **lockManager**: Distributed locking for coordination
 - **memoryPressureManager**: Memory threshold monitoring
 - **urlSecurity**: Repository URL validation
 
-### Frontend Services
+### Frontend Components & Services
+
+#### Core Components
+
+- **App.tsx**: Root component managing routing, theme, and global state
+- **LandingPage.tsx**: Repository input and onboarding
+- **DashboardPage.tsx**: Main analytics dashboard with multiple visualization tabs
+- **Header.tsx**: Navigation bar with theme toggle, settings, news
+- **Footer.tsx**: Footer with links and information
+
+#### Visualization Components
+
+- **CommitHeatmap.tsx**: GitHub-style contribution calendar heatmap
+- **ActivityChart.tsx**: Time-series activity visualization
+- **CodeChurnChart.tsx**: Code change and stability metrics
+- **FileDistributionChart.tsx**: Pie/donut chart for file type distribution
+- **FileTypeList.tsx**: Detailed file type breakdown with icons
+- **GraphViewTimeline.tsx**: Git graph visualization with branches
+- **GitDiffViewer.tsx**: Commit diff viewer with syntax highlighting
+
+#### Feature Components
+
+- **AIInsights.tsx**: AI-powered repository analysis and recommendations
+- **PremiumFeatures.tsx**: Premium feature showcase and upsell
+- **SettingsDrawer.tsx**: User settings and preferences
+- **NewsDrawer.tsx**: Product updates and changelog
+- **InfoModal.tsx**: Contextual help and information modals
+- **LoadingSpinner.tsx**: Loading state indicator
+- **RiveLoader.tsx**: Rive-powered animated loader
+- **RiveLogo.tsx**: Animated Rive-based logo
+
+#### shadcn/ui Component Library (`components/ui/`)
+
+Complete set of 47+ accessible, customizable UI primitives built on Radix UI:
+
+- **Form Controls**: button, input, textarea, select, checkbox, radio-group, switch, slider
+- **Containers**: card, sheet, drawer, dialog, alert-dialog, popover, hover-card
+- **Navigation**: tabs, accordion, navigation-menu, menubar, breadcrumb, pagination
+- **Display**: table, badge, avatar, alert, skeleton, progress, chart
+- **Advanced**: carousel, command, sonner (toast), scroll-area, resizable panels
+
+#### Services
+
 - **api.ts**: Axios-based API client for backend communication
diff --git a/.serena/memories/coding_standards.md b/.serena/memories/coding_standards.md
index 9c78897e..4858e9fb 100644
--- a/.serena/memories/coding_standards.md
+++ b/.serena/memories/coding_standards.md
@@ -1,6 +1,7 @@
 # GitRay - Coding Standards and Conventions
 
 ## Core Principles
+
 - **TypeScript Strict Mode**: Enabled everywhere, avoid `any` and implicit `any`
 - **Functional React**: Use functional components with hooks only
 - **Professional Logging**: Use Winston logger, not `console.log` in runtime code
@@ -12,6 +13,7 @@
 ## Naming Conventions
 
 ### Components & Types (PascalCase)
+
 ```typescript
 // React Components
 export const CommitHeatmap: React.FC<CommitHeatmapProps> = ({ ... }) => { ... };
@@ -26,12 +28,14 @@ export class RepositoryCoordinator { ... }
 ```
 
 ### Hooks (use + camelCase)
+
 ```typescript
 export const useCommitFilters = () => { ... };
 export const useRepositoryData = (repoUrl: string) => { ... };
 ```
 
 ### Functions & Variables (camelCase)
+
 ```typescript
 export const calculateCommitStats = (commits: Commit[]) => { ... };
 const filteredCommits = filterByAuthor(commits, author);
@@ -39,6 +43,7 @@ let isLoading = false;
 ```
 
 ### Constants & Enums (SCREAMING_SNAKE_CASE)
+
 ```typescript
 export const MAX_CACHE_ENTRIES = 10000;
 export const STREAMING_THRESHOLD = 50000;
@@ -52,6 +57,7 @@ export enum CacheTier {
 ```
 
 ### Environment Variables (UPPER_SNAKE_CASE)
+
 ```bash
 PORT=3001
 REDIS_HOST=localhost
@@ -62,24 +68,29 @@ NODE_ENV=development
 ## File and Directory Naming
 
 ### Frontend
-- **Components**: `apps/frontend/src/components/<Name>/index.tsx` (PascalCase)
-- **Pages**: `apps/frontend/src/pages/<Name>.tsx` (PascalCase)
+
+- **Components**: `apps/frontend/src/components/<Name>.tsx` (PascalCase, single file)
+- **UI Components**: `apps/frontend/src/components/ui/<name>.tsx` (camelCase for shadcn/ui components)
 - **Hooks**: `apps/frontend/src/hooks/use<Name>.ts` (camelCase with 'use' prefix)
 - **Utilities**: `apps/frontend/src/utils/<name>.ts` (camelCase)
 - **Services**: `apps/frontend/src/services/<name>.ts` (camelCase)
+- **UI Utils**: `apps/frontend/src/components/ui/utils.ts` (contains `cn()` function)
 
 ### Backend
+
 - **Routes**: `apps/backend/src/routes/<entity>Routes.ts` (camelCase + 'Routes')
 - **Services**: `apps/backend/src/services/<name>Service.ts` (camelCase + 'Service')
 - **Utilities**: `apps/backend/src/utils/<name>.ts` (camelCase)
 - **Middlewares**: `apps/backend/src/middlewares/<name>.ts` (camelCase)
 
 ### Shared Types
+
 - **Index file**: `packages/shared-types/src/index.ts` (all exports in single file)
 
 ## Import Organization
 
 Group and order imports:
+
 1. External packages (React, Express, etc.)
 2. Internal modules (`@gitray/shared-types`, `@/...`)
 3. Relative imports
@@ -109,6 +120,7 @@ import { describe, it, expect, vi } from 'vitest';
 ## Async & Error Handling
 
 ### Use async/await, not promise chains
+
 ```typescript
 // ✅ GOOD
 async function getCommits(repoUrl: string): Promise<Commit[]> {
@@ -126,11 +138,14 @@ async function getCommits(repoUrl: string): Promise<Commit[]> {
 function getCommits(repoUrl: string): Promise<Commit[]> {
   return cloneRepository(repoUrl)
     .then(extractCommits)
-    .catch(error => { throw error; });
+    .catch((error) => {
+      throw error;
+    });
 }
 ```
 
 ### Never swallow errors
+
 ```typescript
 // ✅ GOOD
 try {
@@ -149,8 +164,13 @@ try {
 ```
 
 ### Use typed error classes
+
 ```typescript
-import { GitrayError, RepositoryError, ValidationError } from '@gitray/shared-types';
+import {
+  GitrayError,
+  RepositoryError,
+  ValidationError,
+} from '@gitray/shared-types';
 
 throw new ValidationError('Invalid input', errors);
 throw new RepositoryError('Clone failed', repoUrl);
@@ -159,35 +179,83 @@ throw new GitrayError('Internal error', HTTP_STATUS.INTERNAL_SERVER_ERROR);
 
 ## React Component Style
 
-### Functional components with proper typing
+### Functional components with proper typing (shadcn/ui style)
+
 ```typescript
 import { FC } from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/components/ui/utils';
 
 interface CommitListProps {
   commits: Commit[];
   onCommitClick?: (commit: Commit) => void;
+  className?: string; // Allow className override
 }
 
-export const CommitList: FC<CommitListProps> = ({ commits, onCommitClick }) => {
+export const CommitList: FC<CommitListProps> = ({
+  commits,
+  onCommitClick,
+  className
+}) => {
   return (
-    <div className="commit-list">
-      {commits.map((commit) => (
-        <div key={commit.sha} onClick={() => onCommitClick?.(commit)}>
-          {commit.message}
-        </div>
-      ))}
-    </div>
+    <Card className={cn("w-full", className)}>
+      <CardHeader>
+        <CardTitle>Recent Commits</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {commits.map((commit) => (
+          <Button
+            key={commit.sha}
+            variant="ghost"
+            className="w-full justify-start"
+            onClick={() => onCommitClick?.(commit)}
+          >
+            {commit.message}
+          </Button>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+```
+
+### Component composition with shadcn/ui
+
+```typescript
+// Build complex UIs by composing shadcn/ui primitives
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+export const DashboardTabs: FC = () => {
+  return (
+    <Tabs defaultValue="overview" className="w-full">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="files">Files</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <OverviewPanel />
+      </TabsContent>
+      <TabsContent value="activity">
+        <ActivityPanel />
+      </TabsContent>
+      <TabsContent value="files">
+        <FilesPanel />
+      </TabsContent>
+    </Tabs>
   );
 };
 ```
 
 ### Follow Rules of Hooks
+
 ```typescript
 // ✅ GOOD - hooks at top level
 const MyComponent: FC = () => {
   const [data, setData] = useState<Commit[]>([]);
   const { loading, error } = useRepositoryData(repoUrl);
-  
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -206,17 +274,69 @@ const MyComponent: FC = () => {
 
 ## Styling
 
-### Use Tailwind CSS classes
+### Use Tailwind CSS classes with shadcn/ui patterns
+
+```tsx
+// Use shadcn/ui components as building blocks
+import { Button } from '@/components/ui/button';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+
+<Card>
+  <CardHeader>
+    <CardTitle>Repository Stats</CardTitle>
+  </CardHeader>
+  <CardContent className="flex items-center justify-between">
+    <span className="text-lg font-semibold">Commits</span>
+    <Button variant="default" size="sm">
+      View Details
+    </Button>
+  </CardContent>
+</Card>;
+```
+
+### Use `cn()` utility for conditional classes
+
 ```tsx
-<div className="flex items-center justify-between p-4 bg-gray-100 rounded-lg">
-  <span className="text-lg font-semibold">Title</span>
-  <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
-    Click
-  </button>
+import { cn } from '@/components/ui/utils';
+
+<div
+  className={cn(
+    'base-styles p-4 rounded-lg',
+    isActive && 'bg-primary text-primary-foreground',
+    isDisabled && 'opacity-50 cursor-not-allowed'
+  )}
+>
+  Content
+</div>;
+```
+
+### Theme colors via CSS variables
+
+```tsx
+// ✅ GOOD - use semantic color variables
+<div className="bg-background text-foreground border border-border">
+  <span className="text-muted-foreground">Subtitle</span>
+  <button className="bg-primary text-primary-foreground">Action</button>
+</div>
+
+// ❌ BAD - hardcoded colors
+<div className="bg-white text-black border border-gray-300">
+  <span className="text-gray-500">Subtitle</span>
+  <button className="bg-blue-500 text-white">Action</button>
+</div>
+```
+
+### Dark mode support
+
+```tsx
+// Tailwind dark mode classes
+<div className="bg-white dark:bg-slate-900 text-black dark:text-white">
+  Content adapts to theme
 </div>
 ```
 
 ### Avoid inline styles (except dynamic values)
+
 ```tsx
 // ✅ GOOD - dynamic value
 <div style={{ width: `${percentage}%` }}>...</div>
@@ -225,9 +345,26 @@ const MyComponent: FC = () => {
 <div style={{ padding: '16px', backgroundColor: '#f3f4f6' }}>...</div>
 ```
 
+### shadcn/ui component variants
+
+```tsx
+// Use built-in variant systems
+<Button variant="default">Default</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Cancel</Button>
+<Button variant="ghost">Subtle</Button>
+<Button variant="link">Link Style</Button>
+
+<Badge variant="default">New</Badge>
+<Badge variant="secondary">Info</Badge>
+<Badge variant="destructive">Error</Badge>
+<Badge variant="outline">Outlined</Badge>
+```
+
 ## Backend Route Structure
 
 ### RESTful conventions
+
 ```typescript
 import { Router } from 'express';
 import { validateRequest } from '@/middlewares/validation';
@@ -236,14 +373,14 @@ import { handleValidationErrors } from '@/utils/routeHelpers';
 const router = Router();
 
 // GET: Retrieve data
-router.get('/repositories/summary', 
+router.get('/repositories/summary',
   repoUrlValidation,
   handleValidationErrors,
   async (req, res) => { ... }
 );
 
 // POST: Create or process data
-router.post('/repositories', 
+router.post('/repositories',
   repoUrlValidation,
   handleValidationErrors,
   async (req, res) => { ... }
@@ -253,12 +390,17 @@ export default router;
 ```
 
 ### Consistent error handling in routes
+
 ```typescript
-import { setupRouteRequest, recordRouteSuccess, recordRouteError } from '@/utils/routeHelpers';
+import {
+  setupRouteRequest,
+  recordRouteSuccess,
+  recordRouteError,
+} from '@/utils/routeHelpers';
 
 router.get('/endpoint', async (req, res) => {
   const { logger, startTime } = setupRouteRequest(req, 'operation-name');
-  
+
   try {
     const result = await performOperation();
     recordRouteSuccess(res, result, logger, startTime, 'operation-name');
@@ -271,12 +413,14 @@ router.get('/endpoint', async (req, res) => {
 ## Testing Standards
 
 ### Test file naming
+
 - Place beside source: `myModule.ts` → `myModule.test.ts`
 - Use descriptive test names
 - Use HappyPath Concept
 - Use AAA Pattern
 
 ### Test structure (Vitest)
+
 ```typescript
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { myFunction } from './myModule';
@@ -303,6 +447,7 @@ describe('myFunction', () => {
 ```
 
 ### Maintain ≥80% coverage
+
 - Focus on critical paths
 - Test error cases
 - Mock external dependencies (Redis, Git, filesystem)
@@ -310,6 +455,7 @@ describe('myFunction', () => {
 ## Code Quality Rules
 
 ### No `any` without justification
+
 ```typescript
 // ✅ GOOD
 function processData(data: Commit[]): CommitStats { ... }
@@ -324,6 +470,7 @@ function legacyAPI(data: any): any {  // External API with unknown shape
 ```
 
 ### Prefer readonly where appropriate
+
 ```typescript
 interface Config {
   readonly port: number;
@@ -334,23 +481,25 @@ const config: Readonly<Config> = { ... };
 ```
 
 ### Use const assertions for constants
+
 ```typescript
 export const HTTP_STATUS = {
   OK: 200,
   BAD_REQUEST: 400,
-  INTERNAL_SERVER_ERROR: 500
+  INTERNAL_SERVER_ERROR: 500,
 } as const;
 
-export type HttpStatus = typeof HTTP_STATUS[keyof typeof HTTP_STATUS];
+export type HttpStatus = (typeof HTTP_STATUS)[keyof typeof HTTP_STATUS];
 ```
 
 ## Documentation
 
 ### JSDoc for public APIs
+
 ```typescript
 /**
  * Aggregates commits by time period for heatmap visualization.
- * 
+ *
  * @param commits - Array of commits to aggregate
  * @param timePeriod - Aggregation period ('day' | 'week' | 'month' | 'year')
  * @param filterOptions - Optional filtering criteria
@@ -365,6 +514,7 @@ export function aggregateCommits(
 ```
 
 ### Complex logic comments
+
 ```typescript
 // Use temporal locality: recently used entries are more likely to be used again.
 // This implements a 3-tier LRU cache with 60/25/15 memory allocation.
@@ -374,6 +524,7 @@ const tierSizes = calculateTierSizes(maxEntries);
 ## Commit Message Convention
 
 Follow Conventional Commits:
+
 ```
 feat: add code churn analysis endpoint
 fix: resolve memory leak in cache manager
diff --git a/.serena/memories/frontend_architecture_detailed.md b/.serena/memories/frontend_architecture_detailed.md
new file mode 100644
index 00000000..20a3b714
--- /dev/null
+++ b/.serena/memories/frontend_architecture_detailed.md
@@ -0,0 +1,616 @@
+# GitRay - Frontend Architecture (shadcn/ui Migration)
+
+## Overview
+
+The GitRay frontend has been completely redesigned and migrated to use **shadcn/ui**, a modern component library built on Radix UI primitives. This represents a major architectural shift from the previous implementation.
+
+## Current Branch
+
+**Branch**: `87-featfrontend-ui-redesign-migration-to-shadcnui`
+**Status**: Active development - UI redesign in progress
+
+## Technology Stack
+
+### Core Technologies
+
+- **React**: 18.3.1 (not 19 as initially documented)
+- **TypeScript**: 5.7+ (strict mode)
+- **Vite**: 6.3+ (build tool with HMR)
+- **Tailwind CSS**: 4.1+ (utility-first styling)
+
+### UI Component Library - shadcn/ui
+
+shadcn/ui is NOT a traditional component library but a collection of re-usable components that you copy into your codebase:
+
+- Built on **Radix UI** primitives (headless, accessible components)
+- Styled with **Tailwind CSS**
+- Uses **class-variance-authority (CVA)** for variant management
+- Customizable and owns the code (no npm package dependency for components)
+
+### Supporting Libraries
+
+- **@radix-ui/react-\***: 30+ Radix UI primitive packages for accessibility
+- **class-variance-authority**: Type-safe variant-based styling
+- **clsx** & **tailwind-merge**: Conditional and conflict-free className merging
+- **next-themes**: Dark/light mode management with system detection
+- **lucide-react**: Icon library (consistent, tree-shakeable)
+- **sonner**: Toast notification system
+- **motion** (Framer Motion): Animation library
+- **react-hook-form**: Form state management and validation
+- **recharts**: Charting library (replaces ApexCharts)
+- **@rive-app/react-canvas**: Rive animation integration
+- **embla-carousel-react**: Carousel functionality
+- **react-day-picker**: Date picker component
+- **react-resizable-panels**: Resizable panel layouts
+- **vaul**: Drawer component (mobile-friendly)
+- **cmdk**: Command palette component
+
+## Component Architecture
+
+### Directory Structure
+
+```
+apps/frontend/src/
+├── components/
+│   ├── ui/                    # shadcn/ui components (47+)
+│   │   ├── button.tsx
+│   │   ├── card.tsx
+│   │   ├── tabs.tsx
+│   │   ├── dialog.tsx
+│   │   ├── drawer.tsx
+│   │   ├── ...
+│   │   └── utils.ts           # cn() utility
+│   ├── figma/                 # Figma design references
+│   ├── Header.tsx
+│   ├── Footer.tsx
+│   ├── LandingPage.tsx
+│   ├── DashboardPage.tsx      # Main view
+│   ├── [Visualization Components]
+│   └── [Feature Components]
+├── services/
+│   └── api.ts                 # Backend API client
+├── App.tsx                    # Root component
+├── main.tsx                   # Entry point
+└── index.css                  # Global styles + Tailwind
+```
+
+### shadcn/ui Component Catalog (components/ui/)
+
+#### Form Controls
+
+- **button**: Primary interaction element with variants (default, destructive, outline, secondary, ghost, link)
+- **input**: Text input with error states
+- **textarea**: Multi-line text input
+- **label**: Accessible form labels
+- **select**: Dropdown select (Radix UI based)
+- **checkbox**: Checkboxes with indeterminate state
+- **radio-group**: Radio button groups
+- **switch**: Toggle switches
+- **slider**: Range sliders
+- **form**: React Hook Form integration
+
+#### Layout & Containers
+
+- **card**: Content card with header, content, footer sections
+- **sheet**: Side panel overlays
+- **drawer**: Mobile-friendly bottom drawer (vaul)
+- **dialog**: Modal dialogs
+- **alert-dialog**: Confirmation dialogs
+- **popover**: Floating popovers
+- **hover-card**: Hover-triggered cards
+- **tooltip**: Hover tooltips
+- **separator**: Divider lines
+- **scroll-area**: Custom scrollbars
+- **resizable**: Resizable panels
+
+#### Navigation
+
+- **tabs**: Tab navigation with content panels
+- **accordion**: Collapsible sections
+- **collapsible**: Simple collapse/expand
+- **navigation-menu**: Complex navigation menus
+- **menubar**: Menu bar navigation
+- **breadcrumb**: Breadcrumb navigation
+- **pagination**: Page navigation
+- **dropdown-menu**: Context menus and dropdowns
+- **context-menu**: Right-click menus
+
+#### Data Display
+
+- **table**: Responsive tables
+- **badge**: Status badges and labels
+- **avatar**: User avatars with fallbacks
+- **alert**: Alert messages with variants
+- **skeleton**: Loading skeletons
+- **progress**: Progress bars
+- **chart**: Recharts wrapper with theming
+
+#### Advanced Components
+
+- **carousel**: Image/content carousels (Embla)
+- **command**: Command palette (⌘K)
+- **calendar**: Date picker calendar
+- **input-otp**: OTP input fields
+- **sonner**: Toast notifications
+- **toggle**: Toggle buttons
+- **toggle-group**: Toggle button groups
+- **sidebar**: App sidebar layout
+- **aspect-ratio**: Aspect ratio containers
+
+#### Utilities
+
+- **utils.ts**: `cn()` function for merging Tailwind classes
+- **use-mobile.ts**: Hook for responsive mobile detection
+
+## Component Design Patterns
+
+### Variant-Based Styling (CVA)
+
+```typescript
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground',
+        outline: 'border border-input hover:bg-accent',
+        // ...
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+```
+
+### Composition Pattern
+
+```typescript
+// Card component composition
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    {/* Content */}
+  </CardContent>
+  <CardFooter>
+    {/* Footer */}
+  </CardFooter>
+</Card>
+```
+
+### Accessibility First
+
+All components built on Radix UI primitives ensure:
+
+- Keyboard navigation
+- Screen reader support
+- Focus management
+- ARIA attributes
+- Semantic HTML
+
+## Application Components
+
+### Core Pages
+
+1. **App.tsx**: Root component
+   - Theme management (dark/light/system)
+   - Global state (loading, auth, modal states)
+   - Repository data state (commits, heatmap, repo URL)
+   - Page routing (landing vs dashboard)
+
+2. **LandingPage.tsx**: Entry page
+   - Repository URL input
+   - Quick start guide
+   - Feature highlights
+   - Call-to-action
+
+3. **DashboardPage.tsx**: Main analytics view
+   - Tab-based navigation
+   - Multiple visualization panels
+   - Responsive grid layout
+   - Data fetching and state management
+
+### Layout Components
+
+- **Header.tsx**: Top navigation
+  - Logo/branding
+  - Theme toggle
+  - Settings button
+  - News notifications
+  - Sign-in state
+
+- **Footer.tsx**: Bottom footer
+  - Links (privacy, terms, contact)
+  - Copyright
+  - Social links
+
+### Visualization Components
+
+1. **CommitHeatmap.tsx**: GitHub-style contribution calendar
+   - Daily commit counts
+   - Color-coded intensity
+   - Interactive tooltips
+   - Date range filtering
+
+2. **ActivityChart.tsx**: Time-series activity
+   - Line/area charts
+   - Commit frequency over time
+   - Author filtering
+   - Recharts-based
+
+3. **CodeChurnChart.tsx**: Code change metrics
+   - Lines added/deleted
+   - Churn rate visualization
+   - Risk level indicators
+   - Stability trends
+
+4. **FileDistributionChart.tsx**: File type distribution
+   - Pie/donut charts
+   - Language breakdown
+   - Interactive legends
+   - Percentage calculations
+
+5. **FileTypeList.tsx**: Detailed file breakdown
+   - Categorized lists (code, docs, config, assets)
+   - File counts and percentages
+   - Icon indicators
+   - Expandable sections
+
+6. **GraphViewTimeline.tsx**: Git graph visualization
+   - Branch visualization
+   - Commit timeline
+   - Merge tracking
+   - Interactive navigation
+
+7. **GitDiffViewer.tsx**: Commit diff display
+   - Syntax-highlighted diffs
+   - Side-by-side or unified view
+   - File tree navigation
+   - Line-by-line changes
+
+### Feature Components
+
+1. **AIInsights.tsx**: AI-powered analysis
+   - Repository health score
+   - Code quality recommendations
+   - Team insights
+   - Predictive analytics
+   - **Note**: Likely placeholder for future AI features
+
+2. **PremiumFeatures.tsx**: Premium upsell
+   - Feature showcase
+   - Pricing information
+   - Upgrade prompts
+   - Feature comparison
+
+3. **SettingsDrawer.tsx**: User preferences
+   - Theme selection
+   - Display options
+   - Notification preferences
+   - Account settings
+
+4. **NewsDrawer.tsx**: Product updates
+   - Changelog
+   - Feature announcements
+   - Unread indicators
+   - Dismissible items
+
+5. **InfoModal.tsx**: Contextual help
+   - "What is GitRay?"
+   - Privacy information
+   - Local/remote repo info
+   - Tutorial content
+
+### Utility Components
+
+- **LoadingSpinner.tsx**: Loading indicator
+- **RiveLoader.tsx**: Animated Rive-based loader
+- **RiveLogo.tsx**: Animated logo
+
+## Styling Approach
+
+### Tailwind CSS 4.1
+
+- **Utility-first CSS**: All styling via Tailwind utilities
+- **Custom theme**: Defined in `tailwind.config.js`
+- **CSS variables**: Theme colors defined as CSS variables for easy theming
+- **Dark mode**: Class-based dark mode (`dark:` prefix)
+- **Responsive**: Mobile-first breakpoints (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`)
+
+### Theme System
+
+- **next-themes**: System-aware theme switching
+- **Theme options**: light, dark, system
+- **CSS variables**: Colors defined as HSL values
+  - `--background`, `--foreground`
+  - `--primary`, `--primary-foreground`
+  - `--secondary`, `--secondary-foreground`
+  - `--muted`, `--muted-foreground`
+  - `--accent`, `--accent-foreground`
+  - `--destructive`, `--destructive-foreground`
+  - `--border`, `--input`, `--ring`
+  - `--chart-1` through `--chart-5`
+
+### Component Styling Pattern
+
+```typescript
+import { cn } from './ui/utils';
+
+export function MyComponent({ className, ...props }) {
+  return (
+    <div
+      className={cn(
+        "base-styles here",
+        className // Allow style overrides
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+## State Management
+
+### Local State (React Hooks)
+
+- `useState` for component-level state
+- `useEffect` for side effects (data fetching, theme application)
+- `useMemo` for expensive computations
+- `useCallback` for memoized callbacks
+
+### No Global State Library
+
+- No Redux, Zustand, or Context API currently
+- State lifted to nearest common ancestor
+- Props drilling for shared state
+- Direct API calls from components
+
+### Repository Data Flow
+
+```
+App.tsx (holds commits, heatmapData, repoUrl)
+    ↓
+DashboardPage.tsx (receives as props)
+    ↓
+Individual visualization components
+```
+
+## API Integration
+
+### Centralized API Client (`services/api.ts`)
+
+- Axios-based HTTP client
+- Base URL configuration
+- Request/response interceptors
+- Error handling
+- Type-safe with `@gitray/shared-types`
+
+### API Methods
+
+- `getRepositoryFullData(url, options)`: Fetch all repository data
+- Additional methods for specific endpoints
+
+### Type Safety
+
+All API requests/responses typed with interfaces from `@gitray/shared-types`:
+
+- `Commit`, `CommitHeatmapData`, `RepositorySummary`
+- `FileTypeDistribution`, `CodeChurnAnalysis`
+- Error types: `GitrayError`, `RepositoryError`, `ValidationError`
+
+## Animation & Motion
+
+### Framer Motion (`motion`)
+
+- Component animations
+- Page transitions
+- Gesture animations
+- Stagger effects
+
+### Rive Animations
+
+- Loading animations
+- Logo animations
+- Interactive illustrations
+- Performance-optimized
+
+## User Experience Features
+
+### Toast Notifications (Sonner)
+
+```typescript
+import { toast } from 'sonner';
+
+toast.success('Repository loaded successfully!');
+toast.error('Failed to load repository');
+toast.loading('Loading commits...');
+```
+
+### Dark/Light Mode
+
+- System detection by default
+- Manual toggle in header
+- Persisted preference
+- Smooth transitions
+
+### Responsive Design
+
+- Mobile-first approach
+- Breakpoints: 640px, 768px, 1024px, 1280px, 1536px
+- Adaptive layouts
+- Touch-friendly interactions
+
+### Accessibility
+
+- Keyboard navigation
+- Screen reader support
+- Focus indicators
+- Semantic HTML
+- ARIA attributes (via Radix UI)
+
+## Testing
+
+### Test Setup (`test-setup.ts`)
+
+- Vitest configuration
+- Testing Library setup
+- Mock setup for APIs
+
+### Test Locations
+
+- Co-located with components: `ComponentName.test.tsx`
+- Located in `__tests__/` directory
+
+### Testing Tools
+
+- **@testing-library/react**: Component testing
+- **@testing-library/jest-dom**: DOM matchers
+- **@testing-library/user-event**: User interaction simulation
+- **Vitest**: Test runner
+- **@vitest/coverage-v8**: Coverage reporting
+
+## Build & Development
+
+### Development
+
+```bash
+pnpm dev:frontend  # Start Vite dev server (port 5173)
+```
+
+### Build
+
+```bash
+pnpm build:frontend  # Production build
+```
+
+### Build Output
+
+- Optimized bundles in `dist/`
+- Code splitting by route/component
+- Asset optimization
+- Source maps in development
+
+## Migration Notes (Old → New)
+
+### Removed Dependencies
+
+- `react-calendar-heatmap` → Custom heatmap component
+- `apexcharts` / `react-apexcharts` → Recharts
+- `react-select` → Radix UI Select
+- `date-fns` → (May still be in use, check)
+
+### Added Dependencies
+
+- All `@radix-ui/react-*` packages (30+)
+- `class-variance-authority`, `clsx`, `tailwind-merge`
+- `lucide-react` (icons)
+- `sonner` (toasts)
+- `next-themes` (theme management)
+- `motion` (Framer Motion)
+- `recharts` (charts)
+- `react-hook-form` (forms)
+- `vaul`, `cmdk`, `embla-carousel-react` (advanced components)
+
+### Component Refactors
+
+- Old `ActivityHeatmap.tsx` → New `CommitHeatmap.tsx`
+- Old `CommitList.tsx` → Integrated into `DashboardPage.tsx` or removed
+- Old `RepoInput.tsx` → Integrated into `LandingPage.tsx`
+- New components: `Header`, `Footer`, `SettingsDrawer`, `NewsDrawer`, `InfoModal`
+- New visualizations: `ActivityChart`, `CodeChurnChart`, `GraphViewTimeline`, `GitDiffViewer`
+- New features: `AIInsights`, `PremiumFeatures`
+
+### Styling Migration
+
+- From custom CSS to Tailwind utilities
+- Consistent design system via CSS variables
+- Dark mode support added
+- Responsive design improved
+
+## Best Practices
+
+### Component Creation
+
+1. Use shadcn/ui components as building blocks
+2. Compose with semantic HTML
+3. Apply Tailwind utilities for styling
+4. Use `cn()` utility for conditional classes
+5. Ensure accessibility (keyboard, ARIA, focus)
+
+### Styling Guidelines
+
+1. Prefer Tailwind utilities over custom CSS
+2. Use CSS variables for theme colors
+3. Follow mobile-first responsive design
+4. Use dark mode variants (`dark:`)
+5. Keep specificity low
+
+### Type Safety
+
+1. Import types from `@gitray/shared-types`
+2. Define component prop interfaces
+3. Use strict TypeScript mode
+4. Avoid `any` types
+
+### Performance
+
+1. Lazy load heavy components
+2. Memoize expensive computations
+3. Use proper React keys
+4. Optimize re-renders
+5. Code split by route
+
+## Future Considerations
+
+### Potential Improvements
+
+- Global state management (Zustand/Context) if state becomes complex
+- Route-based code splitting for better performance
+- Progressive Web App (PWA) features
+- Advanced animation system
+- Real-time updates (WebSocket)
+- Offline support
+- Advanced filtering and search
+- Export functionality (PDF, CSV)
+
+### Known Limitations
+
+- No global state management (may become limiting)
+- Direct API calls from components (no data layer abstraction)
+- Limited error boundary implementation
+- No comprehensive loading state management
+- AI features appear to be placeholders
+
+## Debugging Tips
+
+### Component Issues
+
+1. Check Radix UI documentation for primitive usage
+2. Verify Tailwind class application with browser DevTools
+3. Use React DevTools for component hierarchy
+4. Check console for accessibility warnings
+
+### Styling Issues
+
+1. Verify CSS variable values in `:root` and `.dark`
+2. Check Tailwind class conflicts with browser inspector
+3. Use `cn()` utility correctly for class merging
+4. Ensure Tailwind CSS is properly imported in `index.css`
+
+### Build Issues
+
+1. Ensure `@gitray/shared-types` is built first
+2. Check TypeScript errors: `tsc --noEmit`
+3. Verify all imports resolve correctly
+4. Clear Vite cache: `rm -rf .vite`
diff --git a/.serena/memories/memory_update_summary_2026-01-03.md b/.serena/memories/memory_update_summary_2026-01-03.md
new file mode 100644
index 00000000..801588d2
--- /dev/null
+++ b/.serena/memories/memory_update_summary_2026-01-03.md
@@ -0,0 +1,168 @@
+# GitRay Memory Update Summary
+
+## Date: January 3, 2026
+
+## Context
+
+Following the successful indexing of the GitRay project with Serena MCP server, all memory files have been updated to reflect the current state of the codebase, particularly the major frontend UI redesign migration to shadcn/ui.
+
+## Updated Memory Files
+
+### 1. project_overview.md
+
+**Changes:**
+
+- Updated frontend technology stack to reflect shadcn/ui components
+- Changed React version from 19 to 18.3 (correct version)
+- Added shadcn/ui, Radix UI, motion (Framer Motion), Recharts
+- Added UI libraries: next-themes, lucide-react, sonner, React Hook Form
+- Updated current development branch to `87-featfrontend-ui-redesign-migration-to-shadcnui`
+- Noted recent major changes: Complete frontend UI redesign
+
+### 2. architecture_overview.md
+
+**Changes:**
+
+- Completely rewrote Frontend Architecture section
+- Documented new component structure with Header, Footer, LandingPage, DashboardPage
+- Added comprehensive shadcn/ui component library documentation (47+ components)
+- Documented UI component categories: primitives, layout, overlays, data display, navigation, charts, forms, advanced
+- Added UI/UX features section: dark/light mode, toast notifications, loading states, responsive design, animations, accessibility
+- Updated component hierarchy diagram
+- Added theme management details with next-themes
+
+### 3. codebase_structure.md
+
+**Changes:**
+
+- Updated frontend directory structure to show new components
+- Added `components/ui/` directory with all shadcn/ui components
+- Documented new visualization components: ActivityChart, CodeChurnChart, GraphViewTimeline, GitDiffViewer
+- Added new feature components: AIInsights, PremiumFeatures, SettingsDrawer, NewsDrawer, InfoModal
+- Created comprehensive "Frontend Components & Services" section listing all components by category
+- Updated dependencies in package.json description
+
+### 4. coding_standards.md
+
+**Changes:**
+
+- Completely updated "Styling" section with shadcn/ui patterns
+- Added `cn()` utility usage examples
+- Added theme colors via CSS variables pattern
+- Added dark mode support examples
+- Added shadcn/ui component variant usage
+- Updated React Component Style section with shadcn/ui composition examples
+- Updated file naming conventions to reflect single-file components and UI components directory
+- Added examples of building complex UIs by composing shadcn/ui primitives
+
+### 5. task_completion_checklist.md
+
+**Changes:**
+
+- Added shadcn/ui specific checks to React Components section
+- Added requirement to use `cn()` utility for className merging
+- Added theme colors via CSS variables check
+- Added dark mode classes check
+- Added accessibility checks
+- Added new section "Adding a New Frontend Component" with 10-step checklist
+
+### 6. frontend_architecture_detailed.md (NEW)
+
+**Created comprehensive new memory file covering:**
+
+- Complete technology stack documentation
+- Directory structure with all 47+ shadcn/ui components listed
+- Detailed component catalog organized by category
+- Component design patterns (variant-based styling, composition, accessibility)
+- Application components breakdown (core pages, layout, visualizations, features, utilities)
+- Styling approach with Tailwind CSS 4.1 and theme system
+- State management patterns (local state with hooks)
+- API integration details
+- Animation & motion (Framer Motion, Rive)
+- User experience features (toasts, dark mode, responsive design, accessibility)
+- Testing setup and tools
+- Build & development commands
+- Migration notes (old → new dependencies and components)
+- Best practices for component creation, styling, type safety, performance
+- Future considerations and potential improvements
+- Known limitations
+- Debugging tips
+
+## Current Project State
+
+### Branch
+
+- **Current**: `87-featfrontend-ui-redesign-migration-to-shadcnui`
+- **Status**: Active development - UI redesign in progress
+
+### Frontend Stack (Updated)
+
+- React 18.3.1 (not 19)
+- Vite 6
+- Tailwind CSS 4.1
+- shadcn/ui (47+ components)
+- Radix UI primitives (30+ packages)
+- Recharts (replaces ApexCharts)
+- Framer Motion (via `motion` package)
+- next-themes for theme management
+- lucide-react for icons
+- sonner for toast notifications
+- React Hook Form for forms
+
+### Key Frontend Components (New)
+
+- Header, Footer (layout)
+- LandingPage, DashboardPage (pages)
+- CommitHeatmap, ActivityChart, CodeChurnChart (visualizations)
+- FileDistributionChart, FileTypeList (file analysis)
+- GraphViewTimeline, GitDiffViewer (git visualizations)
+- AIInsights, PremiumFeatures (features)
+- SettingsDrawer, NewsDrawer, InfoModal (UI features)
+- 47+ shadcn/ui components in `components/ui/`
+
+### Removed/Replaced
+
+- `react-calendar-heatmap` → Custom heatmap component
+- `apexcharts` → Recharts
+- `react-select` → Radix UI Select
+- Old components: ActivityHeatmap, CommitList, RepoInput
+
+## Notes for Future Work
+
+### AI Features
+
+- AIInsights component appears to be a placeholder for future AI-powered features
+- No actual AI integration observed yet
+
+### Premium Features
+
+- PremiumFeatures component suggests future monetization/tiering
+- Currently appears to be UI mockups
+
+### Testing
+
+- Frontend tests need to be updated to reflect new component structure
+- shadcn/ui components come with accessibility built-in via Radix UI
+
+### Documentation Gaps
+
+- No comprehensive user guide for the new UI
+- Migration guide from old to new UI not documented
+- Component storybook or style guide not present
+
+## Serena Integration Status
+
+- ✅ Project indexed successfully (167 files: 159 TypeScript, 8 Bash)
+- ✅ All 6 memory files updated/created
+- ✅ Project activated in Serena
+- ✅ Ready for development tasks
+
+## Recommendations
+
+1. **Update README.md** to reflect new UI and features
+2. **Create component documentation** or Storybook for shadcn/ui customizations
+3. **Update tests** to cover new component structure
+4. **Document AI integration plans** if AIInsights is intended to be functional
+5. **Create migration guide** for developers familiar with old UI
+6. **Add screenshots** to documentation showcasing new UI
+7. **Document theming system** for customization by users/developers
diff --git a/.serena/memories/memory_update_summary_2026-01-05.md b/.serena/memories/memory_update_summary_2026-01-05.md
new file mode 100644
index 00000000..bc7c8484
--- /dev/null
+++ b/.serena/memories/memory_update_summary_2026-01-05.md
@@ -0,0 +1,412 @@
+# GitRay Memory Update Summary
+
+## Date: January 5, 2026
+
+## Context
+
+Memory files have been reviewed and updated to ensure alignment with the AGENTS.md file, which serves as the comprehensive project documentation. This update confirms the current state of the GitRay project following the Serena MCP server indexing.
+
+## Current Project State
+
+### Repository Information
+
+- **Repository**: `gitray`
+- **Owner**: `jonasyr`
+- **Current Branch**: `87-featfrontend-ui-redesign-migration-to-shadcnui`
+- **Status**: Active development - shadcn/ui migration in progress
+
+### Project Structure Verified
+
+```
+gitray/ (Monorepo)
+├── apps/
+│   ├── backend/          # Express 5.1.0 API server (Node.js 18+)
+│   └── frontend/         # React 18.3.1 + Vite 6.3.5 application
+├── packages/
+│   └── shared-types/     # Shared TypeScript definitions
+├── scripts/              # Development and maintenance scripts
+├── locks/                # Lock files for coordination
+└── logs/                 # Application logs
+```
+
+### Technology Stack Summary
+
+**Backend:**
+- Node.js 18+ with TypeScript 5.7
+- Express 5.1.0
+- simple-git for Git operations
+- ioredis for Redis 7 caching
+- winston for logging
+- prom-client for Prometheus metrics
+- express-validator + Zod for validation
+- helmet, cors, express-rate-limit for security
+
+**Frontend:**
+- React 18.3.1 (NOT 19 - corrected)
+- Vite 6.3.5
+- Tailwind CSS 4.1.7
+- shadcn/ui component library (Radix UI primitives)
+- Recharts for visualizations
+- motion (Framer Motion) for animations
+- @rive-app/react-canvas for Rive animations
+- axios for HTTP client
+- React Hook Form for forms
+- Sonner for toasts
+- next-themes for theme management
+- Lucide React for icons
+
+**Tooling:**
+- pnpm 10.16.1 (workspace package manager)
+- Vitest 3.2.3 (86.4% test coverage)
+- ESLint 9 (flat config)
+- Prettier 3
+- Husky + lint-staged for pre-commit hooks
+- k6 for backend performance testing
+- markdownlint-cli2 for Markdown linting
+
+## Key Features Verified
+
+### Core Functionality
+
+1. **Activity Heatmaps**: GitHub-style contribution calendars with customizable time periods
+2. **Commit Analysis**: Detailed statistics and author breakdowns
+3. **Code Churn Analysis**: Track code changes with risk level indicators
+4. **File Type Distribution**: Analyze codebase composition
+5. **Interactive Filtering**: Filter by authors, date ranges, and patterns
+6. **Multi-tier Caching**: Redis + Memory + Disk (60%/25%/15% allocation)
+7. **Streaming Support**: Handles 50k+ commits efficiently via Server-Sent Events
+8. **Repository Coordination**: Prevents duplicate clones with reference counting
+
+### Architecture Highlights
+
+**Backend Services:**
+- `gitService`: Git operations and streaming
+- `cache`: Multi-tier hierarchical caching
+- `repositoryCoordinator`: Shared repository management
+- `repositoryCache`: Physical repository caching
+- `fileAnalysisService`: File type distribution
+- `repositorySummaryService`: Repository metadata
+- `memoryPressureManager`: Memory monitoring (75%/85%/95% thresholds)
+- `lockManager`: Distributed locking for coordination
+- `metrics`: Prometheus metrics collection
+- `logger`: Winston with daily rotation
+
+**Frontend Components:**
+- Core Pages: `LandingPage`, `DashboardPage`, `Header`, `Footer`
+- Visualizations: `CommitHeatmap`, `ActivityChart`, `CodeChurnChart`, `FileDistributionChart`, `FileTypeList`, `GraphViewTimeline`, `GitDiffViewer`
+- Features: `AIInsights`, `PremiumFeatures`, `SettingsDrawer`, `NewsDrawer`, `InfoModal`
+- UI Library: 47+ shadcn/ui components in `components/ui/`
+
+### API Endpoints
+
+- `POST /api/repositories` - Fetch commit list
+- `GET /api/commits/heatmap` - Aggregated heatmap data
+- `GET /api/commits/info` - Repository statistics
+- `GET /api/commits/stream` - Stream commit data (SSE)
+- `GET /api/repositories/churn` - Code churn analysis
+- `GET /api/repositories/summary` - Repository metadata
+- `GET /api/cache/stats` - Cache metrics
+- `GET /health`, `/health/detailed`, `/health/memory` - Health checks
+- `GET /metrics` - Prometheus metrics
+
+## Configuration
+
+### Environment Variables (Required)
+
+**Backend:**
+- `PORT` (default: 3001)
+- `CORS_ORIGIN` (default: http://localhost:5173)
+- `REDIS_HOST`, `REDIS_PORT`, `REDIS_PASSWORD`
+- `CACHE_MAX_ENTRIES`, `CACHE_MEMORY_LIMIT_GB`
+- `MEMORY_WARNING_THRESHOLD`, `MEMORY_CRITICAL_THRESHOLD`
+- `STREAMING_ENABLED`, `STREAMING_COMMIT_THRESHOLD`
+- `LOG_LEVEL`, `DEBUG_CACHE_LOGGING`
+
+**Frontend:**
+- Vite automatically proxies API calls to backend during development
+
+## Development Workflow
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm 10.16.1
+- Docker (for Redis)
+- Git
+- 4 GB RAM minimum (8 GB+ recommended for large repositories)
+- 2 GB free disk space
+
+### Setup Commands
+
+```bash
+# Clone and install
+git clone <repository-url>
+pnpm install
+
+# Build shared types (MUST run first)
+pnpm run build:shared-types
+
+# Environment setup
+cp apps/backend/.env.example apps/backend/.env
+cp apps/frontend/.env.example apps/frontend/.env
+
+# Start development
+pnpm start          # Full setup: build types, start Redis, backend, frontend
+pnpm dev            # Build types + start all services with hot reload
+pnpm quick          # Quick start (frontend only, assumes backend running)
+pnpm app            # Interactive menu
+
+# Individual services
+pnpm dev:backend    # Backend only
+pnpm dev:frontend   # Frontend only
+
+# Build
+pnpm build                  # Full build: types → backend → frontend
+pnpm build:shared-types     # Build types only
+pnpm build:apps             # Build backend + frontend
+
+# Clean and rebuild
+pnpm clean          # Remove build artifacts
+pnpm rebuild        # Clean + install + build
+
+# Environment management
+pnpm env:status     # Check service status
+pnpm env:stop       # Stop services
+pnpm env:clean      # Clean environment
+
+# Testing
+pnpm test                   # All tests
+pnpm test:frontend          # Frontend tests only
+pnpm test:backend           # Backend tests only
+pnpm test:watch             # Watch mode
+pnpm test:coverage          # Generate coverage reports
+
+# Code quality
+pnpm lint           # Lint all files
+pnpm lint:fix       # Auto-fix issues
+pnpm lint:md        # Markdown linting
+pnpm format         # Format with Prettier
+```
+
+### Access Points
+
+- **Frontend**: http://localhost:5173 (Vite dev server)
+- **Backend**: http://localhost:3001
+- **Health Checks**: `/health`, `/health/detailed`, `/health/memory`
+- **Metrics**: `/metrics` (Prometheus format)
+
+## Code Quality System
+
+### Multi-Layer Quality Enforcement
+
+1. **ESLint**: TypeScript, React, hooks, a11y, SonarJS, Prettier integration
+2. **Prettier**: Consistent code formatting
+3. **markdownlint-cli2**: Markdown file quality
+4. **Husky + lint-staged**: Pre-commit hooks (ESLint, Prettier, Markdown lint)
+5. **TypeScript**: Strict type checking across all packages
+
+### Quality Standards
+
+- Enforce import order and consistent quoting
+- Follow React's Rules of Hooks
+- Accessibility guidelines (via Radix UI + ESLint a11y)
+- Incremental linting with ESLint cache
+- Staged file linting for performance
+- ≥80% test coverage on critical paths
+
+## Performance Characteristics
+
+- **Small repos** (< 1k commits): ~500 ms
+- **Medium repos** (1k-10k commits): ~2 s
+- **Large repos** (10k-50k): ~10 s
+- **Streaming mode**: for 50k+ commits
+- **Cache hit rate**: > 80% typical
+
+## Important Patterns
+
+### Multi-Tier Caching
+
+Three-tier hierarchical cache with 60%/25%/15% memory allocation:
+- **Tier 1**: Raw commits (60%, TTL 1h)
+- **Tier 2**: Filtered commits (25%, TTL 30min)
+- **Tier 3**: Aggregated data (15%, TTL 15min)
+
+Falls back: Redis → Memory → Disk. Supports transactional operations with rollback and ordered locking.
+
+### Repository Coordination
+
+Prevents duplicate clones with:
+- Shared map of repository handles
+- Reference counting for cleanup
+- Operation coalescing for identical requests
+- Distributed locking to prevent race conditions
+
+### Memory Pressure Management
+
+Four-tier system:
+- **Normal** (< 75%): Allow all operations
+- **Warning** (75-85%): Log warnings
+- **Critical** (85-95%): Throttle requests, evict cache
+- **Emergency** (> 95%): Block operations, aggressive eviction
+
+### Streaming Support
+
+For large repositories (50k+ commits):
+- `/api/commits/stream` endpoint (Server-Sent Events)
+- Batch processing (default: 1000 commits per batch)
+- Memory-efficient for massive histories
+
+## Common Issues & Solutions
+
+### Build Issues
+
+- **Missing types**: Run `pnpm run build:shared-types` first
+- **Redis not running**: Start Docker with Redis container
+- **Port conflicts**: Adjust `PORT` in `.env` or stop conflicting services
+- **TypeScript errors**: Run `tsc --noEmit` to check types
+
+### Performance Issues
+
+- **Slow queries**: Check cache hit rates at `/api/cache/stats`
+- **Memory issues**: Monitor `/health/memory` endpoint
+- **Large repos**: Streaming mode activates automatically at 50k+ commits
+
+### Development Issues
+
+- **Skipping shared types build**: Always build types before apps
+- **Console.log in production**: Use winston logger instead
+- **Type duplication**: Import from `@gitray/shared-types`
+
+## Testing Strategy
+
+### Unit Tests
+
+- Co-located with source files (`*.test.ts`/`*.spec.ts`)
+- Vitest test runner
+- Mock external dependencies (Redis, Git, filesystem)
+- Target ≥80% coverage on critical paths
+
+### Integration Tests
+
+- Located in `apps/backend/__tests__/integration/`
+- Test complete request/response cycles
+- Verify caching behavior and coordination
+
+### Performance Tests
+
+- k6 load tests in `apps/backend/perf/`
+- Scenarios: smoke, standard, stress
+- Measure request latency, throughput, cache performance
+
+### Coverage Reports
+
+```bash
+pnpm test:coverage          # Full coverage pipeline
+pnpm test:coverage:frontend # Frontend only
+pnpm test:coverage:backend  # Backend only
+```
+
+Reports stored in `coverage/` and `.nyc_output/`.
+
+## Observability
+
+### Metrics (Prometheus)
+
+- HTTP request count, duration, status codes
+- Cache hit/miss rates per tier
+- Memory usage and pressure levels
+- Repository coordination stats
+- Git operation durations
+
+### Logging (Winston)
+
+- Structured JSON logs
+- Log levels: error, warn, info, debug
+- Daily rotation with compression
+- Request correlation IDs
+- Contextual metadata
+
+### Health Checks
+
+- **Basic** (`/health`): Service up/down
+- **Detailed** (`/health/detailed`): Redis, memory, cache health
+- **Memory** (`/health/memory`): Current pressure level and thresholds
+
+## Security Measures
+
+- **Helmet**: Security headers (CSP, HSTS, etc.)
+- **CORS**: Restricted origins
+- **Rate Limiting**: 100 requests per 15 minutes per IP
+- **Input Validation**: express-validator + Zod schemas
+- **URL Security**: Blocks malicious repository URLs (file://, javascript:, etc.)
+- **Content-Type Enforcement**: Strict JSON for POST/PUT
+- **Admin Auth**: Protected admin endpoints
+
+## Serena Integration Status
+
+- ✅ Project indexed: 167 files (159 TypeScript, 8 Bash)
+- ✅ All memory files created/updated
+- ✅ Project activated in Serena
+- ✅ Ready for development tasks
+
+## Memory Files Current State
+
+1. **project_overview.md**: High-level project summary, features, tech stack
+2. **architecture_overview.md**: Detailed architecture, services, caching, coordination
+3. **codebase_structure.md**: Directory layout, file locations, component organization
+4. **coding_standards.md**: Naming conventions, patterns, best practices
+5. **frontend_architecture_detailed.md**: shadcn/ui migration, component catalog, styling
+6. **task_completion_checklist.md**: Checklists for common development tasks
+7. **suggested_commands.md**: Common command reference
+8. **memory_update_summary_2026-01-03.md**: Previous update summary
+9. **memory_update_summary_2026-01-05.md**: This file
+
+## Next Steps
+
+### Documentation
+
+- ✅ All memory files aligned with AGENTS.md
+- ⏳ Consider updating README.md to match AGENTS.md details
+- ⏳ Add screenshots/videos of new UI to documentation
+- ⏳ Create component Storybook for shadcn/ui customizations
+
+### Testing
+
+- ⏳ Update frontend tests for new component structure
+- ⏳ Add tests for shadcn/ui component customizations
+- ⏳ Verify test coverage remains ≥80%
+
+### Features
+
+- ⏳ Complete shadcn/ui migration (branch 87)
+- ⏳ Implement AI integration for AIInsights component
+- ⏳ Define premium features for monetization
+
+### Infrastructure
+
+- ⏳ Consider Redis Cluster for horizontal scaling
+- ⏳ Evaluate shared filesystem for multi-instance deployments
+- ⏳ Plan database for persistent metadata (currently cache-only)
+
+## Notes for AI Assistants
+
+When working with this project:
+
+1. **Always build shared types first**: `pnpm run build:shared-types`
+2. **Use winston logger**: Never use `console.log` in production code
+3. **Import types from shared package**: `@gitray/shared-types`
+4. **Follow shadcn/ui patterns**: Use `cn()` utility, component composition
+5. **Respect memory pressure**: Check thresholds before heavy operations
+6. **Use repository coordinator**: Don't clone repositories directly
+7. **Multi-tier caching**: Understand cache hierarchy for optimization
+8. **Streaming for large repos**: Auto-enabled at 50k+ commits
+9. **Test coverage**: Maintain ≥80% on critical paths
+10. **Code quality**: ESLint, Prettier, TypeScript strict mode enforced
+
+## Reference Documentation
+
+- **AGENTS.md**: Comprehensive project documentation (primary reference)
+- **README.md**: User-facing documentation
+- **CLAUDE.md**: Guidelines for Claude AI assistant
+- **GEMINI.md**: Guidelines for Gemini AI assistant
+- **Strategy.md**: Project strategy and roadmap
diff --git a/.serena/memories/project_overview.md b/.serena/memories/project_overview.md
index 1fc6e902..a5bd6f0b 100644
--- a/.serena/memories/project_overview.md
+++ b/.serena/memories/project_overview.md
@@ -1,11 +1,13 @@
 # GitRay - Project Overview
 
 ## Purpose
+
 GitRay is a professional Git visualization tool that transforms repository commit history into beautiful, interactive heatmaps and activity calendars. It provides deep insights into development patterns and team collaboration.
 
 ## Key Features
+
 - **Activity Heatmaps**: GitHub-style contribution calendars with customizable time periods
-- **Commit Analysis**: Detailed commit statistics and author breakdowns  
+- **Commit Analysis**: Detailed commit statistics and author breakdowns
 - **Code Churn Analysis**: Track code changes and stability patterns with risk level indicators
 - **Interactive Filtering**: Filter by authors, date ranges, and commit patterns
 - **Multi-tier Caching**: Intelligent caching system with Redis, disk, and memory tiers
@@ -15,40 +17,53 @@ GitRay is a professional Git visualization tool that transforms repository commi
 ## Technology Stack
 
 ### Backend
+
 - **Runtime**: Node.js 18+ with TypeScript 5.7
-- **Framework**: Express 5
+- **Framework**: Express 5.1.0
 - **Git Operations**: simple-git
 - **Caching**: Redis 7 (via ioredis)
 - **Logging**: Winston with daily rotate file
 - **Metrics**: Prometheus (prom-client)
 - **Validation**: Express-validator, Zod
 - **Security**: Helmet, CORS, express-rate-limit
+- **Date Utilities**: date-fns for date manipulation
 
-### Frontend  
-- **Framework**: React 19 with TypeScript 5.7
-- **Build Tool**: Vite 6
-- **Styling**: Tailwind CSS 4
-- **Visualizations**: react-calendar-heatmap, ApexCharts
-- **Animations**: Rive (@rive-app/react-canvas)
+### Frontend
+
+- **Framework**: React 18.3.1 with TypeScript 5.7
+- **Build Tool**: Vite 6.3.5
+- **Styling**: Tailwind CSS 4.1.7
+- **UI Components**: shadcn/ui (Radix UI primitives + CVA)
+- **Visualizations**: Recharts for charts, custom heatmap components
+- **Animations**: Rive (@rive-app/react-canvas), motion (Framer Motion)
 - **HTTP Client**: Axios
-- **Date Handling**: date-fns
+- **Forms**: React Hook Form
+- **Toast Notifications**: Sonner
+- **Themes**: next-themes for dark/light mode
+- **Icons**: lucide-react
+- **Carousel**: Embla Carousel for carousels
+- **Command Menu**: cmdk for command palette
 
 ### Shared Infrastructure
+
 - **Package Manager**: pnpm 10.16.1 (workspaces)
 - **Testing**: Vitest 3.2.3 (86.4% coverage)
 - **Performance Testing**: k6 for backend load testing
 - **Linting**: ESLint 9 (flat config)
 - **Formatting**: Prettier 3
+- **Markdown Linting**: markdownlint-cli2
 - **Git Hooks**: Husky + lint-staged
-- **CI/CD**: GitHub Actions (assumed from .github directory)
+- **CI/CD**: GitHub Actions
 
 ## Monorepo Structure
+
 - **apps/backend**: Express API server
-- **apps/frontend**: React UI application  
+- **apps/frontend**: React UI application
 - **packages/shared-types**: Shared TypeScript types and error classes
 - **scripts/**: Development and maintenance scripts
 
 ## Architecture Principles
+
 - **Strict TypeScript**: No `any` types, strict type checking enabled
 - **Monorepo with Project References**: TypeScript project references for incremental builds
 - **Shared Type Safety**: All types exported from @gitray/shared-types
@@ -59,8 +74,16 @@ GitRay is a professional Git visualization tool that transforms repository commi
 - **Performance Optimized**: Multi-tier caching, streaming, memory pressure management
 
 ## Current Development Branch
-Main development branch: `dev`
-Current working branch: `120-enhancementscopebackend-refactor-old-routes-to-use-unified-cache-service-retain-redis-remove-manual-caching`
+
+**Main development branch**: `dev`
+**Current working branch**: `87-featfrontend-ui-redesign-migration-to-shadcnui`
+**Repository**: `gitray` (owner: `jonasyr`)
+**Recent major changes**: Complete frontend UI redesign with shadcn/ui component library
+
+## Current Date
+
+As of January 5, 2026, the project is actively maintained and in production-ready state with ongoing feature development.
 
 ## License
+
 ISC License
diff --git a/.serena/memories/suggested_commands.md b/.serena/memories/suggested_commands.md
index ca7d1247..450ee581 100644
--- a/.serena/memories/suggested_commands.md
+++ b/.serena/memories/suggested_commands.md
@@ -1,236 +1,672 @@
-# GitRay - Suggested Development Commands
+# GitRay - Suggested Commands Reference
 
-## Essential Commands (Most Commonly Used)
+## Quick Reference
+
+This file contains commonly used commands for GitRay development. All commands should be run from the project root unless otherwise specified.
+
+## Setup & Installation
 
-### Development Environment
 ```bash
-pnpm app                  # Interactive development environment manager
-pnpm dev                  # Build shared types + start all services with hot reload
-pnpm dev:frontend         # Start frontend only (Vite on port 5173)
-pnpm dev:backend          # Start backend only (Express on port 3001)
+# Clone repository
+git clone <repository-url>
+cd gitray
+
+# Install all dependencies (workspace-aware)
+pnpm install
+
+# Build shared types (MUST run before apps)
+pnpm run build:shared-types
+
+# Setup environment files
+cp apps/backend/.env.example apps/backend/.env
+cp apps/frontend/.env.example apps/frontend/.env
+# Edit .env files with your configuration
 ```
 
-### Testing
+## Development
+
+### Starting Services
+
 ```bash
-pnpm test                 # Run all tests across workspace
-pnpm test:frontend        # Frontend tests only
-pnpm test:backend         # Backend tests only
-pnpm test:watch           # Watch mode for development
-pnpm test:watch:changed   # Watch changed files only
-pnpm test:coverage        # Generate combined coverage report (86.4%+)
-pnpm test:ui              # Open Vitest UI
+# Interactive menu to start services
+pnpm app
+
+# Full development setup (build types, start Redis, backend, frontend)
+pnpm start
+
+# Quick start (frontend only, assumes backend is running)
+pnpm quick
+
+# Build types and start all services with hot reload
+pnpm dev
+
+# Start individual services
+pnpm dev:frontend     # Frontend only (Vite dev server)
+pnpm dev:backend      # Backend only (Express with nodemon)
 ```
 
-### Code Quality
+### Environment Management
+
 ```bash
-pnpm lint                 # Run ESLint on all code
-pnpm lint:fix             # Auto-fix linting issues
-pnpm lint:md              # Lint markdown files
-pnpm format               # Format all files with Prettier
+# Check status of services
+pnpm env:status
+
+# Stop all services
+pnpm env:stop
+
+# Clean environment (remove containers, temp files)
+pnpm env:clean
 ```
 
-### Building
+## Building
+
 ```bash
-pnpm build                # Build everything (shared-types → backend → frontend)
-pnpm build:shared-types   # Build shared types only (REQUIRED before apps)
-pnpm build:apps           # Build backend + frontend
+# Full build pipeline: shared-types → backend → frontend
+pnpm build
+
+# Build only shared types package
+pnpm build:shared-types
+
+# Build backend and frontend (assumes types are built)
+pnpm build:apps
+
+# Clean build artifacts and caches
+pnpm clean
+
+# Clean install and build from scratch
+pnpm rebuild
 ```
 
-### Environment Management
+## Testing
+
+### Running Tests
+
+```bash
+# Run all tests across all packages
+pnpm test
+
+# Run tests for specific package
+pnpm test:frontend
+pnpm test:backend
+
+# Watch mode for all tests
+pnpm test:watch
+
+# Watch mode for changed files only
+pnpm test:watch:changed
+
+# Launch Vitest UI for interactive debugging
+pnpm test:ui
+```
+
+### Coverage Reports
+
+```bash
+# Full coverage pipeline (clean → test → merge → report)
+pnpm test:coverage
+
+# Coverage for individual packages
+pnpm test:coverage:frontend
+pnpm test:coverage:backend
+```
+
+### Performance Testing
+
+```bash
+# Run standard k6 load test (backend only)
+pnpm --filter backend test:perf
+
+# Light load smoke test
+pnpm --filter backend test:perf:smoke
+
+# Heavy load stress test
+pnpm --filter backend test:perf:stress
+```
+
+## Code Quality
+
+### Linting
+
 ```bash
-pnpm env:status           # Show service status (frontend, backend, Redis)
-pnpm env:stop             # Stop all services
-pnpm env:clean            # Clean environment (stop services + clean cache)
+# Lint all files
+pnpm lint
+
+# Auto-fix linting issues
+pnpm lint:fix
+
+# Lint Markdown files only
+pnpm lint:md
+
+# Format all files with Prettier
+pnpm format
+```
+
+### Type Checking
+
+```bash
+# Type check all packages
+pnpm type-check
+
+# Type check backend only
+cd apps/backend && pnpm tsc --noEmit
+
+# Type check frontend only
+cd apps/frontend && pnpm tsc --noEmit
+```
+
+## Package Management
+
+```bash
+# Add dependency to workspace root
+pnpm add <package> -w
+
+# Add dependency to specific workspace
+pnpm --filter backend add <package>
+pnpm --filter frontend add <package>
+pnpm --filter @gitray/shared-types add <package>
+
+# Add dev dependency
+pnpm --filter backend add -D <package>
+
+# Update all dependencies
+pnpm update
+
+# Update specific package
+pnpm update <package>
+
+# List outdated packages
+pnpm outdated
+
+# Remove dependency
+pnpm --filter backend remove <package>
 ```
 
-### Cleanup
+## Git & Version Control
+
 ```bash
-pnpm clean                # Clean dist + cache + node_modules
-pnpm clean:dist           # Remove build artifacts only
-pnpm clean:cache          # Remove Vite/ESLint/nyc caches
-pnpm clean:node_modules   # Remove all node_modules (deep clean)
-pnpm clean:all            # Deep clean including logs
-pnpm rebuild              # Full clean + install + build
+# Check current branch
+git branch --show-current
+
+# Create feature branch
+git checkout -b feat/your-feature-name
+
+# Create bugfix branch
+git checkout -b fix/issue-description
+
+# Commit with conventional commit message
+git commit -m "feat: add new feature"
+git commit -m "fix: resolve bug in cache manager"
+git commit -m "refactor: extract route helpers"
+git commit -m "test: add integration tests"
+git commit -m "docs: update API documentation"
+git commit -m "perf: optimize commit aggregation"
+git commit -m "style: format code with prettier"
+git commit -m "chore: update dependencies"
+
+# Push branch
+git push origin <branch-name>
+
+# Pull latest changes
+git pull origin <branch-name>
+
+# View recent commits
+git log --oneline -n 10
+
+# Check diff
+git diff
+git diff --staged
 ```
 
-## Installation & Setup
+## Docker & Redis
 
 ```bash
-# Initial setup
-pnpm install              # Install all workspace dependencies
+# Start Redis container (development)
+docker run -d --name gitray-redis -p 6379:6379 redis:7-alpine
+
+# Stop Redis container
+docker stop gitray-redis
+
+# Remove Redis container
+docker rm gitray-redis
+
+# View Redis logs
+docker logs gitray-redis
+
+# Connect to Redis CLI
+docker exec -it gitray-redis redis-cli
+
+# Check Redis memory usage
+docker exec -it gitray-redis redis-cli INFO memory
+```
+
+## Backend Development
+
+### Running Backend Services
 
-# Start Redis (via Docker)
-docker run --name gitray-redis -d -p 6379:6379 redis:7-alpine
+```bash
+# Start backend in development mode
+cd apps/backend
+pnpm dev
 
-# Check Redis status
-docker ps | grep redis
-docker restart gitray-redis  # If needed
+# Start backend in production mode
+cd apps/backend
+pnpm start
 
-# Build before first run
+# Build backend
+cd apps/backend
 pnpm build
 ```
 
-## Application Management Scripts
+### Backend Testing & Debugging
 
 ```bash
-pnpm start                # Full development setup (via scripts/start.sh)
-pnpm quick                # Frontend-only quick start
+# Run backend unit tests
+cd apps/backend
+pnpm test
+
+# Run backend integration tests
+cd apps/backend
+pnpm test:integration
+
+# View backend logs
+tail -f apps/backend/logs/combined.log
+tail -f apps/backend/logs/error.log
+
+# Check backend health
+curl http://localhost:3001/health
+curl http://localhost:3001/health/detailed
+curl http://localhost:3001/health/memory
+
+# Check cache statistics
+curl http://localhost:3001/api/cache/stats
+
+# View Prometheus metrics
+curl http://localhost:3001/metrics
+```
+
+### API Testing
+
+```bash
+# Test repository endpoint
+curl -X POST http://localhost:3001/api/repositories \
+  -H "Content-Type: application/json" \
+  -d '{"url": "https://github.com/user/repo"}'
+
+# Test heatmap endpoint
+curl "http://localhost:3001/api/commits/heatmap?url=https://github.com/user/repo"
+
+# Test streaming endpoint
+curl "http://localhost:3001/api/commits/stream?url=https://github.com/user/repo"
+
+# Test churn analysis
+curl "http://localhost:3001/api/repositories/churn?url=https://github.com/user/repo"
+
+# Test repository summary
+curl "http://localhost:3001/api/repositories/summary?url=https://github.com/user/repo"
+```
+
+### Backend Scripts
+
+```bash
+# Run manual XSS verification
+cd apps/backend/__tests__
+bash manual-xss-verification.sh
+
+# Run end-to-end cache test
+cd scripts
+bash end2end_cache_test.sh
+
+# Run complete API test
+cd scripts
+bash test_api_complete.sh
+
+# Verify health endpoints
+cd scripts
+bash verify-health.sh
+
+# Verify SSRF protection
+cd scripts
+bash verify-ssrf-protection.sh
 ```
 
-## Testing Variants
+## Frontend Development
+
+### Running Frontend
 
-### Backend-Specific
 ```bash
-pnpm --filter backend test              # Backend unit tests
-pnpm --filter backend test:coverage     # Backend coverage
-pnpm --filter backend test:perf         # k6 performance tests
-pnpm --filter backend test:perf:smoke   # Quick smoke test (30s)
-pnpm --filter backend test:perf:stress  # Stress test (2x load)
+# Start frontend dev server
+cd apps/frontend
+pnpm dev
+
+# Build frontend for production
+cd apps/frontend
+pnpm build
+
+# Preview production build
+cd apps/frontend
+pnpm preview
 ```
 
-### Frontend-Specific
+### Frontend Testing
+
 ```bash
-pnpm --filter frontend test             # Frontend unit tests
-pnpm --filter frontend test:coverage    # Frontend coverage
+# Run frontend tests
+cd apps/frontend
+pnpm test
+
+# Run frontend tests in watch mode
+cd apps/frontend
+pnpm test:watch
+
+# Run frontend tests with UI
+cd apps/frontend
+pnpm test:ui
 ```
 
-### Coverage Details
+## Shared Types Development
+
 ```bash
-pnpm test:coverage:frontend    # Frontend coverage (apps/frontend/coverage)
-pnpm test:coverage:backend     # Backend coverage (apps/backend/coverage)
-pnpm test:coverage:merge       # Merge coverage reports
-pnpm test:coverage:report      # Generate HTML/LCOV/text reports
-pnpm clean:coverage-output     # Clean coverage artifacts
+# Build shared types
+cd packages/shared-types
+pnpm build
+
+# Watch mode for shared types (rebuild on change)
+cd packages/shared-types
+pnpm build --watch
+
+# Type check shared types
+cd packages/shared-types
+pnpm tsc --noEmit
 ```
 
-## Git Hooks (Automated via Husky)
+## Troubleshooting
 
-### Pre-commit (Automated)
-- ESLint auto-fix on `*.{ts,tsx,js,jsx}`
-- Prettier format on code files
-- Markdownlint on `*.md` files
-- Prettier format on `*.{json,yml,yaml}`
+### Common Issues
 
-### Manual Hook Setup
 ```bash
-pnpm prepare              # Install Husky hooks
+# Shared types not found - rebuild types
+pnpm run build:shared-types
+
+# Redis connection failed - start Redis
+docker run -d --name gitray-redis -p 6379:6379 redis:7-alpine
+
+# Port already in use - check and kill process
+lsof -ti:3001 | xargs kill -9  # Backend port
+lsof -ti:5173 | xargs kill -9  # Frontend port
+
+# Clear all node_modules and reinstall
+pnpm clean
+rm -rf node_modules apps/*/node_modules packages/*/node_modules
+pnpm install
+
+# Clear TypeScript build cache
+find . -name "*.tsbuildinfo" -delete
+
+# Clear Vite cache
+rm -rf apps/frontend/.vite
+
+# Clear ESLint cache
+rm .eslintcache
+
+# Clear all caches
+pnpm clean
+rm -rf .vite .eslintcache .nyc_output coverage
+
+# Reset everything
+pnpm clean
+rm -rf node_modules apps/*/node_modules packages/*/node_modules
+rm -rf apps/backend/dist apps/frontend/dist packages/shared-types/dist
+rm -rf .vite .eslintcache .nyc_output coverage
+pnpm install
+pnpm build
 ```
 
-## Debugging & Troubleshooting
+### Debugging Commands
 
 ```bash
-# Check what's using a port
-lsof -i :3001             # Backend port
-lsof -i :5173             # Frontend port
-lsof -i :6379             # Redis port
+# Check Node.js version
+node --version
+
+# Check pnpm version
+pnpm --version
+
+# Check TypeScript version
+pnpm tsc --version
+
+# List all workspace packages
+pnpm list --depth 0
+
+# Check for circular dependencies
+pnpm why <package-name>
 
-# Kill process by PID
-kill -9 <PID>
+# Verify workspace configuration
+pnpm list --workspace-root
+
+# Check environment variables (backend)
+cd apps/backend && cat .env
+
+# Check running processes
+ps aux | grep node
 
 # Check Redis connection
-docker logs gitray-redis
+redis-cli ping
 
-# View application logs
-tail -f logs/combined.log
-tail -f logs/error.log
+# Monitor memory usage
+watch -n 1 free -h
 
-# Memory and system status
-pnpm env:status
+# Monitor disk space
+df -h
 ```
 
-## Performance Testing (k6)
+## Maintenance
+
+### Cache Management
 
 ```bash
-# Standard load test
-pnpm --filter backend test:perf
+# Clear Redis cache
+docker exec -it gitray-redis redis-cli FLUSHALL
 
-# Quick smoke test (5 VUs, 30 seconds)
-pnpm --filter backend test:perf:smoke
+# Clear disk cache
+rm -rf apps/backend/cache/*
 
-# Stress test (2x multiplier)
-pnpm --filter backend test:perf:stress
+# Clear repository locks
+rm -rf apps/backend/locks/*
 
-# Custom k6 test
-cd apps/backend
-k6 run --vus 10 --duration 60s perf/load-test.ts
+# Clear logs
+rm -rf apps/backend/logs/*
+rm -rf logs/*
 ```
 
-## Useful System Commands (Linux)
+### Log Management
 
-### File Operations
 ```bash
-ls -la                    # List files with details
-find . -name "*.ts"       # Find TypeScript files
-grep -r "pattern" src/    # Search in files
+# View combined logs
+tail -f apps/backend/logs/combined.log
+
+# View error logs only
+tail -f apps/backend/logs/error.log
+
+# Search logs for errors
+grep -i error apps/backend/logs/combined.log
+
+# Count errors in logs
+grep -c ERROR apps/backend/logs/combined.log
+
+# View last 100 log entries
+tail -n 100 apps/backend/logs/combined.log
+
+# Follow logs with grep filter
+tail -f apps/backend/logs/combined.log | grep "cache"
 ```
 
-### Git Operations
+### Performance Monitoring
+
 ```bash
-git status                # Current branch status
-git log --oneline -10     # Recent commits
-git diff                  # View changes
-git checkout dev          # Switch to dev branch
+# Monitor backend metrics
+watch -n 5 curl -s http://localhost:3001/metrics
+
+# Monitor health status
+watch -n 5 curl -s http://localhost:3001/health/detailed
+
+# Monitor memory pressure
+watch -n 5 curl -s http://localhost:3001/health/memory
+
+# Monitor cache stats
+watch -n 5 curl -s http://localhost:3001/api/cache/stats
+
+# Node.js heap snapshot (requires --inspect)
+node --inspect apps/backend/dist/index.js
+# Then in Chrome: chrome://inspect
 ```
 
-## Build Order (IMPORTANT!)
+## Git Workflow
+
+### Feature Development
+
+```bash
+# Start new feature
+git checkout dev
+git pull origin dev
+git checkout -b feat/feature-name
+
+# Make changes and commit
+git add .
+git commit -m "feat: add feature description"
 
-**Always build in this order:**
-1. `pnpm build:shared-types` (or `pnpm --filter @gitray/shared-types build`)
-2. `pnpm build:apps` (or manually: backend → frontend)
+# Push feature branch
+git push origin feat/feature-name
 
-**Why?** Backend and frontend depend on built types from `@gitray/shared-types`.
+# Create pull request (via GitHub UI)
+```
 
-## Environment Variables
+### Bug Fixes
 
-Create `.env` in project root:
 ```bash
-# Server
-PORT=3001
-CORS_ORIGIN=http://localhost:5173
+# Start bug fix
+git checkout dev
+git pull origin dev
+git checkout -b fix/bug-description
 
-# Redis
-REDIS_HOST=localhost
-REDIS_PORT=6379
+# Make changes and commit
+git add .
+git commit -m "fix: resolve bug description"
 
-# Caching
-CACHE_ENABLE_REDIS=true
-CACHE_ENABLE_DISK=true
+# Push fix branch
+git push origin fix/bug-description
 
-# Development
-NODE_ENV=development
-LOG_LEVEL=info
-DEBUG_CACHE_LOGGING=false
+# Create pull request (via GitHub UI)
 ```
 
-## Quick Reference: Common Workflows
+### Updating Branch
 
-### Starting Development
 ```bash
-pnpm app                  # Interactive menu
-# OR
-pnpm dev                  # Direct start (recommended)
+# Update feature branch with latest dev
+git checkout dev
+git pull origin dev
+git checkout feat/feature-name
+git merge dev
+
+# Or use rebase (cleaner history)
+git checkout feat/feature-name
+git rebase dev
+
+# Resolve conflicts if any
+git add .
+git rebase --continue
+
+# Force push if rebased
+git push origin feat/feature-name --force-with-lease
 ```
 
-### Before Committing
+## CI/CD
+
+### Pre-commit Checks (Run Locally)
+
 ```bash
-pnpm lint                 # Check for issues
-pnpm test                 # Run tests
-pnpm format               # Format code
+# Run all pre-commit checks manually
+pnpm lint
+pnpm format
+pnpm lint:md
+pnpm test
+pnpm build
+
+# Simulate CI pipeline locally
+pnpm lint && pnpm format && pnpm test && pnpm build
 ```
 
-### After Pulling Changes
+### GitHub Actions (Automated)
+
 ```bash
-pnpm install              # Update dependencies
-pnpm build:shared-types   # Rebuild shared types
+# View workflow status
+git push origin <branch>
+# Check GitHub Actions tab in repository
+
+# Re-run failed workflows (via GitHub UI)
+# Navigate to Actions → Select workflow → Re-run jobs
 ```
 
-### Adding New Dependencies
+## Production Deployment
+
+### Build for Production
+
 ```bash
-# Root level
-pnpm add -D <package>
+# Full production build
+pnpm clean
+pnpm install --frozen-lockfile
+pnpm build
 
-# Specific workspace
-pnpm --filter backend add <package>
-pnpm --filter frontend add <package>
-pnpm --filter @gitray/shared-types add <package>
+# Verify build artifacts
+ls -lh apps/backend/dist
+ls -lh apps/frontend/dist
+ls -lh packages/shared-types/dist
 ```
+
+### Environment Setup
+
+```bash
+# Set production environment variables
+export NODE_ENV=production
+export PORT=3001
+export REDIS_HOST=production-redis-host
+export REDIS_PORT=6379
+# ... other production variables
+
+# Or use .env.production files
+cp apps/backend/.env.example apps/backend/.env.production
+# Edit with production values
+```
+
+### Start Production Services
+
+```bash
+# Start backend in production mode
+cd apps/backend
+NODE_ENV=production node dist/index.js
+
+# Or use PM2 for process management
+pm2 start apps/backend/dist/index.js --name gitray-backend
+
+# Serve frontend static files (via Nginx, Apache, or Node.js server)
+# Frontend dist files in: apps/frontend/dist
+```
+
+## Useful Aliases (Add to ~/.bashrc or ~/.zshrc)
+
+```bash
+# GitRay aliases
+alias gitray-dev="cd ~/gitray && pnpm dev"
+alias gitray-test="cd ~/gitray && pnpm test"
+alias gitray-build="cd ~/gitray && pnpm build"
+alias gitray-clean="cd ~/gitray && pnpm clean && pnpm install"
+alias gitray-logs="tail -f ~/gitray/apps/backend/logs/combined.log"
+alias gitray-redis="docker exec -it gitray-redis redis-cli"
+alias gitray-health="curl -s http://localhost:3001/health/detailed | jq"
+```
+
+## References
+
+- **AGENTS.md**: Comprehensive project documentation
+- **README.md**: User-facing documentation
+- **package.json**: Scripts and dependencies
+- **apps/backend/src/config.ts**: Backend configuration
+- **scripts/**: Development scripts
diff --git a/.serena/memories/task_completion_checklist.md b/.serena/memories/task_completion_checklist.md
index 5af2af20..db030ab7 100644
--- a/.serena/memories/task_completion_checklist.md
+++ b/.serena/memories/task_completion_checklist.md
@@ -3,6 +3,7 @@
 ## Before Committing Code
 
 ### 1. Code Quality Checks
+
 ```bash
 # Run linting
 pnpm lint
@@ -15,6 +16,7 @@ pnpm lint:md
 ```
 
 ### 2. Run Tests
+
 ```bash
 # Run all tests
 pnpm test
@@ -28,6 +30,7 @@ pnpm test:coverage
 ```
 
 ### 3. Build Validation
+
 ```bash
 # Ensure clean build
 pnpm build
@@ -38,6 +41,7 @@ pnpm build:apps          # If app code changed
 ```
 
 ### 4. Manual Testing
+
 - [ ] Test the feature/fix in the running application
 - [ ] Verify frontend behavior (`pnpm dev:frontend`)
 - [ ] Verify backend endpoints (`pnpm dev:backend`)
@@ -45,6 +49,7 @@ pnpm build:apps          # If app code changed
 - [ ] Check backend logs for errors
 
 ### 5. Type Safety
+
 - [ ] No TypeScript errors (`pnpm build`)
 - [ ] No use of `any` without justification
 - [ ] Proper types imported from `@gitray/shared-types`
@@ -53,6 +58,7 @@ pnpm build:apps          # If app code changed
 ## Code Review Self-Checklist
 
 ### General
+
 - [ ] Code follows project conventions (see `coding_standards.md`)
 - [ ] No debug code (`console.log`, commented code, etc.)
 - [ ] Descriptive variable and function names
@@ -60,19 +66,27 @@ pnpm build:apps          # If app code changed
 - [ ] No duplicate code (DRY principle)
 
 ### TypeScript
+
 - [ ] Strict type checking passes
 - [ ] No `any` types without justification
 - [ ] Proper error handling with typed error classes
 - [ ] Async functions use `async/await`, not promise chains
 
 ### React Components (Frontend)
+
 - [ ] Functional components with proper typing
 - [ ] Hooks follow Rules of Hooks
 - [ ] Proper key props for lists
 - [ ] No inline functions in render (performance)
 - [ ] Tailwind CSS for styling (avoid inline styles)
+- [ ] Use shadcn/ui components from `components/ui/` when available
+- [ ] Use `cn()` utility for conditional className merging
+- [ ] Theme colors via CSS variables (not hardcoded colors)
+- [ ] Dark mode classes where appropriate (`dark:` prefix)
+- [ ] Accessibility maintained (keyboard navigation, ARIA labels)
 
 ### Backend Routes & Services
+
 - [ ] Proper error handling with try/catch
 - [ ] Use Winston logger, not `console.log`
 - [ ] Input validation with express-validator or Zod
@@ -80,6 +94,7 @@ pnpm build:apps          # If app code changed
 - [ ] Route helpers used for consistency (`setupRouteRequest`, etc.)
 
 ### Testing
+
 - [ ] New features have tests
 - [ ] Bug fixes have regression tests
 - [ ] Test coverage maintained (≥80%)
@@ -87,6 +102,7 @@ pnpm build:apps          # If app code changed
 - [ ] Mocks are used for external dependencies
 
 ### Documentation
+
 - [ ] README updated if user-facing changes
 - [ ] CLAUDE.md updated if guidelines change
 - [ ] JSDoc comments for public APIs
@@ -97,11 +113,13 @@ pnpm build:apps          # If app code changed
 If you modified `packages/shared-types/src/index.ts`:
 
 1. **Rebuild shared types**
+
    ```bash
    pnpm build:shared-types
    ```
 
 2. **Update imports** in backend and frontend
+
    ```typescript
    import { YourNewType } from '@gitray/shared-types';
    ```
@@ -118,11 +136,13 @@ If you modified `packages/shared-types/src/index.ts`:
 ## When Adding Dependencies
 
 ### Root dependencies
+
 ```bash
 pnpm add -D <package>  # Dev dependency at root
 ```
 
 ### Workspace dependencies
+
 ```bash
 pnpm --filter backend add <package>
 pnpm --filter frontend add <package>
@@ -130,6 +150,7 @@ pnpm --filter @gitray/shared-types add <package>
 ```
 
 ### After adding dependencies
+
 - [ ] Verify `pnpm-lock.yaml` is updated
 - [ ] Test that build still works
 - [ ] Update README if dependency is significant
@@ -137,6 +158,7 @@ pnpm --filter @gitray/shared-types add <package>
 ## When Creating a Pull Request
 
 ### 1. Ensure Clean Branch
+
 ```bash
 # Sync with main development branch
 git checkout dev
@@ -148,7 +170,9 @@ git rebase dev
 ```
 
 ### 2. Commit Message
+
 Follow Conventional Commits format:
+
 ```
 feat: add code churn risk indicators
 fix: resolve cache eviction race condition
@@ -159,11 +183,14 @@ perf: optimize commit aggregation algorithm
 ```
 
 ### 3. PR Description Template
+
 ```markdown
 ## Description
+
 Brief description of changes
 
 ## Type of Change
+
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
@@ -171,11 +198,13 @@ Brief description of changes
 - [ ] Documentation update
 
 ## Testing
+
 - [ ] Tests pass locally
 - [ ] Added tests for new features
 - [ ] Coverage maintained ≥80%
 
 ## Checklist
+
 - [ ] Code follows project conventions
 - [ ] Self-reviewed the code
 - [ ] Commented complex logic
@@ -217,6 +246,19 @@ When implementing features, consider:
 9. **Test end-to-end**
 10. **Update documentation** (README, API docs)
 
+### Adding a New Frontend Component
+
+1. **Check shadcn/ui catalog** for existing components to reuse
+2. **Create component** in `apps/frontend/src/components/<Name>.tsx`
+3. **Import shadcn/ui primitives** from `@/components/ui/`
+4. **Use Tailwind utilities** for styling
+5. **Apply theme colors** via CSS variables
+6. **Add dark mode support** with `dark:` classes
+7. **Ensure accessibility** (keyboard nav, ARIA, focus management)
+8. **Add proper TypeScript types** for props
+9. **Test component** in isolation
+10. **Integrate into parent component/page**
+
 ### Fixing a Bug
 
 1. **Write failing test** that reproduces the bug
@@ -238,12 +280,14 @@ When implementing features, consider:
 ## Environment-Specific Checks
 
 ### Development
+
 - [ ] Redis running (`docker ps | grep redis`)
 - [ ] Ports available (3001, 5173, 6379)
 - [ ] Environment variables set (`.env` file)
 - [ ] Logs accessible (`logs/` directory)
 
 ### Before Production Deploy (Future)
+
 - [ ] All tests pass in CI
 - [ ] Coverage ≥80%
 - [ ] No TypeScript errors
@@ -276,6 +320,7 @@ git push origin your-branch-name
 ## Automated Checks (Pre-commit Hook)
 
 The project uses Husky with lint-staged for automatic checks:
+
 - **TypeScript/JavaScript**: ESLint auto-fix + Prettier
 - **Markdown**: Markdownlint
 - **JSON/YAML**: Prettier formatting
@@ -285,21 +330,25 @@ These run automatically on `git commit`. If they fail, fix issues before committ
 ## Quick Reference
 
 ### Validation Pipeline
+
 ```
 Code → Lint → Format → Test → Build → Manual Test → Commit
 ```
 
 ### Must-Run Before Commit
+
 ```bash
 pnpm lint && pnpm test && pnpm build
 ```
 
 ### If Shared Types Changed
+
 ```bash
 pnpm build:shared-types && pnpm test
 ```
 
 ### If Unsure, Run Everything
+
 ```bash
 pnpm rebuild && pnpm lint && pnpm test
 ```
diff --git a/AGENTS.md b/AGENTS.md
index fa28149f..bfeafccf 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,4 +1,5 @@
 <!-- markdownlint-disable -->
+
 # GitRay
 
 GitRay is a production-ready Git repository analysis and visualization platform that transforms commit history into interactive visualizations such as heatmaps, commit statistics, code churn analysis and time-series aggregations.
@@ -149,14 +150,21 @@ scripts/
 
 **Frontend:**
 
-- React 19.1.0
+- React 18.3.1
 - Vite 6.3.5
 - Tailwind CSS 4.1.7
 - axios for HTTP calls
-- ApexCharts and react-apexcharts for charts
-- react-calendar-heatmap for heatmaps
+- Recharts for data visualizations and charts
+- shadcn/ui component library (built on Radix UI primitives)
+- Radix UI components (Accordion, Dialog, Select, Dropdown, Tabs, Tooltip, etc.)
+- Lucide React for icons
 - @rive-app/react-canvas for animations
-- react-select for dropdowns
+- React Hook Form for form management
+- Sonner for toast notifications
+- next-themes for theme management
+- Embla Carousel for carousels
+- cmdk for command menu
+- class-variance-authority (CVA) for component variants
 
 **Shared Types:**
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 91e411ae..b7ef4f38 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,9 +1,11 @@
 <!-- markdownlint-disable -->
+
 # CLAUDE.md
 
 Guidance for Claude when contributing to the GitRay monorepo. Follow these rules before any other doc unless overridden by a nearer `AGENTS.md`.
 
 ## Project Snapshot
+
 - **Monorepo**: pnpm workspaces with TypeScript project references
 - **Frontend**: React 19 + Vite 6 + Tailwind CSS 4
 - **Backend**: Express 5 with simple-git, Redis caching, Prometheus metrics
@@ -11,6 +13,7 @@ Guidance for Claude when contributing to the GitRay monorepo. Follow these rules
 - **Testing**: Vitest across apps; k6 for backend perf
 
 ## Repo Layout (high level)
+
 ```
 apps/
   frontend/   # React UI, Vite, Tailwind, API clients
@@ -19,9 +22,11 @@ packages/
   shared-types/ # Reusable TypeScript types and schemas
 scripts/       # Dev/start/maintenance scripts
 ```
+
 Keep new files inside these roots; never add code under build artifacts (`dist/`, `.next/`, `coverage/`, `node_modules/`).
 
 ## Daily Commands
+
 ```bash
 pnpm install               # Install workspace deps
 pnpm dev                   # Start frontend+backend with hot reload (builds shared-types)
@@ -33,9 +38,11 @@ pnpm lint                  # ESLint flat config
 pnpm lint:md               # Markdown lint
 pnpm format                # Prettier format
 ```
+
 Build order matters: run `pnpm build:shared-types` before isolated backend/frontend builds.
 
 ## Code Standards (enforceable)
+
 - TypeScript **strict** everywhere; avoid `any` and implicit `any`.
 - React components must be functional with hooks; follow Rules of Hooks.
 - Use provided logger (winston) instead of `console.log` in runtime code.
@@ -46,6 +53,7 @@ Build order matters: run `pnpm build:shared-types` before isolated backend/front
 - Prefer named exports; avoid default exports for components and utilities.
 
 ### Naming
+
 - Components & types/interfaces: **PascalCase** (`CommitHeatmap`, `CommitHeatmapProps`)
 - Hooks: `use` + camelCase (`useCommitFilters`)
 - Utilities/functions: `camelCase`
@@ -53,10 +61,12 @@ Build order matters: run `pnpm build:shared-types` before isolated backend/front
 - Environment vars: `UPPER_SNAKE_CASE`
 
 ### Async & Error Handling
+
 - Use `async/await` with try/catch at call boundaries; wrap errors with context and rethrow typed errors.
 - Avoid promise chains; never swallow errors. Use abort signals for cancellable Git/HTTP operations.
 
 ## File Placement Rules
+
 - Frontend components: `apps/frontend/src/components/<Name>/index.tsx`
 - Pages/routes: `apps/frontend/src/pages` or `/src/routes` per existing pattern
 - Hooks: `apps/frontend/src/hooks/use<Name>.ts`
@@ -69,6 +79,7 @@ Build order matters: run `pnpm build:shared-types` before isolated backend/front
 If unsure where to place code, search existing modules and mirror their location before creating new folders.
 
 ## Workflow Expectations
+
 - For feature work: update types first, then backend services/routes, then frontend API clients/components, with tests at each layer.
 - For bug fixes: reproduce with a failing test, patch minimally, keep regression test.
 - For refactors: keep behavior identical, maintain coverage, and avoid mixing with feature changes.
@@ -76,6 +87,7 @@ If unsure where to place code, search existing modules and mirror their location
 - Use conventional commits (`feat:`, `fix:`, `refactor:`, `test:`, `docs:`).
 
 ## Common Mistakes to Avoid
+
 - Skipping `pnpm run build:shared-types` before running/packaging apps → leads to missing types.
 - Adding new `node_modules` or build outputs to git.
 - Creating duplicate types instead of importing from shared types.
@@ -84,16 +96,19 @@ If unsure where to place code, search existing modules and mirror their location
 - Forgetting to update both backend and frontend when API contracts change.
 
 ## Quality & Checks
+
 - Run tests and lint for code changes; doc-only edits may skip tests (still ensure formatting is clean).
 - Keep ≥80% coverage on critical paths; prefer writing tests alongside new logic.
 - Use `pnpm lint:md` for Markdown changes if formatting issues are possible.
 
 ## Context Links
+
 - Architecture: `docs/ARCHITECTURE.md` (overall design, caches, streaming)
 - API: `docs/API.md` (endpoints/contracts)
 - Testing: `docs/TESTING.md` (testing strategy, coverage)
 
 ## When in Doubt
+
 - Mirror existing patterns within the same folder.
 - Prefer modifying existing modules over creating new abstractions.
 - Ask for guidance before adding new top-level packages or changing folder structure.
diff --git a/FRONTEND_API_MIGRATION.md b/FRONTEND_API_MIGRATION.md
deleted file mode 100644
index 34dfb195..00000000
--- a/FRONTEND_API_MIGRATION.md
+++ /dev/null
@@ -1,1107 +0,0 @@
-# Frontend API Migration Guide
-
-## Overview
-
-This guide documents the backend API changes from PR #122 (Issue #120) and provides
-complete migration instructions for **any frontend implementation** consuming the GitRay
-backend API.
-
-**Scope**: This document is frontend-agnostic and covers general API interaction
-patterns, not specific to the current frontend implementation (which is being replaced).
-
-**Key Changes**:
-
-- All POST endpoints → GET endpoints with query parameters
-- Enhanced pagination support
-- Filter parameters flattened to query params
-- Improved response structures with nested data
-- Multi-tier caching for better performance
-
----
-
-## Table of Contents
-
-- [API Endpoint Changes](#api-endpoint-changes)
-- [Detailed Endpoint Documentation](#detailed-endpoint-documentation)
-  - [1. GET /api/repositories/commits](#1-get-apirepositoriescommits)
-  - [2. GET /api/repositories/heatmap](#2-get-apirepositoriesheatmap)
-  - [3. GET /api/repositories/contributors](#3-get-apirepositoriescontributors)
-  - [4. GET /api/repositories/churn](#4-get-apirepositorieschurn)
-  - [5. GET /api/repositories/summary](#5-get-apirepositoriessummary)
-  - [6. GET /api/repositories/full-data](#6-get-apirepositories full-data)
-- [Migration Patterns](#migration-patterns)
-- [Query Parameter Guidelines](#query-parameter-guidelines)
-- [Response Structure Changes](#response-structure-changes)
-- [Error Handling](#error-handling)
-- [Testing Recommendations](#testing-recommendations)
-- [Common Pitfalls](#common-pitfalls)
-
----
-
-## API Endpoint Changes
-
-### Complete Endpoint Mapping
-
-| **Old Endpoint** | **New Endpoint** | **Method** | **Key Differences** |
-|------------------|------------------|------------|---------------------|
-| `POST /api/repositories` | `GET /api/repositories/commits` | POST→GET | Pagination added |
-| `POST /api/repositories/heatmap` | `GET /api/repositories/heatmap` | POST→GET | Query params |
-| `POST /api/repositories/contributors` | `GET /api/repositories/contributors` | POST→GET | Filters |
-| `POST /api/repositories/churn` | `GET /api/repositories/churn` | POST→GET | Churn filters |
-| `POST /api/repositories/full-data` | `GET /api/repositories/full-data` | POST→GET | Pagination |
-| `GET /api/repositories/summary` | `GET /api/repositories/summary` | No change | Improved caching |
-
----
-
-## Detailed Endpoint Documentation
-
-### 1. GET /api/repositories/commits
-
-**Purpose**: Retrieve paginated commit history for a repository.
-
-**Query Parameters**:
-
-```typescript
-{
-  repoUrl: string;      // Required - Git repository URL
-  page?: number;        // Optional - Page number (default: 1)
-  limit?: number;       // Optional - Items per page (default: 100)
-}
-```
-
-**Example Request**:
-
-```bash
-GET /api/repositories/commits?repoUrl=https://github.com/jonasyr/gitray.git&page=1&limit=50
-```
-
-**Response Structure**:
-
-```typescript
-{
-  commits: Commit[];    // Array of commit objects
-  page: number;         // Current page number
-  limit: number;        // Items per page
-}
-```
-
-**Sample Response**:
-
-```json
-{
-  "commits": [
-    {
-      "sha": "abc123...",
-      "message": "feat: add new feature",
-      "author": {
-        "name": "Jonas",
-        "email": "jonas@example.com"
-      },
-      "date": "2024-12-01T10:30:00Z",
-      "stats": {
-        "additions": 150,
-        "deletions": 30
-      }
-    }
-  ],
-  "page": 1,
-  "limit": 50
-}
-```
-
-**Migration Example**:
-
-```typescript
-// OLD (POST)
-const response = await fetch('/api/repositories', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({ repoUrl })
-});
-
-// NEW (GET)
-const params = new URLSearchParams({
-  repoUrl,
-  page: '1',
-  limit: '50'
-});
-const response = await fetch(`/api/repositories/commits?${params}`);
-const { commits, page, limit } = await response.json();
-```
-
----
-
-### 2. GET /api/repositories/heatmap
-
-**Purpose**: Retrieve commit activity heatmap data with optional filters.
-
-**Query Parameters**:
-
-```typescript
-{
-  repoUrl: string;      // Required - Git repository URL
-  author?: string;      // Optional - Filter by single author
-  authors?: string;     // Optional - Comma-separated author list
-  fromDate?: string;    // Optional - Start date (ISO 8601)
-  toDate?: string;      // Optional - End date (ISO 8601)
-}
-```
-
-**Example Request**:
-
-```bash
-GET /api/repositories/heatmap?repoUrl=https://github.com/user/repo.git&fromDate=2024-01-01&toDate=2024-12-31
-```
-
-**Response Structure**:
-
-```typescript
-{
-  heatmapData: {
-    timePeriod: 'day' | 'week' | 'month';
-    data: Array<{
-      date: string;      // ISO 8601 date
-      count: number;     // Commit count
-      authors: number;   // Unique author count
-    }>;
-    metadata?: {
-      totalCommits: number;
-      dateRange: { start: string; end: string };
-    };
-  }
-}
-```
-
-**Sample Response**:
-
-```json
-{
-  "heatmapData": {
-    "timePeriod": "day",
-    "data": [
-      { "date": "2024-01-01", "count": 5, "authors": 2 },
-      { "date": "2024-01-02", "count": 3, "authors": 1 }
-    ],
-    "metadata": {
-      "totalCommits": 480,
-      "dateRange": {
-        "start": "2024-01-01",
-        "end": "2024-12-31"
-      }
-    }
-  }
-}
-```
-
-**Migration Example**:
-
-```typescript
-// OLD (POST with nested filterOptions)
-const response = await fetch('/api/repositories/heatmap', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    repoUrl,
-    filterOptions: {
-      author: 'john',
-      fromDate: '2024-01-01',
-      toDate: '2024-12-31'
-    }
-  })
-});
-
-// NEW (GET with flat query params)
-const params = new URLSearchParams({ repoUrl });
-if (author) params.append('author', author);
-if (fromDate) params.append('fromDate', fromDate);
-if (toDate) params.append('toDate', toDate);
-
-const response = await fetch(`/api/repositories/heatmap?${params}`);
-const { heatmapData } = await response.json();
-```
-
----
-
-### 3. GET /api/repositories/contributors
-
-**Purpose**: Retrieve all unique contributors without statistics or ranking (GDPR-compliant).
-
-**Query Parameters**:
-
-```typescript
-{
-  repoUrl: string;      // Required - Git repository URL
-  author?: string;      // Optional - Filter by single author
-  authors?: string;     // Optional - Comma-separated author list
-  fromDate?: string;    // Optional - Start date (ISO 8601)
-  toDate?: string;      // Optional - End date (ISO 8601)
-}
-```
-
-**Example Request**:
-
-```bash
-GET /api/repositories/contributors?repoUrl=https://github.com/user/repo.git&fromDate=2024-01-01
-```
-
-**Response Structure**:
-
-```typescript
-{
-  contributors: Array<{
-    login: string;  // Author name (GDPR-compliant pseudonymized identifier)
-  }>
-}
-```
-
-**Sample Response**:
-
-```json
-{
-  "contributors": [
-    { "login": "Alice" },
-    { "login": "Bob" },
-    { "login": "Charlie" }
-  ]
-}
-```
-
-**Migration Example**:
-
-```typescript
-// OLD (POST)
-const response = await fetch('/api/repositories/contributors', {
-  method: 'POST',
-  body: JSON.stringify({ repoUrl, filterOptions })
-});
-
-// NEW (GET)
-const params = new URLSearchParams({ repoUrl });
-if (fromDate) params.append('fromDate', fromDate);
-if (toDate) params.append('toDate', toDate);
-
-const response = await fetch(`/api/repositories/contributors?${params}`);
-const { contributors } = await response.json();
-// Note: Contributors now contain only { login: string }, no statistics
-```
-
-**IMPORTANT CHANGES (Issue #121)**:
-
-- Returns **all unique contributors**, not just top 5
-- No commit counts, line statistics, or contribution percentages
-- Alphabetically sorted for consistency
-- Fully GDPR-compliant (only author names, no tracking metrics)
-
----
-
-### 4. GET /api/repositories/churn
-
-**Purpose**: Retrieve code churn analysis showing file change frequency.
-
-**Query Parameters**:
-
-```typescript
-{
-  repoUrl: string;       // Required - Git repository URL
-  fromDate?: string;     // Optional - Analysis start date (ISO 8601)
-  toDate?: string;       // Optional - Analysis end date (ISO 8601)
-  minChanges?: string;   // Optional - Minimum changes filter (numeric)
-  extensions?: string;   // Optional - Comma-separated file extensions (e.g., 'ts,tsx,js')
-}
-```
-
-**Example Request**:
-
-```bash
-GET /api/repositories/churn?repoUrl=https://github.com/user/repo.git&minChanges=10&extensions=ts,tsx
-```
-
-**Response Structure**:
-
-```typescript
-{
-  churnData: {
-    files: Array<{
-      path: string;
-      additions: number;
-      deletions: number;
-      changes: number;
-      riskLevel: 'low' | 'medium' | 'high' | 'critical';
-    }>;
-    summary: {
-      totalFiles: number;
-      highRiskFiles: number;
-      averageChanges: number;
-    };
-    metadata: {
-      dateRange: { start: string; end: string };
-      filters: {
-        minChanges?: number;
-        extensions?: string[];
-      };
-    };
-  }
-}
-```
-
-**Sample Response**:
-
-```json
-{
-  "churnData": {
-    "files": [
-      {
-        "path": "src/services/cache.ts",
-        "additions": 450,
-        "deletions": 120,
-        "changes": 570,
-        "riskLevel": "high"
-      }
-    ],
-    "summary": {
-      "totalFiles": 87,
-      "highRiskFiles": 12,
-      "averageChanges": 45.3
-    }
-  }
-}
-```
-
-**Migration Example**:
-
-```typescript
-// OLD (POST)
-const response = await fetch('/api/repositories/churn', {
-  method: 'POST',
-  body: JSON.stringify({ repoUrl, filterOptions })
-});
-
-// NEW (GET with churn-specific params)
-const params = new URLSearchParams({ repoUrl });
-if (minChanges) params.append('minChanges', minChanges.toString());
-if (extensions && extensions.length > 0) {
-  params.append('extensions', extensions.join(','));
-}
-if (fromDate) params.append('fromDate', fromDate);
-
-const response = await fetch(`/api/repositories/churn?${params}`);
-const { churnData } = await response.json();
-```
-
----
-
-### 5. GET /api/repositories/summary
-
-**Purpose**: Retrieve repository metadata and statistics.
-
-**Query Parameters**:
-
-```typescript
-{
-  repoUrl: string;      // Required - Git repository URL
-}
-```
-
-**Example Request**:
-
-```bash
-GET /api/repositories/summary?repoUrl=https://github.com/jonasyr/gitray.git
-```
-
-**Response Structure**:
-
-```typescript
-{
-  summary: {
-    repository: {
-      name: string;
-      owner: string;
-      url: string;
-      platform: 'github' | 'gitlab' | 'bitbucket' | 'other';
-      defaultBranch?: string;
-    };
-    created: {
-      date: string;       // ISO 8601
-      source: 'git-log' | 'github-api' | 'gitlab-api' | 'estimated';
-    };
-    age: {
-      years: number;
-      months: number;
-      formatted: string;  // e.g., "2.5y"
-    };
-    lastCommit: {
-      date: string;       // ISO 8601
-      relativeTime: string; // e.g., "2 days ago"
-      sha: string;
-      author: string;
-    };
-    stats: {
-      totalCommits: number;      // ⚠️ Important: nested under stats
-      contributors: number;       // ⚠️ Important: nested under stats
-      status: 'active' | 'inactive' | 'archived';
-    };
-    metadata: {
-      cached: boolean;
-      dataSource: 'git-sparse-clone' | 'cache';
-      createdDateAccuracy: 'exact' | 'approximate';
-      bandwidthSaved?: string;
-      lastUpdated: string;  // ISO 8601
-    };
-  }
-}
-```
-
-**Sample Response**:
-
-```json
-{
-  "summary": {
-    "repository": {
-      "name": "gitray",
-      "owner": "jonasyr",
-      "url": "https://github.com/jonasyr/gitray.git",
-      "platform": "github"
-    },
-    "stats": {
-      "totalCommits": 480,
-      "contributors": 6,
-      "status": "active"
-    },
-    "lastCommit": {
-      "date": "2024-12-02T08:15:00Z",
-      "relativeTime": "2 hours ago",
-      "sha": "abc123def456",
-      "author": "Jonas"
-    },
-    "metadata": {
-      "cached": true,
-      "dataSource": "cache"
-    }
-  }
-}
-```
-
-**⚠️ Critical Migration Note**:
-
-```typescript
-// ❌ WRONG - Old structure (will be undefined)
-const totalCommits = response.totalCommits;
-const contributors = response.totalContributors;
-
-// ✅ CORRECT - New nested structure
-const totalCommits = response.summary.stats.totalCommits;
-const contributors = response.summary.stats.contributors;  // Note: field is 'contributors', not 'totalContributors'
-```
-
----
-
-### 6. GET /api/repositories/full-data
-
-**Purpose**: Retrieve both commits and heatmap data in a single request with pagination and filters.
-
-**Query Parameters**:
-
-```typescript
-{
-  repoUrl: string;      // Required - Git repository URL
-  page?: number;        // Optional - Page number (default: 1)
-  limit?: number;       // Optional - Items per page (default: 100)
-  author?: string;      // Optional - Filter by single author
-  authors?: string;     // Optional - Comma-separated author list
-  fromDate?: string;    // Optional - Start date (ISO 8601)
-  toDate?: string;      // Optional - End date (ISO 8601)
-}
-```
-
-**Example Request**:
-
-```bash
-GET /api/repositories/full-data?repoUrl=https://github.com/user/repo.git&page=1&limit=20&fromDate=2024-01-01
-```
-
-**Response Structure**:
-
-```typescript
-{
-  commits: Commit[];        // Paginated commits
-  heatmapData: CommitHeatmapData;  // Filtered heatmap data
-  page: number;
-  limit: number;
-  isValidHeatmap: boolean;  // Backend validation flag
-}
-```
-
-**Sample Response**:
-
-```json
-{
-  "commits": [
-    {
-      "sha": "abc123",
-      "message": "Initial commit",
-      "author": { "name": "Jonas", "email": "jonas@example.com" },
-      "date": "2024-01-01T10:00:00Z"
-    }
-  ],
-  "heatmapData": {
-    "timePeriod": "day",
-    "data": [
-      { "date": "2024-01-01", "count": 1, "authors": 1 }
-    ]
-  },
-  "page": 1,
-  "limit": 20,
-  "isValidHeatmap": true
-}
-```
-
-**Migration Example**:
-
-```typescript
-// OLD (POST)
-const response = await fetch('/api/repositories/full-data', {
-  method: 'POST',
-  body: JSON.stringify({
-    repoUrl,
-    timePeriod: 'month',
-    filterOptions: { fromDate, toDate }
-  })
-});
-
-// NEW (GET)
-const params = new URLSearchParams({
-  repoUrl,
-  page: '1',
-  limit: '100'
-});
-if (fromDate) params.append('fromDate', fromDate);
-if (toDate) params.append('toDate', toDate);
-
-const response = await fetch(`/api/repositories/full-data?${params}`);
-const { commits, heatmapData, page, limit } = await response.json();
-```
-
----
-
-## Migration Patterns
-
-### Pattern 1: Basic POST → GET Migration
-
-```typescript
-// Before
-async function fetchData(repoUrl: string) {
-  const response = await apiClient.post('/api/repositories', { repoUrl });
-  return response.data;
-}
-
-// After
-async function fetchData(repoUrl: string) {
-  const params = new URLSearchParams({ repoUrl });
-  const response = await apiClient.get('/api/repositories/commits', { params });
-  return response.data;
-}
-```
-
-### Pattern 2: Handling Optional Filters
-
-```typescript
-function buildQueryParams(
-  repoUrl: string,
-  filters?: {
-    author?: string;
-    authors?: string[];
-    fromDate?: string;
-    toDate?: string;
-  }
-): URLSearchParams {
-  const params = new URLSearchParams({ repoUrl });
-  
-  if (filters?.author) {
-    params.append('author', filters.author);
-  }
-  
-  if (filters?.authors && filters.authors.length > 0) {
-    params.append('authors', filters.authors.join(','));
-  }
-  
-  if (filters?.fromDate) {
-    params.append('fromDate', filters.fromDate);
-  }
-  
-  if (filters?.toDate) {
-    params.append('toDate', filters.toDate);
-  }
-  
-  return params;
-}
-
-// Usage
-const params = buildQueryParams(repoUrl, { fromDate: '2024-01-01' });
-const response = await fetch(`/api/repositories/heatmap?${params}`);
-```
-
-### Pattern 3: Pagination Helper
-
-```typescript
-interface PaginationParams {
-  page?: number;
-  limit?: number;
-}
-
-function addPaginationParams(
-  params: URLSearchParams,
-  pagination?: PaginationParams
-): void {
-  const page = pagination?.page ?? 1;
-  const limit = pagination?.limit ?? 100;
-  
-  params.append('page', page.toString());
-  params.append('limit', limit.toString());
-}
-
-// Usage
-const params = new URLSearchParams({ repoUrl });
-addPaginationParams(params, { page: 2, limit: 50 });
-const response = await fetch(`/api/repositories/commits?${params}`);
-```
-
-### Pattern 4: Error Handling
-
-```typescript
-async function fetchWithErrorHandling<T>(
-  endpoint: string,
-  params: URLSearchParams
-): Promise<T> {
-  try {
-    const response = await fetch(`${endpoint}?${params}`);
-    
-    if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.message || `HTTP ${response.status}`);
-    }
-    
-    return await response.json();
-  } catch (error) {
-    console.error(`Failed to fetch ${endpoint}:`, error);
-    throw error;
-  }
-}
-
-// Usage
-const params = new URLSearchParams({ repoUrl });
-const data = await fetchWithErrorHandling('/api/repositories/summary', params);
-```
-
----
-
-## Query Parameter Guidelines
-
-### Arrays (authors, extensions)
-
-**Convert arrays to comma-separated strings**:
-
-```typescript
-// Array to comma-separated string
-const authors = ['alice', 'bob', 'charlie'];
-params.append('authors', authors.join(','));  // 'alice,bob,charlie'
-
-const extensions = ['ts', 'tsx', 'js'];
-params.append('extensions', extensions.join(','));  // 'ts,tsx,js'
-```
-
-### Dates (fromDate, toDate)
-
-**Use ISO 8601 format**:
-
-```typescript
-// Correct date formats
-params.append('fromDate', '2024-01-01');
-params.append('toDate', '2024-12-31');
-
-// Also accepts full ISO 8601
-params.append('fromDate', '2024-01-01T00:00:00Z');
-```
-
-### Numbers (page, limit, minChanges)
-
-**Convert numbers to strings**:
-
-```typescript
-params.append('page', page.toString());
-params.append('limit', limit.toString());
-params.append('minChanges', minChanges.toString());
-```
-
-### Conditional Parameters
-
-**Only include defined values**:
-
-```typescript
-// Good - only includes defined values
-if (author) params.append('author', author);
-if (fromDate) params.append('fromDate', fromDate);
-
-// Bad - includes undefined
-params.append('author', author || '');  // ❌ Don't do this
-```
-
----
-
-## Response Structure Changes
-
-### Summary Endpoint - Nested Stats
-
-**Critical**: The `summary` endpoint now returns deeply nested data.
-
-```typescript
-// ❌ WRONG - Old pattern (undefined)
-interface OldResponse {
-  totalCommits: number;
-  totalContributors: number;
-  status: string;
-}
-
-// ✅ CORRECT - New pattern
-interface NewResponse {
-  summary: {
-    repository: { name: string; owner: string; url: string; platform: string };
-    stats: {
-      totalCommits: number;      // Access via response.summary.stats.totalCommits
-      contributors: number;       // Note: 'contributors' not 'totalContributors'
-      status: string;
-    };
-    lastCommit: { date: string; sha: string; author: string };
-    metadata: { cached: boolean };
-  };
-}
-
-// Migration example
-function getTotalCommits(response: NewResponse): number {
-  return response.summary?.stats?.totalCommits ?? 0;
-}
-```
-
-### Heatmap Data - Always an Object
-
-```typescript
-// Backend returns this structure
-interface HeatmapResponse {
-  heatmapData: {
-    timePeriod: string;
-    data: Array<{ date: string; count: number }>;
-    metadata?: { totalCommits: number };
-  };
-}
-
-// Access pattern
-const dataPoints = response.heatmapData.data.length;
-const totalCommits = response.heatmapData.metadata?.totalCommits;
-```
-
-### Full-Data - Validation Flag
-
-```typescript
-interface FullDataResponse {
-  commits: Commit[];
-  heatmapData: CommitHeatmapData;
-  isValidHeatmap: boolean;  // Backend validation result
-}
-
-// Always check validation flag
-if (response.isValidHeatmap) {
-  renderHeatmap(response.heatmapData);
-} else {
-  console.warn('Invalid heatmap data structure');
-}
-```
-
----
-
-## Error Handling
-
-### HTTP Status Codes
-
-| Code | Meaning | Common Causes |
-|------|---------|---------------|
-| `400` | Bad Request | Missing `repoUrl`, invalid date format, invalid URL |
-| `404` | Not Found | Wrong endpoint path, typo in URL |
-| `422` | Validation Error | Invalid query parameter values |
-| `500` | Server Error | Cache failure, Git operation error |
-| `504` | Gateway Timeout | Large repository taking too long |
-
-### Validation Errors
-
-```typescript
-// Example validation error response
-{
-  "error": "Validation failed",
-  "details": [
-    {
-      "field": "repoUrl",
-      "message": "Invalid URL format"
-    },
-    {
-      "field": "fromDate",
-      "message": "Invalid date format, use YYYY-MM-DD"
-    }
-  ]
-}
-```
-
-### Error Handling Pattern
-
-```typescript
-async function handleApiCall<T>(
-  endpoint: string,
-  params: URLSearchParams
-): Promise<T | null> {
-  try {
-    const response = await fetch(`${endpoint}?${params}`);
-    
-    if (response.status === 400) {
-      const error = await response.json();
-      console.error('Validation error:', error.details);
-      return null;
-    }
-    
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-    
-    return await response.json();
-  } catch (error) {
-    console.error('API call failed:', error);
-    return null;
-  }
-}
-```
-
----
-
-## Testing Recommendations
-
-### 1. Test with Real Repository
-
-Use the GitRay repository for testing:
-
-```bash
-curl "http://localhost:3001/api/repositories/summary?repoUrl=https://github.com/jonasyr/gitray.git"
-```
-
-**Expected Results**:
-
-- `stats.totalCommits`: 480
-- `stats.contributors`: 6
-- `stats.status`: "active"
-
-### 2. Test Pagination
-
-```bash
-# Page 1
-curl "http://localhost:3001/api/repositories/commits?repoUrl=https://github.com/jonasyr/gitray.git&page=1&limit=10"
-
-# Page 2
-curl "http://localhost:3001/api/repositories/commits?repoUrl=https://github.com/jonasyr/gitray.git&page=2&limit=10"
-```
-
-### 3. Test Filters
-
-```bash
-# Date range filter
-curl "http://localhost:3001/api/repositories/heatmap?repoUrl=https://github.com/jonasyr/gitray.git&fromDate=2024-01-01&toDate=2024-12-31"
-
-# Author filter
-curl "http://localhost:3001/api/repositories/contributors?repoUrl=https://github.com/jonasyr/gitray.git&author=jonas"
-
-# Multiple authors
-curl "http://localhost:3001/api/repositories/heatmap?repoUrl=https://github.com/jonasyr/gitray.git&authors=jonas,contributor2"
-```
-
-### 4. Test Error Cases
-
-```bash
-# Missing repoUrl
-curl "http://localhost:3001/api/repositories/summary"
-# Expected: HTTP 400
-
-# Invalid date
-curl "http://localhost:3001/api/repositories/heatmap?repoUrl=https://github.com/jonasyr/gitray.git&fromDate=invalid"
-# Expected: HTTP 400
-```
-
-### 5. Automated Test Checklist
-
-- [ ] All endpoints return HTTP 200 with valid params
-- [ ] Pagination works correctly (page 1, 2, 3)
-- [ ] Date filters reduce result set appropriately
-- [ ] Author filters return subset of commits
-- [ ] Multiple authors filter works (comma-separated)
-- [ ] Invalid parameters return HTTP 400
-- [ ] Missing `repoUrl` returns HTTP 400
-- [ ] Response structures match documented types
-- [ ] `summary.stats.totalCommits` accessible and correct
-- [ ] Heatmap data has `timePeriod` and `data` fields
-- [ ] Full-data returns both `commits` and `heatmapData`
-
----
-
-## Common Pitfalls
-
-### 1. Using POST Instead of GET
-
-```typescript
-// ❌ WRONG - Will get HTTP 404
-fetch('/api/repositories/commits', {
-  method: 'POST',
-  body: JSON.stringify({ repoUrl })
-});
-
-// ✅ CORRECT
-const params = new URLSearchParams({ repoUrl });
-fetch(`/api/repositories/commits?${params}`);
-```
-
-### 2. Accessing Top-Level Fields in Summary
-
-```typescript
-// ❌ WRONG - Returns undefined
-const commits = response.totalCommits;
-
-// ✅ CORRECT - Access nested field
-const commits = response.summary.stats.totalCommits;
-```
-
-### 3. Incorrect Field Name
-
-```typescript
-// ❌ WRONG - Field doesn't exist
-const count = response.summary.stats.totalContributors;
-
-// ✅ CORRECT - Field is 'contributors'
-const count = response.summary.stats.contributors;
-```
-
-### 4. Arrays as JSON in Query Params
-
-```typescript
-// ❌ WRONG - Don't stringify arrays
-params.append('authors', JSON.stringify(['alice', 'bob']));
-
-// ✅ CORRECT - Comma-separated string
-params.append('authors', ['alice', 'bob'].join(','));
-```
-
-### 5. Not Handling Optional Parameters
-
-```typescript
-// ❌ WRONG - Includes undefined
-params.append('author', author);  // If author is undefined
-
-// ✅ CORRECT - Conditional inclusion
-if (author) params.append('author', author);
-```
-
-### 6. Incorrect Date Format
-
-```typescript
-// ❌ WRONG - Invalid format
-params.append('fromDate', '12/01/2024');
-
-// ✅ CORRECT - ISO 8601 format
-params.append('fromDate', '2024-12-01');
-```
-
----
-
-## Performance Considerations
-
-### Cache Behavior
-
-The backend uses multi-tier caching:
-
-- **Memory tier**: ~1ms response time
-- **Disk tier**: ~10-50ms response time
-- **Redis tier**: ~50-100ms response time
-- **Git clone**: 5-30 seconds (first request only)
-
-**Recommendations**:
-
-- First request will be slow (Git clone)
-- Subsequent requests with same parameters are fast (cache hit)
-- Different filter combinations create separate cache entries
-- Don't make unnecessary duplicate requests
-
-### Pagination Best Practices
-
-```typescript
-// Good - Use reasonable page sizes
-const limit = 50;  // ✅ Balanced
-
-// Avoid - Too small or too large
-const limit = 1;   // ❌ Too many requests
-const limit = 10000;  // ❌ Memory issues
-```
-
----
-
-## Summary Checklist
-
-Use this checklist when migrating your frontend:
-
-### Endpoints
-
-- [ ] Changed all POST requests to GET
-- [ ] Updated endpoint paths (`/repositories` → `/repositories/commits`)
-- [ ] Moved request body to query parameters
-
-### Parameters
-
-- [ ] Arrays converted to comma-separated strings
-- [ ] Dates in ISO 8601 format (`YYYY-MM-DD`)
-- [ ] Numbers converted to strings for query params
-- [ ] Conditional parameters only included if defined
-
-### Response Handling
-
-- [ ] Updated to access `response.summary.stats.totalCommits`
-- [ ] Using `contributors` instead of `totalContributors`
-- [ ] Handling nested `summary` object structure
-- [ ] Validating `isValidHeatmap` flag in full-data endpoint
-
-### Error Management
-
-- [ ] Handling HTTP 400 for validation errors
-- [ ] Handling HTTP 404 for incorrect endpoints
-- [ ] Graceful degradation on server errors
-- [ ] Logging errors for debugging
-
-### Testing
-
-- [ ] Tested all endpoints with valid parameters
-- [ ] Tested pagination (multiple pages)
-- [ ] Tested filters (author, date range)
-- [ ] Tested error cases (missing params, invalid format)
-- [ ] Verified response structures match documented types
-
----
-
-## Additional Resources
-
-- **Backend Repository Routes**: `apps/backend/src/routes/repositoryRoutes.ts`
-- **Shared Types Package**: `packages/shared-types/src/index.ts`
-- **API Test Script**: `test-api-phase1.sh`
-- **Test Scenarios Documentation**: `scripts/api_test_scenarios.md`
-
----
-
-## Questions or Issues?
-
-If you encounter problems during migration:
-
-1. **Check backend logs** - Detailed error messages are logged
-2. **Verify query parameters** - Use browser DevTools Network tab
-3. **Test with curl** - Isolate frontend vs backend issues
-4. **Review response structure** - Compare against documented types
-5. **Check SonarQube** - Code quality issues may surface
-
-For the most up-to-date backend implementation, always refer to the source code in `apps/backend/src/routes/repositoryRoutes.ts`.
diff --git a/GEMINI.md b/GEMINI.md
index 17ffb394..9960f2ff 100644
--- a/GEMINI.md
+++ b/GEMINI.md
@@ -1,4 +1,5 @@
 <!-- markdownlint-disable -->
+
 # GitRay
 
 GitRay is a production-ready Git repository analysis and visualization platform that transforms commit history into interactive visualizations such as heatmaps, commit statistics, code churn analysis and time-series aggregations.
diff --git a/README.md b/README.md
index 7a6287ac..22240b0f 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](LICENSE)
 [![Node.js](https://img.shields.io/badge/Node.js-18%2B-green.svg)](https://nodejs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue.svg)](https://www.typescriptlang.org/)
-[![React](https://img.shields.io/badge/React-19-blue.svg)](https://reactjs.org/)
+[![React](https://img.shields.io/badge/React-18.3-blue.svg)](https://reactjs.org/)
 [![Test Coverage](https://img.shields.io/badge/Coverage-86.4%25-brightgreen.svg)](coverage/index.html)
 [![DeepWiki](https://img.shields.io/badge/DeepWiki-jonasyr%2Fgitray-blue.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAyCAYAAAAnWDnqAAAAAXNSR0IArs4c6QAAA05JREFUaEPtmUtyEzEQhtWTQyQLHNak2AB7ZnyXZMEjXMGeK/AIi+QuHrMnbChYY7MIh8g01fJoopFb0uhhEqqcbWTp06/uv1saEDv4O3n3dV60RfP947Mm9/SQc0ICFQgzfc4CYZoTPAswgSJCCUJUnAAoRHOAUOcATwbmVLWdGoH//PB8mnKqScAhsD0kYP3j/Yt5LPQe2KvcXmGvRHcDnpxfL2zOYJ1mFwrryWTz0advv1Ut4CJgf5uhDuDj5eUcAUoahrdY/56ebRWeraTjMt/00Sh3UDtjgHtQNHwcRGOC98BJEAEymycmYcWwOprTgcB6VZ5JK5TAJ+fXGLBm3FDAmn6oPPjR4rKCAoJCal2eAiQp2x0vxTPB3ALO2CRkwmDy5WohzBDwSEFKRwPbknEggCPB/imwrycgxX2NzoMCHhPkDwqYMr9tRcP5qNrMZHkVnOjRMWwLCcr8ohBVb1OMjxLwGCvjTikrsBOiA6fNyCrm8V1rP93iVPpwaE+gO0SsWmPiXB+jikdf6SizrT5qKasx5j8ABbHpFTx+vFXp9EnYQmLx02h1QTTrl6eDqxLnGjporxl3NL3agEvXdT0WmEost648sQOYAeJS9Q7bfUVoMGnjo4AZdUMQku50McDcMWcBPvr0SzbTAFDfvJqwLzgxwATnCgnp4wDl6Aa+Ax283gghmj+vj7feE2KBBRMW3FzOpLOADl0Isb5587h/U4gGvkt5v60Z1VLG8BhYjbzRwyQZemwAd6cCR5/XFWLYZRIMpX39AR0tjaGGiGzLVyhse5C9RKC6ai42ppWPKiBagOvaYk8lO7DajerabOZP46Lby5wKjw1HCRx7p9sVMOWGzb/vA1hwiWc6jm3MvQDTogQkiqIhJV0nBQBTU+3okKCFDy9WwferkHjtxib7t3xIUQtHxnIwtx4mpg26/HfwVNVDb4oI9RHmx5WGelRVlrtiw43zboCLaxv46AZeB3IlTkwouebTr1y2NjSpHz68WNFjHvupy3q8TFn3Hos2IAk4Ju5dCo8B3wP7VPr/FGaKiG+T+v+TQqIrOqMTL1VdWV1DdmcbO8KXBz6esmYWYKPwDL5b5FA1a0hwapHiom0r/cKaoqr+27/XcrS5UwSMbQAAAABJRU5ErkJggg==)](https://deepwiki.com/jonasyr/gitray)
 
@@ -100,11 +100,22 @@ gitray/
 
 **Frontend:**
 
-- React 19 with TypeScript
-- Vite for fast development and building
-- Tailwind CSS for styling
+- React 18.3 with TypeScript
+- Vite 6.3.5 for fast development and building
+- Tailwind CSS 4.1.7 for styling
+- shadcn/ui component library (built on Radix UI primitives)
+- Radix UI components for accessible UI primitives (20+ components including Dialog, Select,
+  Dropdown, Tabs, etc.)
+- Recharts for data visualizations and charts
+- Lucide React for icons
 - Rive for interactive animations
-- React Calendar Heatmap for visualizations
+- React Hook Form for form management
+- Sonner for toast notifications
+- next-themes for theme management
+- Embla Carousel for carousels
+- cmdk for command menu
+- class-variance-authority (CVA) for component variants
+- tailwind-merge for className merging
 
 **Development:**
 
@@ -438,7 +449,7 @@ pnpm test
 # Frontend tests only
 pnpm test:frontend
 
-# Backend tests only  
+# Backend tests only
 pnpm test:backend
 
 # Watch mode for development
@@ -451,7 +462,7 @@ pnpm test:coverage
 ### Test Structure
 
 - **Unit Tests**: Component and service-level testing
-- **Integration Tests**: API endpoint and workflow testing  
+- **Integration Tests**: API endpoint and workflow testing
 - **Performance Tests**: Cache and memory management testing
 - **E2E Tests**: Full user workflow testing
 
@@ -680,7 +691,7 @@ We welcome contributions! Please read our contributing guidelines.
 ```bash
 # Example commit messages
 feat: add repository coordination system
-fix: resolve memory leak in cache manager  
+fix: resolve memory leak in cache manager
 docs: update API documentation
 test: add integration tests for heatmap
 ```
@@ -825,7 +836,10 @@ The backend API is documented through:
 
 ## Acknowledgements
 
-- [React Calendar Heatmap](https://github.com/kevinsqi/react-calendar-heatmap) for visualization components
+- [shadcn/ui](https://ui.shadcn.com/) for beautiful, accessible component library
+- [Radix UI](https://www.radix-ui.com/) for robust UI primitives
+- [Recharts](https://recharts.org/) for visualization components
+- [Lucide React](https://lucide.dev/) for icons
 - [Rive](https://rive.app/) for interactive animations
 - [simple-git](https://github.com/steveukx/git-js) for Git operations
 - The open-source community for inspiration and tools
diff --git a/Strategy.md b/Strategy.md
index e4ad4dd0..96579a0a 100644
--- a/Strategy.md
+++ b/Strategy.md
@@ -85,7 +85,6 @@ Einfaches Aufgabenmanagement mit GitHub Issues & Kanban-Board:
 - Regel: **Keine Commits direkt auf `main` oder `dev`**
 
 - PRs sollten:
-
   - Review durch den anderen bekommen
 
   - mit einer kleinen Beschreibung versehen sein
@@ -111,7 +110,6 @@ Kurze Beschreibung der Änderung.
 ## ⚙️ **CI/CD**
 
 - Nutzt GitHub Actions:
-
   - `npm run test`
 
   - `eslint .`
@@ -155,7 +153,6 @@ Klarheit über Zusammenarbeit:
 - Verwendet `.env.example` für Umgebungsvariablen
 
 - Macht Commits sprechend, z. B.:
-
   - `feat: add interactive commit graph`
 
   - `fix: resolve layout bug on zoom`
diff --git a/apps/backend/__tests__/unit/services/repositorySummaryService.unit.test.ts b/apps/backend/__tests__/unit/services/repositorySummaryService.unit.test.ts
index fb7772bb..1afe37c3 100644
--- a/apps/backend/__tests__/unit/services/repositorySummaryService.unit.test.ts
+++ b/apps/backend/__tests__/unit/services/repositorySummaryService.unit.test.ts
@@ -131,7 +131,7 @@ describe('RepositorySummaryService', () => {
         .mockResolvedValueOnce('100\n') // rev-list --count
         .mockResolvedValueOnce('2011-03-22T00:00:00.000Z\n') // log --reverse (first commit)
         .mockResolvedValueOnce(
-          '2025-11-15T10:30:00.000Z|abc123def|Test Author\n'
+          `${new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()}|abc123def|Test Author\n`
         ) // log -1 (last commit)
         .mockResolvedValueOnce('     10  Author One\n      5  Author Two\n'); // shortlog
 
diff --git a/apps/backend/perf/README.md b/apps/backend/perf/README.md
index a6425c99..eeb85e5e 100644
--- a/apps/backend/perf/README.md
+++ b/apps/backend/perf/README.md
@@ -106,17 +106,14 @@ The test suite enforces these performance thresholds:
 The load test simulates realistic usage patterns with weighted scenarios:
 
 1. **Health Check** (10% of traffic)
-
    - Simple GET requests to `/health`
    - Validates service availability
 
 2. **Get Repository Commits** (40% of traffic)
-
    - POST requests to `/api/repositories`
    - Tests git cloning and commit retrieval
 
 3. **Get Heatmap Data** (30% of traffic)
-
    - GET requests to `/api/commits/heatmap`
    - Tests data aggregation and caching
 
diff --git a/apps/backend/src/services/gitService.ts b/apps/backend/src/services/gitService.ts
index 561991b1..fb19d867 100644
--- a/apps/backend/src/services/gitService.ts
+++ b/apps/backend/src/services/gitService.ts
@@ -1234,6 +1234,11 @@ class GitService {
     // Sort by changes (descending) - highest churn files first
     filtered.sort((a, b) => b.changes - a.changes);
 
+    // Apply limit if specified
+    if (options?.limit !== undefined && options.limit > 0) {
+      filtered = filtered.slice(0, options.limit);
+    }
+
     return filtered;
   }
 
diff --git a/apps/backend/test-config-dynamic.mjs b/apps/backend/test-config-dynamic.mjs
index 39ef6d75..b47e55b8 100644
--- a/apps/backend/test-config-dynamic.mjs
+++ b/apps/backend/test-config-dynamic.mjs
@@ -4,13 +4,13 @@
 
 /**
  * Comprehensive Environment Variable Test Script with Auto-Discovery
- * 
+ *
  * This script automatically discovers ALL environment variables in .env
  * and dynamically maps them to their config paths by:
  * 1. Auto-discovery phase - maps each env var to its config location
  * 2. Current values test - verifies env vars match current config
  * 3. Dynamic change test - verifies changing env vars affects config
- * 
+ *
  * NO HARDCODED MAPPINGS NEEDED! ✨
  */
 
@@ -27,40 +27,45 @@ let ENV_TO_CONFIG_MAP = {};
 // Deep object comparison to find changed paths
 function deepCompare(obj1, obj2, path = '') {
   const changes = [];
-  
+
   if (obj1 === obj2) return changes;
-  
-  if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
+
+  if (
+    typeof obj1 !== 'object' ||
+    typeof obj2 !== 'object' ||
+    obj1 === null ||
+    obj2 === null
+  ) {
     if (obj1 !== obj2) {
       changes.push({ path, oldValue: obj1, newValue: obj2 });
     }
     return changes;
   }
-  
+
   const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
-  
+
   for (const key of allKeys) {
     const newPath = path ? `${path}.${key}` : key;
     const subChanges = deepCompare(obj1[key], obj2[key], newPath);
     changes.push(...subChanges);
   }
-  
+
   return changes;
 }
 
 // Create a getter function for a config path
 function createConfigGetter(path) {
-  return function(config) {
+  return function (config) {
     const parts = path.split('.');
     let current = config;
-    
+
     for (const part of parts) {
       if (current === null || current === undefined) {
         return undefined;
       }
       current = current[part];
     }
-    
+
     return current;
   };
 }
@@ -70,79 +75,85 @@ async function discoverEnvVarMapping(envVar, originalValue) {
   try {
     // Load original config
     const originalConfig = await loadConfig();
-    
+
     // First, check if this variable is accessed directly via process.env
     // by testing if changing the env var affects process.env but not config
     await modifyEnvValue(envVar, DISCOVERY_TEST_VALUE);
-    
+
     if (process.env[envVar] === DISCOVERY_TEST_VALUE) {
       // This variable is available in process.env, create a direct getter
       await modifyEnvValue(envVar, originalValue);
-      return function() { return process.env[envVar]; };
+      return function () {
+        return process.env[envVar];
+      };
     }
-    
+
     // Generate multiple test values to handle different types
     const testValues = [
       DISCOVERY_TEST_VALUE, // string
-      '12345',             // number
-      'true',              // boolean true
-      'false',             // boolean false
-      '99'                 // percentage/small number
+      '12345', // number
+      'true', // boolean true
+      'false', // boolean false
+      '99', // percentage/small number
     ];
-    
+
     for (const testValue of testValues) {
       // Set test value
       await modifyEnvValue(envVar, testValue);
-      
+
       // Load modified config
       const modifiedConfig = await loadConfig();
-      
+
       // Find what changed
       const changes = deepCompare(originalConfig, modifiedConfig);
-      
+
       // Look for changes that could match this test value
-      const relevantChanges = changes.filter(change => {
+      const relevantChanges = changes.filter((change) => {
         const newVal = change.newValue;
-        
+
         // Direct string match
         if (newVal === testValue) return true;
-        
+
         // Boolean conversion
         if (testValue === 'true' && newVal === true) return true;
         if (testValue === 'false' && newVal === false) return true;
-        
+
         // Number conversion
         if (!isNaN(testValue) && newVal === parseInt(testValue)) return true;
         if (!isNaN(testValue) && newVal === parseFloat(testValue)) return true;
-        
+
         // Percentage conversion (divide by 100)
-        if (!isNaN(testValue) && newVal === parseFloat(testValue) / 100) return true;
-        
+        if (!isNaN(testValue) && newVal === parseFloat(testValue) / 100)
+          return true;
+
         // GB conversion (multiply by 1024^3)
-        if (!isNaN(testValue) && newVal === parseFloat(testValue) * 1024**3) return true;
-        
+        if (!isNaN(testValue) && newVal === parseFloat(testValue) * 1024 ** 3)
+          return true;
+
         // Bytes conversion (round from bytes to GB)
-        return !isNaN(testValue) && Math.round(newVal / 1024**3) === parseInt(testValue);
+        return (
+          !isNaN(testValue) &&
+          Math.round(newVal / 1024 ** 3) === parseInt(testValue)
+        );
       });
-      
+
       if (relevantChanges.length === 1) {
         // Restore original value before returning
         await modifyEnvValue(envVar, originalValue);
         return createConfigGetter(relevantChanges[0].path);
       } else if (relevantChanges.length > 1) {
         // Multiple matches - pick the most specific one
-        const shortestPath = relevantChanges.reduce((shortest, current) => 
+        const shortestPath = relevantChanges.reduce((shortest, current) =>
           current.path.length < shortest.path.length ? current : shortest
         );
         await modifyEnvValue(envVar, originalValue);
         return createConfigGetter(shortestPath.path);
       }
     }
-    
+
     // Restore original value
     await modifyEnvValue(envVar, originalValue);
     return null;
-    
   } catch (error) {
     console.warn(`Failed to discover mapping for ${envVar}: ${error.message}`);
     // Try to restore original value
@@ -158,17 +169,17 @@ async function discoverEnvVarMapping(envVar, originalValue) {
 // Auto-discover all environment variable mappings
 async function discoverAllMappings() {
   console.log('🔍 AUTO-DISCOVERING environment variable mappings...');
-  
+
   const envVars = parseEnvFile();
   const discoveries = [];
   let discovered = 0;
   let failed = 0;
-  
+
   for (const [envVar, originalValue] of Object.entries(envVars)) {
     process.stdout.write(`⏳ Discovering ${envVar}... `);
-    
+
     const getter = await discoverEnvVarMapping(envVar, originalValue);
-    
+
     if (getter) {
       ENV_TO_CONFIG_MAP[envVar] = getter;
       console.log(`✅`);
@@ -176,17 +187,23 @@ async function discoverAllMappings() {
     } else {
       // For unmapped variables, create a direct process.env accessor as fallback
       // This will catch variables that are used directly without going through config
-      ENV_TO_CONFIG_MAP[envVar] = function() { return process.env[envVar]; };
+      ENV_TO_CONFIG_MAP[envVar] = function () {
+        return process.env[envVar];
+      };
       console.log(`✅ (direct process.env access)`);
       discovered++;
     }
-    
+
     discoveries.push({ envVar, found: true }); // All variables are now "found"
   }
-  
-  console.log(`\n📊 DISCOVERY RESULTS: ${discovered}/${discovered + failed} mappings found`);
-  console.log(`✨ All environment variables mapped (config object + direct process.env access)`);
-  
+
+  console.log(
+    `\n📊 DISCOVERY RESULTS: ${discovered}/${discovered + failed} mappings found`
+  );
+  console.log(
+    `✨ All environment variables mapped (config object + direct process.env access)`
+  );
+
   return discoveries;
 }
 
@@ -194,8 +211,8 @@ async function discoverAllMappings() {
 function parseEnvFile() {
   const envContent = fs.readFileSync(ENV_FILE, 'utf8');
   const envVars = {};
-  
-  envContent.split('\n').forEach(line => {
+
+  envContent.split('\n').forEach((line) => {
     const trimmed = line.trim();
     if (trimmed && !trimmed.startsWith('#') && trimmed.includes('=')) {
       const [key, ...valueParts] = trimmed.split('=');
@@ -203,7 +220,7 @@ function parseEnvFile() {
       envVars[key] = value;
     }
   });
-  
+
   return envVars;
 }
 
@@ -219,27 +236,27 @@ async function restoreEnvFile() {
 async function modifyEnvValue(envVar, newValue) {
   const envContent = await fs.promises.readFile(ENV_FILE, 'utf8');
   const lines = envContent.split('\n');
-  
+
   let found = false;
-  const newLines = lines.map(line => {
+  const newLines = lines.map((line) => {
     if (line.startsWith(`${envVar}=`)) {
       found = true;
       return `${envVar}=${newValue}`;
     }
     return line;
   });
-  
+
   if (!found) {
     throw new Error(`Environment variable ${envVar} not found in .env file`);
   }
-  
+
   await fs.promises.writeFile(ENV_FILE, newLines.join('\n'));
 }
 
 async function loadConfig() {
   // Reload dotenv with override
   dotenv.config({ override: true });
-  
+
   // Import fresh config with timestamp to avoid caching
   const configModule = await import(`./dist/src/config.js?${Date.now()}`);
   return configModule.config;
@@ -247,19 +264,19 @@ async function loadConfig() {
 
 function normalizeValue(value, envValue) {
   if (value === undefined || value === null) return value;
-  
+
   // Handle boolean values
   if (typeof value === 'boolean') {
     if (envValue === 'true') return true;
     if (envValue === 'false') return false;
   }
-  
+
   // Handle numeric values
   if (typeof value === 'number') {
     const numValue = parseFloat(envValue);
     return isNaN(numValue) ? envValue : numValue;
   }
-  
+
   return value;
 }
 
@@ -270,15 +287,17 @@ function generateTestValue(originalValue) {
   if (originalValue === 'development') return 'production';
   if (originalValue === 'localhost') return '127.0.0.1';
   if (originalValue === 'info') return 'debug';
-  if (originalValue.startsWith('./')) return originalValue.replace('./', './test-');
-  if (originalValue.includes(':')) return originalValue.replace('gitray:', 'test:');
-  
+  if (originalValue.startsWith('./'))
+    return originalValue.replace('./', './test-');
+  if (originalValue.includes(':'))
+    return originalValue.replace('gitray:', 'test:');
+
   // For numbers, increase by 50%
   const num = parseFloat(originalValue);
   if (!isNaN(num)) {
     return Math.floor(num * 1.5).toString();
   }
-  
+
   // Default: append suffix
   return originalValue + '_test';
 }
@@ -287,11 +306,14 @@ function generateTestValue(originalValue) {
 async function testSingleCurrentValue(envVar, envValue, config) {
   const configValue = ENV_TO_CONFIG_MAP[envVar](config);
   const normalizedConfigValue = normalizeValue(configValue, envValue);
-  
+
   let match = false;
-  
+
   // Handle empty/undefined values
-  if ((envValue === '' || envValue === undefined) && (configValue === undefined || configValue === null)) {
+  if (
+    (envValue === '' || envValue === undefined) &&
+    (configValue === undefined || configValue === null)
+  ) {
     match = true;
   } else {
     // Convert envValue to appropriate type for comparison
@@ -301,28 +323,32 @@ async function testSingleCurrentValue(envVar, envValue, config) {
     } else if (typeof normalizedConfigValue === 'number') {
       compareEnvValue = parseFloat(envValue);
     }
-    
+
     match = compareEnvValue == normalizedConfigValue;
   }
-  
+
   return { match, configValue, normalizedConfigValue };
 }
 
 async function testCurrentValues() {
   console.log('🔍 PHASE 1: Testing current .env values match config...');
-  
+
   const envVars = parseEnvFile();
   const config = await loadConfig();
   const results = [];
-  
+
   let passed = 0;
   let failed = 0;
-  
+
   for (const [envVar, envValue] of Object.entries(envVars)) {
     if (ENV_TO_CONFIG_MAP[envVar]) {
       try {
-        const { match, configValue } = await testSingleCurrentValue(envVar, envValue, config);
-        
+        const { match, configValue } = await testSingleCurrentValue(
+          envVar,
+          envValue,
+          config
+        );
+
         if (match) {
           console.log(`✅ ${envVar}`);
           passed++;
@@ -330,19 +356,27 @@ async function testCurrentValues() {
           console.log(`❌ ${envVar}: "${envValue}" → "${configValue}"`);
           failed++;
         }
-        
+
         results.push({ envVar, envValue, configValue, match });
       } catch (error) {
         console.log(`❌ ${envVar}: ERROR - ${error.message}`);
         failed++;
-        results.push({ envVar, envValue, configValue: null, match: false, error: error.message });
+        results.push({
+          envVar,
+          envValue,
+          configValue: null,
+          match: false,
+          error: error.message,
+        });
       }
     } else {
       console.log(`⚠️  ${envVar}: No config mapping found`);
     }
   }
-  
-  console.log(`\n📊 PHASE 1 RESULTS: ${passed}/${passed + failed} current values match`);
+
+  console.log(
+    `\n📊 PHASE 1 RESULTS: ${passed}/${passed + failed} current values match`
+  );
   return { results, passed, failed };
 }
 
@@ -350,37 +384,40 @@ async function testCurrentValues() {
 async function testSingleDynamicChange(envVar, originalValue) {
   // Generate test value
   const testValue = generateTestValue(originalValue);
-  
+
   // Load original config
   const originalConfig = await loadConfig();
   const originalConfigValue = ENV_TO_CONFIG_MAP[envVar](originalConfig);
-  
+
   // Modify env file
   await modifyEnvValue(envVar, testValue);
-  
+
   // Reload environment variables to pick up changes
   dotenv.config({ path: ENV_FILE, override: true });
-  
+
   // Load modified config
   const modifiedConfig = await loadConfig();
   const modifiedConfigValue = ENV_TO_CONFIG_MAP[envVar](modifiedConfig);
-  
+
   // Smart expected value calculation
   let expectedValue = testValue;
-  
+
   // For direct process.env access, the expected value is always the string value
-  if (typeof originalConfigValue === 'string' && originalConfigValue === originalValue) {
+  if (
+    typeof originalConfigValue === 'string' &&
+    originalConfigValue === originalValue
+  ) {
     expectedValue = testValue;
   } else if (typeof originalConfigValue === 'boolean') {
     expectedValue = testValue === 'true';
   } else if (typeof originalConfigValue === 'number') {
     const testNum = parseFloat(testValue);
     const originalNum = parseFloat(originalValue);
-    
+
     if (!isNaN(testNum) && !isNaN(originalNum)) {
       // Check if this looks like a GB conversion (bytes = GB * 1024^3)
-      if (originalConfigValue === originalNum * 1024**3) {
-        expectedValue = testNum * 1024**3;
+      if (originalConfigValue === originalNum * 1024 ** 3) {
+        expectedValue = testNum * 1024 ** 3;
       }
       // Check if this looks like a percentage conversion (config = env / 100)
       else if (Math.abs(originalConfigValue - originalNum / 100) < 0.001) {
@@ -396,106 +433,122 @@ async function testSingleDynamicChange(envVar, originalValue) {
       }
     }
   }
-  
-  const success = Math.abs(modifiedConfigValue - expectedValue) < 0.001 || modifiedConfigValue == expectedValue;
-  
+
+  const success =
+    Math.abs(modifiedConfigValue - expectedValue) < 0.001 ||
+    modifiedConfigValue == expectedValue;
+
   return {
     testValue,
     originalConfigValue,
     modifiedConfigValue,
     expectedValue,
-    success
+    success,
   };
 }
 
 async function testDynamicChanges() {
   console.log('\n🔄 PHASE 2: Testing dynamic value changes...');
-  
+
   const envVars = parseEnvFile();
   const results = [];
-  
+
   let passed = 0;
   let failed = 0;
-  
+
   for (const [envVar, originalValue] of Object.entries(envVars)) {
     if (ENV_TO_CONFIG_MAP[envVar]) {
       try {
         const testResult = await testSingleDynamicChange(envVar, originalValue);
-        
+
         if (testResult.success) {
           console.log(`✅ ${envVar}`);
           passed++;
         } else {
-          console.log(`❌ ${envVar}: Expected ${testResult.expectedValue}, got ${testResult.modifiedConfigValue}`);
+          console.log(
+            `❌ ${envVar}: Expected ${testResult.expectedValue}, got ${testResult.modifiedConfigValue}`
+          );
           failed++;
         }
-        
+
         results.push({ envVar, originalValue, ...testResult });
-        
+
         // Restore original value
         await modifyEnvValue(envVar, originalValue);
-        
       } catch (error) {
         console.log(`❌ ${envVar}: ERROR - ${error.message}`);
         failed++;
         results.push({ envVar, success: false, error: error.message });
-        
+
         // Try to restore original value
         try {
           await modifyEnvValue(envVar, originalValue);
         } catch (restoreError) {
-          console.log(`⚠️  Failed to restore ${envVar}: ${restoreError.message}`);
+          console.log(
+            `⚠️  Failed to restore ${envVar}: ${restoreError.message}`
+          );
         }
       }
     }
   }
-  
-  console.log(`\n📊 PHASE 2 RESULTS: ${passed}/${passed + failed} dynamic changes work`);
+
+  console.log(
+    `\n📊 PHASE 2 RESULTS: ${passed}/${passed + failed} dynamic changes work`
+  );
   return { results, passed, failed };
 }
 
 async function main() {
   console.log('🧪 COMPREHENSIVE ENVIRONMENT VARIABLE TEST WITH AUTO-DISCOVERY');
   console.log('=============================================================');
-  
+
   const envVars = parseEnvFile();
   const totalVars = Object.keys(envVars).length;
-  
+
   console.log(`Found ${totalVars} environment variables\n`);
-  
+
   try {
     // Backup original .env
     await backupEnvFile();
-    
+
     // Phase 0: Auto-discover mappings
     await discoverAllMappings();
-    
+
     const mappedVars = Object.keys(ENV_TO_CONFIG_MAP).length;
-    console.log(`\nTesting ${mappedVars} variables with discovered config mappings\n`);
-    
+    console.log(
+      `\nTesting ${mappedVars} variables with discovered config mappings\n`
+    );
+
     if (mappedVars === 0) {
       console.log('❌ No mappings discovered! Cannot proceed with testing.');
       return;
     }
-    
+
     // Phase 1: Test current values
     const phase1Results = await testCurrentValues();
-    
+
     // Phase 2: Test dynamic changes
     const phase2Results = await testDynamicChanges();
-    
+
     // Final summary
     console.log('\n🎯 FINAL SUMMARY:');
     console.log('=================');
     console.log(`Auto-discovery: ${mappedVars}/${totalVars} mappings found`);
-    console.log(`Phase 1 - Current values: ${phase1Results.passed}/${phase1Results.passed + phase1Results.failed} ✅`);
-    console.log(`Phase 2 - Dynamic changes: ${phase2Results.passed}/${phase2Results.passed + phase2Results.failed} ✅`);
-    
+    console.log(
+      `Phase 1 - Current values: ${phase1Results.passed}/${phase1Results.passed + phase1Results.failed} ✅`
+    );
+    console.log(
+      `Phase 2 - Dynamic changes: ${phase2Results.passed}/${phase2Results.passed + phase2Results.failed} ✅`
+    );
+
     const totalPassed = phase1Results.passed + phase2Results.passed;
-    const totalTests = (phase1Results.passed + phase1Results.failed) + (phase2Results.passed + phase2Results.failed);
-    
+    const totalTests =
+      phase1Results.passed +
+      phase1Results.failed +
+      (phase2Results.passed + phase2Results.failed);
+
     console.log(`\nOverall: ${totalPassed}/${totalTests} tests passed`);
-    
+
     if (phase1Results.failed === 0 && phase2Results.failed === 0) {
       console.log('\n🎉 ALL DISCOVERED ENVIRONMENT VARIABLES WORK PERFECTLY!');
       console.log('✅ Current values match config');
@@ -504,12 +557,13 @@ async function main() {
     } else {
       console.log('\n⚠️  Some tests failed. Check the configuration system.');
     }
-    
+
     if (mappedVars < totalVars) {
       const unmapped = totalVars - mappedVars;
-      console.log(`\nℹ️  ${unmapped} environment variables have no config mapping (may be unused)`);
+      console.log(
+        `\nℹ️  ${unmapped} environment variables have no config mapping (may be unused)`
+      );
     }
-    
   } catch (error) {
     console.error('❌ Test execution failed:', error.message);
   } finally {
diff --git a/apps/frontend/.env.example b/apps/frontend/.env.example
new file mode 100644
index 00000000..e6b4f797
--- /dev/null
+++ b/apps/frontend/.env.example
@@ -0,0 +1,22 @@
+# =============================================================================
+# GITRAY FRONTEND CONFIGURATION - EXAMPLE
+# =============================================================================
+#
+# 🚀 SETUP INSTRUCTIONS:
+# 1. Copy this file to .env: cp .env.example .env
+# 2. In development: Leave VITE_API_URL empty (uses Vite proxy)
+# 3. In production: Set VITE_API_URL to your backend URL
+#
+# 📝 NOTES:
+# - This file shows the environment variables needed for the frontend
+# - Modify .env (not this file) for your actual configuration
+# - .env is gitignored to prevent accidental commits of local settings
+# =============================================================================
+
+# -----------------------------------------------------------------------------
+# API CONFIGURATION
+# -----------------------------------------------------------------------------
+# Backend API URL
+# - Development: Leave empty or comment out (Vite proxy forwards /api to localhost:3001)
+# - Production: Set to your backend URL (e.g., https://api.yourdomain.com)
+VITE_API_URL=
diff --git a/apps/frontend/.gitignore b/apps/frontend/.gitignore
deleted file mode 100644
index a547bf36..00000000
--- a/apps/frontend/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/apps/frontend/README.md b/apps/frontend/README.md
index b7a941b9..9398866c 100644
--- a/apps/frontend/README.md
+++ b/apps/frontend/README.md
@@ -1,61 +1,178 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite  
-with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)  
-  uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)  
-  uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the  
-configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-
-You can also install
-eslint-plugin-react-x
-and
-eslint-plugin-react-dom
-for React‑specific lint rules:
-
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+# GitRay Frontend
 
+The modern, redesigned frontend for GitRay - a Git repository analysis and
+visualization platform built with React, TypeScript, and shadcn/ui.
+
+## 🎨 Design
+
+This frontend is based on the **GitRay Web App Design** and implements a
+complete UI redesign with shadcn/ui components.
+
+## 🚀 Tech Stack
+
+- **React 18.3** - UI library
+- **TypeScript 5.7** - Type safety
+- **Vite 6.3** - Build tool with HMR
+- **Tailwind CSS 4.1** - Utility-first styling
+- **shadcn/ui** - High-quality component library built on Radix UI
+- **Radix UI** - 20+ accessible UI primitives (Dialog, Select, Dropdown, Tabs, Tooltip, etc.)
+- **Recharts** - Charting library for data visualization
+- **Axios** - HTTP client
+- **Lucide React** - Icon library
+- **@rive-app/react-canvas** - Interactive animations
+- **React Hook Form** - Form state management
+- **Sonner** - Toast notifications
+- **next-themes** - Theme management (dark/light mode)
+- **cmdk** - Command menu component
+- **class-variance-authority** - Component variant management
+
+## 📦 Installation
+
+From the project root:
+
+```bash
+# Install all workspace dependencies
+pnpm install
+
+# Or install only frontend dependencies
+pnpm --filter frontend install
+```
+
+## 🛠️ Development
+
+```bash
+# Start development server (from project root)
+pnpm dev:frontend
+
+# Or from this directory
+pnpm dev
+
+# Start with full stack (Redis + Backend + Frontend)
+pnpm start
+```
+
+The development server runs on `http://localhost:5173` with hot module replacement (HMR) enabled.
+
+## 🏗️ Build
+
+```bash
+# Build for production
+pnpm build
+
+# Preview production build
+pnpm preview
+```
+
+Output directory: `build/`
+
+## 🧪 Testing
+
+```bash
+# Run tests once
+pnpm test
+
+# Run tests in watch mode
+pnpm test:watch
+
+# Generate coverage report
+pnpm test:coverage
+```
+
+### Test Structure
+
+Tests are organized in the `__tests__/` directory:
+
+```text
+__tests__/
+├── components/       # Component unit tests
+├── services/         # API service tests
+├── utils/           # Utility function tests
+└── example.test.tsx # Example test template
 ```
+
+### Writing Tests
+
+Use the `example.test.tsx` file as a template for creating new tests:
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import YourComponent from '../components/YourComponent';
+
+describe('YourComponent', () => {
+  it('should render successfully', () => {
+    render(<YourComponent />);
+    expect(screen.getByText('Expected Text')).toBeInTheDocument();
+  });
+});
+```
+
+### Test Utilities
+
+The `src/test-setup.ts` file provides:
+
+- **Jest-DOM matchers** for better assertions
+- **Automatic cleanup** after each test
+- **window.matchMedia mock** for components using media queries
+- **React 18 compatibility** setup
+
+## 📁 Project Structure
+
+```text
+apps/frontend/
+├── src/
+│   ├── components/          # React components
+│   │   ├── ui/             # shadcn/ui base components
+│   │   └── figma/          # Figma-specific components
+│   ├── services/           # API services
+│   ├── styles/             # Global styles
+│   └── main.tsx            # Application entry point
+├── __tests__/              # Test files
+├── public/                 # Static assets
+├── build/                  # Production build output
+└── vite.config.ts          # Vite configuration
+```
+
+## 🔧 Configuration Files
+
+- `vite.config.ts` - Vite configuration with SWC plugin and proxy setup
+- `vitest.config.ts` - Vitest test configuration
+- `eslint.config.js` - ESLint rules for React and TypeScript
+- `postcss.config.cjs` - PostCSS with Tailwind CSS
+- `tsconfig.json` - TypeScript compiler options
+
+## 🌐 API Integration
+
+The frontend communicates with the backend API through:
+
+- **Development**: Vite proxy forwards `/api` requests to `http://localhost:3001`
+- **Production**: Configure `VITE_API_URL` environment variable
+
+## 🎨 UI Components
+
+This project uses [shadcn/ui](https://ui.shadcn.com/), a collection of
+re-usable components built with Radix UI and Tailwind CSS. Components are
+located in `src/components/ui/`.
+
+## 🔌 Vite Plugins
+
+- **@vitejs/plugin-react-swc** - Fast Refresh using SWC instead of Babel for improved performance
+
+## 📝 ESLint Configuration
+
+The project uses TypeScript ESLint with:
+
+- Recommended TypeScript rules
+- React Hooks rules
+- React Refresh rules
+- Special rules for test files
+
+## 🔗 Related
+
+- [Backend README](../backend/README.md)
+- [Project Root Documentation](../../README.md)
+- [Shared Types Package](../../packages/shared-types/)
+
+## 📄 License
+
+Part of the GitRay project.
diff --git a/apps/frontend/__tests__/App.test.tsx b/apps/frontend/__tests__/App.test.tsx
index 27f14612..40d6a8e5 100644
--- a/apps/frontend/__tests__/App.test.tsx
+++ b/apps/frontend/__tests__/App.test.tsx
@@ -1,50 +1,114 @@
-import { describe, expect, test } from 'vitest';
-// apps/frontend/src/__tests__/App.test.tsx
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import App from '../src/App';
+import { describe, test, expect, beforeEach, vi } from 'vitest';
 
-// NOTE: These tests are temporarily disabled due to React hooks issues in test environment
-// Frontend will be fully replaced in the near future, so these failures are acceptable
-// Related to backend file analysis implementation - frontend tests unrelated to PR
-describe.skip('App Component', () => {
-  test('renders main page with login and signup buttons', () => {
-    // Arrange
+// Mock dependencies
+vi.mock('../src/components/Header', () => ({
+  Header: () => <div data-testid="mock-header" />,
+}));
+vi.mock('../src/components/Footer', () => ({
+  Footer: () => <div data-testid="mock-footer" />,
+}));
+vi.mock('../src/components/LandingPage', () => ({
+  LandingPage: ({ onAnalyze }: any) => (
+    <div data-testid="mock-landing">
+      <button
+        onClick={() => onAnalyze('https://github.com/test')}
+        data-testid="analyze-btn"
+      >
+        Analyze
+      </button>
+    </div>
+  ),
+}));
+vi.mock('../src/components/DashboardPage', () => ({
+  default: () => <div data-testid="mock-dashboard" />,
+}));
+vi.mock('../src/components/RiveLoader', () => ({
+  RiveLoader: () => <div data-testid="mock-loader" />,
+}));
+vi.mock('sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn(), info: vi.fn(), dismiss: vi.fn() },
+  Toaster: () => <div data-testid="mock-toaster" />,
+}));
+vi.mock('../src/services/api', () => ({
+  getRepositoryFullData: vi.fn(),
+}));
+
+describe('App Component', () => {
+  beforeEach(() => {
+    // Arrange: Reset mocks and DOM
+    vi.clearAllMocks();
+  });
 
-    // Act: render the component under test
-    render(<App />);
+  test('should render LandingPage by default with Header and Footer', async () => {
+    // Act
+    await act(async () => {
+      render(<App />);
+    });
 
-    // Assert: both buttons should be present
-    const loginBtn = screen.getByRole('button', { name: /login/i });
-    const signupBtn = screen.getByRole('button', { name: /signup/i });
-    expect(loginBtn).toBeDefined();
-    expect(signupBtn).toBeDefined();
+    // Assert
+    expect(screen.getByTestId('mock-header')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-landing')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-footer')).toBeInTheDocument();
   });
 
-  test('renders exactly three explanation buttons', () => {
+  test('should transition to DashboardPage on successful analysis', async () => {
     // Arrange
+    const { getRepositoryFullData } = await import('../src/services/api');
+    (getRepositoryFullData as any).mockResolvedValue({
+      commits: [],
+      heatmapData: null,
+      isValidHeatmap: true,
+    });
+
+    await act(async () => {
+      render(<App />);
+    });
 
     // Act
-    render(<App />);
+    const analyzeBtn = screen.getByTestId('analyze-btn');
+    await act(async () => {
+      analyzeBtn.click();
+    });
 
     // Assert
-    const explainBtns = screen.getAllByRole('button', {
-      name: /explanation \d+/i,
-    });
-    expect(explainBtns.length).toBe(3);
+    // It should first show loader, then dashboard
+    // Check API was called
+    expect(getRepositoryFullData).toHaveBeenCalledWith(
+      'https://github.com/test',
+      'day'
+    );
+
+    // Check that dashboard is rendered (since the mock returns immediately in `act`)
+    expect(screen.getByTestId('mock-dashboard')).toBeInTheDocument();
+    // Landing shouldn't be rendered anymore
+    expect(screen.queryByTestId('mock-landing')).not.toBeInTheDocument();
   });
 
-  test('renders footer with the correct text', () => {
+  test('should handle API errors gracefully via toast', async () => {
     // Arrange
+    const { getRepositoryFullData } = await import('../src/services/api');
+    const { toast } = await import('sonner');
+    (getRepositoryFullData as any).mockRejectedValue(
+      new Error('Network error')
+    );
+
+    await act(async () => {
+      render(<App />);
+    });
 
     // Act
-    render(<App />);
+    const analyzeBtn = screen.getByTestId('analyze-btn');
+    await act(async () => {
+      analyzeBtn.click();
+    });
 
     // Assert
-    const preFooter = screen.getByText(/Nach dem runterscrollen:/i);
-    const linkText = screen.getByText(
-      /Links: Impressum; Datenschutzerklärung; "Über Uns"-Seite; created by "Namen von uns"/i
-    );
-    expect(preFooter).toBeDefined();
-    expect(linkText).toBeDefined();
+    expect(toast.error).toHaveBeenCalledWith('Analysis failed', {
+      description: 'Network error',
+    });
+    // Should still be on landing page
+    expect(screen.getByTestId('mock-landing')).toBeInTheDocument();
   });
 });
diff --git a/apps/frontend/__tests__/components/AIInsights.test.tsx b/apps/frontend/__tests__/components/AIInsights.test.tsx
new file mode 100644
index 00000000..97e2e036
--- /dev/null
+++ b/apps/frontend/__tests__/components/AIInsights.test.tsx
@@ -0,0 +1,70 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect } from 'vitest';
+import { AIInsights } from '../../src/components/AIInsights';
+
+describe('AIInsights Component', () => {
+  test('should render the component and default Overview tab', () => {
+    // Act
+    render(<AIInsights />);
+
+    // Assert
+    expect(
+      screen.getByText(
+        /AI-powered insights are generated based on your project's structure/i
+      )
+    ).toBeInTheDocument();
+
+    // Check if tabs are present
+    expect(screen.getByRole('tab', { name: /Overview/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Weekly/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /Trends/i })).toBeInTheDocument();
+
+    // Check Overview content
+    expect(screen.getByText('Project Health Score')).toBeInTheDocument();
+    expect(screen.getByText('78')).toBeInTheDocument();
+    expect(screen.getByText('Recommendations')).toBeInTheDocument();
+    expect(
+      screen.getByText('Implement lazy loading for feature modules')
+    ).toBeInTheDocument();
+  });
+
+  test('should switch to the Weekly tab when clicked', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<AIInsights />);
+    const weeklyTab = screen.getByRole('tab', { name: /Weekly/i });
+
+    // Act
+    await user.click(weeklyTab);
+
+    // Assert
+    await waitFor(() => {
+      expect(
+        screen.getByText('Weekly Development Summary')
+      ).toBeInTheDocument();
+    });
+    expect(screen.getByText('Week 47 (Nov 1-7)')).toBeInTheDocument();
+    expect(
+      screen.getByText('Implemented new dashboard analytics feature')
+    ).toBeInTheDocument();
+  });
+
+  test('should switch to the Trends tab when clicked', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<AIInsights />);
+    const trendsTab = screen.getByRole('tab', { name: /Trends/i });
+
+    // Act
+    await user.click(trendsTab);
+
+    // Assert
+    await waitFor(() => {
+      expect(screen.getByText('Monthly Trends')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Team Productivity')).toBeInTheDocument();
+    expect(screen.getByText('Code Quality')).toBeInTheDocument();
+    expect(screen.getByText('Team Collaboration')).toBeInTheDocument();
+  });
+});
diff --git a/apps/frontend/__tests__/components/ActivityHeatmap.test.tsx b/apps/frontend/__tests__/components/ActivityHeatmap.test.tsx
deleted file mode 100644
index 18b92ed2..00000000
--- a/apps/frontend/__tests__/components/ActivityHeatmap.test.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { render, waitFor, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import ActivityHeatmap from '../../src/components/ActivityHeatmap';
-import { getHeatmapData } from '../../src/services/api';
-
-vi.mock('../../src/services/api', () => ({
-  getHeatmapData: vi.fn(),
-}));
-
-const mockedGetHeatmapData = vi.mocked(getHeatmapData);
-
-// NOTE: These tests are temporarily disabled due to React hooks issues in test environment
-// Frontend will be fully replaced in the near future, so these failures are acceptable
-// Related to backend file analysis implementation - frontend tests unrelated to PR
-describe.skip('ActivityHeatmap (happy path, AAA)', () => {
-  test('renders tooltip title with correct commit count', async () => {
-    // Arrange
-    const date = new Date(Date.now() - 10 * 24 * 60 * 60 * 1000)
-      .toISOString()
-      .slice(0, 10);
-    mockedGetHeatmapData.mockResolvedValue({
-      timePeriod: 'day',
-      data: [{ periodStart: date, commitCount: 3 }],
-      metadata: { maxCommitCount: 3, totalCommits: 3 },
-    });
-
-    // Act
-    render(<ActivityHeatmap repoUrl="url" commits={[]} />);
-    await waitFor(() => expect(mockedGetHeatmapData).toHaveBeenCalled());
-
-    // Assert
-    const tooltipElements = screen.getAllByText(/3 commits/);
-    expect(tooltipElements.length).toBeGreaterThan(0);
-  });
-
-  test('displays author filters correctly sorted by commit count', async () => {
-    // Arrange
-    const commits = [
-      {
-        sha: '1',
-        message: 'msg1',
-        date: new Date().toISOString(),
-        authorName: 'Alice',
-        authorEmail: 'alice@example.com',
-      },
-      {
-        sha: '2',
-        message: 'msg2',
-        date: new Date().toISOString(),
-        authorName: 'Bob',
-        authorEmail: 'bob@example.com',
-      },
-      {
-        sha: '3',
-        message: 'msg3',
-        date: new Date().toISOString(),
-        authorName: 'Bob',
-        authorEmail: 'bob@example.com',
-      },
-    ];
-
-    // Act
-    render(<ActivityHeatmap repoUrl="url" commits={commits} />);
-    await waitFor(() => expect(mockedGetHeatmapData).toHaveBeenCalled());
-    const combo = screen.getByRole('combobox');
-    await userEvent.click(combo);
-    const options = screen.getAllByRole('option');
-
-    // Assert
-    expect(options[0].textContent).toContain('Bob (2)');
-    expect(options[1].textContent).toContain('Alice (1)');
-  });
-});
diff --git a/apps/frontend/__tests__/components/CommitHeatmap.test.tsx b/apps/frontend/__tests__/components/CommitHeatmap.test.tsx
new file mode 100644
index 00000000..1880eece
--- /dev/null
+++ b/apps/frontend/__tests__/components/CommitHeatmap.test.tsx
@@ -0,0 +1,137 @@
+import { render, screen } from '@testing-library/react';
+import { CommitHeatmap } from '../../src/components/CommitHeatmap';
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import { CommitHeatmapData } from '@gitray/shared-types';
+
+describe('CommitHeatmap Component', () => {
+  const mockDate = new Date('2023-12-31T12:00:00Z');
+
+  beforeEach(() => {
+    // Arrange: Fix current date for deterministic tests
+    vi.useFakeTimers();
+    vi.setSystemTime(mockDate);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('should render properly with no data', () => {
+    // Act
+    render(<CommitHeatmap />);
+
+    // Assert
+    expect(screen.getByText('Commit Activity')).toBeInTheDocument();
+    // It should render the heatmap grid but empty (all bg-muted/30)
+    const items = document.querySelectorAll('.rounded-sm');
+    expect(items.length).toBeGreaterThan(300); // 365 days + some legends
+  });
+
+  test('should log a warning if isValidHeatmap is false', () => {
+    // Arrange
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const heatmapData: CommitHeatmapData = { data: [], timePeriod: 'day' };
+
+    // Act
+    render(<CommitHeatmap heatmapData={heatmapData} isValidHeatmap={false} />);
+
+    // Assert
+    expect(consoleSpy).toHaveBeenCalledWith(
+      '[CommitHeatmap] Heatmap data may be incomplete or invalid'
+    );
+    consoleSpy.mockRestore();
+  });
+
+  test('should render heatmap with data from heatmapData prop', () => {
+    // Arrange
+    const heatmapData: CommitHeatmapData = {
+      data: [
+        { periodStart: '2023-12-30T00:00:00Z', commitCount: 15 }, // High intensity
+        { periodStart: '2023-12-31T00:00:00Z', commitCount: 2 }, // Low intensity
+      ],
+      timePeriod: 'day',
+    };
+
+    // Act
+    render(<CommitHeatmap heatmapData={heatmapData} monthsToShow={12} />);
+
+    // Assert
+    // Check that we have elements with the specific intensity classes
+    const highIntensityNodes = document.querySelectorAll('.bg-primary');
+    const lowIntensityNodes = document.querySelectorAll('.bg-primary\\/20');
+
+    // There are legendary items colored as well, so we expect at least 1 + legend items
+    expect(highIntensityNodes.length).toBeGreaterThanOrEqual(1);
+    expect(lowIntensityNodes.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('should render heatmap with data fallback from commits prop', () => {
+    // Arrange
+    const commits = [
+      {
+        hash: 'abc',
+        message: 'test',
+        author: 'tester',
+        date: '2023-12-25T10:00:00Z',
+        filesChanged: 1,
+        insertions: 10,
+        deletions: 5,
+      },
+      {
+        hash: 'def',
+        message: 'test2',
+        author: 'tester',
+        date: '2023-12-25T11:00:00Z',
+        filesChanged: 1,
+        insertions: 10,
+        deletions: 5,
+      },
+    ];
+
+    // Act
+    // Omitting heatmapData to trigger fallback
+    render(<CommitHeatmap commits={commits as any} />);
+
+    // Assert
+    // 2 commits on same day -> expect bg-primary/20
+    const intensityNodes = document.querySelectorAll('.bg-primary\\/20');
+    expect(intensityNodes.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('should restrict data visibility based on monthsToShow prop', () => {
+    // Arrange
+    const twelveMonthsAgo = new Date(mockDate);
+    twelveMonthsAgo.setMonth(twelveMonthsAgo.getMonth() - 11);
+
+    const commits = [
+      {
+        hash: 'old',
+        message: 'old commit',
+        author: 'tester',
+        date: twelveMonthsAgo.toISOString(),
+        filesChanged: 1,
+        insertions: 1,
+        deletions: 1,
+      },
+      {
+        hash: 'new',
+        message: 'new commit',
+        author: 'tester',
+        date: mockDate.toISOString(),
+        filesChanged: 1,
+        insertions: 1,
+        deletions: 1,
+      },
+    ];
+
+    // Act: only show 3 months
+    render(<CommitHeatmap commits={commits as any} monthsToShow={3} />);
+
+    // Assert
+    // The old commit should not be colored because it's outside the 3 months window.
+    // The new commit should be colored (count 1 -> bg-primary/20).
+    const paintedNodes = document.querySelectorAll('.bg-primary\\/20');
+    // Legends uses 1 bg-primary/20, plus the new commit = 2
+    expect(paintedNodes.length).toBe(2);
+  });
+});
diff --git a/apps/frontend/__tests__/components/CommitList.test.tsx b/apps/frontend/__tests__/components/CommitList.test.tsx
deleted file mode 100644
index b88ce4d4..00000000
--- a/apps/frontend/__tests__/components/CommitList.test.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import CommitList from '../../src/components/CommitList';
-import { Commit } from '@gitray/shared-types';
-
-describe('CommitList Component', () => {
-  test.skip('should render commit list with data', () => {
-    // Arrange
-    const mockCommits: Commit[] = [
-      {
-        sha: '123abc456def',
-        message: 'Test commit message',
-        date: '2023-05-01T12:00:00Z',
-        authorName: 'Test User',
-        authorEmail: 'test@example.com',
-      },
-    ];
-
-    // Act
-    render(<CommitList commits={mockCommits} />);
-
-    // Assert
-    expect(screen.getByText('Repository Commits')).toBeDefined();
-    expect(screen.getByText('123abc4')).toBeDefined(); // First 7 chars of SHA
-    expect(screen.getByText('Test commit message')).toBeDefined();
-    expect(screen.getByText('Test User')).toBeDefined();
-  });
-
-  test.skip('should render nothing when commits array is empty', () => {
-    // Arrange
-    const emptyCommits: Commit[] = [];
-
-    // Act
-    const { container } = render(<CommitList commits={emptyCommits} />);
-
-    // Assert
-    expect(container.firstChild).toBeNull();
-  });
-});
diff --git a/apps/frontend/__tests__/components/DashboardPage.test.tsx b/apps/frontend/__tests__/components/DashboardPage.test.tsx
new file mode 100644
index 00000000..a252125f
--- /dev/null
+++ b/apps/frontend/__tests__/components/DashboardPage.test.tsx
@@ -0,0 +1,131 @@
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DashboardPage from '../../src/components/DashboardPage';
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+import * as api from '../../src/services/api';
+
+// Mock dependencies BEFORE imports
+vi.mock('../../src/services/api', () => ({
+  getFileAnalysis: vi.fn(),
+  getCodeChurn: vi.fn(),
+  getRepositorySummary: vi.fn(),
+}));
+
+// Mock sub-components that might do complex rendering
+vi.mock('../../src/components/CommitHeatmap', () => ({
+  CommitHeatmap: () => <div data-testid="mock-heatmap" />,
+}));
+vi.mock('../../src/components/ActivityChart', () => ({
+  ActivityChart: () => <div data-testid="mock-activity-chart" />,
+}));
+vi.mock('../../src/components/FileDistributionChart', () => ({
+  FileDistributionChart: () => <div data-testid="mock-file-chart" />,
+}));
+vi.mock('../../src/components/CodeChurnChart', () => ({
+  CodeChurnChart: () => <div data-testid="mock-churn-chart" />,
+}));
+vi.mock('../../src/components/GraphViewTimeline', () => ({
+  GraphViewTimeline: () => <div data-testid="mock-timeline" />,
+}));
+
+describe('DashboardPage Component', () => {
+  const mockRepoUrl = 'https://github.com/test/repo';
+  const mockCommits = [
+    {
+      hash: '123',
+      message: 'test',
+      date: '2023-01-01',
+      author: 'tester',
+      filesChanged: 1,
+      insertions: 1,
+      deletions: 1,
+    },
+  ];
+
+  beforeEach(() => {
+    // Arrange: reset API mocks
+    vi.clearAllMocks();
+
+    // Default resolve values
+    (api.getRepositorySummary as any).mockResolvedValue({
+      stats: { totalCommits: 100, branches: 2, contributors: 3 },
+      lastCommit: { relativeTime: '2 days ago' },
+      created: { date: '2023-01-01T00:00:00Z' },
+      repository: { name: 'test-repo', url: 'https://github.com/test/repo' },
+    });
+    (api.getFileAnalysis as any).mockResolvedValue({ ts: 10 });
+    (api.getCodeChurn as any).mockResolvedValue([]);
+  });
+
+  test('should render dashboard tabs and overview by default', async () => {
+    // Act
+    await act(async () => {
+      render(
+        <DashboardPage
+          commits={mockCommits as any}
+          heatmapData={{ data: [], timePeriod: 'day' }}
+          isValidHeatmap={true}
+          repoUrl={mockRepoUrl}
+          currentBranch="main"
+        />
+      );
+    });
+
+    // Assert
+    expect(screen.getAllByText('Overview')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Analytics')[0]).toBeInTheDocument();
+    expect(screen.getByTestId('mock-activity-chart')).toBeInTheDocument();
+  });
+
+  test('should trigger API calls on mount with repoUrl', async () => {
+    // Act
+    await act(async () => {
+      render(
+        <DashboardPage
+          commits={mockCommits as any}
+          heatmapData={{ data: [], timePeriod: 'day' }}
+          isValidHeatmap={true}
+          repoUrl="https://github.com/test/repo2"
+        />
+      );
+    });
+
+    // Assert
+    expect(api.getRepositorySummary).toHaveBeenCalledWith(
+      'https://github.com/test/repo2'
+    );
+    expect(api.getFileAnalysis).toHaveBeenCalledWith(
+      'https://github.com/test/repo2'
+    );
+    expect(api.getCodeChurn).toHaveBeenCalledWith(
+      'https://github.com/test/repo2'
+    );
+  });
+
+  test('should handle missing heatmap data gracefully', async () => {
+    // Act
+    await act(async () => {
+      render(
+        <DashboardPage
+          commits={mockCommits as any}
+          heatmapData={null}
+          isValidHeatmap={false}
+          repoUrl={mockRepoUrl}
+        />
+      );
+    });
+
+    // Assert
+    // It should still render the main dashboard structure
+    expect(screen.getByText(/Repository Analytics/i)).toBeInTheDocument();
+
+    // Switch to Heatmap tab and ensure it handles it gracefully
+    await act(async () => {
+      const user = userEvent.setup();
+      const tab = screen.getByRole('tab', { name: /Heatmap/i });
+      await user.click(tab);
+    });
+
+    expect(await screen.findByTestId('mock-heatmap')).toBeInTheDocument();
+  });
+});
diff --git a/apps/frontend/__tests__/components/FileTypeList.test.tsx b/apps/frontend/__tests__/components/FileTypeList.test.tsx
new file mode 100644
index 00000000..d8c75ed5
--- /dev/null
+++ b/apps/frontend/__tests__/components/FileTypeList.test.tsx
@@ -0,0 +1,180 @@
+import { render, screen } from '@testing-library/react';
+import { FileTypeList } from '../../src/components/FileTypeList';
+import { describe, test, expect } from 'vitest';
+
+describe('FileTypeList Component', () => {
+  test('should render properly with no data', () => {
+    // Arrange
+    render(<FileTypeList fileDistribution={null} />);
+
+    // Assert
+    expect(screen.getByText('File Type Distribution')).toBeInTheDocument();
+    expect(screen.getByText('No file data available')).toBeInTheDocument();
+  });
+
+  test('should render file types and calculate correct percentages', () => {
+    // Arrange
+    const allExtensions = [
+      '.ts',
+      '.tsx',
+      '.js',
+      '.jsx',
+      '.mjs',
+      '.cjs',
+      '.py',
+      '.go',
+      '.rs',
+      '.java',
+      '.c',
+      '.cpp',
+      '.cs',
+      '.rb',
+      '.php',
+      '.swift',
+      '.kt',
+      '.scala',
+      '.clj',
+      '.ex',
+      '.erl',
+      '.hs',
+      '.lua',
+      '.r',
+      '.m',
+      '.dart',
+      '.sh',
+      '.bash',
+      '.ps1',
+      '.psd1',
+      '.psm1',
+      '.pl',
+      '.vb',
+      '.fs',
+      '.html',
+      '.css',
+      '.scss',
+      '.sass',
+      '.less',
+      '.xml',
+      '.svg',
+      '.vue',
+      '.json',
+      '.yaml',
+      '.yml',
+      '.toml',
+      '.csv',
+      '.sql',
+      '.md',
+      '.txt',
+      '.rst',
+      '.tex',
+      '.pdf',
+      '.doc',
+      '.png',
+      '.jpg',
+      '.jpeg',
+      '.gif',
+      '.webp',
+      '.bmp',
+      '.ico',
+      '.tif',
+      '.riv',
+      '.env',
+      '.gitignore',
+      '.dockerignore',
+      '.editorconfig',
+      '.eslintrc',
+      '.prettierrc',
+      '.lock',
+      '.log',
+      '.zip',
+      '.tar',
+      '.gz',
+      '', // No extension
+      '.unknown', // Fallback
+      // specific icon branches
+      '.mp4',
+      '.mp3',
+      '.db',
+      '.sqlite',
+      '.xlsx',
+      '.pem',
+    ];
+
+    const mockDistribution = {
+      extensions: {} as Record<
+        string,
+        { count: number; percentage: number; size: number; averageSize: number }
+      >,
+      categories: {
+        code: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+        documentation: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+        configuration: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+        assets: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+        other: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+      },
+      directories: [],
+      metadata: {
+        totalFiles: 100,
+        totalSize: 1024000, // 1MB, so ~10KB/file
+        analyzedAt: new Date().toISOString(),
+        repositorySize: '1 MB',
+      },
+    };
+
+    allExtensions.forEach((ext) => {
+      mockDistribution.extensions[ext] = {
+        count: 1,
+        percentage: 1,
+        size: 10,
+        averageSize: 10,
+      };
+    });
+
+    // Act
+    render(<FileTypeList fileDistribution={mockDistribution} />);
+
+    // Assert
+    expect(screen.getByText('File Type Distribution')).toBeInTheDocument();
+
+    // Random checks
+    expect(screen.getByText('TypeScript')).toBeInTheDocument();
+    expect(screen.getByText('Python')).toBeInTheDocument();
+    expect(screen.getByText('JSON')).toBeInTheDocument();
+    expect(screen.getByText('files without extension')).toBeInTheDocument();
+
+    // Check Average File Size
+    expect(screen.getByText('≈ 10 KB')).toBeInTheDocument();
+  });
+
+  test('should format multiple extensions of the same display type together', () => {
+    // Arrange
+    const mockDistribution = {
+      extensions: {
+        '.ts': { count: 10, percentage: 40.05, size: 100, averageSize: 10 },
+        '.tsx': { count: 10, percentage: 40.05, size: 100, averageSize: 10 },
+      },
+      categories: {
+        code: { count: 20, percentage: 80.1, size: 0, averageSize: 0 },
+        documentation: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+        configuration: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+        assets: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+        other: { count: 0, percentage: 0, size: 0, averageSize: 0 },
+      },
+      directories: [],
+      metadata: {
+        totalFiles: 20,
+        totalSize: 0,
+        analyzedAt: new Date().toISOString(),
+        repositorySize: '0 B',
+      },
+    };
+
+    // Act
+    render(<FileTypeList fileDistribution={mockDistribution} />);
+
+    // Assert
+    // They both map to "TypeScript"
+    expect(screen.getByText('TypeScript')).toBeInTheDocument();
+    expect(screen.getByText('.ts 40.05%, .tsx 40.05%')).toBeInTheDocument();
+  });
+});
diff --git a/apps/frontend/__tests__/components/GitDiffViewer.test.tsx b/apps/frontend/__tests__/components/GitDiffViewer.test.tsx
new file mode 100644
index 00000000..a663ef87
--- /dev/null
+++ b/apps/frontend/__tests__/components/GitDiffViewer.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
+import { GitDiffViewer } from '../../src/components/GitDiffViewer';
+
+describe('GitDiffViewer Component', () => {
+  test('should render the diff viewer with correct totals', () => {
+    // Act
+    render(<GitDiffViewer />);
+
+    // Assert
+    expect(screen.getByText('Git Diff Viewer')).toBeInTheDocument();
+
+    // totalAdditions: 45 + 23 + 8 = 76
+    // totalDeletions: 12 + 5 + 2 = 19
+    expect(screen.getByText(/76 additions/i)).toBeInTheDocument();
+    expect(screen.getByText(/19 deletions/i)).toBeInTheDocument();
+    expect(screen.getByText(/3 files changed/i)).toBeInTheDocument();
+
+    // verify file names are displayed
+    expect(
+      screen.getByText('src/components/Dashboard.tsx')
+    ).toBeInTheDocument();
+    expect(screen.getByText('src/lib/api.ts')).toBeInTheDocument();
+    expect(screen.getByText('src/styles/globals.css')).toBeInTheDocument();
+  });
+
+  test('should toggle file diff visibility when clicked', () => {
+    // Arrange
+    render(<GitDiffViewer />);
+    const firstFileRow = screen.getByRole('button', {
+      name: /src\/components\/Dashboard.tsx/i,
+    });
+    const secondFileRow = screen.getByRole('button', {
+      name: /src\/lib\/api.ts/i,
+    });
+
+    // Act & Assert initially (Dashboard is open by default, api.ts is closed)
+    expect(
+      screen.getByText("import { Card } from './ui/card';")
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('async function fetchData() {')
+    ).not.toBeInTheDocument();
+
+    // Act - close Dashboard
+    fireEvent.click(firstFileRow);
+    // Assert
+    expect(
+      screen.queryByText("import { Card } from './ui/card';")
+    ).not.toBeInTheDocument();
+
+    // Act - open api.ts
+    fireEvent.click(secondFileRow);
+    // Assert
+    expect(
+      screen.getByText('async function fetchData() {')
+    ).toBeInTheDocument();
+  });
+});
diff --git a/apps/frontend/__tests__/components/PremiumFeatures.test.tsx b/apps/frontend/__tests__/components/PremiumFeatures.test.tsx
new file mode 100644
index 00000000..ff998bc5
--- /dev/null
+++ b/apps/frontend/__tests__/components/PremiumFeatures.test.tsx
@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react';
+import { describe, test, expect } from 'vitest';
+import { PremiumFeatures } from '../../src/components/PremiumFeatures';
+
+describe('PremiumFeatures Component', () => {
+  test('should render the premium features list by default', () => {
+    // Act
+    render(<PremiumFeatures />);
+
+    // Assert
+    expect(
+      screen.getByRole('tab', { name: /Premium Features/i })
+    ).toBeInTheDocument();
+
+    // Check for categories
+    expect(screen.getByText('Visualizations')).toBeInTheDocument();
+    expect(screen.getByText('Analysis Tools')).toBeInTheDocument();
+    expect(screen.getByText('Multi-Project Management')).toBeInTheDocument();
+    expect(screen.getByText('Desktop & Mobile')).toBeInTheDocument();
+
+    // Check for specific features
+    expect(
+      screen.getByText('Time-lapse Animation (Gource)')
+    ).toBeInTheDocument();
+    expect(screen.getByText('UML Diagram Generation')).toBeInTheDocument();
+    expect(
+      screen.getByText('Manage Multiple Repositories')
+    ).toBeInTheDocument();
+
+    // Check for CTA
+    expect(screen.getByText('Unlock All Premium Features')).toBeInTheDocument();
+  });
+
+  test('should render only the pricing compare view when showPricingOnly is true', () => {
+    // Act
+    render(<PremiumFeatures showPricingOnly={true} />);
+
+    // Assert
+    // Check for pricing plans
+    expect(screen.getByRole('heading', { name: 'Free' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Premium' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Team' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'Enterprise' })
+    ).toBeInTheDocument();
+
+    // Check for prices
+    expect(screen.getByText('$0')).toBeInTheDocument();
+    expect(screen.getByText('$15')).toBeInTheDocument();
+    expect(screen.getByText('$49')).toBeInTheDocument();
+    expect(screen.getByText('Custom')).toBeInTheDocument();
+
+    // Check for the comparison table
+    expect(screen.getByText('Compare All Plans')).toBeInTheDocument();
+    expect(screen.getByText('7 days')).toBeInTheDocument();
+    expect(screen.getByText('30 days')).toBeInTheDocument();
+    expect(screen.getByText('90 days')).toBeInTheDocument();
+
+    // Ensure features list is NOT rendered
+    expect(
+      screen.queryByRole('tab', { name: /Premium Features/i })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('Time-lapse Animation (Gource)')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('Unlock All Premium Features')
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/apps/frontend/__tests__/components/RiveLoader.test.tsx b/apps/frontend/__tests__/components/RiveLoader.test.tsx
deleted file mode 100644
index 4760c2bb..00000000
--- a/apps/frontend/__tests__/components/RiveLoader.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { render, screen, act } from '@testing-library/react';
-import { vi } from 'vitest';
-import RiveLoader from '../../src/components/RiveLoader';
-import { useRive } from '@rive-app/react-canvas';
-
-vi.mock('@rive-app/react-canvas', () => ({ useRive: vi.fn() }));
-
-const mockedUseRive = useRive as ReturnType<typeof vi.fn>;
-
-const MockRiveComponent = () => <div data-testid="rive" />;
-
-beforeEach(() => {
-  vi.clearAllMocks();
-});
-
-describe('RiveLoader Component (happy path, AAA)', () => {
-  test.skip('renders default loader and triggers callbacks', () => {
-    // Arrange
-    const logSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
-    const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    let options: Parameters<typeof useRive>[0] | undefined;
-    mockedUseRive.mockImplementation((opts) => {
-      options = opts;
-      return { RiveComponent: MockRiveComponent } as unknown as ReturnType<
-        typeof useRive
-      >;
-    });
-
-    // Act
-    render(<RiveLoader />);
-
-    // Assert
-    expect(mockedUseRive).toHaveBeenCalled();
-    expect(options).toBeDefined();
-    expect(options?.src).toBe('/Logo_Animation_StateMachine_DarkMode.riv');
-    expect(screen.getByTestId('rive')).toBeInTheDocument();
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    // Act
-    act(() => {
-      // Mock the callback parameters as needed by the implementation
-      options?.onLoad?.({} as any);
-      options?.onLoadError?.('test error' as any);
-    });
-
-    // Assert
-    expect(logSpy).toHaveBeenCalledWith('Rive animation loaded successfully');
-    expect(errSpy).toHaveBeenCalledWith(
-      'Failed to load Rive animation:',
-      'test error'
-    );
-  });
-
-  test.skip('accepts custom props', () => {
-    // Arrange
-    mockedUseRive.mockReturnValue({
-      RiveComponent: MockRiveComponent,
-    } as unknown as ReturnType<typeof useRive>);
-
-    // Act
-    const { container } = render(
-      <RiveLoader size={50} className="extra" message="wait" />
-    );
-
-    // Assert
-    const wrapper = container.firstChild as HTMLElement;
-    expect(wrapper).toHaveClass('flex', 'extra');
-    const inner = screen.getByTestId('rive').parentElement as HTMLElement;
-    expect(inner.style.width).toBe('50px');
-    expect(screen.getByText('wait')).toBeInTheDocument();
-  });
-});
diff --git a/apps/frontend/__tests__/components/RiveLogo.test.tsx b/apps/frontend/__tests__/components/RiveLogo.test.tsx
deleted file mode 100644
index 0e423ed4..00000000
--- a/apps/frontend/__tests__/components/RiveLogo.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { render, screen, act } from '@testing-library/react';
-import { vi } from 'vitest';
-import RiveLogo from '../../src/components/RiveLogo';
-import { useRive } from '@rive-app/react-canvas';
-
-vi.mock('@rive-app/react-canvas', () => ({ useRive: vi.fn() }));
-
-const mockedUseRive = useRive as ReturnType<typeof vi.fn>;
-
-const MockRiveComponent = () => <div data-testid="rive" />;
-
-beforeEach(() => {
-  vi.clearAllMocks();
-});
-
-describe('RiveLogo Component (happy path, AAA)', () => {
-  test.skip('renders default logo and triggers callbacks', () => {
-    // Arrange
-    const logSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
-    const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    let options: Parameters<typeof useRive>[0] | undefined;
-    mockedUseRive.mockImplementation((opts) => {
-      options = opts;
-      return { RiveComponent: MockRiveComponent } as unknown as ReturnType<
-        typeof useRive
-      >;
-    });
-
-    // Act
-    const { container } = render(<RiveLogo />);
-
-    // Assert
-    expect(mockedUseRive).toHaveBeenCalled();
-    expect(options).toBeDefined();
-    expect(options?.src).toBe('/Logo_Animation_StateMachine_DarkMode.riv');
-    expect(screen.getByTestId('rive')).toBeInTheDocument();
-    const wrapper = container.firstChild as HTMLElement;
-    expect(wrapper).toHaveClass('cursor-pointer');
-    expect(wrapper).toHaveStyle({ width: '60px', height: '60px' });
-
-    // Act
-    act(() => {
-      options?.onLoad?.({} as any);
-      options?.onLoadError?.('err' as any);
-    });
-
-    // Assert
-    expect(logSpy).toHaveBeenCalledWith('Rive logo loaded successfully');
-    expect(errSpy).toHaveBeenCalledWith('Failed to load Rive logo:', 'err');
-  });
-
-  test.skip('accepts custom props', () => {
-    // Arrange
-    mockedUseRive.mockReturnValue({
-      RiveComponent: MockRiveComponent,
-    } as unknown as ReturnType<typeof useRive>);
-
-    // Act
-    const { container } = render(
-      <RiveLogo size={40} className="extra" interactive={false} />
-    );
-
-    // Assert
-    const wrapper = container.firstChild as HTMLElement;
-    expect(wrapper).toHaveClass('flex', 'extra');
-    expect(wrapper.className).not.toContain('cursor-pointer');
-    expect(wrapper).toHaveStyle({ width: '40px', height: '40px' });
-  });
-});
diff --git a/apps/frontend/__tests__/components/ui/use-mobile.test.ts b/apps/frontend/__tests__/components/ui/use-mobile.test.ts
new file mode 100644
index 00000000..7ad77b0f
--- /dev/null
+++ b/apps/frontend/__tests__/components/ui/use-mobile.test.ts
@@ -0,0 +1,90 @@
+import { renderHook, act } from '@testing-library/react';
+import { useIsMobile } from '../../../src/components/ui/use-mobile';
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+
+describe('useIsMobile Hook', () => {
+  let mockMatchMedia: ReturnType<typeof vi.fn>;
+  let resizeListeners: Array<() => void> = [];
+
+  beforeEach(() => {
+    // Arrange
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024, // Desktop by default
+    });
+
+    resizeListeners = [];
+    mockMatchMedia = vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: (event: string, listener: () => void) => {
+        if (event === 'change') resizeListeners.push(listener);
+      },
+      removeEventListener: (event: string, listener: () => void) => {
+        if (event === 'change') {
+          resizeListeners = resizeListeners.filter((l) => l !== listener);
+        }
+      },
+      dispatchEvent: vi.fn(),
+    }));
+
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      configurable: true,
+      value: mockMatchMedia,
+    });
+  });
+
+  test('should return false for desktop displays', () => {
+    // Arrange
+    window.innerWidth = 1024;
+
+    // Act
+    const { result } = renderHook(() => useIsMobile());
+
+    // Assert
+    expect(result.current).toBe(false);
+  });
+
+  test('should return true for mobile displays', () => {
+    // Arrange
+    window.innerWidth = 500;
+
+    // Act
+    const { result } = renderHook(() => useIsMobile());
+
+    // Assert
+    expect(result.current).toBe(true);
+  });
+
+  test('should update value on resize event', () => {
+    // Arrange
+    window.innerWidth = 1024;
+    const { result } = renderHook(() => useIsMobile());
+
+    expect(result.current).toBe(false);
+
+    // Act
+    act(() => {
+      window.innerWidth = 500;
+      resizeListeners.forEach((listener) => listener());
+    });
+
+    // Assert
+    expect(result.current).toBe(true);
+  });
+
+  test('should setup and cleanup event listeners', () => {
+    // Arrange
+    const { unmount } = renderHook(() => useIsMobile());
+    expect(resizeListeners.length).toBe(1);
+
+    // Act
+    unmount();
+
+    // Assert
+    expect(resizeListeners.length).toBe(0);
+  });
+});
diff --git a/apps/frontend/__tests__/components/ui/utils.test.ts b/apps/frontend/__tests__/components/ui/utils.test.ts
new file mode 100644
index 00000000..adc6877c
--- /dev/null
+++ b/apps/frontend/__tests__/components/ui/utils.test.ts
@@ -0,0 +1,68 @@
+import { describe, test, expect } from 'vitest';
+import { cn } from '../../../src/components/ui/utils';
+
+describe('UI Utilities', () => {
+  describe('cn()', () => {
+    test('should merge standard classes', () => {
+      // Arrange
+      const class1 = 'text-red-500';
+      const class2 = 'bg-blue-500';
+
+      // Act
+      const result = cn(class1, class2);
+
+      // Assert
+      expect(result).toBe('text-red-500 bg-blue-500');
+    });
+
+    test('should resolve tailwind conflicts', () => {
+      // Arrange
+      const baseClass = 'p-4 m-2 text-black';
+      const overrideClass = 'p-2 text-white';
+
+      // Act
+      const result = cn(baseClass, overrideClass);
+
+      // Assert
+      // Expected tailwind-merge to override previous padding/text classes
+      expect(result).toBe('m-2 p-2 text-white');
+    });
+
+    test('should handle conditional classes properly', () => {
+      // Arrange
+      const isRed = true;
+      const isBlue = false;
+
+      // Act
+      const result = cn('base-class', {
+        'text-red-500': isRed,
+        'text-blue-500': isBlue,
+      });
+
+      // Assert
+      expect(result).toBe('base-class text-red-500');
+    });
+
+    test('should handle array inputs', () => {
+      // Arrange
+      const classArray = ['flex', 'flex-col', 'items-center'];
+
+      // Act
+      const result = cn(classArray, 'justify-center');
+
+      // Assert
+      expect(result).toBe('flex flex-col items-center justify-center');
+    });
+
+    test('should handle null and undefined', () => {
+      // Arrange
+      const inputs = ['btn', null, undefined, 'active'];
+
+      // Act
+      const result = cn(inputs);
+
+      // Assert
+      expect(result).toBe('btn active');
+    });
+  });
+});
diff --git a/apps/frontend/__tests__/main.test.tsx b/apps/frontend/__tests__/main.test.tsx
deleted file mode 100644
index e15544bd..00000000
--- a/apps/frontend/__tests__/main.test.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { createRoot } from 'react-dom/client';
-
-// any the modules
-vi.mock('react-dom/client', () => ({
-  createRoot: vi.fn(() => ({
-    render: vi.fn(),
-  })),
-}));
-
-vi.mock('react', async () => {
-  const actualReact = await vi.importActual('react');
-  return {
-    ...actualReact,
-    StrictMode: ({ children }: { children: React.ReactNode }) => children,
-  };
-});
-
-vi.mock('../src/App', () => ({
-  default: () => null,
-}));
-
-vi.mock('../src/index.css', () => ({}));
-
-describe('Main Entry Point', () => {
-  let mockRootElement: HTMLDivElement;
-  const originalGetElementById = document.getElementById;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockRootElement = document.createElement('div');
-    document.getElementById = vi.fn().mockReturnValue(mockRootElement);
-  });
-
-  afterEach(() => {
-    document.getElementById = originalGetElementById;
-    vi.resetModules();
-  });
-
-  test('should render App component into root element', async () => {
-    // Act - Import main.tsx to trigger execution
-    await import('../src/main');
-
-    // Assert
-    expect(document.getElementById).toHaveBeenCalledWith('root');
-    expect(createRoot).toHaveBeenCalledWith(mockRootElement);
-    const mockCreateRoot = vi.mocked(createRoot);
-    expect(mockCreateRoot.mock.results[0].value.render).toHaveBeenCalled();
-  });
-});
diff --git a/apps/frontend/__tests__/pages/MainPage.test.tsx b/apps/frontend/__tests__/pages/MainPage.test.tsx
deleted file mode 100644
index 883d4896..00000000
--- a/apps/frontend/__tests__/pages/MainPage.test.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import MainPage from '../../src/pages/MainPage';
-import { getRepositoryFullData } from '../../src/services/api';
-import { Commit } from '@gitray/shared-types';
-
-// any the API module
-vi.mock('../../src/services/api', () => ({
-  getRepositoryFullData: vi.fn(),
-  getHeatmapData: vi.fn(),
-}));
-
-const mockedGetRepositoryFullData = vi.mocked(getRepositoryFullData);
-
-// NOTE: These tests are temporarily disabled due to React hooks issues in test environment
-// Frontend will be fully replaced in the near future, so these failures are acceptable
-// Related to backend file analysis implementation - frontend tests unrelated to PR
-describe.skip('MainPage Component', () => {
-  test('should fetch and display commits when repository URL is submitted', async () => {
-    // Arrange
-    const mockCommits: Commit[] = [
-      {
-        sha: '123abc456def',
-        message: 'Test commit message',
-        date: '2023-05-01T12:00:00Z',
-        authorName: 'Test User',
-        authorEmail: 'test@example.com',
-      },
-    ];
-
-    mockedGetRepositoryFullData.mockResolvedValue({
-      commits: mockCommits,
-      heatmapData: {
-        timePeriod: 'day',
-        data: [],
-        metadata: { maxCommitCount: 0, totalCommits: 0 },
-      },
-    });
-    render(<MainPage />);
-
-    const input = screen.getByRole('textbox');
-    const button = screen.getByRole('button', { name: /visualize/i });
-
-    // Act
-    fireEvent.change(input, {
-      target: { value: 'https://github.com/test/repo.git' },
-    });
-    fireEvent.click(button);
-
-    // Assert
-    await waitFor(() => {
-      expect(mockedGetRepositoryFullData).toHaveBeenCalledWith(
-        'https://github.com/test/repo.git',
-        'day'
-      );
-    });
-
-    // The heatmap should be displayed by default
-    expect(screen.getByText('Repository Activity')).toBeInTheDocument();
-  });
-});
diff --git a/apps/frontend/__tests__/services/api.test.ts b/apps/frontend/__tests__/services/api.test.ts
new file mode 100644
index 00000000..5f5c0943
--- /dev/null
+++ b/apps/frontend/__tests__/services/api.test.ts
@@ -0,0 +1,369 @@
+// Mock external dependencies BEFORE any imports
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+vi.mock('axios', async () => {
+  const actual = await vi.importActual<typeof import('axios')>('axios');
+  const mockAxiosInstance = {
+    get: vi.fn(),
+    post: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+    interceptors: {
+      request: { use: vi.fn(), eject: vi.fn() },
+      response: { use: vi.fn(), eject: vi.fn() },
+    },
+  };
+  return {
+    default: {
+      ...actual.default,
+      create: vi.fn(() => mockAxiosInstance),
+      isAxiosError: vi.fn((_payload) => true), // Mock generic isAxiosError
+    },
+  };
+});
+
+import axios from 'axios';
+import {
+  getRepositoryHeatmap,
+  getRepositoryCommits,
+  getFileAnalysis,
+  getCodeChurn,
+  getRepositorySummary,
+  getRepositoryFullData,
+  getRepositoryContributors,
+} from '../../src/services/api';
+
+describe('API Service Unit Tests', () => {
+  let mockGet: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    // Arrange: Reset all mocks before each test
+    vi.clearAllMocks();
+    // Get the mocked instance's get method
+    const mockAxiosInstance = axios.create();
+    mockGet = mockAxiosInstance.get as ReturnType<typeof vi.fn>;
+
+    // Explicitly mock isAxiosError to behave properly for these tests
+    (axios.isAxiosError as any).mockImplementation(
+      (payload: any) => payload?.isAxiosError === true
+    );
+  });
+
+  describe('getRepositoryCommits', () => {
+    const mockRepoUrl = 'https://github.com/user/repo';
+    const mockNormalizedUrl = 'https://github.com/user/repo.git';
+
+    test('should fetch commits successfully', async () => {
+      // Arrange
+      const mockResponse = {
+        data: {
+          commits: [{ hash: '12345', message: 'Test commit' }],
+          page: 1,
+          limit: 100,
+        },
+      };
+      mockGet.mockResolvedValueOnce(mockResponse);
+
+      // Act
+      const result = await getRepositoryCommits(mockRepoUrl, 1, 100);
+
+      // Assert
+      expect(mockGet).toHaveBeenCalledWith(
+        `/api/repositories/commits?repoUrl=${encodeURIComponent(mockNormalizedUrl)}&page=1&limit=100`
+      );
+      expect(result).toEqual({
+        commits: mockResponse.data.commits,
+        page: 1,
+        limit: 100,
+      });
+    });
+
+    test('should append .git to repoUrl if missing', async () => {
+      // Arrange
+      const urlWithoutGit = 'https://github.com/test/repo';
+      mockGet.mockResolvedValueOnce({
+        data: { commits: [], page: 1, limit: 100 },
+      });
+
+      // Act
+      await getRepositoryCommits(urlWithoutGit, 1, 50);
+
+      // Assert
+      expect(mockGet).toHaveBeenCalledWith(
+        `/api/repositories/commits?repoUrl=${encodeURIComponent(urlWithoutGit + '.git')}&page=1&limit=50`
+      );
+    });
+
+    test('should throw meaningful error on API failure', async () => {
+      // Arrange
+      const mockError = {
+        isAxiosError: true,
+        response: { data: { error: 'Repository not found' } },
+      };
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryCommits(mockRepoUrl)).rejects.toThrow(
+        'Server error: Repository not found'
+      );
+    });
+  });
+
+  describe('getRepositoryHeatmap', () => {
+    const mockRepoUrl = 'https://github.com/user/repo';
+
+    test('should fetch heatmap without filters', async () => {
+      // Arrange
+      const mockResponse = { data: { heatmapData: { 12345: 5 } } };
+      mockGet.mockResolvedValueOnce(mockResponse);
+
+      // Act
+      const result = await getRepositoryHeatmap(mockRepoUrl);
+
+      // Assert
+      expect(mockGet).toHaveBeenCalledWith(
+        expect.stringContaining(
+          `/api/repositories/heatmap?repoUrl=${encodeURIComponent(mockRepoUrl + '.git')}`
+        )
+      );
+      expect(result).toEqual(mockResponse.data.heatmapData);
+    });
+
+    test('should append filter query parameters', async () => {
+      // Arrange
+      mockGet.mockResolvedValueOnce({ data: { heatmapData: {} } });
+      const filters = {
+        author: 'Alice',
+        fromDate: '2023-01-01',
+        toDate: '2023-12-31',
+      };
+
+      // Act
+      await getRepositoryHeatmap(mockRepoUrl, filters);
+
+      // Assert
+      expect(mockGet).toHaveBeenCalledWith(
+        expect.stringContaining('author=Alice')
+      );
+      expect(mockGet).toHaveBeenCalledWith(
+        expect.stringContaining('fromDate=2023-01-01')
+      );
+      expect(mockGet).toHaveBeenCalledWith(
+        expect.stringContaining('toDate=2023-12-31')
+      );
+    });
+  });
+
+  describe('getFileAnalysis', () => {
+    test('should fetch file analysis successfully', async () => {
+      // Arrange
+      const mockResponse = { data: { ts: 10, md: 5 } };
+      mockGet.mockResolvedValueOnce(mockResponse);
+
+      // Act
+      const result = await getFileAnalysis('test-repo');
+
+      // Assert
+      expect(mockGet).toHaveBeenCalledWith(
+        expect.stringContaining(
+          `/api/commits/file-analysis?repoUrl=test-repo.git`
+        )
+      );
+      expect(result).toEqual(mockResponse.data);
+    });
+  });
+
+  describe('getCodeChurn', () => {
+    test('should fetch code churn with all parameters', async () => {
+      // Arrange
+      const mockResponse = { data: { churnData: [] } };
+      mockGet.mockResolvedValueOnce(mockResponse);
+
+      // Act
+      await getCodeChurn('test-repo', '2023-01-01', '2023-12-31', 5, [
+        '.ts',
+        '.tsx',
+      ]);
+
+      // Assert
+      const url = mockGet.mock.calls[0][0];
+      expect(url).toContain('repoUrl=test-repo.git');
+      expect(url).toContain('fromDate=2023-01-01');
+      expect(url).toContain('toDate=2023-12-31');
+      expect(url).toContain('minChanges=5');
+      expect(url).toContain('extensions=.ts%2C.tsx');
+    });
+  });
+
+  describe('getRepositorySummary', () => {
+    test('should fetch summary successfully', async () => {
+      // Arrange
+      const mockResponse = { data: { summary: { commitCount: 100 } } };
+      mockGet.mockResolvedValueOnce(mockResponse);
+
+      // Act
+      const result = await getRepositorySummary('repo');
+
+      // Assert
+      expect(mockGet).toHaveBeenCalledWith(
+        expect.stringContaining(`/api/repositories/summary?repoUrl=repo.git`)
+      );
+      expect(result).toEqual(mockResponse.data.summary);
+    });
+  });
+
+  describe('getRepositoryFullData', () => {
+    test('should fetch full data successfully', async () => {
+      // Arrange
+      const mockResponse = {
+        data: {
+          commits: [],
+          heatmapData: {},
+          page: 1,
+          limit: 100,
+          isValidHeatmap: true,
+        },
+      };
+      mockGet.mockResolvedValueOnce(mockResponse);
+
+      // Act
+      const result = await getRepositoryFullData('repo', 'week', 1, 100, {
+        author: 'Alice',
+      });
+
+      // Assert
+      const url = mockGet.mock.calls[0][0];
+      expect(url).toContain('/api/repositories/full-data');
+      expect(url).toContain('author=Alice');
+      expect(result).toEqual(mockResponse.data);
+    });
+
+    test('should handle network error (no response)', async () => {
+      // Arrange
+      const mockError = {
+        isAxiosError: true,
+        request: {}, // Indicates no response received
+      };
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryFullData('repo')).rejects.toThrow(
+        'No response from server. Please check your network connection.'
+      );
+    });
+
+    test('should handle server error response (e.g. 500)', async () => {
+      // Arrange
+      const mockError = {
+        isAxiosError: true,
+        response: { status: 500, data: { msg: 'Internal Server Error' } },
+        config: { url: '/api/repositories/full-data' },
+      };
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryFullData('repo')).rejects.toThrow(
+        'Full-data error (500): {"msg":"Internal Server Error"}'
+      );
+    });
+
+    test('should handle non-axios error', async () => {
+      // Arrange
+      (axios.isAxiosError as any).mockImplementationOnce(() => false);
+      const mockError = new Error('Generic error');
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryFullData('repo')).rejects.toThrow(
+        'An unexpected error occurred'
+      );
+    });
+
+    test('should handle axios error without response or request', async () => {
+      // Arrange
+      const mockError = {
+        isAxiosError: true,
+        message: 'Network Error',
+      };
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryFullData('repo')).rejects.toThrow(
+        'Error: Network Error'
+      );
+    });
+  });
+
+  describe('getRepositoryContributors', () => {
+    test('should fetch contributors successfully', async () => {
+      // Arrange
+      const mockResponse = { data: { contributors: [{ login: 'alice' }] } };
+      mockGet.mockResolvedValueOnce(mockResponse);
+
+      // Act
+      const result = await getRepositoryContributors('repo');
+
+      // Assert
+      expect(mockGet).toHaveBeenCalledWith(
+        expect.stringContaining(
+          `/api/repositories/contributors?repoUrl=repo.git`
+        )
+      );
+      expect(result).toEqual(mockResponse.data.contributors);
+    });
+
+    test('should handle network error (no response)', async () => {
+      // Arrange
+      const mockError = {
+        isAxiosError: true,
+        request: {},
+      };
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryContributors('repo')).rejects.toThrow(
+        'No response from server. Please check your network connection.'
+      );
+    });
+
+    test('should handle server error response (e.g. 500)', async () => {
+      // Arrange
+      const mockError = {
+        isAxiosError: true,
+        response: { status: 500, data: { msg: 'Internal Server Error' } },
+        config: { url: '/api/repositories/contributors' },
+      };
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryContributors('repo')).rejects.toThrow(
+        'Contributors error (500): {"msg":"Internal Server Error"}'
+      );
+    });
+
+    test('should handle non-axios error', async () => {
+      // Arrange
+      (axios.isAxiosError as any).mockImplementationOnce(() => false);
+      const mockError = new Error('Generic error');
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryContributors('repo')).rejects.toThrow(
+        'An unexpected error occurred'
+      );
+    });
+
+    test('should handle axios error without response or request', async () => {
+      // Arrange
+      const mockError = {
+        isAxiosError: true,
+        message: 'Network Error',
+      };
+      mockGet.mockRejectedValueOnce(mockError);
+
+      // Act & Assert
+      await expect(getRepositoryContributors('repo')).rejects.toThrow(
+        'Error: Network Error'
+      );
+    });
+  });
+});
diff --git a/apps/frontend/__tests__/services/api.test.tsx b/apps/frontend/__tests__/services/api.test.tsx
deleted file mode 100644
index 7261cec8..00000000
--- a/apps/frontend/__tests__/services/api.test.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { getWorkspaceCommits } from '../../src/services/api';
-import { Commit } from '@gitray/shared-types';
-
-// any axios
-vi.mock('axios', () => {
-  const mockPost = vi.fn();
-  const mockCreate = vi.fn(() => ({ post: mockPost }));
-  const mockIsAxiosError = vi.fn();
-
-  return {
-    default: {
-      create: mockCreate,
-      isAxiosError: mockIsAxiosError,
-    },
-  };
-});
-
-describe('API Service', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test('should fetch commits successfully', async () => {
-    // Arrange
-    const repoUrl = 'https://github.com/user/repo.git';
-    const expectedCommits: Commit[] = [
-      {
-        sha: 'abc123',
-        message: 'Test commit',
-        date: '2023-05-01T12:00:00Z',
-        authorName: 'Test User',
-        authorEmail: 'test@example.com',
-      },
-    ];
-
-    const mockResponse = {
-      data: { commits: expectedCommits },
-      status: 200,
-      statusText: 'OK',
-      headers: {},
-      config: {},
-    };
-
-    // Access the mocked functions
-    const axios = await import('axios');
-    const mockAxiosInstance = (axios.default.create as any)();
-    mockAxiosInstance.post.mockResolvedValueOnce(mockResponse);
-
-    // Act
-    const result = await getWorkspaceCommits(repoUrl);
-
-    // Assert
-    expect(result).toEqual(expectedCommits);
-    expect(mockAxiosInstance.post).toHaveBeenCalledWith('/api/repositories', {
-      repoUrl,
-    });
-  });
-
-  test('should handle API errors correctly', async () => {
-    // Arrange
-    const repoUrl = 'https://github.com/user/repo.git';
-    const error = new Error('Network error');
-
-    // Access the mocked functions
-    const axios = await import('axios');
-    const mockAxiosInstance = (axios.default.create as any)();
-    mockAxiosInstance.post.mockRejectedValueOnce(error);
-    (axios.default.isAxiosError as unknown as any).mockReturnValueOnce(true);
-
-    // Act & Assert
-    await expect(getWorkspaceCommits(repoUrl)).rejects.toThrow('Network error');
-    expect(mockAxiosInstance.post).toHaveBeenCalledWith('/api/repositories', {
-      repoUrl,
-    });
-  });
-});
diff --git a/apps/frontend/__tests__/services/apiExtended.test.tsx b/apps/frontend/__tests__/services/apiExtended.test.tsx
deleted file mode 100644
index 17d7d26e..00000000
--- a/apps/frontend/__tests__/services/apiExtended.test.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import { getHeatmapData, getRepositoryFullData } from '../../src/services/api';
-import { CommitHeatmapData } from '@gitray/shared-types';
-
-// any axios
-vi.mock('axios', () => {
-  const mockGet = vi.fn();
-  const mockPost = vi.fn();
-  const mockCreate = vi.fn(() => ({ get: mockGet, post: mockPost }));
-  const mockIsAxiosError = vi.fn();
-
-  return {
-    default: {
-      create: mockCreate,
-      isAxiosError: mockIsAxiosError,
-    },
-  };
-});
-
-describe('API Service extended', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test('getHeatmapData constructs query params and returns data', async () => {
-    // Arrange
-    const heatmap: CommitHeatmapData = {
-      timePeriod: 'day',
-      data: [],
-      metadata: { maxCommitCount: 0, totalCommits: 0 },
-    };
-
-    // Access the mocked functions
-    const axios = await import('axios');
-    const mockAxiosInstance = (axios.default.create as any)();
-    mockAxiosInstance.get.mockResolvedValueOnce({ data: heatmap });
-
-    // Act
-    const result = await getHeatmapData('url', 'day', { author: 'Me' });
-
-    // Assert
-    expect(mockAxiosInstance.get).toHaveBeenCalled();
-    expect(result).toEqual(heatmap);
-  });
-
-  test('getHeatmapData handles network error', async () => {
-    // Arrange
-    const error = {
-      request: {},
-      message: 'Network',
-    };
-
-    // Access the mocked functions
-    const axios = await import('axios');
-    const mockAxiosInstance = (axios.default.create as any)();
-    mockAxiosInstance.get.mockRejectedValueOnce(error);
-    (axios.default.isAxiosError as unknown as any).mockReturnValueOnce(true);
-
-    // Act & Assert
-    await expect(getHeatmapData('url', 'day')).rejects.toThrow(
-      'No response from server'
-    );
-  });
-
-  test('getRepositoryFullData posts payload and returns commits and heatmap', async () => {
-    // Arrange
-    const response = {
-      data: {
-        commits: [],
-        heatmapData: {
-          timePeriod: 'day',
-          data: [],
-          metadata: { maxCommitCount: 0, totalCommits: 0 },
-        },
-      },
-    };
-
-    // Access the mocked functions
-    const axios = await import('axios');
-    const mockAxiosInstance = (axios.default.create as any)();
-    mockAxiosInstance.post.mockResolvedValueOnce(response);
-
-    // Act
-    const result = await getRepositoryFullData('url', 'day');
-
-    // Assert
-    expect(mockAxiosInstance.post).toHaveBeenCalledWith(
-      '/api/repositories/full-data',
-      { repoUrl: 'url', timePeriod: 'day', filterOptions: undefined }
-    );
-    expect(result).toEqual({
-      commits: [],
-      heatmapData: response.data.heatmapData,
-    });
-  });
-
-  test('getRepositoryFullData handles server error', async () => {
-    // Arrange
-    const error = {
-      response: { data: { error: 'fail' } },
-    };
-
-    // Access the mocked functions
-    const axios = await import('axios');
-    const mockAxiosInstance = (axios.default.create as any)();
-    mockAxiosInstance.post.mockRejectedValueOnce(error);
-    (axios.default.isAxiosError as unknown as any).mockReturnValueOnce(true);
-
-    // Act & Assert
-    await expect(getRepositoryFullData('url')).rejects.toThrow(
-      'Server error: fail'
-    );
-  });
-});
diff --git a/apps/frontend/__tests__/utils/dateUtils.test.tsx b/apps/frontend/__tests__/utils/dateUtils.test.tsx
deleted file mode 100644
index 3d5a8df9..00000000
--- a/apps/frontend/__tests__/utils/dateUtils.test.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import {
-  formatDateByPeriod,
-  generateDateRange,
-  getColorShade,
-  createTooltipText,
-} from '../../src/utils/dateUtils';
-
-describe('dateUtils', () => {
-  describe('formatDateByPeriod', () => {
-    test('formats dates for each period', () => {
-      // Arrange
-      const date = new Date('2023-04-15T12:00:00Z');
-      expect(formatDateByPeriod(date, 'day')).toMatch('Apr');
-      expect(formatDateByPeriod(date, 'month')).toBe('April 2023');
-      expect(formatDateByPeriod(date, 'year')).toBe('2023');
-
-      const week = formatDateByPeriod(date, 'week');
-      expect(week).toMatch('Apr');
-      expect(week).toMatch('2023');
-    });
-  });
-
-  describe('generateDateRange', () => {
-    test('creates a range for days', () => {
-      // Arrange
-      const start = new Date('2023-01-01');
-      const end = new Date('2023-01-03');
-
-      // Act
-      const range = generateDateRange(start, end, 'day');
-
-      // Assert
-      expect(range).toHaveLength(3);
-      expect(range[0]).toContain('Jan');
-    });
-
-    test('creates a range for months', () => {
-      // Arrange
-      const start = new Date('2023-01-01');
-      const end = new Date('2023-03-01');
-
-      // Act
-      const range = generateDateRange(start, end, 'month');
-
-      // Assert
-      expect(range).toEqual(['January 2023', 'February 2023', 'March 2023']);
-    });
-  });
-
-  describe('getColorShade', () => {
-    test('returns correct shades depending on intensity', () => {
-      // Act & Assert
-      expect(getColorShade(0, 10)).toBe('#ebedf0');
-      expect(getColorShade(1, 5)).toBe('#40c463');
-      expect(getColorShade(2, 5)).toBe('#30a14e');
-      expect(getColorShade(3, 5)).toBe('#216e39');
-      expect(getColorShade(4, 5)).toBe('#0d4620');
-      expect(getColorShade(5, 5)).toBe('#0d4620');
-    });
-  });
-
-  describe('createTooltipText', () => {
-    test('formats tooltip text with authors', () => {
-      // Act
-      const text = createTooltipText(2, 'Apr 10', ['Alice', 'Bob', 'Alice']);
-
-      // Assert
-      expect(text).toBe('2 commits on Apr 10 by 2 authors');
-    });
-
-    test('formats tooltip text without authors', () => {
-      // Act
-      const text = createTooltipText(1, 'Apr 10');
-
-      // Assert
-      expect(text).toBe('1 commit on Apr 10');
-    });
-  });
-});
-test('generate weekly and yearly ranges', () => {
-  // Arrange
-  const startWeek = new Date('2023-04-02');
-  const endWeek = new Date('2023-04-16');
-
-  // Act
-  const weekRange = generateDateRange(startWeek, endWeek, 'week');
-
-  // Assert
-  expect(weekRange.length).toBe(3);
-
-  // Arrange
-  const startYear = new Date('2021-01-01');
-  const endYear = new Date('2023-12-31');
-
-  // Act
-  const yearRange = generateDateRange(startYear, endYear, 'year');
-
-  // Assert
-  expect(yearRange).toEqual(['2021', '2022', '2023']);
-});
-
-test('createTooltipText single author', () => {
-  // Act
-  const text = createTooltipText(3, 'Apr', ['Alice']);
-
-  // Assert
-  expect(text).toBe('3 commits on Apr by Alice');
-});
diff --git a/apps/frontend/eslint.config.js b/apps/frontend/eslint.config.mjs
similarity index 52%
rename from apps/frontend/eslint.config.js
rename to apps/frontend/eslint.config.mjs
index 6253ce6e..155e8446 100644
--- a/apps/frontend/eslint.config.js
+++ b/apps/frontend/eslint.config.mjs
@@ -5,8 +5,8 @@ import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
-  { ignores: ['dist'] },
-  // Haupt-TypeScript-Konfiguration (unverändert)
+  { ignores: ['dist', 'build', 'node_modules', 'coverage'] },
+  // Main TypeScript configuration
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],
@@ -28,14 +28,37 @@ export default tseslint.config(
   },
   // Configuration for test setup files
   {
-    files: ['**/test-setup*.ts'],
+    files: [
+      '**/test-setup*.ts',
+      '**/__tests__/**/*.{ts,tsx}',
+      '**/*.test.{ts,tsx}',
+      '**/*.spec.{ts,tsx}',
+    ],
     rules: {
-      '@typescript-eslint/no-explicit-any': 'off', // Disable any rule for test setup files
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  // Configuration for shadcn/ui components - allow helper exports and any types
+  {
+    files: ['**/components/ui/**/*.{ts,tsx}'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  // Configuration for chart components using third-party libraries (Recharts)
+  {
+    files: [
+      '**/components/*Chart*.{ts,tsx}',
+      '**/components/*Heatmap*.{ts,tsx}',
+    ],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
   // Configuration for CommonJS files (config files, etc.)
   {
-    files: ['**/*.cjs', '**/vitest.config.ts'],
+    files: ['**/*.cjs', '**/vitest.config.ts', '**/vite.config.ts'],
     languageOptions: {
       globals: {
         ...globals.node,
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
index e4b78eae..d498e307 100644
--- a/apps/frontend/index.html
+++ b/apps/frontend/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>GitRay - Git analytics</title>
   </head>
+
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 5f6f288a..92f4f360 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -1,46 +1,82 @@
 {
   "name": "frontend",
+  "version": "0.1.0",
   "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "npx vite",
-    "build": "tsc -b",
-    "preview": "npx vite preview",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "dependencies": {
-    "@gitray/shared-types": "workspace:*",
-    "@rive-app/react-canvas": "^4.21.3",
-    "apexcharts": "^4.7.0",
-    "axios": "^1.9.0",
-    "date-fns": "^4.1.0",
-    "react": "^19.1.0",
-    "react-apexcharts": "^1.7.0",
-    "react-calendar-heatmap": "^1.10.0",
-    "react-dom": "^19.1.0",
-    "react-select": "^5.10.1",
-    "typescript": "~5.7.3"
+    "@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",
+    "@rive-app/react-canvas": "^4.24.0",
+    "axios": "^1.13.2",
+    "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",
+    "motion": "*",
+    "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": {
-    "@tailwindcss/cli": "^4.1.7",
     "@tailwindcss/postcss": "^4.1.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react-swc": "^3.10.2",
     "@vitest/coverage-v8": "^3.2.3",
     "@vitest/ui": "^3.2.3",
     "autoprefixer": "^10.4.21",
-    "eslint-plugin-react-refresh": "^0.4.20",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.1.7",
-    "vite": "^6.3.5",
+    "typescript": "~5.7.3",
+    "vite": "6.3.5",
     "vitest": "^3.2.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
 }
diff --git a/apps/frontend/public/vite.svg b/apps/frontend/public/vite.svg
deleted file mode 100644
index e7b8dfb1..00000000
--- a/apps/frontend/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/apps/frontend/src/App.css b/apps/frontend/src/App.css
deleted file mode 100644
index b9d355df..00000000
--- a/apps/frontend/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
index 07501230..104ee46e 100644
--- a/apps/frontend/src/App.tsx
+++ b/apps/frontend/src/App.tsx
@@ -1,16 +1,188 @@
-import MainPage from './pages/MainPage';
-import './App.css';
-
-/**
- * Root component rendered by `main.tsx`. Acts as the entry point for the
- * single-page application.
- */
-
-/**
- * Simple wrapper component that renders the `MainPage` component.
- */
-function App() {
-  return <MainPage />;
-}
+import { useState, useEffect } from 'react';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { SettingsDrawer } from './components/SettingsDrawer';
+import { NewsDrawer } from './components/NewsDrawer';
+import { InfoModal } from './components/InfoModal';
+import { LandingPage } from './components/LandingPage';
+import DashboardPage from './components/DashboardPage';
+import { RiveLoader } from './components/RiveLoader';
+import { Toaster } from './components/ui/sonner';
+import { toast } from 'sonner';
+import { getRepositoryFullData } from './services/api';
+import { Commit, CommitHeatmapData } from '@gitray/shared-types';
+
+type Page = 'landing' | 'dashboard';
+type InfoType = 'what' | 'private' | 'local' | null;
+
+export default function App() {
+  const [currentPage, setCurrentPage] = useState<Page>('landing');
+  const [isSignedIn, setIsSignedIn] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('dark');
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [newsOpen, setNewsOpen] = useState(false);
+  const [infoModalType, setInfoModalType] = useState<InfoType>(null);
+  const [hasUnreadNews, setHasUnreadNews] = useState(true);
+
+  // State for repository data
+  const [commits, setCommits] = useState<Commit[]>([]);
+  const [heatmapData, setHeatmapData] = useState<CommitHeatmapData | null>(
+    null
+  );
+  const [isValidHeatmap, setIsValidHeatmap] = useState<boolean>(true);
+  const [repoUrl, setRepoUrl] = useState<string>('');
+
+  // Apply theme
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+        .matches
+        ? 'dark'
+        : 'light';
+      root.classList.add(systemTheme);
+    } else {
+      root.classList.add(theme);
+    }
+  }, [theme]);
+
+  const handleAnalyze = async (url: string, mode: string) => {
+    setIsLoading(true);
+    toast.info('Analysis started!', {
+      description: `Analyzing repository in ${mode} mode...`,
+    });
+
+    try {
+      // Fetch real data from backend
+      console.log('Calling API with URL:', url);
+      const data = await getRepositoryFullData(url, 'day');
+      console.log('API response:', data);
+
+      // Store the fetched data in state
+      setCommits(data.commits);
+      setHeatmapData(data.heatmapData);
+      setIsValidHeatmap(data.isValidHeatmap);
+      setRepoUrl(url);
+
+      // Navigate to dashboard
+      setCurrentPage('dashboard');
+      setIsSignedIn(true);
+      setIsLoading(false);
+
+      // Show warning if heatmap data is incomplete
+      if (!data.isValidHeatmap) {
+        toast.warning('Heatmap data may be incomplete', {
+          description: 'Some heatmap visualizations may not display correctly.',
+        });
+      }
+
+      toast.success('Analysis complete!', {
+        description: `Successfully analyzed ${data.commits.length} commits.`,
+      });
+    } catch (error) {
+      setIsLoading(false);
+      console.error('Analysis error details:', error);
+      toast.error('Analysis failed', {
+        description:
+          error instanceof Error
+            ? error.message
+            : 'Failed to analyze repository',
+      });
+    }
+  };
 
-export default App;
+  const handleSignOut = () => {
+    setIsSignedIn(false);
+    setCurrentPage('landing');
+    toast.info('Signed out successfully');
+  };
+
+  const handleNavigateHome = () => {
+    setCurrentPage('landing');
+  };
+
+  const handleInfoClick = (type: 'what' | 'private' | 'local') => {
+    setInfoModalType(type);
+  };
+
+  const handleNewsClick = () => {
+    setNewsOpen(true);
+    setHasUnreadNews(false);
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col bg-background text-foreground">
+      <Header
+        isSignedIn={isSignedIn}
+        onMenuClick={() => setSettingsOpen(true)}
+        onNewsClick={handleNewsClick}
+        onSignOut={handleSignOut}
+        onNavigateHome={handleNavigateHome}
+        showNews={currentPage === 'dashboard'}
+        hasUnreadNews={hasUnreadNews}
+        title={currentPage === 'dashboard' ? 'GitRay' : undefined}
+        theme={theme}
+      />
+
+      <main className="flex-1">
+        {isLoading ? (
+          <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center">
+            <RiveLoader
+              size={150}
+              message="Analyzing repository..."
+              theme={theme}
+            />
+          </div>
+        ) : (
+          <>
+            {currentPage === 'landing' && (
+              <LandingPage
+                onAnalyze={handleAnalyze}
+                onInfoClick={handleInfoClick}
+              />
+            )}
+            {currentPage === 'dashboard' && (
+              <DashboardPage
+                commits={commits}
+                heatmapData={heatmapData}
+                isValidHeatmap={isValidHeatmap}
+                repoUrl={repoUrl}
+              />
+            )}
+          </>
+        )}
+      </main>
+
+      <Footer />
+
+      <SettingsDrawer
+        open={settingsOpen}
+        onClose={() => setSettingsOpen(false)}
+        theme={theme}
+        onThemeChange={setTheme}
+      />
+
+      <NewsDrawer open={newsOpen} onClose={() => setNewsOpen(false)} />
+
+      <InfoModal
+        open={infoModalType !== null}
+        onClose={() => setInfoModalType(null)}
+        type={infoModalType}
+      />
+
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          classNames: {
+            toast: 'bg-card border-border',
+            title: 'text-foreground',
+            description: 'text-muted-foreground',
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/frontend/src/assets/react.svg b/apps/frontend/src/assets/react.svg
deleted file mode 100644
index 6c87de9b..00000000
--- a/apps/frontend/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/apps/frontend/src/components/AIInsights.tsx b/apps/frontend/src/components/AIInsights.tsx
new file mode 100644
index 00000000..fba3e169
--- /dev/null
+++ b/apps/frontend/src/components/AIInsights.tsx
@@ -0,0 +1,367 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import {
+  Sparkles,
+  TrendingUp,
+  AlertTriangle,
+  CheckCircle,
+  Lightbulb,
+  Clock,
+  BookOpen,
+} from 'lucide-react';
+import { Alert, AlertDescription } from './ui/alert';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Progress } from './ui/progress';
+
+const projectInsights = {
+  overallScore: 78,
+  summary:
+    'This Angular project shows good architectural patterns with some areas for improvement in code organization and testing coverage.',
+  recommendations: [
+    {
+      category: 'Architecture',
+      priority: 'high',
+      title: 'Implement lazy loading for feature modules',
+      description:
+        'Several large modules are eagerly loaded, impacting initial bundle size. Consider implementing lazy loading for non-critical features.',
+      impact: 'Could reduce initial load time by ~35%',
+    },
+    {
+      category: 'Code Quality',
+      priority: 'medium',
+      title: 'Increase test coverage',
+      description:
+        'Current test coverage is at 62%. Focus on testing critical business logic in the authentication and payment modules.',
+      impact: 'Improve code reliability and maintainability',
+    },
+    {
+      category: 'Best Practices',
+      priority: 'medium',
+      title: 'Standardize component structure',
+      description:
+        'Some components use different organizational patterns. Follow Angular style guide consistently across all modules.',
+      impact: 'Better code maintainability and team collaboration',
+    },
+    {
+      category: 'Performance',
+      priority: 'low',
+      title: 'Optimize change detection',
+      description:
+        "Consider using OnPush strategy for components that don't require frequent updates.",
+      impact: 'Reduce unnecessary re-renders by ~20%',
+    },
+  ],
+};
+
+const weeklyInsights = [
+  {
+    week: 'Week 47 (Nov 1-7)',
+    commits: 34,
+    highlights: [
+      'Implemented new dashboard analytics feature',
+      'Fixed 12 reported bugs in the authentication flow',
+      'Refactored API service layer for better maintainability',
+    ],
+    keyMetrics: {
+      linesAdded: 2340,
+      linesRemoved: 876,
+      filesChanged: 45,
+    },
+  },
+  {
+    week: 'Week 46 (Oct 25-31)',
+    commits: 28,
+    highlights: [
+      'Added user profile customization options',
+      'Upgraded dependencies to latest versions',
+      'Improved error handling across the application',
+    ],
+    keyMetrics: {
+      linesAdded: 1823,
+      linesRemoved: 654,
+      filesChanged: 38,
+    },
+  },
+];
+
+const monthlyTrends = {
+  productivity: 82,
+  codeQuality: 75,
+  collaboration: 88,
+};
+
+export function AIInsights() {
+  return (
+    <div className="space-y-6">
+      <Alert className="border-primary/50 bg-primary/5">
+        <Sparkles className="h-4 w-4 text-primary" />
+        <AlertDescription>
+          AI-powered insights are generated based on your project's structure,
+          commit history, and industry best practices.
+        </AlertDescription>
+      </Alert>
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="overview">
+            <Lightbulb className="h-4 w-4 mr-2" />
+            Overview
+          </TabsTrigger>
+          <TabsTrigger value="weekly">
+            <Clock className="h-4 w-4 mr-2" />
+            Weekly
+          </TabsTrigger>
+          <TabsTrigger value="trends">
+            <TrendingUp className="h-4 w-4 mr-2" />
+            Trends
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Sparkles className="h-5 w-5 text-primary" />
+                Project Health Score
+              </CardTitle>
+              <CardDescription>
+                Overall assessment of your project
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center gap-4">
+                <div className="text-5xl font-bold">
+                  {projectInsights.overallScore}
+                </div>
+                <div className="flex-1">
+                  <Progress
+                    value={projectInsights.overallScore}
+                    className="h-3 mb-2"
+                  />
+                  <p className="text-sm text-muted-foreground">
+                    {projectInsights.summary}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Recommendations</CardTitle>
+              <CardDescription>
+                AI-generated suggestions to improve your project
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {projectInsights.recommendations.map((rec, index) => (
+                <div
+                  key={index}
+                  className="space-y-3 pb-4 border-b last:border-0 last:pb-0"
+                >
+                  <div className="flex items-start gap-3">
+                    <div
+                      className={`p-2 rounded-lg ${
+                        rec.priority === 'high'
+                          ? 'bg-destructive/10'
+                          : rec.priority === 'medium'
+                            ? 'bg-yellow-500/10'
+                            : 'bg-primary/10'
+                      }`}
+                    >
+                      {rec.priority === 'high' ? (
+                        <AlertTriangle className="h-4 w-4 text-destructive" />
+                      ) : (
+                        <Lightbulb className="h-4 w-4 text-primary" />
+                      )}
+                    </div>
+                    <div className="flex-1 space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Badge
+                          variant={
+                            rec.priority === 'high'
+                              ? 'destructive'
+                              : rec.priority === 'medium'
+                                ? 'default'
+                                : 'secondary'
+                          }
+                        >
+                          {rec.category}
+                        </Badge>
+                        <Badge variant="outline" className="text-xs">
+                          {rec.priority} priority
+                        </Badge>
+                      </div>
+                      <div>
+                        <h4 className="font-medium">{rec.title}</h4>
+                        <p className="text-sm text-muted-foreground mt-1">
+                          {rec.description}
+                        </p>
+                        <p className="text-sm text-primary mt-2 flex items-center gap-1">
+                          <TrendingUp className="h-3 w-3" />
+                          Impact: {rec.impact}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="weekly" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <BookOpen className="h-5 w-5" />
+                Weekly Development Summary
+              </CardTitle>
+              <CardDescription>
+                Iterative summary of changes and progress
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {weeklyInsights.map((week, index) => (
+                <div
+                  key={index}
+                  className="space-y-3 pb-6 border-b last:border-0 last:pb-0"
+                >
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-semibold">{week.week}</h4>
+                    <Badge variant="secondary">{week.commits} commits</Badge>
+                  </div>
+
+                  <div className="grid grid-cols-3 gap-3">
+                    <div className="space-y-1 p-3 rounded-lg bg-muted/50">
+                      <p className="text-xs text-muted-foreground">
+                        Lines Added
+                      </p>
+                      <p className="text-lg font-semibold text-green-500">
+                        +{week.keyMetrics.linesAdded.toLocaleString()}
+                      </p>
+                    </div>
+                    <div className="space-y-1 p-3 rounded-lg bg-muted/50">
+                      <p className="text-xs text-muted-foreground">
+                        Lines Removed
+                      </p>
+                      <p className="text-lg font-semibold text-red-500">
+                        -{week.keyMetrics.linesRemoved.toLocaleString()}
+                      </p>
+                    </div>
+                    <div className="space-y-1 p-3 rounded-lg bg-muted/50">
+                      <p className="text-xs text-muted-foreground">
+                        Files Changed
+                      </p>
+                      <p className="text-lg font-semibold">
+                        {week.keyMetrics.filesChanged}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <p className="text-sm font-medium">Highlights:</p>
+                    <ul className="space-y-1">
+                      {week.highlights.map((highlight, hIndex) => (
+                        <li
+                          key={hIndex}
+                          className="flex items-start gap-2 text-sm text-muted-foreground"
+                        >
+                          <CheckCircle className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
+                          <span>{highlight}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              ))}
+              <Button variant="outline" className="w-full">
+                View All Weekly Reports
+              </Button>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="trends" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Monthly Trends</CardTitle>
+              <CardDescription>
+                Key performance indicators for the last 30 days
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-3">
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">
+                      Team Productivity
+                    </span>
+                    <span className="text-sm font-semibold">
+                      {monthlyTrends.productivity}%
+                    </span>
+                  </div>
+                  <Progress
+                    value={monthlyTrends.productivity}
+                    className="h-2"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Based on commit frequency, code reviews, and task completion
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">Code Quality</span>
+                    <span className="text-sm font-semibold">
+                      {monthlyTrends.codeQuality}%
+                    </span>
+                  </div>
+                  <Progress value={monthlyTrends.codeQuality} className="h-2" />
+                  <p className="text-xs text-muted-foreground">
+                    Measured by test coverage, code review feedback, and
+                    refactoring efforts
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">
+                      Team Collaboration
+                    </span>
+                    <span className="text-sm font-semibold">
+                      {monthlyTrends.collaboration}%
+                    </span>
+                  </div>
+                  <Progress
+                    value={monthlyTrends.collaboration}
+                    className="h-2"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Based on PR reviews, pair programming sessions, and code
+                    contributions
+                  </p>
+                </div>
+              </div>
+
+              <Alert className="mt-6">
+                <TrendingUp className="h-4 w-4" />
+                <AlertDescription>
+                  Your team's collaboration score has increased by 12% this
+                  month. Keep up the great work!
+                </AlertDescription>
+              </Alert>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/ActivityChart.tsx b/apps/frontend/src/components/ActivityChart.tsx
new file mode 100644
index 00000000..3d3c00c1
--- /dev/null
+++ b/apps/frontend/src/components/ActivityChart.tsx
@@ -0,0 +1,113 @@
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { Commit } from '@gitray/shared-types';
+
+interface ActivityChartProps {
+  commits?: Commit[];
+}
+
+// Generate activity data from commits for the last 30 days
+function generateActivityData(commits: Commit[]) {
+  const data = [];
+  const today = new Date();
+  const thirtyDaysAgo = new Date(today);
+  thirtyDaysAgo.setDate(today.getDate() - 29);
+
+  // Create a map of date -> commit count
+  const commitsByDate = new Map<string, number>();
+
+  // Filter commits from last 30 days and count by date
+  commits.forEach((commit) => {
+    const commitDate = new Date(commit.date);
+    if (commitDate >= thirtyDaysAgo && commitDate <= today) {
+      const dateKey = commitDate.toISOString().split('T')[0];
+      commitsByDate.set(dateKey, (commitsByDate.get(dateKey) || 0) + 1);
+    }
+  });
+
+  // Generate data for each day in the last 30 days
+  for (let i = 29; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(date.getDate() - i);
+    const dateKey = date.toISOString().split('T')[0];
+
+    data.push({
+      date: date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      }),
+      commits: commitsByDate.get(dateKey) || 0,
+    });
+  }
+
+  return data;
+}
+
+export function ActivityChart({ commits = [] }: ActivityChartProps) {
+  const data = generateActivityData(commits);
+  return (
+    <div className="h-[280px] w-full -mb-6">
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart
+          data={data}
+          margin={{ top: 10, right: 10, left: -10, bottom: 0 }}
+        >
+          <defs>
+            <linearGradient id="colorCommits" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#5B9A8B" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="#5B9A8B" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid
+            strokeDasharray="3 3"
+            className="stroke-border"
+            opacity={0.3}
+          />
+          <XAxis
+            dataKey="date"
+            tick={{ fontSize: 12 }}
+            tickLine={false}
+            className="text-muted-foreground"
+            interval="preserveStartEnd"
+          />
+          <YAxis
+            tick={{ fontSize: 12 }}
+            tickLine={false}
+            className="text-muted-foreground"
+            width={30}
+          />
+          <Tooltip
+            content={({ active, payload }) => {
+              if (active && payload && payload.length) {
+                return (
+                  <div className="bg-popover border border-border rounded-lg p-3 shadow-lg">
+                    <p className="text-sm">{payload[0].payload.date}</p>
+                    <p className="text-sm font-semibold text-primary">
+                      {payload[0].value} commits
+                    </p>
+                  </div>
+                );
+              }
+              return null;
+            }}
+          />
+          <Area
+            type="monotone"
+            dataKey="commits"
+            stroke="#5B9A8B"
+            strokeWidth={2}
+            fillOpacity={1}
+            fill="url(#colorCommits)"
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/ActivityHeatmap.tsx b/apps/frontend/src/components/ActivityHeatmap.tsx
deleted file mode 100644
index ad655f16..00000000
--- a/apps/frontend/src/components/ActivityHeatmap.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  useMemo,
-  useRef,
-  useCallback,
-} from 'react';
-import CalendarHeatmap from 'react-calendar-heatmap';
-import 'react-calendar-heatmap/dist/styles.css';
-import '../styles/heatmap.css';
-
-// Displays a calendar-style heatmap of commit activity with optional filters
-import Select, {
-  StylesConfig,
-  GroupBase,
-  ControlProps,
-  CSSObjectWithLabel,
-  OptionProps,
-} from 'react-select';
-import {
-  CommitFilterOptions,
-  CommitHeatmapData,
-  Commit,
-  TIME,
-} from '@gitray/shared-types';
-import { getHeatmapData } from '../services/api';
-import RiveLoader from './RiveLoader';
-
-interface ActivityHeatmapProps {
-  repoUrl: string;
-  commits: Commit[];
-}
-
-interface HeatmapValue {
-  date: string;
-  count: number;
-  authors?: string[];
-}
-
-// add this below HeatmapValue
-interface AuthorOption {
-  value: string;
-  label: string;
-  count?: number;
-}
-
-const customStyles: StylesConfig<
-  AuthorOption,
-  true,
-  GroupBase<AuthorOption>
-> = {
-  control: (
-    base: CSSObjectWithLabel,
-
-    _props: ControlProps<AuthorOption, true, GroupBase<AuthorOption>>
-  ) => ({
-    ...base,
-    backgroundColor: '#1f2937', // Maintains dark background for the control
-  }),
-  placeholder: (base: CSSObjectWithLabel) => ({
-    ...base,
-    color: 'white', // Only placeholder text in white
-  }),
-  input: (base: CSSObjectWithLabel) => ({
-    ...base,
-    color: 'white', // Input text remains white
-  }),
-  menu: (base: CSSObjectWithLabel) => ({
-    ...base,
-    backgroundColor: '#1f2937', // Set dropdown menu background to dark
-  }),
-  option: (
-    base: CSSObjectWithLabel,
-    state: OptionProps<AuthorOption, true, GroupBase<AuthorOption>>
-  ) => ({
-    ...base,
-    backgroundColor: state.isFocused ? '#374151' : '#1f2937',
-    color: 'white',
-    cursor: 'pointer',
-  }),
-  multiValue: (base: CSSObjectWithLabel) => ({
-    ...base,
-    backgroundColor: '#065f46',
-    color: 'white',
-  }),
-  multiValueLabel: (base: CSSObjectWithLabel) => ({
-    ...base,
-    color: 'white',
-  }),
-  multiValueRemove: (base: CSSObjectWithLabel) => ({
-    ...base,
-    color: 'white',
-    ':hover': {
-      backgroundColor: '#064e3b',
-      color: 'white',
-    },
-  }),
-};
-
-/**
- * Component that renders a calendar-style heatmap of commit activity.
- * Users can filter by author and the heatmap dynamically adjusts to the
- * container size.
- */
-const ActivityHeatmap: React.FC<ActivityHeatmapProps> = ({
-  repoUrl,
-  commits,
-}) => {
-  const [filterOptions, setFilterOptions] = useState<CommitFilterOptions>({});
-  const [data, setData] = useState<CommitHeatmapData | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // memoize start/end dates to avoid unstable deps
-  const startDate = useMemo(() => new Date(Date.now() - TIME.DAY * 364), []);
-  const endDate = useMemo(() => new Date(), []);
-
-  // Count commits per author in that range
-  const authorCommitCounts = useMemo(() => {
-    const counts = new Map<string, number>();
-    for (const commit of commits) {
-      const commitDate = new Date(commit.date);
-      if (commitDate >= startDate && commitDate <= endDate) {
-        const previousCount = counts.get(commit.authorName) ?? 0;
-        counts.set(commit.authorName, previousCount + 1);
-      }
-    }
-    return counts;
-  }, [commits, startDate, endDate]);
-
-  // Build dropdown options including the count and sort by commit count
-  const authorOptions = useMemo(
-    () =>
-      Array.from(new Set(commits.map((c) => c.authorName)))
-        .map((a) => ({
-          value: a,
-          label: `${a} (${authorCommitCounts.get(a) ?? 0})`,
-          count: authorCommitCounts.get(a) ?? 0,
-        }))
-        .sort((a, b) => b.count - a.count),
-    [commits, authorCommitCounts]
-  );
-
-  // Calculate dynamic cell size based on container width
-  useEffect(() => {
-    const updateWidth = () => {
-      if (containerRef.current) {
-        const width = containerRef.current.offsetWidth;
-        setContainerWidth(width);
-      }
-    };
-
-    updateWidth();
-    window.addEventListener('resize', updateWidth);
-    return () => window.removeEventListener('resize', updateWidth);
-  }, []);
-
-  // Calculate cell size dynamically
-  // We have 53 weeks (columns) + some padding
-  // Formula: (containerWidth - padding) / (weeks + gaps)
-  const cellSize = useMemo(() => {
-    if (containerWidth === 0) return 12; // Default size
-    const padding = 40; // Space for labels
-    const weeks = 53;
-    const gutterSize = 2;
-    const availableWidth = containerWidth - padding;
-    const calculatedSize = Math.floor(
-      (availableWidth - weeks * gutterSize) / weeks
-    );
-    // Limit the size to reasonable bounds
-    return Math.min(Math.max(calculatedSize, 8), 20);
-  }, [containerWidth]);
-
-  // Helper to compare author arrays
-  const compareAuthorArrays = (a: string[], b: string[]): boolean => {
-    if (a.length !== b.length) return false;
-    const sortedA = [...a].sort((x, y) => x.localeCompare(y));
-    const sortedB = [...b].sort((x, y) => x.localeCompare(y));
-    return sortedA.every((v, i) => v === sortedB[i]);
-  };
-
-  const isFilterOptionsEqual = (
-    a: CommitFilterOptions,
-    b: CommitFilterOptions
-  ) => {
-    const A = a.authors ?? [];
-    const B = b.authors ?? [];
-    return compareAuthorArrays(A, B);
-  };
-
-  // Ref to hold last‐used filters
-  const prevFilters = useRef<CommitFilterOptions>({ authors: [] });
-
-  const fetchData = useCallback(async () => {
-    if (!repoUrl) return;
-    setLoading(true);
-    try {
-      const d = await getHeatmapData(repoUrl, 'day', filterOptions);
-      setData(d);
-    } finally {
-      setLoading(false);
-    }
-  }, [repoUrl, filterOptions]);
-
-  // Only call fetchData when filters changed
-  const handleMenuClose = () => {
-    if (!isFilterOptionsEqual(filterOptions, prevFilters.current)) {
-      fetchData();
-      prevFilters.current = filterOptions;
-    }
-  };
-
-  // initial fetch on repoUrl change
-  useEffect(() => {
-    fetchData().catch(console.error);
-  }, [fetchData]);
-
-  const values: HeatmapValue[] = data
-    ? data.data.map((b) => ({
-        date: b.periodStart,
-        count: b.commitCount,
-        authors: b.authors,
-      }))
-    : [];
-  const max = data?.metadata?.maxCommitCount ?? 0;
-
-  const classForValue = (v?: HeatmapValue) => {
-    if (!v) return 'color-empty';
-    const step = max / 4 || 1;
-    const level = Math.min(4, Math.ceil(v.count / step));
-    return `color-scale-${level}`;
-  };
-
-  const titleForValue = (v?: HeatmapValue) => {
-    if (!v) return null;
-    const plural = v.count === 1 ? '' : 's';
-    return `${v.count} commit${plural} on ${v.date}`;
-  };
-
-  return (
-    <div className="w-full bg-gray-800 rounded-lg shadow-lg">
-      <div className="p-6">
-        <h2 className="text-2xl font-bold mb-6 text-white">
-          Repository Activity
-        </h2>
-
-        {/* Author selector with proper spacing */}
-        <div className="mb-8 relative">
-          <label
-            htmlFor="author-filter"
-            className="block text-sm font-medium text-gray-300 mb-2"
-          >
-            Filter by Authors
-          </label>
-          <Select
-            inputId="author-filter"
-            isMulti
-            options={authorOptions}
-            className="w-full max-w-md text-sm"
-            closeMenuOnSelect={false}
-            onMenuClose={handleMenuClose}
-            styles={customStyles}
-            value={
-              filterOptions.authors?.map((a) => ({ value: a, label: a })) ?? []
-            }
-            onChange={(vals) =>
-              setFilterOptions({
-                ...filterOptions,
-                authors: vals.map((v) => v.value),
-              })
-            }
-            placeholder="Select author(s) to filter..."
-          />
-          {loading && (
-            <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-              <RiveLoader size={20} className="" />
-            </div>
-          )}
-        </div>
-        <br></br>
-        {/* Heatmap container with dynamic sizing */}
-        <div ref={containerRef} className="w-full overflow-x-auto">
-          {loading ? (
-            <RiveLoader
-              size={80}
-              message="Loading heatmap data..."
-              className="h-40 flex justify-center items-center"
-            />
-          ) : (
-            <div className="min-w-fit">
-              <CalendarHeatmap
-                startDate={startDate}
-                endDate={endDate}
-                values={values}
-                showWeekdayLabels
-                cellSize={cellSize}
-                gutterSize={2}
-                classForValue={classForValue as (_v?: HeatmapValue) => string}
-                titleForValue={
-                  titleForValue as (_v?: HeatmapValue) => string | null
-                }
-                onClick={(_v: HeatmapValue | undefined) =>
-                  _v &&
-                  window.open(`${repoUrl}/commits?until=${_v.date}`, '_blank')
-                }
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ActivityHeatmap;
diff --git a/apps/frontend/src/components/CodeChurnChart.tsx b/apps/frontend/src/components/CodeChurnChart.tsx
new file mode 100644
index 00000000..a2b998b8
--- /dev/null
+++ b/apps/frontend/src/components/CodeChurnChart.tsx
@@ -0,0 +1,255 @@
+import { useMemo } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './ui/card';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from 'recharts';
+import { AlertTriangle, TrendingUp } from 'lucide-react';
+import { Badge } from './ui/badge';
+import { CodeChurnAnalysis } from '@gitray/shared-types';
+
+interface CodeChurnChartProps {
+  churnData?: CodeChurnAnalysis | null;
+}
+
+const COLORS = {
+  high: '#FFA69E',
+  medium: '#FAE3B4',
+  low: '#5B9A8B',
+};
+
+// Helper function to truncate long filenames
+function truncateFilename(filename: string, maxLength: number = 25): string {
+  if (filename.length <= maxLength) return filename;
+
+  const extension =
+    filename.lastIndexOf('.') > 0
+      ? filename.substring(filename.lastIndexOf('.'))
+      : '';
+  const nameWithoutExt = extension
+    ? filename.substring(0, filename.lastIndexOf('.'))
+    : filename;
+
+  const availableLength = maxLength - extension.length - 3; // 3 for "..."
+
+  if (availableLength <= 0) {
+    return filename.substring(0, maxLength - 3) + '...';
+  }
+
+  return nameWithoutExt.substring(0, availableLength) + '...' + extension;
+}
+
+// Convert backend data to chart format (backend already limits results)
+function convertChurnData(churnAnalysis: CodeChurnAnalysis) {
+  // Take only top 20 for visualization (backend sends top 50)
+  return churnAnalysis.files.slice(0, 20).map((file) => {
+    // Extract just the filename from the full path
+    const fileName = file.path.split('/').pop() || file.path;
+    const displayName = truncateFilename(fileName, 25);
+
+    return {
+      file: displayName,
+      fullPath: file.path, // Keep full path for tooltip
+      changes: file.changes,
+      category: file.risk,
+      bugRisk: file.risk.charAt(0).toUpperCase() + file.risk.slice(1),
+    };
+  });
+}
+
+export function CodeChurnChart({ churnData }: CodeChurnChartProps) {
+  console.log('CodeChurnChart received churnData:', churnData);
+
+  const chartData = useMemo(() => {
+    if (churnData && churnData.files && Array.isArray(churnData.files)) {
+      const converted = convertChurnData(churnData);
+      console.log('Converted chart data:', converted);
+      return converted;
+    }
+    console.log('No churn data available');
+    return [];
+  }, [churnData]);
+
+  const stats = useMemo(() => {
+    if (churnData && churnData.metadata) {
+      return {
+        highRisk: churnData.metadata.highRiskCount,
+        mediumRisk: churnData.metadata.mediumRiskCount,
+        total: churnData.metadata.totalFiles,
+      };
+    }
+    return { highRisk: 0, mediumRisk: 0, total: 0 };
+  }, [churnData]);
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card className="border-destructive/50">
+          <CardHeader className="pb-3">
+            <CardDescription>High Risk Files</CardDescription>
+            <CardTitle className="text-2xl">{stats.highRisk}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Files changed 30+ times
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-yellow-500/50">
+          <CardHeader className="pb-3">
+            <CardDescription>Medium Risk Files</CardDescription>
+            <CardTitle className="text-2xl">{stats.mediumRisk}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Files changed 15-30 times
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-primary/50">
+          <CardHeader className="pb-3">
+            <CardDescription>Total Analyzed</CardDescription>
+            <CardTitle className="text-2xl">{stats.total}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Most frequently changed
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <TrendingUp className="h-5 w-5" />
+            Code Churn by File
+          </CardTitle>
+          <CardDescription>
+            Files with the most changes - potential bug hotspots
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {chartData.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <TrendingUp className="h-12 w-12 text-muted-foreground mb-4 opacity-50" />
+              <p className="text-lg font-medium text-muted-foreground mb-2">
+                No churn data available
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Code churn analysis could not be loaded for this repository.
+              </p>
+            </div>
+          ) : (
+            <>
+              <ResponsiveContainer width="100%" height={400}>
+                <BarChart
+                  data={chartData}
+                  layout="vertical"
+                  barSize={20}
+                  margin={{ left: 10 }}
+                >
+                  <CartesianGrid strokeDasharray="3 3" opacity={0.1} />
+                  <XAxis type="number" />
+                  <YAxis
+                    dataKey="file"
+                    type="category"
+                    width={200}
+                    fontSize={12}
+                    interval={0}
+                    tickLine={false}
+                  />
+                  <Tooltip
+                    cursor={{ height: 17 }}
+                    contentStyle={{
+                      backgroundColor: 'hsl(var(--background))',
+                      border: '1px solid hsl(var(--border))',
+                      borderRadius: '8px',
+                    }}
+                    content={({ active, payload }) => {
+                      if (active && payload && payload.length) {
+                        const data = payload[0].payload;
+                        return (
+                          <div className="bg-background border border-border rounded-lg p-3 shadow-lg">
+                            <p className="text-sm font-medium mb-1">
+                              {data.file}
+                            </p>
+                            <p className="text-xs text-muted-foreground mb-2">
+                              {data.fullPath}
+                            </p>
+                            <p className="text-sm">
+                              <span className="font-semibold">
+                                {data.changes}
+                              </span>{' '}
+                              changes
+                            </p>
+                            <p className="text-xs text-muted-foreground mt-1">
+                              Risk: {data.bugRisk}
+                            </p>
+                          </div>
+                        );
+                      }
+                      return null;
+                    }}
+                  />
+                  <Bar dataKey="changes" radius={[0, 4, 4, 0]}>
+                    {chartData.map((entry, index) => (
+                      <Cell
+                        key={`cell-${index}`}
+                        fill={COLORS[entry.category as keyof typeof COLORS]}
+                      />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+
+              <div className="mt-6 space-y-3">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="font-medium">Bug Hotspot Analysis</span>
+                </div>
+                {chartData.slice(0, 3).map((file, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between p-3 bg-muted/50 rounded-lg hover:bg-muted transition-colors"
+                    title={file.fullPath}
+                  >
+                    <div className="flex items-center gap-3">
+                      <AlertTriangle className="h-4 w-4 text-destructive" />
+                      <div>
+                        <p className="text-sm font-medium">{file.file}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {file.changes} changes detected
+                        </p>
+                      </div>
+                    </div>
+                    <Badge
+                      variant={
+                        file.bugRisk === 'High' ? 'destructive' : 'secondary'
+                      }
+                    >
+                      {file.bugRisk} Risk
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/CommitHeatmap.tsx b/apps/frontend/src/components/CommitHeatmap.tsx
new file mode 100644
index 00000000..930f6a62
--- /dev/null
+++ b/apps/frontend/src/components/CommitHeatmap.tsx
@@ -0,0 +1,208 @@
+import { useMemo } from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './ui/tooltip';
+import { Calendar } from 'lucide-react';
+import { Commit, CommitHeatmapData } from '@gitray/shared-types';
+
+interface CommitHeatmapProps {
+  commits?: Commit[];
+  heatmapData?: CommitHeatmapData;
+  /** Whether the heatmap data is valid and complete */
+  isValidHeatmap?: boolean;
+  /** Number of months to display (3, 6, or 12) */
+  monthsToShow?: 3 | 6 | 12;
+}
+
+export function CommitHeatmap({
+  commits,
+  heatmapData,
+  isValidHeatmap = true,
+  monthsToShow = 12,
+}: CommitHeatmapProps) {
+  // Log warning if heatmap data is marked as invalid
+  if (heatmapData && !isValidHeatmap) {
+    console.warn('[CommitHeatmap] Heatmap data may be incomplete or invalid');
+  }
+
+  // Prefer heatmapData from API (contains ALL commits), fallback to computing from commits
+  const data = useMemo(() => {
+    // Create a map of commit data from the API
+    const commitDataMap = new Map<string, number>();
+
+    // First try to use the aggregated heatmap data from the API (preferred - has all data)
+    if (heatmapData && heatmapData.data && heatmapData.data.length > 0) {
+      heatmapData.data.forEach((bucket) => {
+        const dateStr = bucket.periodStart.split('T')[0];
+        commitDataMap.set(dateStr, bucket.commitCount);
+      });
+    }
+    // Fallback: compute from commits if heatmapData is not available
+    else if (commits && commits.length > 0) {
+      commits.forEach((commit) => {
+        const dateStr = commit.date.split('T')[0];
+        commitDataMap.set(dateStr, (commitDataMap.get(dateStr) || 0) + 1);
+      });
+    }
+
+    // Always generate a full 365-day grid, but only show commits within the selected time range
+    const result = [];
+    const today = new Date();
+    const startDate = new Date();
+    startDate.setMonth(today.getMonth() - monthsToShow);
+
+    // Generate data for the last 365 days (full year for consistent layout)
+    for (let i = 364; i >= 0; i--) {
+      const date = new Date(today);
+      date.setDate(date.getDate() - i);
+      const dateStr = date.toISOString().split('T')[0];
+
+      // Only show commit count if the date is within the selected time range
+      const isInRange = date >= startDate && date <= today;
+      const count = isInRange ? commitDataMap.get(dateStr) || 0 : 0;
+
+      result.push({
+        date: dateStr,
+        count: count,
+      });
+    }
+
+    return result;
+  }, [commits, heatmapData, monthsToShow]);
+
+  // Get intensity color based on count
+  const getColor = (count: number) => {
+    if (count === 0) return 'bg-muted/30';
+    if (count < 3) return 'bg-primary/20';
+    if (count < 6) return 'bg-primary/40';
+    if (count < 9) return 'bg-primary/60';
+    if (count < 12) return 'bg-primary/80';
+    return 'bg-primary';
+  };
+
+  // Group data by weeks
+  const weeks: Array<Array<{ date: string; count: number }>> = [];
+  let currentWeek: Array<{ date: string; count: number }> = [];
+
+  data.forEach((day, index) => {
+    const dayOfWeek = new Date(day.date).getDay();
+
+    if (dayOfWeek === 0 && currentWeek.length > 0) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+
+    currentWeek.push(day);
+
+    if (index === data.length - 1 && currentWeek.length > 0) {
+      weeks.push(currentWeek);
+    }
+  });
+
+  const months = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+
+  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  if (data.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <Calendar className="h-12 w-12 text-muted-foreground mb-4 opacity-50" />
+        <p className="text-lg font-medium text-muted-foreground mb-2">
+          No commit data available
+        </p>
+        <p className="text-sm text-muted-foreground">
+          Commit activity heatmap could not be generated for this repository.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <h3 className="text-base md:text-lg">Commit Activity</h3>
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span className="hidden sm:inline">Less</span>
+          <div className="flex gap-1">
+            <div className="h-2.5 w-2.5 md:h-3 md:w-3 rounded-sm bg-muted/30" />
+            <div className="h-2.5 w-2.5 md:h-3 md:w-3 rounded-sm bg-primary/20" />
+            <div className="h-2.5 w-2.5 md:h-3 md:w-3 rounded-sm bg-primary/40" />
+            <div className="h-2.5 w-2.5 md:h-3 md:w-3 rounded-sm bg-primary/60" />
+            <div className="h-2.5 w-2.5 md:h-3 md:w-3 rounded-sm bg-primary" />
+          </div>
+          <span className="hidden sm:inline">More</span>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto pb-2">
+        <div className="inline-flex gap-1">
+          <div className="flex flex-col gap-1 pr-2 text-xs text-muted-foreground">
+            <div className="h-3" />
+            {days.map((day, i) => (
+              <div key={day} className="h-3 leading-3">
+                {i % 2 === 1 ? day : ''}
+              </div>
+            ))}
+          </div>
+
+          <TooltipProvider>
+            <div className="flex gap-1">
+              {weeks.map((week, weekIndex) => {
+                // Check if this week contains the first day of a new month
+                const currentMonth = new Date(week[0].date).getMonth();
+                const previousMonth =
+                  weekIndex > 0
+                    ? new Date(weeks[weekIndex - 1][0].date).getMonth()
+                    : -1;
+                const isNewMonth = currentMonth !== previousMonth;
+
+                return (
+                  <div key={weekIndex} className="flex flex-col gap-1">
+                    {isNewMonth ? (
+                      <div className="h-3 text-xs text-muted-foreground leading-3">
+                        {months[currentMonth]}
+                      </div>
+                    ) : (
+                      <div className="h-3" />
+                    )}
+                    {week.map((day) => (
+                      <Tooltip key={day.date}>
+                        <TooltipTrigger asChild>
+                          <div
+                            className={`h-3 w-3 rounded-sm ${getColor(day.count)} transition-all hover:ring-2 hover:ring-primary cursor-pointer`}
+                          />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="text-xs">
+                            {day.count} {day.count === 1 ? 'commit' : 'commits'}{' '}
+                            on {new Date(day.date).toLocaleDateString()}
+                          </p>
+                        </TooltipContent>
+                      </Tooltip>
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          </TooltipProvider>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/CommitList.tsx b/apps/frontend/src/components/CommitList.tsx
deleted file mode 100644
index 25415228..00000000
--- a/apps/frontend/src/components/CommitList.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { Commit } from '@gitray/shared-types';
-
-/**
- * Displays a table listing commit metadata such as SHA, author and message.
- * If no commits are provided, nothing is rendered.
- */
-
-interface CommitListProps {
-  commits: Commit[];
-}
-
-/**
- * Presents commit data in a table layout. Designed to be lightweight and
- * reusable across pages displaying commit lists.
- */
-const CommitList: React.FC<CommitListProps> = ({ commits }) => {
-  // Nothing to render if there are no commits
-  if (commits.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="w-full max-w-4xl mt-8">
-      <h2 className="text-xl font-bold mb-4">Repository Commits</h2>
-      <div className="overflow-x-auto">
-        <table className="min-w-full bg-white border border-gray-200">
-          <thead className="bg-gray-100">
-            <tr>
-              <th className="py-2 px-4 border-b text-left">SHA</th>
-              <th className="py-2 px-4 border-b text-left">Date</th>
-              <th className="py-2 px-4 border-b text-left">Author</th>
-              <th className="py-2 px-4 border-b text-left">Message</th>
-            </tr>
-          </thead>
-          <tbody>
-            {commits.map((commit) => (
-              <tr key={commit.sha} className="hover:bg-gray-50">
-                <td className="py-2 px-4 border-b font-mono text-sm">
-                  {commit.sha.substring(0, 7)}
-                </td>
-                <td className="py-2 px-4 border-b">
-                  {new Date(commit.date).toLocaleDateString()}
-                </td>
-                <td className="py-2 px-4 border-b">
-                  {commit.authorName}
-                  <span className="text-gray-500 text-xs block">
-                    {commit.authorEmail}
-                  </span>
-                </td>
-                <td className="py-2 px-4 border-b">{commit.message}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};
-
-export default CommitList;
diff --git a/apps/frontend/src/components/DashboardPage.tsx b/apps/frontend/src/components/DashboardPage.tsx
new file mode 100644
index 00000000..08664bbb
--- /dev/null
+++ b/apps/frontend/src/components/DashboardPage.tsx
@@ -0,0 +1,746 @@
+import { useState, useEffect, useMemo } from 'react';
+import {
+  Lock,
+  Users,
+  GitBranch,
+  Calendar,
+  TrendingUp,
+  AlertCircle,
+  Sparkles,
+  BarChart3,
+  DollarSign,
+  Flame,
+  Zap,
+  Target,
+  Trophy,
+  Star,
+  Rocket,
+  Crown,
+  Medal,
+  Award,
+  ExternalLink,
+  GitFork,
+} from 'lucide-react';
+import { motion } from 'motion/react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Avatar, AvatarFallback } from './ui/avatar';
+import { Alert, AlertDescription } from './ui/alert';
+import { CommitHeatmap } from './CommitHeatmap';
+import { FileDistributionChart } from './FileDistributionChart';
+import { ActivityChart } from './ActivityChart';
+import { CodeChurnChart } from './CodeChurnChart';
+import { FileTypeList } from './FileTypeList';
+import { GraphViewTimeline } from './GraphViewTimeline';
+import { GitDiffViewer } from './GitDiffViewer';
+import { AIInsights } from './AIInsights';
+import { PremiumFeatures } from './PremiumFeatures';
+import {
+  Commit,
+  CommitHeatmapData,
+  FileTypeDistribution,
+  CodeChurnAnalysis,
+  RepositorySummary,
+} from '@gitray/shared-types';
+import {
+  getFileAnalysis,
+  getCodeChurn,
+  getRepositorySummary,
+} from '../services/api';
+
+const contributors = [
+  { name: 'John Doe', initials: 'JD' },
+  { name: 'Jane Smith', initials: 'JS' },
+  { name: 'Mike Johnson', initials: 'MJ' },
+  { name: 'Sarah Williams', initials: 'SW' },
+  { name: 'Tom Brown', initials: 'TB' },
+];
+
+interface DashboardPageProps {
+  commits: Commit[];
+  heatmapData: CommitHeatmapData | null;
+  isValidHeatmap: boolean;
+  repoUrl: string;
+  /** Current branch being analyzed (from backend API) */
+  currentBranch?: string;
+}
+
+// Helper function to format repository age with proper pluralization
+const formatAge = (years: number, months: number): string => {
+  const parts: string[] = [];
+
+  if (years > 0) {
+    parts.push(`${years} ${years === 1 ? 'year' : 'years'}`);
+  }
+
+  if (months > 0) {
+    parts.push(`${months} ${months === 1 ? 'month' : 'months'}`);
+  }
+
+  return parts.length > 0 ? parts.join(' ') : '0 months';
+};
+
+// Gamification: Get motivational message and icon based on streak length
+const getStreakMotivation = (streak: number) => {
+  if (streak === 0) {
+    return {
+      message: 'Start your journey today!',
+      icon: Target,
+      color: 'text-muted-foreground',
+      bgColor: 'bg-muted/30',
+    };
+  } else if (streak === 1) {
+    return {
+      message: 'Great start! Keep going!',
+      icon: Zap,
+      color: 'text-blue-400',
+      bgColor: 'bg-blue-500/10',
+    };
+  } else if (streak >= 2 && streak <= 4) {
+    return {
+      message: 'Building momentum!',
+      icon: TrendingUp,
+      color: 'text-cyan-400',
+      bgColor: 'bg-cyan-500/10',
+    };
+  } else if (streak >= 5 && streak <= 9) {
+    return {
+      message: "You're on fire! 🔥",
+      icon: Flame,
+      color: 'text-orange-400',
+      bgColor: 'bg-orange-500/10',
+    };
+  } else if (streak >= 10 && streak <= 20) {
+    return {
+      message: 'Impressive dedication!',
+      icon: Star,
+      color: 'text-yellow-400',
+      bgColor: 'bg-yellow-500/10',
+    };
+  } else if (streak >= 21 && streak <= 29) {
+    return {
+      message: 'Unstoppable force!',
+      icon: Rocket,
+      color: 'text-purple-400',
+      bgColor: 'bg-purple-500/10',
+    };
+  } else if (streak >= 30 && streak <= 59) {
+    return {
+      message: 'Achievement unlocked!',
+      icon: Trophy,
+      color: 'text-amber-400',
+      bgColor: 'bg-amber-500/10',
+    };
+  } else if (streak >= 60 && streak <= 99) {
+    return {
+      message: 'Legendary streak!',
+      icon: Medal,
+      color: 'text-red-400',
+      bgColor: 'bg-red-500/10',
+    };
+  } else if (streak >= 100 && streak <= 364) {
+    return {
+      message: 'Hall of Fame!',
+      icon: Crown,
+      color: 'text-yellow-300',
+      bgColor: 'bg-yellow-500/20',
+    };
+  } else {
+    return {
+      message: 'Absolute Legend!',
+      icon: Award,
+      color: 'text-pink-400',
+      bgColor: 'bg-pink-500/20',
+    };
+  }
+};
+
+export default function DashboardPage({
+  commits: commitsFromProps,
+  heatmapData,
+  isValidHeatmap,
+  repoUrl,
+  currentBranch,
+}: DashboardPageProps) {
+  const [fileDistribution, setFileDistribution] =
+    useState<FileTypeDistribution | null>(null);
+  const [churnData, setChurnData] = useState<CodeChurnAnalysis | null>(null);
+  const [commits, setCommits] = useState<Commit[]>(commitsFromProps);
+  const [heatmapMonths, setHeatmapMonths] = useState<3 | 6 | 12>(12);
+  const [summary, setSummary] = useState<RepositorySummary | null>(null);
+  const [activeTab, setActiveTab] = useState<string>('overview');
+  const [analyticsTab, setAnalyticsTab] = useState<string>('churn');
+
+  // Handler to navigate to File Types tab
+  const navigateToFileTypes = () => {
+    setActiveTab('analytics');
+    setAnalyticsTab('files');
+  };
+
+  // Update local commits state when props change
+  useEffect(() => {
+    setCommits(commitsFromProps);
+  }, [commitsFromProps]);
+
+  // Fetch file analysis, churn data, and summary when repoUrl changes
+  useEffect(() => {
+    if (repoUrl) {
+      // Fetch repository summary
+      getRepositorySummary(repoUrl)
+        .then((data) => {
+          console.log('Repository summary fetched:', data);
+          setSummary(data);
+        })
+        .catch((error) => {
+          console.error('Failed to fetch repository summary:', error);
+          setSummary(null);
+        });
+
+      // Fetch file analysis
+      getFileAnalysis(repoUrl)
+        .then((data) => {
+          setFileDistribution(data);
+        })
+        .catch((error) => {
+          console.error('Failed to fetch file analysis:', error);
+        });
+
+      // Fetch code churn analysis
+      getCodeChurn(repoUrl)
+        .then((data) => {
+          console.log('Fetched churn data:', data);
+          setChurnData(data);
+        })
+        .catch((error) => {
+          console.error('Failed to fetch code churn:', error);
+          setChurnData(null);
+        });
+    }
+  }, [repoUrl]);
+
+  // Calculate peak activity times from commits
+  const peakActivity = useMemo(() => {
+    if (!commits || commits.length === 0) {
+      return {
+        mostActiveDay: 'Wednesday',
+        avgCommitsPerDay: 12,
+        peakMonth: 'October 2024',
+        peakMonthCommits: 247,
+        currentStreak: 14,
+      };
+    }
+
+    // Calculate most active day of week
+    const dayCount: Record<string, number> = {};
+    const monthCount: Record<string, number> = {};
+    const days = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+
+    commits.forEach((commit) => {
+      const date = new Date(commit.date);
+      const dayName = days[date.getDay()];
+      const monthYear = date.toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric',
+      });
+
+      dayCount[dayName] = (dayCount[dayName] || 0) + 1;
+      monthCount[monthYear] = (monthCount[monthYear] || 0) + 1;
+    });
+
+    const mostActiveDay = Object.entries(dayCount).sort(
+      (a, b) => b[1] - a[1]
+    )[0];
+    const peakMonth = Object.entries(monthCount).sort((a, b) => b[1] - a[1])[0];
+
+    // Calculate current streak (consecutive days with commits ending at most recent commit)
+    // First, get unique dates and sort them properly
+    const uniqueDates = Array.from(
+      new Set(commits.map((c) => new Date(c.date).toDateString()))
+    )
+      .map((dateStr) => new Date(dateStr))
+      .sort((a, b) => b.getTime() - a.getTime()); // Sort descending (newest first)
+
+    let currentStreak = 0;
+    if (uniqueDates.length > 0) {
+      currentStreak = 1; // Start with the most recent commit day
+      const mostRecentDate = uniqueDates[0];
+
+      // Check if the most recent commit is today or yesterday
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+
+      const recentDate = new Date(mostRecentDate);
+      recentDate.setHours(0, 0, 0, 0);
+
+      // Only count as active streak if the last commit was today or yesterday
+      if (recentDate < yesterday) {
+        currentStreak = 0; // Streak is broken
+      } else {
+        // Count consecutive days backwards from most recent commit
+        for (let i = 1; i < uniqueDates.length; i++) {
+          const currentDate = new Date(uniqueDates[i]);
+          currentDate.setHours(0, 0, 0, 0);
+          const previousDate = new Date(uniqueDates[i - 1]);
+          previousDate.setHours(0, 0, 0, 0);
+
+          const diffDays = Math.round(
+            (previousDate.getTime() - currentDate.getTime()) /
+              (1000 * 60 * 60 * 24)
+          );
+
+          if (diffDays === 1) {
+            currentStreak++;
+          } else {
+            break; // Streak is broken
+          }
+        }
+      }
+    }
+
+    // Calculate average commits per day for the most active day
+    const avgCommitsOnMostActiveDay = mostActiveDay?.[1] || 0;
+
+    return {
+      mostActiveDay: mostActiveDay?.[0] || 'Wednesday',
+      avgCommitsPerDay: avgCommitsOnMostActiveDay,
+      peakMonth: peakMonth?.[0] || 'October 2024',
+      peakMonthCommits: peakMonth?.[1] || 247,
+      currentStreak: currentStreak,
+    };
+  }, [commits]);
+
+  // Use summary data from API, parse from URL if not available
+  const urlParts = repoUrl ? repoUrl.split('/').filter(Boolean) : [];
+  const repoName =
+    summary?.repository.name ??
+    urlParts[urlParts.length - 1]?.replace('.git', '') ??
+    'Unknown';
+  const repoOwner =
+    summary?.repository.owner ?? urlParts[urlParts.length - 2] ?? 'Unknown';
+
+  // Detect Git platform from URL
+  const gitPlatform = useMemo(() => {
+    const url = repoUrl.toLowerCase();
+    if (url.includes('github.com')) return 'GitHub';
+    if (url.includes('gitlab.com')) return 'GitLab';
+    if (url.includes('bitbucket.org')) return 'Bitbucket';
+    return 'Source'; // fallback for other platforms
+  }, [repoUrl]);
+
+  const repoData = {
+    name: repoName,
+    owner: repoOwner,
+    totalCommits:
+      summary?.stats.totalCommits ?? (commits.length > 0 ? commits.length : 0),
+    lastCommit:
+      summary?.lastCommit.relativeTime ??
+      (commits[0]?.date
+        ? new Date(commits[0].date).toLocaleDateString()
+        : 'N/A'),
+    contributors: summary?.stats.contributors ?? 0,
+    created: summary?.created.date
+      ? new Date(summary.created.date).toLocaleDateString('en-CA') // en-CA gives YYYY-MM-DD format
+      : 'N/A',
+    age: summary?.age
+      ? formatAge(summary.age.years, summary.age.months)
+      : 'N/A',
+    status: summary?.stats.status ?? 'unknown',
+  };
+  return (
+    <div className="container mx-auto px-4 md:px-6 lg:px-8 py-6 md:py-8 space-y-6 md:space-y-8 max-w-7xl">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-3">
+          <div className="h-10 w-10 md:h-12 md:w-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
+            <GitBranch className="h-5 w-5 md:h-6 md:w-6 text-primary-foreground" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h1 className="truncate text-xl md:text-2xl">
+                {repoData.owner}/{repoData.name}
+              </h1>
+              <a
+                href={repoUrl.replace('.git', '')}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:text-primary rounded-full border border-muted-foreground/30 hover:border-primary/50 transition-colors"
+                title={`View on ${gitPlatform}`}
+              >
+                <GitFork className="h-3 w-3" />
+                <span>View on {gitPlatform}</span>
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </div>
+            <p className="text-muted-foreground text-sm md:text-base">
+              Repository Analytics
+            </p>
+          </div>
+        </div>
+
+        <Alert className="border-primary/50 bg-primary/5">
+          <AlertCircle className="h-4 w-4 text-primary" />
+          <AlertDescription>
+            Analysis complete. Data last updated {repoData.lastCommit}.
+          </AlertDescription>
+        </Alert>
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="space-y-6"
+      >
+        <div className="overflow-x-auto -mx-4 px-4 md:mx-0 md:px-0">
+          <TabsList className="!flex md:!grid w-auto md:!w-full md:grid-cols-6 h-auto min-w-max">
+            <TabsTrigger value="overview" className="gap-2">
+              <TrendingUp className="h-4 w-4" />
+              <span className="hidden sm:inline">Overview</span>
+              <span className="sm:hidden">Overview</span>
+            </TabsTrigger>
+            <TabsTrigger value="heatmap" className="gap-2">
+              <Calendar className="h-4 w-4" />
+              <span className="hidden sm:inline">Heatmap</span>
+              <span className="sm:hidden">Heat</span>
+            </TabsTrigger>
+            <TabsTrigger value="analytics" className="gap-2">
+              <BarChart3 className="h-4 w-4" />
+              <span className="hidden sm:inline">Analytics</span>
+              <span className="sm:hidden">Analytics</span>
+            </TabsTrigger>
+            <TabsTrigger value="insights" className="gap-2">
+              <Sparkles className="h-4 w-4" />
+              <span className="hidden sm:inline">AI Insights</span>
+              <span className="sm:hidden">AI</span>
+            </TabsTrigger>
+            <TabsTrigger value="paid" className="gap-2">
+              <Lock className="h-4 w-4" />
+              <span className="hidden sm:inline">Premium</span>
+              <span className="sm:hidden">Pro</span>
+            </TabsTrigger>
+            <TabsTrigger value="pricing" className="gap-2">
+              <DollarSign className="h-4 w-4" />
+              <span className="hidden sm:inline">Plans & Pricing</span>
+              <span className="sm:hidden">Price</span>
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        <TabsContent value="overview" className="space-y-4 md:space-y-6">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3 }}
+            className="grid gap-4 md:gap-6 md:grid-cols-3"
+          >
+            {/* Repo Summary Card */}
+            <Card className="md:col-span-2 hover:shadow-lg transition-shadow">
+              <CardHeader>
+                <CardTitle className="text-lg md:text-xl">
+                  Repository Summary
+                </CardTitle>
+                <CardDescription className="text-sm">
+                  Key metrics and information
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 gap-3 md:gap-4">
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">Repository</p>
+                    <p className="font-semibold">{repoData.name}</p>
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">Owner</p>
+                    <p className="font-semibold">{repoData.owner}</p>
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">
+                      Created <span className="text-xs">(YYYY-MM-DD)</span>
+                    </p>
+                    <p className="font-semibold">{repoData.created}</p>
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">Age</p>
+                    <p className="font-semibold">{repoData.age}</p>
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">Last Commit</p>
+                    <p className="font-semibold">{repoData.lastCommit}</p>
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">
+                      Total Commits
+                    </p>
+                    <p className="font-semibold">
+                      {repoData.totalCommits.toLocaleString()}
+                    </p>
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">
+                      Contributors
+                    </p>
+                    <p className="font-semibold">{repoData.contributors}</p>
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm text-muted-foreground">Status</p>
+                    <Badge
+                      className={
+                        repoData.status === 'active'
+                          ? 'bg-green-500/10 text-green-600 hover:bg-green-500/20'
+                          : repoData.status === 'inactive'
+                            ? 'bg-yellow-500/10 text-yellow-600 hover:bg-yellow-500/20'
+                            : repoData.status === 'archived'
+                              ? 'bg-gray-500/10 text-gray-600 hover:bg-gray-500/20'
+                              : repoData.status === 'empty'
+                                ? 'bg-red-500/10 text-red-600 hover:bg-red-500/20'
+                                : 'bg-blue-500/10 text-blue-600 hover:bg-blue-500/20'
+                      }
+                    >
+                      {repoData.status.charAt(0).toUpperCase() +
+                        repoData.status.slice(1)}
+                    </Badge>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Contributors Card */}
+            <Card className="hover:shadow-lg transition-shadow">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Users className="h-5 w-5" />
+                  Contributors
+                </CardTitle>
+                <CardDescription>
+                  Top {contributors.length} contributors
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {contributors.map((contributor, index) => (
+                    <div key={index} className="flex items-center gap-3">
+                      <Avatar className="h-8 w-8">
+                        <AvatarFallback className="bg-gradient-to-br from-primary to-secondary text-primary-foreground text-xs">
+                          {contributor.initials}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-sm">{contributor.name}</span>
+                    </div>
+                  ))}
+                  <Button variant="ghost" className="w-full mt-2" size="sm">
+                    View all {repoData.contributors} contributors
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Activity Snapshot Card */}
+            <Card className="md:col-span-2 hover:shadow-lg transition-shadow">
+              <CardHeader>
+                <CardTitle>Activity Snapshot</CardTitle>
+                <CardDescription>Commits over the last 30 days</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ActivityChart commits={commits} />
+              </CardContent>
+            </Card>
+
+            {/* File Distribution Card */}
+            <Card className="hover:shadow-lg transition-shadow">
+              <CardHeader>
+                <CardTitle>File Distribution</CardTitle>
+                <CardDescription>Languages by percentage</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <FileDistributionChart fileDistribution={fileDistribution} />
+                <div className="mt-4 text-center">
+                  <button
+                    onClick={navigateToFileTypes}
+                    className="text-sm text-primary hover:underline cursor-pointer"
+                  >
+                    View detailed breakdown →
+                  </button>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </TabsContent>
+
+        <TabsContent value="heatmap" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>Commit Heatmap</CardTitle>
+                  <CardDescription>
+                    Activity patterns over time with filters
+                  </CardDescription>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant={heatmapMonths === 3 ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setHeatmapMonths(3)}
+                  >
+                    Last 3 months
+                  </Button>
+                  <Button
+                    variant={heatmapMonths === 6 ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setHeatmapMonths(6)}
+                  >
+                    Last 6 months
+                  </Button>
+                  <Button
+                    variant={heatmapMonths === 12 ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setHeatmapMonths(12)}
+                  >
+                    Last 12 months
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <CommitHeatmap
+                commits={commits}
+                heatmapData={heatmapData || undefined}
+                isValidHeatmap={isValidHeatmap}
+                monthsToShow={heatmapMonths}
+              />
+
+              <div className="pt-6 border-t">
+                <h4 className="font-medium mb-4">Peak Activity Times</h4>
+                <div className="grid gap-4 md:grid-cols-3">
+                  <Card className="bg-muted/50">
+                    <CardContent className="pt-6">
+                      <p className="text-sm text-muted-foreground mb-1">
+                        Most Active Day
+                      </p>
+                      <p className="text-xl font-semibold">
+                        {peakActivity.mostActiveDay}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        Avg. {peakActivity.avgCommitsPerDay} commits
+                      </p>
+                    </CardContent>
+                  </Card>
+                  <Card className="bg-muted/50">
+                    <CardContent className="pt-6">
+                      <p className="text-sm text-muted-foreground mb-1">
+                        Peak Month
+                      </p>
+                      <p className="text-xl font-semibold">
+                        {peakActivity.peakMonth}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {peakActivity.peakMonthCommits} total commits
+                      </p>
+                    </CardContent>
+                  </Card>
+                  <Card className="bg-muted/50">
+                    <CardContent className="pt-6">
+                      <div className="flex items-start justify-between mb-2">
+                        <p className="text-sm text-muted-foreground">
+                          Current Streak
+                        </p>
+                        {(() => {
+                          const motivation = getStreakMotivation(
+                            peakActivity.currentStreak
+                          );
+                          const MotivationIcon = motivation.icon;
+                          return (
+                            <div
+                              className={`rounded-full p-1.5 ${motivation.bgColor}`}
+                            >
+                              <MotivationIcon
+                                className={`h-4 w-4 ${motivation.color}`}
+                              />
+                            </div>
+                          );
+                        })()}
+                      </div>
+                      <p className="text-xl font-semibold mb-1">
+                        {peakActivity.currentStreak} days
+                      </p>
+                      <p
+                        className={`text-xs font-medium ${getStreakMotivation(peakActivity.currentStreak).color}`}
+                      >
+                        {
+                          getStreakMotivation(peakActivity.currentStreak)
+                            .message
+                        }
+                      </p>
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="analytics" className="space-y-6">
+          <Tabs
+            value={analyticsTab}
+            onValueChange={setAnalyticsTab}
+            className="space-y-6"
+          >
+            <TabsList>
+              <TabsTrigger value="churn">Code Churn</TabsTrigger>
+              <TabsTrigger value="files">File Types</TabsTrigger>
+              <TabsTrigger value="timeline">Timeline</TabsTrigger>
+              <TabsTrigger value="diff">Git Diff</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="churn">
+              <CodeChurnChart churnData={churnData} />
+            </TabsContent>
+
+            <TabsContent value="files">
+              <FileTypeList fileDistribution={fileDistribution} />
+            </TabsContent>
+
+            <TabsContent value="timeline">
+              <GraphViewTimeline
+                commits={commits}
+                currentBranch={currentBranch}
+              />
+            </TabsContent>
+
+            <TabsContent value="diff">
+              <GitDiffViewer />
+            </TabsContent>
+          </Tabs>
+        </TabsContent>
+
+        <TabsContent value="insights" className="space-y-6">
+          <AIInsights />
+        </TabsContent>
+
+        <TabsContent value="paid" className="space-y-6">
+          <PremiumFeatures />
+        </TabsContent>
+
+        <TabsContent value="pricing" className="space-y-6">
+          <PremiumFeatures showPricingOnly />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/FileDistributionChart.tsx b/apps/frontend/src/components/FileDistributionChart.tsx
new file mode 100644
index 00000000..e5030bc0
--- /dev/null
+++ b/apps/frontend/src/components/FileDistributionChart.tsx
@@ -0,0 +1,325 @@
+import { useMemo } from 'react';
+import {
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Legend,
+  Tooltip,
+} from 'recharts';
+import { File } from 'lucide-react';
+import { FileTypeDistribution } from '@gitray/shared-types';
+
+interface FileDistributionChartProps {
+  fileDistribution?: FileTypeDistribution | null;
+}
+
+const EXTENSION_COLORS: Record<string, string> = {
+  // By extension
+  '.ts': '#3178C6',
+  '.tsx': '#3178C6',
+  '.js': '#F7DF1E',
+  '.jsx': '#F7DF1E',
+  '.go': '#00ADD8',
+  '.py': '#3776AB',
+  '.json': '#292929',
+  '.md': '#083D77',
+  '.html': '#E34C26',
+  '.css': '#264DE4',
+  '.java': '#E76F00',
+  '.rs': '#DEA584',
+  '.c': '#A8B9CC',
+  '.cpp': '#00599C',
+  '.rb': '#CC342D',
+  '.php': '#777BB4',
+  '.swift': '#FA7343',
+  '.kt': '#7F52FF',
+  '.yml': '#CB171E',
+  '.yaml': '#CB171E',
+  '.sh': '#89E051',
+  '.sql': '#E38C00',
+  '.xml': '#E34C26',
+  '.csv': '#217346',
+  '.mjs': '#F7DF1E',
+  '.vue': '#42B883',
+  '.scss': '#CC6699',
+  '.sass': '#CC6699',
+  '.less': '#1D365D',
+};
+
+// Color palette for unmapped extensions
+const COLOR_PALETTE = [
+  '#5B9A8B',
+  '#FFA69E',
+  '#2E073F',
+  '#7DB9A5',
+  '#FFB8B1',
+  '#83C5BE',
+  '#EDF6F9',
+  '#FFDDD2',
+  '#E29578',
+  '#006D77',
+];
+
+// Helper function to get human-readable file type name from extension
+function getFileTypeName(extension: string): string {
+  const ext = extension.toLowerCase();
+
+  // Programming languages
+  if (ext === '.ts' || ext === '.tsx') return 'TypeScript';
+  if (ext === '.js' || ext === '.jsx') return 'JavaScript';
+  if (ext === '.mjs') return 'Module JavaScript';
+  if (ext === '.cjs') return 'CommonJS';
+  if (ext === '.py') return 'Python';
+  if (ext === '.java') return 'Java';
+  if (ext === '.cpp' || ext === '.cc' || ext === '.cxx') return 'C++';
+  if (ext === '.c') return 'C';
+  if (ext === '.cs') return 'C#';
+  if (ext === '.go') return 'Go';
+  if (ext === '.rs') return 'Rust';
+  if (ext === '.rb') return 'Ruby';
+  if (ext === '.php') return 'PHP';
+  if (ext === '.swift') return 'Swift';
+  if (ext === '.kt' || ext === '.kts') return 'Kotlin';
+  if (ext === '.scala') return 'Scala';
+  if (ext === '.clj' || ext === '.cljs') return 'Clojure';
+  if (ext === '.ex' || ext === '.exs') return 'Elixir';
+  if (ext === '.erl') return 'Erlang';
+  if (ext === '.hs') return 'Haskell';
+  if (ext === '.lua') return 'Lua';
+  if (ext === '.r') return 'R';
+  if (ext === '.m') return 'Objective-C';
+  if (ext === '.dart') return 'Dart';
+  if (ext === '.sh' || ext === '.bash') return 'Shell Script';
+  if (ext === '.ps1') return 'PowerShell Script';
+  if (ext === '.psd1') return 'PowerShell Data';
+  if (ext === '.psm1') return 'PowerShell Module';
+  if (ext === '.pl') return 'Perl';
+  if (ext === '.vb') return 'Visual Basic';
+  if (ext === '.fs' || ext === '.fsx') return 'F#';
+
+  // Markup & styling
+  if (ext === '.html' || ext === '.htm') return 'HTML';
+  if (ext === '.css') return 'CSS';
+  if (ext === '.scss' || ext === '.sass') return 'SCSS/Sass';
+  if (ext === '.less') return 'Less';
+  if (ext === '.xml') return 'XML';
+  if (ext === '.svg') return 'SVG';
+  if (ext === '.vue') return 'Vue';
+  if (ext === '.jsx') return 'JSX';
+  if (ext === '.tsx') return 'TSX';
+
+  // Data formats
+  if (ext === '.json') return 'JSON';
+  if (ext === '.yaml' || ext === '.yml') return 'YAML';
+  if (ext === '.toml') return 'TOML';
+  if (ext === '.xml') return 'XML';
+  if (ext === '.csv') return 'CSV';
+  if (ext === '.sql') return 'SQL';
+
+  // Documentation
+  if (ext === '.md' || ext === '.markdown') return 'Markdown';
+  if (ext === '.txt') return 'Text';
+  if (ext === '.rst') return 'reStructuredText';
+  if (ext === '.tex') return 'LaTeX';
+  if (ext === '.pdf') return 'PDF';
+  if (ext === '.doc' || ext === '.docx') return 'Word Document';
+
+  // Images
+  if (ext === '.png') return 'PNG Image';
+  if (ext === '.jpg' || ext === '.jpeg') return 'JPEG Image';
+  if (ext === '.gif') return 'GIF Image';
+  if (ext === '.webp') return 'WebP Image';
+  if (ext === '.bmp') return 'Bitmap Image';
+  if (ext === '.ico') return 'Icon';
+  if (ext === '.tif' || ext === '.tiff') return 'TIFF Image';
+
+  // Animation & interactive
+  if (ext === '.riv') return 'Rive';
+
+  // Configuration
+  if (ext === '.env') return 'Environment Config';
+  if (ext === '.gitignore') return 'Git Ignore';
+  if (ext === '.dockerignore') return 'Docker Ignore';
+  if (ext === '.editorconfig') return 'Editor Config';
+  if (ext === '.eslintrc') return 'ESLint Config';
+  if (ext === '.prettierrc') return 'Prettier Config';
+
+  // Build & package files
+  if (ext === '.lock') return 'Lock File';
+  if (ext === '.log') return 'Log File';
+  if (ext === '.zip') return 'ZIP Archive';
+  if (ext === '.tar') return 'TAR Archive';
+  if (ext === '.gz') return 'Gzip Archive';
+
+  // Fallback: capitalize the extension without the dot
+  return ext.replace('.', '').toUpperCase();
+}
+
+// Convert backend data to chart format with "Others" grouping
+function convertToChartData(fileDistribution: FileTypeDistribution) {
+  const OTHERS_THRESHOLD = 3; // Group file types with less than 3% into "Others"
+
+  // First, group extensions by their display name
+  const groupedByType = new Map<
+    string,
+    {
+      extensions: string[];
+      count: number;
+      size: number;
+      percentage: number;
+    }
+  >();
+
+  Object.entries(fileDistribution.extensions).forEach(([ext, stats]) => {
+    const isNoExtension = !ext || ext === '' || ext === '.';
+    const displayName = isNoExtension ? 'No Extension' : getFileTypeName(ext);
+
+    if (groupedByType.has(displayName)) {
+      const existing = groupedByType.get(displayName)!;
+      existing.extensions.push(ext);
+      existing.count += stats.count;
+      existing.size += stats.size;
+      existing.percentage += stats.percentage;
+    } else {
+      groupedByType.set(displayName, {
+        extensions: [ext],
+        count: stats.count,
+        size: stats.size,
+        percentage: stats.percentage,
+      });
+    }
+  });
+
+  // Convert to array format
+  const extensionData = Array.from(groupedByType.entries())
+    .map(([displayName, data], index) => {
+      const isNoExtension = displayName === 'No Extension';
+      const firstExt = data.extensions[0];
+
+      return {
+        name: displayName,
+        value: Math.round(data.percentage * 100) / 100, // Round to 2 decimal places
+        count: data.count,
+        size: data.size,
+        color: isNoExtension
+          ? '#6B7280' // Gray for no extension
+          : EXTENSION_COLORS[firstExt.toLowerCase()] ||
+            COLOR_PALETTE[index % COLOR_PALETTE.length],
+      };
+    })
+    .sort((a, b) => b.value - a.value);
+
+  // Separate significant types and small types
+  const significantTypes = extensionData.filter(
+    (item) => item.value >= OTHERS_THRESHOLD
+  );
+  const smallTypes = extensionData.filter(
+    (item) => item.value < OTHERS_THRESHOLD
+  );
+
+  // If there are small types, group them into "Others"
+  if (smallTypes.length > 0) {
+    const othersEntry = {
+      name: 'Others',
+      value:
+        Math.round(
+          smallTypes.reduce((sum, item) => sum + item.value, 0) * 100
+        ) / 100,
+      count: smallTypes.reduce((sum, item) => sum + item.count, 0),
+      size: smallTypes.reduce((sum, item) => sum + item.size, 0),
+      color: '#94A3B8', // Neutral gray color for "Others"
+      isOthers: true, // Flag to identify this as the "Others" category
+    };
+
+    return [...significantTypes, othersEntry];
+  }
+
+  return significantTypes;
+}
+
+export function FileDistributionChart({
+  fileDistribution,
+}: FileDistributionChartProps) {
+  const data = useMemo(() => {
+    console.log('FileDistribution received:', fileDistribution);
+    if (fileDistribution && fileDistribution.extensions) {
+      const chartData = convertToChartData(fileDistribution);
+      console.log('Converted chart data:', chartData);
+      return chartData;
+    }
+    console.log('No file distribution data available');
+    return [];
+  }, [fileDistribution]);
+
+  console.log('Rendering with data:', data);
+
+  if (!data || data.length === 0) {
+    return (
+      <div className="h-[280px] w-full flex flex-col items-center justify-center text-muted-foreground">
+        <File className="h-12 w-12 mb-3 opacity-50" />
+        <p className="font-medium">No file data available</p>
+        <p className="text-xs mt-1">File distribution could not be loaded</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-[280px] w-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            innerRadius={60}
+            outerRadius={80}
+            paddingAngle={2}
+            dataKey="value"
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+          <Tooltip
+            content={({ active, payload }) => {
+              if (active && payload && payload.length) {
+                const data = payload[0].payload;
+                return (
+                  <div className="bg-popover border border-border rounded-lg p-3 shadow-lg">
+                    <p className="text-sm font-medium mb-1">
+                      {payload[0].name}
+                    </p>
+                    <p className="text-sm">
+                      Percentage:{' '}
+                      <span className="font-semibold">{data.value}%</span>
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {data.count.toLocaleString()} file
+                      {data.count !== 1 ? 's' : ''}
+                    </p>
+                    {data.isOthers && (
+                      <p className="text-xs text-muted-foreground mt-1 italic">
+                        Grouped file types &lt; 3%
+                      </p>
+                    )}
+                  </div>
+                );
+              }
+              return null;
+            }}
+          />
+          <Legend
+            verticalAlign="bottom"
+            iconType="circle"
+            formatter={(value, entry: any) => (
+              <span className="text-xs text-foreground">
+                {value} ({entry.payload.value}%)
+              </span>
+            )}
+          />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/FileTypeList.tsx b/apps/frontend/src/components/FileTypeList.tsx
new file mode 100644
index 00000000..2946c8ee
--- /dev/null
+++ b/apps/frontend/src/components/FileTypeList.tsx
@@ -0,0 +1,491 @@
+import { useMemo } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './ui/card';
+import {
+  FileCode,
+  FileJson,
+  FileText,
+  Image,
+  File,
+  FileTerminal,
+  Braces,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  FileArchive,
+  Database,
+  Code2,
+  FileType,
+  Settings,
+  Lock,
+  FileSpreadsheet,
+} from 'lucide-react';
+import { Progress } from './ui/progress';
+import { FileTypeDistribution } from '@gitray/shared-types';
+
+interface FileTypeListProps {
+  fileDistribution?: FileTypeDistribution | null;
+}
+
+// Helper function to get icon for file extension
+function getIconForExtension(extension: string) {
+  const ext = extension.toLowerCase();
+
+  // Programming languages
+  if (
+    ext.includes('ts') ||
+    ext.includes('js') ||
+    ext.includes('tsx') ||
+    ext.includes('jsx')
+  )
+    return FileCode;
+  if (
+    ext.includes('.go') ||
+    ext.includes('.rs') ||
+    ext.includes('.c') ||
+    ext.includes('.cpp')
+  )
+    return Code2;
+  if (ext.includes('.py') || ext.includes('.rb') || ext.includes('.php'))
+    return FileCode;
+  if (ext.includes('.java') || ext.includes('.kt') || ext.includes('.swift'))
+    return FileCode;
+
+  // Scripts
+  if (
+    ext.includes('.sh') ||
+    ext.includes('.bash') ||
+    ext.includes('.ps1') ||
+    ext.includes('.psm1')
+  )
+    return FileTerminal;
+
+  // Data & config
+  if (ext.includes('json')) return FileJson;
+  if (ext.includes('.yml') || ext.includes('.yaml') || ext.includes('.toml'))
+    return Braces;
+  if (ext.includes('.xml')) return FileType;
+  if (ext.includes('.env') || ext.includes('config') || ext.includes('.ini'))
+    return Settings;
+  if (ext.includes('.psd1')) return Settings; // PowerShell data
+
+  // Documentation
+  if (ext.includes('md') || ext.includes('.txt') || ext.includes('.rst'))
+    return FileText;
+  if (ext.includes('.pdf') || ext.includes('.doc')) return FileText;
+
+  // Styling
+  if (
+    ext.includes('css') ||
+    ext.includes('scss') ||
+    ext.includes('sass') ||
+    ext.includes('less')
+  )
+    return FileType;
+
+  // Images
+  if (
+    ext.includes('png') ||
+    ext.includes('jpg') ||
+    ext.includes('jpeg') ||
+    ext.includes('gif')
+  )
+    return FileImage;
+  if (ext.includes('svg') || ext.includes('webp') || ext.includes('ico'))
+    return Image;
+  if (ext.includes('.riv')) return FileVideo; // Rive animations
+
+  // Media
+  if (ext.includes('.mp4') || ext.includes('.mov') || ext.includes('.avi'))
+    return FileVideo;
+  if (ext.includes('.mp3') || ext.includes('.wav') || ext.includes('.ogg'))
+    return FileAudio;
+
+  // Archives
+  if (
+    ext.includes('.zip') ||
+    ext.includes('.tar') ||
+    ext.includes('.gz') ||
+    ext.includes('.rar')
+  )
+    return FileArchive;
+
+  // Database & data files
+  if (ext.includes('.sql') || ext.includes('.db') || ext.includes('.sqlite'))
+    return Database;
+  if (ext.includes('.csv') || ext.includes('.xlsx') || ext.includes('.xls'))
+    return FileSpreadsheet;
+
+  // Security
+  if (ext.includes('.lock') || ext.includes('.key') || ext.includes('.pem'))
+    return Lock;
+
+  return File;
+}
+
+// Helper function to get color for extension
+function getColorForExtension(extension: string): string {
+  const ext = extension.toLowerCase();
+
+  // Programming languages
+  if (ext.includes('.ts') || ext.includes('.tsx')) return 'bg-blue-500';
+  if (ext.includes('.js') || ext.includes('.jsx')) return 'bg-yellow-500';
+  if (ext.includes('.mjs')) return 'bg-yellow-600';
+  if (ext.includes('.cjs')) return 'bg-yellow-700';
+  if (ext.includes('.py')) return 'bg-blue-600';
+  if (ext.includes('.go')) return 'bg-cyan-500';
+  if (ext.includes('.rs')) return 'bg-orange-600';
+  if (ext.includes('.java')) return 'bg-red-600';
+  if (ext.includes('.c') && !ext.includes('.css')) return 'bg-blue-700';
+  if (ext.includes('.cpp')) return 'bg-blue-800';
+  if (ext.includes('.cs')) return 'bg-purple-600';
+  if (ext.includes('.rb')) return 'bg-red-500';
+  if (ext.includes('.php')) return 'bg-indigo-500';
+  if (ext.includes('.swift')) return 'bg-orange-500';
+  if (ext.includes('.kt')) return 'bg-purple-500';
+
+  // Scripts & Shell
+  if (ext.includes('.sh') || ext.includes('.bash')) return 'bg-green-600';
+  if (ext.includes('.ps1') || ext.includes('.psm1')) return 'bg-blue-400';
+  if (ext.includes('.psd1')) return 'bg-blue-300';
+
+  // Data & Config
+  if (ext.includes('.json')) return 'bg-green-500';
+  if (ext.includes('.yml') || ext.includes('.yaml')) return 'bg-red-400';
+  if (ext.includes('.toml')) return 'bg-orange-400';
+  if (ext.includes('.xml')) return 'bg-orange-300';
+  if (ext.includes('.env')) return 'bg-yellow-400';
+  if (ext.includes('.ini') || ext.includes('config')) return 'bg-slate-500';
+
+  // Documentation
+  if (ext.includes('.md')) return 'bg-purple-500';
+  if (ext.includes('.txt')) return 'bg-gray-400';
+  if (ext.includes('.pdf')) return 'bg-red-500';
+  if (ext.includes('.doc')) return 'bg-blue-500';
+
+  // Styling
+  if (ext.includes('.css')) return 'bg-pink-500';
+  if (ext.includes('.scss') || ext.includes('.sass')) return 'bg-pink-600';
+  if (ext.includes('.less')) return 'bg-blue-400';
+
+  // Images
+  if (ext.includes('.png') || ext.includes('.jpg') || ext.includes('.jpeg'))
+    return 'bg-orange-500';
+  if (ext.includes('.svg')) return 'bg-yellow-500';
+  if (ext.includes('.gif')) return 'bg-green-400';
+  if (ext.includes('.webp')) return 'bg-teal-500';
+  if (ext.includes('.ico')) return 'bg-indigo-400';
+  if (ext.includes('.riv')) return 'bg-purple-400';
+
+  // Media
+  if (ext.includes('.mp4') || ext.includes('.mov') || ext.includes('.avi'))
+    return 'bg-red-600';
+  if (ext.includes('.mp3') || ext.includes('.wav')) return 'bg-green-500';
+
+  // Archives
+  if (ext.includes('.zip') || ext.includes('.tar') || ext.includes('.gz'))
+    return 'bg-amber-600';
+
+  // Database
+  if (ext.includes('.sql') || ext.includes('.db')) return 'bg-cyan-600';
+  if (ext.includes('.csv')) return 'bg-green-600';
+
+  // Security & locks
+  if (ext.includes('.lock')) return 'bg-gray-600';
+
+  // Markup
+  if (ext.includes('.html') || ext.includes('.htm')) return 'bg-orange-600';
+
+  return 'bg-gray-500';
+}
+
+// Helper function to get human-readable file type name from extension
+function getFileTypeName(extension: string): string {
+  const ext = extension.toLowerCase();
+
+  // Programming languages
+  if (ext === '.ts' || ext === '.tsx') return 'TypeScript';
+  if (ext === '.js' || ext === '.jsx') return 'JavaScript';
+  if (ext === '.mjs') return 'Module JavaScript';
+  if (ext === '.cjs') return 'CommonJS';
+  if (ext === '.py') return 'Python';
+  if (ext === '.java') return 'Java';
+  if (ext === '.cpp' || ext === '.cc' || ext === '.cxx') return 'C++';
+  if (ext === '.c') return 'C';
+  if (ext === '.cs') return 'C#';
+  if (ext === '.go') return 'Go';
+  if (ext === '.rs') return 'Rust';
+  if (ext === '.rb') return 'Ruby';
+  if (ext === '.php') return 'PHP';
+  if (ext === '.swift') return 'Swift';
+  if (ext === '.kt' || ext === '.kts') return 'Kotlin';
+  if (ext === '.scala') return 'Scala';
+  if (ext === '.clj' || ext === '.cljs') return 'Clojure';
+  if (ext === '.ex' || ext === '.exs') return 'Elixir';
+  if (ext === '.erl') return 'Erlang';
+  if (ext === '.hs') return 'Haskell';
+  if (ext === '.lua') return 'Lua';
+  if (ext === '.r') return 'R';
+  if (ext === '.m') return 'Objective-C';
+  if (ext === '.dart') return 'Dart';
+  if (ext === '.sh' || ext === '.bash') return 'Shell Script';
+  if (ext === '.ps1') return 'PowerShell Script';
+  if (ext === '.psd1') return 'PowerShell Data';
+  if (ext === '.psm1') return 'PowerShell Module';
+  if (ext === '.pl') return 'Perl';
+  if (ext === '.vb') return 'Visual Basic';
+  if (ext === '.fs' || ext === '.fsx') return 'F#';
+
+  // Markup & styling
+  if (ext === '.html' || ext === '.htm') return 'HTML';
+  if (ext === '.css') return 'CSS';
+  if (ext === '.scss' || ext === '.sass') return 'SCSS/Sass';
+  if (ext === '.less') return 'Less';
+  if (ext === '.xml') return 'XML';
+  if (ext === '.svg') return 'SVG';
+  if (ext === '.vue') return 'Vue';
+  if (ext === '.jsx') return 'JSX';
+  if (ext === '.tsx') return 'TSX';
+
+  // Data formats
+  if (ext === '.json') return 'JSON';
+  if (ext === '.yaml' || ext === '.yml') return 'YAML';
+  if (ext === '.toml') return 'TOML';
+  if (ext === '.xml') return 'XML';
+  if (ext === '.csv') return 'CSV';
+  if (ext === '.sql') return 'SQL';
+
+  // Documentation
+  if (ext === '.md' || ext === '.markdown') return 'Markdown';
+  if (ext === '.txt') return 'Text';
+  if (ext === '.rst') return 'reStructuredText';
+  if (ext === '.tex') return 'LaTeX';
+  if (ext === '.pdf') return 'PDF';
+  if (ext === '.doc' || ext === '.docx') return 'Word Document';
+
+  // Images
+  if (ext === '.png') return 'PNG Image';
+  if (ext === '.jpg' || ext === '.jpeg') return 'JPEG Image';
+  if (ext === '.gif') return 'GIF Image';
+  if (ext === '.webp') return 'WebP Image';
+  if (ext === '.bmp') return 'Bitmap Image';
+  if (ext === '.ico') return 'Icon';
+  if (ext === '.tif' || ext === '.tiff') return 'TIFF Image';
+
+  // Animation & interactive
+  if (ext === '.riv') return 'Rive';
+
+  // Configuration
+  if (ext === '.env') return 'Environment Config';
+  if (ext === '.gitignore') return 'Git Ignore';
+  if (ext === '.dockerignore') return 'Docker Ignore';
+  if (ext === '.editorconfig') return 'Editor Config';
+  if (ext === '.eslintrc') return 'ESLint Config';
+  if (ext === '.prettierrc') return 'Prettier Config';
+
+  // Build & package files
+  if (ext === '.lock') return 'Lock File';
+  if (ext === '.log') return 'Log File';
+  if (ext === '.zip') return 'ZIP Archive';
+  if (ext === '.tar') return 'TAR Archive';
+  if (ext === '.gz') return 'Gzip Archive';
+
+  // Fallback: capitalize the extension without the dot
+  return ext.replace('.', '').toUpperCase();
+}
+
+// Convert backend data to display format
+function convertFileDistribution(data: FileTypeDistribution) {
+  // First, group extensions by their display name, keeping individual stats
+  const groupedByType = new Map<
+    string,
+    {
+      extensionStats: Array<{
+        extension: string;
+        count: number;
+        percentage: number;
+      }>;
+      totalCount: number;
+      totalPercentage: number;
+    }
+  >();
+
+  Object.entries(data.extensions).forEach(([extension, stats]) => {
+    const isNoExtension = !extension || extension === '' || extension === '.';
+    const displayType = isNoExtension
+      ? 'No Extension'
+      : getFileTypeName(extension);
+
+    if (groupedByType.has(displayType)) {
+      const existing = groupedByType.get(displayType)!;
+      existing.extensionStats.push({
+        extension,
+        count: stats.count,
+        percentage: stats.percentage,
+      });
+      existing.totalCount += stats.count;
+      existing.totalPercentage += stats.percentage;
+    } else {
+      groupedByType.set(displayType, {
+        extensionStats: [
+          { extension, count: stats.count, percentage: stats.percentage },
+        ],
+        totalCount: stats.count,
+        totalPercentage: stats.percentage,
+      });
+    }
+  });
+
+  // Convert to array format
+  return (
+    Array.from(groupedByType.entries())
+      .map(([type, data]) => {
+        const isNoExtension = type === 'No Extension';
+        const firstExtension = data.extensionStats[0].extension;
+
+        // Create display extension with percentages only if there are multiple extensions
+        let displayExtension: string;
+        if (isNoExtension) {
+          displayExtension = 'files without extension';
+        } else if (data.extensionStats.length === 1) {
+          // Single extension: just show the extension
+          displayExtension = data.extensionStats[0].extension;
+        } else {
+          // Multiple extensions: show each with their actual percentage (not relative)
+          // Round to 2 decimal places to match pie chart
+          const roundedPercentages = data.extensionStats.map((stat) => ({
+            extension: stat.extension,
+            percentage: Math.round(stat.percentage * 100) / 100,
+          }));
+
+          displayExtension = roundedPercentages
+            .map((stat) => `${stat.extension} ${stat.percentage}%`)
+            .join(', ');
+        }
+
+        return {
+          type,
+          extension: displayExtension,
+          count: data.totalCount,
+          percentage: Math.round(data.totalPercentage * 100) / 100, // Round to 2 decimal places
+          icon: isNoExtension ? File : getIconForExtension(firstExtension),
+          color: isNoExtension
+            ? 'bg-gray-500'
+            : getColorForExtension(firstExtension),
+        };
+      })
+      // Sort by count descending
+      .sort((a, b) => b.count - a.count)
+  );
+}
+
+export function FileTypeList({ fileDistribution }: FileTypeListProps) {
+  const fileTypes = useMemo(() => {
+    if (fileDistribution && fileDistribution.extensions) {
+      return convertFileDistribution(fileDistribution);
+    }
+    return [];
+  }, [fileDistribution]);
+
+  const totalFiles = useMemo(() => {
+    if (fileDistribution?.metadata?.totalFiles) {
+      return fileDistribution.metadata.totalFiles;
+    }
+    return fileTypes.reduce((sum, ft) => sum + ft.count, 0);
+  }, [fileDistribution, fileTypes]);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>File Type Distribution</CardTitle>
+        <CardDescription>
+          Breakdown of {totalFiles.toLocaleString()} files by type
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {fileTypes.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <File className="h-12 w-12 text-muted-foreground mb-4" />
+            <p className="text-lg font-medium text-muted-foreground mb-2">
+              No file data available
+            </p>
+            <p className="text-sm text-muted-foreground">
+              File type distribution data could not be loaded for this
+              repository.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {fileTypes.map((fileType, index) => {
+              const Icon = fileType.icon;
+              return (
+                <div key={index} className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`p-2 rounded-lg ${fileType.color} bg-opacity-20`}
+                      >
+                        <Icon
+                          className={`h-4 w-4 ${fileType.color.replace('bg-', 'text-')}`}
+                        />
+                      </div>
+                      <div>
+                        <p className="font-medium">{fileType.type}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {fileType.extension}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="font-semibold">
+                        <span className="text-xs text-muted-foreground font-normal mr-1">
+                          Files:
+                        </span>
+                        {fileType.count}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {fileType.percentage}%
+                      </p>
+                    </div>
+                  </div>
+                  <Progress value={fileType.percentage} className="h-2" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {fileTypes.length > 0 && (
+          <div className="mt-6 pt-6 border-t">
+            <div className="grid grid-cols-3 gap-4">
+              <div className="space-y-1">
+                <p className="text-sm text-muted-foreground">Total Files</p>
+                <p className="text-xl font-semibold">
+                  {totalFiles.toLocaleString()}
+                </p>
+              </div>
+              <div className="space-y-1 text-center">
+                <p className="text-sm text-muted-foreground">
+                  Average File Size
+                </p>
+                <p className="text-xl font-semibold">
+                  {fileDistribution?.metadata?.totalSize && totalFiles > 0
+                    ? `≈ ${Math.round(fileDistribution.metadata.totalSize / totalFiles / 1024)} KB`
+                    : 'N/A'}
+                </p>
+              </div>
+              <div className="space-y-1 text-right">
+                <p className="text-sm text-muted-foreground">File Types</p>
+                <p className="text-xl font-semibold">{fileTypes.length}</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/frontend/src/components/Footer.tsx b/apps/frontend/src/components/Footer.tsx
new file mode 100644
index 00000000..3ef4eb34
--- /dev/null
+++ b/apps/frontend/src/components/Footer.tsx
@@ -0,0 +1,30 @@
+export function Footer() {
+  return (
+    <footer className="w-full border-t border-border bg-background py-6 mt-auto">
+      <div className="px-4 md:px-8">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="flex flex-wrap items-center justify-center gap-4 md:gap-6 text-sm text-muted-foreground">
+            <a
+              href="https://github.com/jonasyr/gitray"
+              className="hover:text-primary transition-colors"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitRay Repository
+            </a>
+            <a href="#" className="hover:text-primary transition-colors">
+              Impressum
+            </a>
+            <a href="#" className="hover:text-primary transition-colors">
+              Privacy Policy
+            </a>
+            <a href="#" className="hover:text-primary transition-colors">
+              Contact
+            </a>
+          </div>
+          <p className="text-sm text-muted-foreground">© GitRay 2025</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/frontend/src/components/GitDiffViewer.tsx b/apps/frontend/src/components/GitDiffViewer.tsx
new file mode 100644
index 00000000..586b459a
--- /dev/null
+++ b/apps/frontend/src/components/GitDiffViewer.tsx
@@ -0,0 +1,265 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { FileCode, ChevronDown, ChevronRight, Plus, Minus } from 'lucide-react';
+import { useState } from 'react';
+import { ScrollArea } from './ui/scroll-area';
+
+const diffFiles = [
+  {
+    name: 'src/components/Dashboard.tsx',
+    additions: 45,
+    deletions: 12,
+    status: 'modified',
+    diff: [
+      { type: 'context', line: "import { Card } from './ui/card';", number: 1 },
+      {
+        type: 'context',
+        line: "import { Button } from './ui/button';",
+        number: 2,
+      },
+      { type: 'add', line: "import { Badge } from './ui/badge';", number: 3 },
+      { type: 'context', line: '', number: 4 },
+      { type: 'context', line: 'export function Dashboard() {', number: 5 },
+      {
+        type: 'remove',
+        line: '  const [data, setData] = useState(null);',
+        number: 6,
+      },
+      {
+        type: 'add',
+        line: '  const [data, setData] = useState<DashboardData | null>(null);',
+        number: 7,
+      },
+      {
+        type: 'add',
+        line: '  const [loading, setLoading] = useState(false);',
+        number: 8,
+      },
+      { type: 'context', line: '', number: 9 },
+      { type: 'context', line: '  return (', number: 10 },
+      { type: 'remove', line: '    <div>Dashboard</div>', number: 11 },
+      { type: 'add', line: "    <div className='space-y-4'>", number: 12 },
+      { type: 'add', line: '      <h1>Dashboard</h1>', number: 13 },
+      { type: 'add', line: '      <Card>', number: 14 },
+      {
+        type: 'add',
+        line: '        <CardContent>Analytics</CardContent>',
+        number: 15,
+      },
+      { type: 'add', line: '      </Card>', number: 16 },
+      { type: 'add', line: '    </div>', number: 17 },
+      { type: 'context', line: '  );', number: 18 },
+      { type: 'context', line: '}', number: 19 },
+    ],
+  },
+  {
+    name: 'src/lib/api.ts',
+    additions: 23,
+    deletions: 5,
+    status: 'modified',
+    diff: [
+      { type: 'context', line: 'async function fetchData() {', number: 1 },
+      {
+        type: 'remove',
+        line: "  const response = await fetch('/api/data');",
+        number: 2,
+      },
+      {
+        type: 'add',
+        line: "  const response = await fetch('/api/v2/data', {",
+        number: 3,
+      },
+      {
+        type: 'add',
+        line: "    headers: { 'Authorization': `Bearer ${token}` }",
+        number: 4,
+      },
+      { type: 'add', line: '  });', number: 5 },
+      { type: 'context', line: '  return response.json();', number: 6 },
+      { type: 'context', line: '}', number: 7 },
+    ],
+  },
+  {
+    name: 'src/styles/globals.css',
+    additions: 8,
+    deletions: 2,
+    status: 'modified',
+    diff: [
+      { type: 'context', line: ':root {', number: 1 },
+      { type: 'remove', line: '  --primary: #3b82f6;', number: 2 },
+      { type: 'add', line: '  --primary: #5B9A8B;', number: 3 },
+      { type: 'add', line: '  --secondary: #FFA69E;', number: 4 },
+      { type: 'context', line: '}', number: 5 },
+    ],
+  },
+];
+
+export function GitDiffViewer() {
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(
+    new Set([diffFiles[0].name])
+  );
+
+  const toggleFile = (fileName: string) => {
+    const newExpanded = new Set(expandedFiles);
+    if (newExpanded.has(fileName)) {
+      newExpanded.delete(fileName);
+    } else {
+      newExpanded.add(fileName);
+    }
+    setExpandedFiles(newExpanded);
+  };
+
+  const totalAdditions = diffFiles.reduce(
+    (sum, file) => sum + file.additions,
+    0
+  );
+  const totalDeletions = diffFiles.reduce(
+    (sum, file) => sum + file.deletions,
+    0
+  );
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <FileCode className="h-5 w-5" />
+            Git Diff Viewer
+          </CardTitle>
+          <CardDescription>
+            Compare current version with previous commit
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4 mb-6">
+            <div className="flex items-center gap-2 text-sm">
+              <Badge
+                variant="outline"
+                className="bg-green-500/10 text-green-500 border-green-500/20"
+              >
+                <Plus className="h-3 w-3 mr-1" />
+                {totalAdditions} additions
+              </Badge>
+              <Badge
+                variant="outline"
+                className="bg-red-500/10 text-red-500 border-red-500/20"
+              >
+                <Minus className="h-3 w-3 mr-1" />
+                {totalDeletions} deletions
+              </Badge>
+            </div>
+            <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-green-500"
+                style={{
+                  width: `${(totalAdditions / (totalAdditions + totalDeletions)) * 100}%`,
+                }}
+              />
+            </div>
+            <span className="text-sm text-muted-foreground">
+              {diffFiles.length} files changed
+            </span>
+          </div>
+
+          <div className="space-y-3">
+            {diffFiles.map((file, index) => (
+              <div key={index} className="border rounded-lg overflow-hidden">
+                <Button
+                  variant="ghost"
+                  className="w-full justify-between p-4 h-auto hover:bg-muted/50"
+                  onClick={() => toggleFile(file.name)}
+                >
+                  <div className="flex items-center gap-3">
+                    {expandedFiles.has(file.name) ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
+                    <FileCode className="h-4 w-4" />
+                    <span className="font-mono text-sm">{file.name}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant="secondary" className="text-xs">
+                      {file.status}
+                    </Badge>
+                    <span className="text-xs text-green-500">
+                      +{file.additions}
+                    </span>
+                    <span className="text-xs text-red-500">
+                      -{file.deletions}
+                    </span>
+                  </div>
+                </Button>
+
+                {expandedFiles.has(file.name) && (
+                  <ScrollArea className="h-[300px] border-t">
+                    <div className="font-mono text-xs">
+                      {file.diff.map((line, lineIndex) => (
+                        <div
+                          key={lineIndex}
+                          className={`flex px-4 py-1 ${
+                            line.type === 'add'
+                              ? 'bg-green-500/10'
+                              : line.type === 'remove'
+                                ? 'bg-red-500/10'
+                                : ''
+                          }`}
+                        >
+                          <span className="text-muted-foreground mr-4 select-none w-8 text-right">
+                            {line.number}
+                          </span>
+                          <span
+                            className={`mr-2 ${
+                              line.type === 'add'
+                                ? 'text-green-500'
+                                : line.type === 'remove'
+                                  ? 'text-red-500'
+                                  : 'text-muted-foreground'
+                            }`}
+                          >
+                            {line.type === 'add'
+                              ? '+'
+                              : line.type === 'remove'
+                                ? '-'
+                                : ' '}
+                          </span>
+                          <span className="flex-1 whitespace-pre-wrap break-all">
+                            {line.line}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-6 pt-6 border-t flex items-center justify-between">
+            <p className="text-sm text-muted-foreground">
+              Comparing with commit{' '}
+              <code className="px-2 py-1 bg-muted rounded text-xs">
+                a3f4c21
+              </code>
+            </p>
+            <div className="flex gap-2">
+              <Button variant="outline" size="sm">
+                View Full Diff
+              </Button>
+              <Button variant="default" size="sm">
+                Commit Changes
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/GraphViewTimeline.tsx b/apps/frontend/src/components/GraphViewTimeline.tsx
new file mode 100644
index 00000000..8ac12960
--- /dev/null
+++ b/apps/frontend/src/components/GraphViewTimeline.tsx
@@ -0,0 +1,430 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './ui/card';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import {
+  GitBranch,
+  GitMerge,
+  GitCommit,
+  Play,
+  Pause,
+  RotateCcw,
+  Maximize2,
+  ArrowUp,
+} from 'lucide-react';
+import { Slider } from './ui/slider';
+import { useState, useRef } from 'react';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
+import { Commit } from '@gitray/shared-types';
+
+interface GraphViewTimelineProps {
+  commits?: Commit[];
+  /** Current branch being analyzed (from backend API) */
+  currentBranch?: string;
+}
+
+const branches = [
+  { name: 'main', color: '#5B9A8B', commits: 247, active: true },
+  { name: 'develop', color: '#FFA69E', commits: 183, active: true },
+  { name: 'feature/analytics', color: '#FAE3B4', commits: 42, active: true },
+  { name: 'hotfix/auth', color: '#2E073F', commits: 12, active: false },
+];
+
+const timelineEvents = [
+  {
+    type: 'commit',
+    branch: 'main',
+    message: 'feat: Add user authentication',
+    author: 'Sarah C.',
+    date: '2 hours ago',
+    hash: 'a3f4c21',
+  },
+  {
+    type: 'merge',
+    branch: 'main',
+    from: 'develop',
+    message: 'Merge develop into main',
+    author: 'Marcus J.',
+    date: '5 hours ago',
+    hash: 'b7e8d92',
+  },
+  {
+    type: 'commit',
+    branch: 'feature/analytics',
+    message: 'fix: Chart rendering issue',
+    author: 'Emma R.',
+    date: '1 day ago',
+    hash: 'c9f1a34',
+  },
+  {
+    type: 'commit',
+    branch: 'develop',
+    message: 'refactor: Code cleanup',
+    author: 'Alex K.',
+    date: '2 days ago',
+    hash: 'd2b5e67',
+  },
+];
+
+// Helper function to format relative time
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+
+  if (diffSecs < 60) return 'just now';
+  if (diffMins < 60)
+    return `${diffMins} minute${diffMins !== 1 ? 's' : ''} ago`;
+  if (diffHours < 24)
+    return `${diffHours} hour${diffHours !== 1 ? 's' : ''} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays !== 1 ? 's' : ''} ago`;
+  if (diffWeeks < 4)
+    return `${diffWeeks} week${diffWeeks !== 1 ? 's' : ''} ago`;
+  if (diffMonths < 12)
+    return `${diffMonths} month${diffMonths !== 1 ? 's' : ''} ago`;
+  return date.toLocaleDateString();
+}
+
+// Process real commits into timeline events
+function processCommits(
+  commits: Commit[],
+  currentBranch: string = 'unknown',
+  limit: number = 5
+) {
+  // Sort by date descending (newest first) and take top N
+  return commits
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .slice(0, limit)
+    .map((commit) => {
+      const isMerge = commit.message.toLowerCase().includes('merge');
+      // Try to parse source branch from merge commit messages
+      const fromMatch = commit.message.match(/merge (\S+)/i);
+
+      return {
+        type: isMerge ? 'merge' : 'commit',
+        // Use the current branch from API instead of parsing
+        branch: currentBranch,
+        // For merge commits, try to parse the source branch
+        from: isMerge && fromMatch ? fromMatch[1] : undefined,
+        message: commit.message.split('\n')[0], // First line only
+        author: commit.authorName,
+        date: formatRelativeTime(new Date(commit.date)),
+        hash: commit.sha.substring(0, 7),
+      };
+    });
+}
+
+export function GraphViewTimeline({
+  commits = [],
+  currentBranch = 'unknown',
+}: GraphViewTimelineProps) {
+  const [playing, setPlaying] = useState(false);
+  const [timelinePosition, setTimelinePosition] = useState([50]);
+  const [showMore, setShowMore] = useState(false);
+  const activityHeaderRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const timelineCardRef = useRef<HTMLDivElement>(null);
+
+  console.log(
+    '🔍 GraphViewTimeline received commits:',
+    commits.length,
+    'Branch:',
+    currentBranch,
+    'First commit:',
+    commits[0]
+  );
+
+  const scrollToTop = () => {
+    console.log('Scroll to top clicked', timelineCardRef.current);
+    if (timelineCardRef.current) {
+      timelineCardRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    } else {
+      // Fallback: scroll window to top
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-4">
+        {branches.map((branch, index) => (
+          <Card
+            key={index}
+            className={branch.active ? 'border-primary/50' : ''}
+          >
+            <CardHeader className="pb-3">
+              <div className="flex items-center gap-2">
+                <div
+                  className="h-3 w-3 rounded-full"
+                  style={{ backgroundColor: branch.color }}
+                />
+                <CardDescription className="truncate">
+                  {branch.name}
+                </CardDescription>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <p className="text-2xl font-bold">{branch.commits}</p>
+              <p className="text-xs text-muted-foreground">commits</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Card ref={timelineCardRef}>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <GitBranch className="h-5 w-5" />
+                Network Graph Timeline
+              </CardTitle>
+              <CardDescription>
+                Visual representation of branches, commits, and merges
+              </CardDescription>
+            </div>
+            <Button variant="ghost" size="icon">
+              <Maximize2 className="h-4 w-4" />
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Visual Timeline Graph */}
+          <div className="relative h-64 bg-muted/30 rounded-lg p-4 overflow-hidden">
+            <svg width="100%" height="100%" className="absolute inset-0">
+              {/* Main branch line */}
+              <line
+                x1="10%"
+                y1="50%"
+                x2="90%"
+                y2="50%"
+                stroke="#5B9A8B"
+                strokeWidth="3"
+              />
+
+              {/* Develop branch line */}
+              <line
+                x1="20%"
+                y1="50%"
+                x2="20%"
+                y2="30%"
+                stroke="#FFA69E"
+                strokeWidth="2"
+              />
+              <line
+                x1="20%"
+                y1="30%"
+                x2="70%"
+                y2="30%"
+                stroke="#FFA69E"
+                strokeWidth="2"
+              />
+              <line
+                x1="70%"
+                y1="30%"
+                x2="70%"
+                y2="50%"
+                stroke="#FFA69E"
+                strokeWidth="2"
+              />
+
+              {/* Feature branch line */}
+              <line
+                x1="40%"
+                y1="30%"
+                x2="40%"
+                y2="15%"
+                stroke="#FAE3B4"
+                strokeWidth="2"
+              />
+              <line
+                x1="40%"
+                y1="15%"
+                x2="60%"
+                y2="15%"
+                stroke="#FAE3B4"
+                strokeWidth="2"
+              />
+              <line
+                x1="60%"
+                y1="15%"
+                x2="60%"
+                y2="30%"
+                stroke="#FAE3B4"
+                strokeWidth="2"
+              />
+
+              {/* Commit dots */}
+              <circle cx="10%" cy="50%" r="5" fill="#5B9A8B" />
+              <circle cx="30%" cy="50%" r="5" fill="#5B9A8B" />
+              <circle cx="50%" cy="50%" r="5" fill="#5B9A8B" />
+              <circle
+                cx="70%"
+                cy="50%"
+                r="6"
+                fill="#5B9A8B"
+                stroke="#FFA69E"
+                strokeWidth="2"
+              />
+              <circle cx="90%" cy="50%" r="5" fill="#5B9A8B" />
+
+              <circle cx="25%" cy="30%" r="4" fill="#FFA69E" />
+              <circle cx="45%" cy="30%" r="4" fill="#FFA69E" />
+              <circle
+                cx="60%"
+                cy="30%"
+                r="5"
+                fill="#FFA69E"
+                stroke="#FAE3B4"
+                strokeWidth="2"
+              />
+
+              <circle cx="45%" cy="15%" r="4" fill="#FAE3B4" />
+              <circle cx="55%" cy="15%" r="4" fill="#FAE3B4" />
+            </svg>
+          </div>
+
+          {/* Playback Controls */}
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setPlaying(!playing)}
+              >
+                {playing ? (
+                  <Pause className="h-4 w-4" />
+                ) : (
+                  <Play className="h-4 w-4" />
+                )}
+              </Button>
+              <Button variant="outline" size="icon">
+                <RotateCcw className="h-4 w-4" />
+              </Button>
+              <div className="flex-1">
+                <Slider
+                  value={timelinePosition}
+                  onValueChange={setTimelinePosition}
+                  max={100}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
+              <span className="text-sm text-muted-foreground min-w-[60px] text-right">
+                {timelinePosition[0]}%
+              </span>
+            </div>
+          </div>
+
+          {/* Recent Events */}
+          <div className="pt-4 border-t">
+            <div
+              className="flex items-center justify-between mb-3"
+              ref={activityHeaderRef}
+            >
+              <p className="font-medium">Recent Activity</p>
+              {commits.length > 5 && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowMore(!showMore)}
+                  className="text-xs h-8"
+                >
+                  {showMore ? 'Show Less' : 'Show More'}
+                </Button>
+              )}
+            </div>
+            <div ref={scrollContainerRef} className="space-y-3">
+              {(commits.length > 0
+                ? processCommits(commits, currentBranch, showMore ? 20 : 5)
+                : timelineEvents
+              ).map((event, index) => (
+                <HoverCard key={index}>
+                  <HoverCardTrigger asChild>
+                    <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-muted/50 cursor-pointer transition-colors min-w-0">
+                      <div
+                        className={`p-2 rounded-full flex-shrink-0 ${event.type === 'merge' ? 'bg-primary/10' : 'bg-muted'}`}
+                      >
+                        {event.type === 'merge' ? (
+                          <GitMerge className="h-4 w-4 text-primary" />
+                        ) : (
+                          <GitCommit className="h-4 w-4" />
+                        )}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <Badge variant="outline" className="text-xs">
+                            {event.branch}
+                          </Badge>
+                          <span className="text-xs text-muted-foreground">
+                            {event.date}
+                          </span>
+                        </div>
+                        <p className="text-sm truncate">{event.message}</p>
+                        <p className="text-xs text-muted-foreground mt-1">
+                          by {event.author} · {event.hash}
+                        </p>
+                      </div>
+                    </div>
+                  </HoverCardTrigger>
+                  <HoverCardContent className="w-80">
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <Badge
+                          variant={
+                            event.type === 'merge' ? 'default' : 'secondary'
+                          }
+                        >
+                          {event.type}
+                        </Badge>
+                        <span className="text-sm text-muted-foreground">
+                          {event.hash}
+                        </span>
+                      </div>
+                      <p className="font-medium">{event.message}</p>
+                      <div className="flex items-center justify-between text-sm text-muted-foreground">
+                        <span>{event.author}</span>
+                        <span>{event.date}</span>
+                      </div>
+                      {event.type === 'merge' && (
+                        <p className="text-sm text-muted-foreground pt-2 border-t">
+                          Merged {event.from} → {event.branch}
+                        </p>
+                      )}
+                    </div>
+                  </HoverCardContent>
+                </HoverCard>
+              ))}
+            </div>
+            {showMore && commits.length > 5 && (
+              <div className="flex justify-center pt-3">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={scrollToTop}
+                  className="text-xs gap-2"
+                >
+                  <ArrowUp className="h-3 w-3" />
+                  Back to Top
+                </Button>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/Header.tsx b/apps/frontend/src/components/Header.tsx
new file mode 100644
index 00000000..71db6097
--- /dev/null
+++ b/apps/frontend/src/components/Header.tsx
@@ -0,0 +1,117 @@
+import { Menu, Bell } from 'lucide-react';
+import { Button } from './ui/button';
+import { Avatar, AvatarFallback } from './ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import { Badge } from './ui/badge';
+import { RiveLogo } from './RiveLogo';
+
+interface HeaderProps {
+  isSignedIn: boolean;
+  onMenuClick: () => void;
+  onNewsClick: () => void;
+  onSignOut?: () => void;
+  onNavigateHome: () => void;
+  showNews?: boolean;
+  hasUnreadNews?: boolean;
+  title?: string;
+  theme?: 'light' | 'dark' | 'system';
+}
+
+export function Header({
+  isSignedIn,
+  onMenuClick,
+  onNewsClick,
+  onSignOut,
+  onNavigateHome,
+  showNews = false,
+  hasUnreadNews = false,
+  title,
+  theme = 'dark',
+}: HeaderProps) {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-14 md:h-16 items-center justify-between px-4 md:px-8">
+        <div className="flex items-center gap-2 md:gap-4">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onMenuClick}
+            className="h-9 w-9 md:h-10 md:w-10 hover:bg-accent/50 transition-all"
+          >
+            <Menu className="h-4 w-4 md:h-5 md:w-5" />
+          </Button>
+
+          <button
+            onClick={onNavigateHome}
+            className="flex items-center gap-2 group"
+          >
+            <RiveLogo
+              size={40}
+              interactive={true}
+              theme={theme}
+              className="md:w-10 md:h-10"
+            />
+            {title && (
+              <span className="hidden md:block text-lg md:text-xl font-semibold">
+                {title}
+              </span>
+            )}
+          </button>
+        </div>
+
+        <div className="flex items-center gap-1 md:gap-2">
+          {showNews && (
+            <div className="relative">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onNewsClick}
+                className="h-9 w-9 md:h-10 md:w-10 hover:bg-accent/50 transition-all"
+              >
+                <Bell className="h-4 w-4 md:h-5 md:w-5" />
+              </Button>
+              {hasUnreadNews && (
+                <Badge className="absolute -top-1 -right-1 h-2 w-2 p-0 bg-secondary border-0" />
+              )}
+            </div>
+          )}
+
+          {isSignedIn ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="relative h-9 w-9 md:h-10 md:w-10 rounded-full p-0"
+                >
+                  <Avatar className="h-9 w-9 md:h-10 md:w-10">
+                    <AvatarFallback className="bg-gradient-to-br from-primary to-secondary text-primary-foreground text-sm">
+                      JD
+                    </AvatarFallback>
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem>Account Settings</DropdownMenuItem>
+                <DropdownMenuItem onClick={onSignOut}>Log out</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-all text-xs md:text-sm"
+            >
+              <span className="hidden sm:inline">Sign in / Log in</span>
+              <span className="sm:hidden">Sign in</span>
+            </Button>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/apps/frontend/src/components/InfoModal.tsx b/apps/frontend/src/components/InfoModal.tsx
new file mode 100644
index 00000000..04e79b28
--- /dev/null
+++ b/apps/frontend/src/components/InfoModal.tsx
@@ -0,0 +1,50 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+
+interface InfoModalProps {
+  open: boolean;
+  onClose: () => void;
+  type: 'what' | 'private' | 'local' | null;
+}
+
+const infoContent = {
+  what: {
+    title: 'What is GitRay?',
+    description:
+      'GitRay is a powerful Git repository analytics tool that helps you understand your codebase better. It analyzes commit patterns, file distributions, contributor activity, and provides actionable insights to improve your development workflow. Simply paste a GitHub repository URL to get started.',
+  },
+  private: {
+    title: 'Analyze a Private Repository',
+    description:
+      "To analyze private repositories, you'll need to provide a GitHub Personal Access Token. Go to Settings → Connections and add your token. GitRay securely uses this token to fetch repository data without storing your credentials. Your token is encrypted and only used for analysis purposes.",
+  },
+  local: {
+    title: 'Analyze on a Local Server',
+    description:
+      'GitRay can be self-hosted on your local server for enhanced privacy and control. Clone the GitRay repository, configure your environment variables, and run the Docker container. This allows you to analyze private repositories without sharing data externally. Check our documentation for setup instructions.',
+  },
+};
+
+export function InfoModal({ open, onClose, type }: InfoModalProps) {
+  if (!type) return null;
+
+  const content = infoContent[type];
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{content.title}</DialogTitle>
+          <DialogDescription className="pt-4">
+            {content.description}
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/frontend/src/components/LandingPage.tsx b/apps/frontend/src/components/LandingPage.tsx
new file mode 100644
index 00000000..b2fcf976
--- /dev/null
+++ b/apps/frontend/src/components/LandingPage.tsx
@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { ArrowRight } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+
+interface LandingPageProps {
+  onAnalyze: (url: string, mode: string) => void;
+  onInfoClick: (type: 'what' | 'private' | 'local') => void;
+}
+
+export function LandingPage({ onAnalyze, onInfoClick }: LandingPageProps) {
+  const [url, setUrl] = useState('');
+  const [mode, setMode] = useState('main');
+
+  const handleAnalyze = () => {
+    if (url.trim()) {
+      onAnalyze(url, mode);
+    }
+  };
+
+  return (
+    <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center px-4">
+      <div className="w-full max-w-3xl space-y-8 md:space-y-12 py-8 md:py-12">
+        {/* Hero Wordmark */}
+        <div className="text-center space-y-4">
+          <h1 className="text-5xl md:text-7xl lg:text-8xl tracking-tight bg-gradient-to-br from-primary via-primary to-secondary bg-clip-text text-transparent font-bold">
+            GitRay
+          </h1>
+          <p className="text-muted-foreground max-w-xl mx-auto text-sm md:text-base">
+            Powerful analytics for your Git repositories. Understand your
+            codebase like never before.
+          </p>
+        </div>
+
+        {/* Input Section */}
+        <div className="space-y-4 md:space-y-6 bg-card rounded-2xl p-6 md:p-8 shadow-lg border border-border hover:shadow-xl transition-shadow">
+          <div className="space-y-2">
+            <Label htmlFor="repo-url" className="text-sm md:text-base">
+              Repository URL
+            </Label>
+            <Input
+              id="repo-url"
+              type="url"
+              placeholder="https://github.com/org/repo"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              className="h-12 md:h-14 text-base md:text-lg border-2 focus:border-primary transition-colors"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleAnalyze();
+                }
+              }}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="mode" className="text-sm md:text-base">
+              Select Branch
+            </Label>
+            <Select value={mode} onValueChange={setMode}>
+              <SelectTrigger id="mode" className="h-10 md:h-12">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="main">Main</SelectItem>
+                <SelectItem value="...">...</SelectItem>
+                <SelectItem value="...">...</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Button
+            onClick={handleAnalyze}
+            className="w-full h-12 md:h-14 text-base md:text-lg group relative overflow-hidden"
+            size="lg"
+            disabled={!url.trim()}
+          >
+            <span className="relative z-10 flex items-center justify-center">
+              Analyze Repository
+              <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+            </span>
+            <div className="absolute inset-0 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity" />
+          </Button>
+        </div>
+
+        {/* Helper Chips */}
+        <div className="flex flex-wrap gap-3 justify-center">
+          <Button
+            variant="outline"
+            onClick={() => onInfoClick('what')}
+            className="rounded-full shadow-sm hover:shadow-md transition-all"
+          >
+            What is GitRay?
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => onInfoClick('private')}
+            className="rounded-full shadow-sm hover:shadow-md transition-all"
+          >
+            Analyze a private Repo?
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => onInfoClick('local')}
+            className="rounded-full shadow-sm hover:shadow-md transition-all"
+          >
+            Analyze on a local Server?
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/LoadingSpinner.tsx b/apps/frontend/src/components/LoadingSpinner.tsx
new file mode 100644
index 00000000..38e6df0e
--- /dev/null
+++ b/apps/frontend/src/components/LoadingSpinner.tsx
@@ -0,0 +1,19 @@
+import { Loader2 } from 'lucide-react';
+
+interface LoadingSpinnerProps {
+  message?: string;
+}
+
+export function LoadingSpinner({
+  message = 'Loading...',
+}: LoadingSpinnerProps) {
+  return (
+    <div className="min-h-[400px] flex flex-col items-center justify-center space-y-4">
+      <div className="relative">
+        <div className="h-16 w-16 rounded-full bg-gradient-to-br from-primary to-secondary opacity-20 animate-pulse" />
+        <Loader2 className="h-8 w-8 text-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-spin" />
+      </div>
+      <p className="text-muted-foreground">{message}</p>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/NewsDrawer.tsx b/apps/frontend/src/components/NewsDrawer.tsx
new file mode 100644
index 00000000..46406009
--- /dev/null
+++ b/apps/frontend/src/components/NewsDrawer.tsx
@@ -0,0 +1,94 @@
+import { ExternalLink } from 'lucide-react';
+import { Button } from './ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from './ui/sheet';
+
+interface NewsDrawerProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const newsItems = [
+  {
+    version: 'v2.0',
+    title: 'Major Update: AI Insights & Premium Features',
+    description:
+      'Introducing AI-powered project analysis, weekly summaries, and comprehensive premium features including multi-language support (8 languages available).',
+    date: 'Just now',
+  },
+  {
+    version: 'v2.0',
+    title: 'New: Advanced Analytics Tab',
+    description:
+      'Access Code Churn Analysis, File Type Distribution, Graph View Timeline with playback, and Git Diff viewer all in one place.',
+    date: 'Just now',
+  },
+  {
+    version: 'v2.0',
+    title: 'Enhanced: Contribution Ranking',
+    description:
+      'See detailed contributor leaderboards with commit counts, code changes, and achievement badges on the Overview tab.',
+    date: 'Just now',
+  },
+  {
+    version: 'v1.9',
+    title: 'Private repo tokens',
+    description:
+      'You can now add tokens to Connections to analyze private repositories securely.',
+    date: '2 days ago',
+  },
+  {
+    version: 'v1.8',
+    title: 'New: File Distribution chart',
+    description:
+      "Visualize your repository's file types and language distribution with our new chart.",
+    date: '1 week ago',
+  },
+];
+
+export function NewsDrawer({ open, onClose }: NewsDrawerProps) {
+  return (
+    <Sheet open={open} onOpenChange={onClose}>
+      <SheetContent
+        side="right"
+        className="w-full sm:max-w-md p-6 flex flex-col"
+      >
+        <SheetHeader>
+          <SheetTitle>What's New</SheetTitle>
+        </SheetHeader>
+
+        <div className="mt-6 space-y-6 overflow-y-auto flex-1 pr-2">
+          {newsItems.map((item, index) => (
+            <div
+              key={index}
+              className="space-y-2 pb-6 border-b border-border last:border-0"
+            >
+              <div className="flex items-start justify-between gap-2">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs text-primary">
+                      {item.version}
+                    </span>
+                  </div>
+                  <h4 className="mt-2">{item.title}</h4>
+                </div>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {item.description}
+              </p>
+              <p className="text-xs text-muted-foreground">{item.date}</p>
+            </div>
+          ))}
+
+          <Button
+            variant="outline"
+            className="w-full gap-2"
+            onClick={() => window.open('#', '_blank')}
+          >
+            View Full Changelog
+            <ExternalLink className="h-4 w-4" />
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/apps/frontend/src/components/PremiumFeatures.tsx b/apps/frontend/src/components/PremiumFeatures.tsx
new file mode 100644
index 00000000..56f1f799
--- /dev/null
+++ b/apps/frontend/src/components/PremiumFeatures.tsx
@@ -0,0 +1,421 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import {
+  Lock,
+  Play,
+  Download,
+  ZoomIn,
+  Layers,
+  Users,
+  MessageSquare,
+  Trophy,
+  FileType,
+  Smartphone,
+  Monitor,
+  Shield,
+  Rocket,
+} from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+
+const premiumFeatures = [
+  {
+    category: 'Visualizations',
+    icon: Play,
+    features: [
+      {
+        name: 'Time-lapse Animation (Gource)',
+        description:
+          'Watch your project evolution with animated commit history visualization',
+        icon: Play,
+        badge: 'Premium',
+      },
+      {
+        name: 'Export Visualizations',
+        description:
+          'Export charts, graphs, and reports in PNG, SVG, or PDF formats',
+        icon: Download,
+        badge: 'Premium',
+      },
+      {
+        name: 'Advanced Zoom & Pan',
+        description:
+          'Interactive navigation with smooth zooming and panning controls',
+        icon: ZoomIn,
+        badge: 'Premium',
+      },
+    ],
+  },
+  {
+    category: 'Analysis Tools',
+    icon: Layers,
+    features: [
+      {
+        name: 'UML Diagram Generation',
+        description:
+          'Automatically generate UML diagrams from your codebase using PlantUML',
+        icon: FileType,
+        badge: 'Premium',
+      },
+      {
+        name: 'Project Efficiency Analysis',
+        description:
+          'Get insights on how to complete projects faster and more efficiently',
+        icon: Rocket,
+        badge: 'Premium',
+      },
+      {
+        name: 'Security Insights',
+        description:
+          'Advanced vulnerability detection and security recommendations',
+        icon: Shield,
+        badge: 'Premium',
+      },
+    ],
+  },
+  {
+    category: 'Multi-Project Management',
+    icon: Layers,
+    features: [
+      {
+        name: 'Manage Multiple Repositories',
+        description:
+          'Analyze and track multiple projects simultaneously with unified dashboard',
+        icon: Layers,
+        badge: 'Team',
+      },
+      {
+        name: 'Team Collaboration',
+        description:
+          'Share insights, add team members, and collaborate with built-in chat',
+        icon: Users,
+        badge: 'Team',
+      },
+      {
+        name: 'Team Chat Rooms',
+        description:
+          'Real-time communication with push notifications and email alerts',
+        icon: MessageSquare,
+        badge: 'Team',
+      },
+      {
+        name: 'Gamification System',
+        description:
+          'Track levels, ranks, and achievements to motivate your team',
+        icon: Trophy,
+        badge: 'Team',
+      },
+    ],
+  },
+  {
+    category: 'Desktop & Mobile',
+    icon: Monitor,
+    features: [
+      {
+        name: 'Desktop Application',
+        description:
+          'Download GitRay as a standalone executable with offline AI capabilities',
+        icon: Monitor,
+        badge: 'Enterprise',
+      },
+      {
+        name: 'Progressive Web App (PWA)',
+        description:
+          'Install GitRay on Android devices with native app experience',
+        icon: Smartphone,
+        badge: 'Premium',
+      },
+    ],
+  },
+];
+
+const pricingPlans = [
+  {
+    name: 'Free',
+    price: '$0',
+    period: 'forever',
+    description: 'Perfect for individuals and small projects',
+    features: [
+      'Up to 3 repositories',
+      'Basic analytics & visualizations',
+      '7-day data retention',
+      'Community support',
+    ],
+    cta: 'Current Plan',
+    highlighted: false,
+  },
+  {
+    name: 'Premium',
+    price: '$15',
+    period: 'per month',
+    description: 'Advanced features for serious developers',
+    features: [
+      'Unlimited repositories',
+      'All visualizations & exports',
+      '30-day data retention',
+      'AI-powered insights',
+      'Priority support',
+      'Zoom & Pan controls',
+    ],
+    cta: 'Upgrade to Premium',
+    highlighted: true,
+  },
+  {
+    name: 'Team',
+    price: '$49',
+    period: 'per month',
+    description: 'Collaborate with your entire team',
+    features: [
+      'Everything in Premium',
+      'Multi-project management',
+      'Team collaboration tools',
+      'Real-time team chat',
+      'Gamification system',
+      '90-day data retention',
+      'Up to 10 team members',
+    ],
+    cta: 'Start Team Trial',
+    highlighted: false,
+  },
+  {
+    name: 'Enterprise',
+    price: 'Custom',
+    period: 'contact us',
+    description: 'For large organizations with specific needs',
+    features: [
+      'Everything in Team',
+      'Unlimited team members',
+      'Desktop application',
+      'Offline AI capabilities',
+      'Custom integrations',
+      'Dedicated support',
+      'SLA guarantees',
+      'On-premise deployment',
+    ],
+    cta: 'Contact Sales',
+    highlighted: false,
+  },
+];
+
+interface PremiumFeaturesProps {
+  showPricingOnly?: boolean;
+}
+
+export function PremiumFeatures({
+  showPricingOnly = false,
+}: PremiumFeaturesProps) {
+  if (showPricingOnly) {
+    return (
+      <div className="space-y-6">
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {pricingPlans.map((plan, index) => (
+            <Card
+              key={index}
+              className={`relative ${
+                plan.highlighted ? 'border-primary shadow-lg scale-105' : ''
+              }`}
+            >
+              {plan.highlighted && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                  <Badge className="bg-primary">Most Popular</Badge>
+                </div>
+              )}
+              <CardHeader>
+                <CardTitle>{plan.name}</CardTitle>
+                <div className="mt-4">
+                  <span className="text-3xl font-bold">{plan.price}</span>
+                  <span className="text-muted-foreground text-sm">
+                    {plan.price !== 'Custom' && `/${plan.period}`}
+                  </span>
+                </div>
+                <CardDescription>{plan.description}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <ul className="space-y-2">
+                  {plan.features.map((feature, featureIndex) => (
+                    <li
+                      key={featureIndex}
+                      className="flex items-start gap-2 text-sm"
+                    >
+                      <div className="h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
+                        <div className="h-2 w-2 rounded-full bg-primary" />
+                      </div>
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <Button
+                  className="w-full"
+                  variant={plan.highlighted ? 'default' : 'outline'}
+                  disabled={plan.name === 'Free'}
+                >
+                  {plan.cta}
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Compare All Plans</CardTitle>
+            <CardDescription>
+              Choose the plan that best fits your needs
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b">
+                    <th className="text-left p-3 font-semibold">Feature</th>
+                    {pricingPlans.map((plan, index) => (
+                      <th key={index} className="p-3 font-semibold">
+                        {plan.name}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr className="border-b">
+                    <td className="p-3">Repositories</td>
+                    <td className="p-3 text-center">Up to 3</td>
+                    <td className="p-3 text-center">Unlimited</td>
+                    <td className="p-3 text-center">Unlimited</td>
+                    <td className="p-3 text-center">Unlimited</td>
+                  </tr>
+                  <tr className="border-b">
+                    <td className="p-3">Data Retention</td>
+                    <td className="p-3 text-center">7 days</td>
+                    <td className="p-3 text-center">30 days</td>
+                    <td className="p-3 text-center">90 days</td>
+                    <td className="p-3 text-center">Unlimited</td>
+                  </tr>
+                  <tr className="border-b">
+                    <td className="p-3">AI Insights</td>
+                    <td className="p-3 text-center">-</td>
+                    <td className="p-3 text-center">✓</td>
+                    <td className="p-3 text-center">✓</td>
+                    <td className="p-3 text-center">✓ + Offline</td>
+                  </tr>
+                  <tr className="border-b">
+                    <td className="p-3">Team Collaboration</td>
+                    <td className="p-3 text-center">-</td>
+                    <td className="p-3 text-center">-</td>
+                    <td className="p-3 text-center">✓</td>
+                    <td className="p-3 text-center">✓</td>
+                  </tr>
+                  <tr>
+                    <td className="p-3">Desktop App</td>
+                    <td className="p-3 text-center">-</td>
+                    <td className="p-3 text-center">-</td>
+                    <td className="p-3 text-center">-</td>
+                    <td className="p-3 text-center">✓</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <Tabs defaultValue="features" className="space-y-6">
+        <TabsList>
+          <TabsTrigger value="features">Premium Features</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="features" className="space-y-6">
+          {premiumFeatures.map((category, categoryIndex) => {
+            const CategoryIcon = category.icon;
+            return (
+              <Card key={categoryIndex}>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <CategoryIcon className="h-5 w-5" />
+                    {category.category}
+                  </CardTitle>
+                  <CardDescription>
+                    Unlock powerful tools to supercharge your workflow
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid gap-4 md:grid-cols-2">
+                    {category.features.map((feature, featureIndex) => {
+                      const FeatureIcon = feature.icon;
+                      return (
+                        <div
+                          key={featureIndex}
+                          className="relative overflow-hidden rounded-lg border p-4 hover:shadow-lg transition-all group"
+                        >
+                          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-secondary/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+                          <div className="relative space-y-3">
+                            <div className="flex items-start justify-between">
+                              <div className="p-2 rounded-lg bg-primary/10">
+                                <FeatureIcon className="h-5 w-5 text-primary" />
+                              </div>
+                              <Badge variant="secondary" className="text-xs">
+                                {feature.badge}
+                              </Badge>
+                            </div>
+                            <div>
+                              <h4 className="font-semibold mb-1">
+                                {feature.name}
+                              </h4>
+                              <p className="text-sm text-muted-foreground">
+                                {feature.description}
+                              </p>
+                            </div>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="w-full"
+                            >
+                              Learn More
+                            </Button>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+
+          <Card className="border-primary/50 bg-gradient-to-br from-primary/5 to-secondary/5">
+            <CardContent className="flex flex-col items-center justify-center py-12 space-y-4">
+              <Lock className="h-12 w-12 text-primary" />
+              <div className="text-center space-y-2">
+                <h3 className="text-xl">Unlock All Premium Features</h3>
+                <p className="text-muted-foreground max-w-lg">
+                  Get access to advanced visualizations, AI insights, team
+                  collaboration tools, and much more with a Premium
+                  subscription.
+                </p>
+              </div>
+              <div className="flex gap-3">
+                <Button size="lg">Start Free Trial</Button>
+                <Button size="lg" variant="outline">
+                  View Pricing
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                14-day free trial · No credit card required
+              </p>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/RepoInput.tsx b/apps/frontend/src/components/RepoInput.tsx
deleted file mode 100644
index c34f5ed4..00000000
--- a/apps/frontend/src/components/RepoInput.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useState } from 'react';
-
-/**
- * Input box allowing the user to enter a repository URL and trigger the
- * visualization of that repository.
- */
-
-interface RepoInputProps {
-  onVisualize: (_repoUrl: string) => void;
-}
-
-/**
- * Small form used on the main page for repository submission. It manages its
- * own input state and notifies the parent when the user clicks the
- * "Visualize" button.
- */
-const RepoInput: React.FC<RepoInputProps> = ({ onVisualize }) => {
-  const [repoUrl, setRepoUrl] = useState<string>(
-    // Placeholder text shown on first render
-    'https://github.com/username/Repository'
-  );
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setRepoUrl(event.target.value);
-  };
-
-  const handleVisualizeClick = () => {
-    // Bubble the entered repo URL up to the parent component
-    onVisualize(repoUrl);
-  };
-
-  return (
-    <div className="flex items-center justify-center space-x-4">
-      <input
-        type="text"
-        className="w-96 px-4 py-2 border border-gray-300 rounded-md text-gray-500"
-        value={repoUrl}
-        onChange={handleInputChange}
-        onFocus={() => {
-          if (repoUrl === 'https://github.com/username/Repository') {
-            setRepoUrl('');
-          }
-        }}
-        onBlur={() => {
-          if (repoUrl === '') {
-            setRepoUrl('https://github.com/username/Repository');
-          }
-        }}
-      />
-      <button
-        className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md"
-        onClick={handleVisualizeClick}
-      >
-        Visualize
-      </button>
-    </div>
-  );
-};
-
-export default RepoInput;
diff --git a/apps/frontend/src/components/RiveLoader.tsx b/apps/frontend/src/components/RiveLoader.tsx
index f1f56b45..b3b5043e 100644
--- a/apps/frontend/src/components/RiveLoader.tsx
+++ b/apps/frontend/src/components/RiveLoader.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { useRive } from '@rive-app/react-canvas';
 
 interface RiveLoaderProps {
@@ -8,26 +8,42 @@ interface RiveLoaderProps {
   className?: string;
   /** Loading message to display */
   message?: string;
+  /** Current theme (light/dark/system) */
+  theme?: 'light' | 'dark' | 'system';
 }
 
 /**
- * Rive animation component that displays a loading animation from the dark mode logo file.
- * The animation uses the "Loading" state machine and timeline.
+ * Rive animation component that displays a loading animation.
+ * Automatically switches between light and dark mode animations based on the theme.
+ * Uses the "Loading" state machine for the loading animation.
  */
-const RiveLoader: React.FC<RiveLoaderProps> = ({
+function RiveLoaderInner({
   size = 120,
   className = '',
   message = 'Loading...',
-}) => {
+  resolvedTheme,
+}: {
+  size: number;
+  className: string;
+  message: string;
+  resolvedTheme: 'light' | 'dark';
+}) {
+  const animationSrc =
+    resolvedTheme === 'dark'
+      ? '/Logo_Animation_StateMachine_DarkMode.riv'
+      : '/Logo_Animation_StateMachine_LightMode.riv';
+
   const { RiveComponent } = useRive({
-    src: '/Logo_Animation_StateMachine_DarkMode.riv',
+    src: animationSrc,
     stateMachines: 'Loading',
     autoplay: true,
     onLoad: () => {
-      console.log('Rive animation loaded successfully');
+      console.log(
+        `Rive loading animation loaded successfully (${resolvedTheme} mode)`
+      );
     },
     onLoadError: (error) => {
-      console.error('Failed to load Rive animation:', error);
+      console.error('Failed to load Rive loading animation:', error);
     },
   });
 
@@ -39,9 +55,45 @@ const RiveLoader: React.FC<RiveLoaderProps> = ({
       >
         <RiveComponent />
       </div>
-      {message && <p className="mt-4 text-gray-400 text-center">{message}</p>}
+      {message && (
+        <p className="mt-4 text-muted-foreground text-center">{message}</p>
+      )}
     </div>
   );
-};
+}
+
+export function RiveLoader({
+  size = 120,
+  className = '',
+  message = 'Loading...',
+  theme = 'dark',
+}: RiveLoaderProps) {
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('dark');
 
-export default RiveLoader;
+  // Resolve system theme preference
+  useEffect(() => {
+    if (theme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const updateTheme = () => {
+        const newTheme = mediaQuery.matches ? 'dark' : 'light';
+        setResolvedTheme(newTheme);
+      };
+
+      updateTheme();
+      mediaQuery.addEventListener('change', updateTheme);
+      return () => mediaQuery.removeEventListener('change', updateTheme);
+    } else {
+      setResolvedTheme(theme);
+    }
+  }, [theme]);
+
+  return (
+    <RiveLoaderInner
+      key={resolvedTheme}
+      size={size}
+      className={className}
+      message={message}
+      resolvedTheme={resolvedTheme}
+    />
+  );
+}
diff --git a/apps/frontend/src/components/RiveLogo.tsx b/apps/frontend/src/components/RiveLogo.tsx
index 10050ab6..be6d1e19 100644
--- a/apps/frontend/src/components/RiveLogo.tsx
+++ b/apps/frontend/src/components/RiveLogo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { useRive } from '@rive-app/react-canvas';
 
 interface RiveLogoProps {
@@ -8,23 +8,58 @@ interface RiveLogoProps {
   className?: string;
   /** Whether to show hover effects */
   interactive?: boolean;
+  /** Current theme (light/dark/system) */
+  theme?: 'light' | 'dark' | 'system';
 }
 
 /**
  * Rive logo component that displays the brand logo with interactive elements.
+ * Automatically switches between light and dark mode logos based on the theme.
  * Uses the "State Machine 1" state machine for hover effects and interactions.
  */
-const RiveLogo: React.FC<RiveLogoProps> = ({
+export function RiveLogo({
   size = 60,
   className = '',
   interactive = true,
-}) => {
+  theme = 'dark',
+}: RiveLogoProps) {
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('dark');
+  const [logoKey, setLogoKey] = useState(0);
+
+  // Resolve system theme preference
+  useEffect(() => {
+    if (theme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const updateTheme = () => {
+        const newTheme = mediaQuery.matches ? 'dark' : 'light';
+        if (newTheme !== resolvedTheme) {
+          setResolvedTheme(newTheme);
+          setLogoKey((prev) => prev + 1);
+        }
+      };
+
+      updateTheme();
+      mediaQuery.addEventListener('change', updateTheme);
+      return () => mediaQuery.removeEventListener('change', updateTheme);
+    } else {
+      if (theme !== resolvedTheme) {
+        setResolvedTheme(theme);
+        setLogoKey((prev) => prev + 1);
+      }
+    }
+  }, [theme, resolvedTheme]);
+
+  const logoSrc =
+    resolvedTheme === 'dark'
+      ? '/Logo_Animation_StateMachine_DarkMode.riv'
+      : '/Logo_Animation_StateMachine_LightMode.riv';
+
   const { RiveComponent } = useRive({
-    src: '/Logo_Animation_StateMachine_DarkMode.riv',
+    src: logoSrc,
     stateMachines: 'State Machine 1',
     autoplay: true,
     onLoad: () => {
-      console.log('Rive logo loaded successfully');
+      console.log(`Rive logo loaded successfully (${resolvedTheme} mode)`);
     },
     onLoadError: (error) => {
       console.error('Failed to load Rive logo:', error);
@@ -33,12 +68,11 @@ const RiveLogo: React.FC<RiveLogoProps> = ({
 
   return (
     <div
+      key={logoKey}
       className={`flex items-center justify-center ${interactive ? 'cursor-pointer' : ''} ${className}`}
       style={{ width: size, height: size }}
     >
       <RiveComponent />
     </div>
   );
-};
-
-export default RiveLogo;
+}
diff --git a/apps/frontend/src/components/SettingsDrawer.tsx b/apps/frontend/src/components/SettingsDrawer.tsx
new file mode 100644
index 00000000..25a90d1f
--- /dev/null
+++ b/apps/frontend/src/components/SettingsDrawer.tsx
@@ -0,0 +1,183 @@
+import { Button } from './ui/button';
+import { Label } from './ui/label';
+import { Input } from './ui/input';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group';
+import { Switch } from './ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from './ui/sheet';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import { useState } from 'react';
+
+interface SettingsDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  theme: 'light' | 'dark' | 'system';
+  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
+}
+
+export function SettingsDrawer({
+  open,
+  onClose,
+  theme,
+  onThemeChange,
+}: SettingsDrawerProps) {
+  const [language, setLanguage] = useState('english');
+
+  return (
+    <Sheet open={open} onOpenChange={onClose}>
+      <SheetContent side="left" className="w-full sm:max-w-md overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>Settings</SheetTitle>
+        </SheetHeader>
+
+        <Tabs defaultValue="general" className="mt-6 px-4 pb-4">
+          <TabsList className="grid w-full grid-cols-4">
+            <TabsTrigger value="general">General</TabsTrigger>
+            <TabsTrigger value="appearance">Appearance</TabsTrigger>
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="connections">Connections</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="general" className="space-y-6 mt-6">
+            <div className="space-y-4">
+              <h3>General Settings</h3>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="language">Language</Label>
+                  <Select value={language} onValueChange={setLanguage}>
+                    <SelectTrigger id="language">
+                      <SelectValue placeholder="Select language" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="english">English (Default)</SelectItem>
+                      <SelectItem value="german">Deutsch</SelectItem>
+                      <SelectItem value="french">Français</SelectItem>
+                      <SelectItem value="spanish">Español</SelectItem>
+                      <SelectItem value="portuguese">Português</SelectItem>
+                      <SelectItem value="mandarin">中文</SelectItem>
+                      <SelectItem value="japanese">日本語</SelectItem>
+                      <SelectItem value="russian">Русский</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <p className="text-xs text-muted-foreground">
+                    Choose your preferred display language
+                  </p>
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label>Auto-analyze on paste</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Start analysis automatically when pasting a URL
+                    </p>
+                  </div>
+                  <Switch />
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label>Show notifications</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Get notified when analysis completes
+                    </p>
+                  </div>
+                  <Switch defaultChecked />
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label>Enable export features</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Allow exporting visualizations and reports
+                    </p>
+                  </div>
+                  <Switch defaultChecked />
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="appearance" className="space-y-6 mt-6">
+            <div className="space-y-4">
+              <h3>Theme</h3>
+              <RadioGroup value={theme} onValueChange={onThemeChange}>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="light" id="light" />
+                  <Label htmlFor="light">Light</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="dark" id="dark" />
+                  <Label htmlFor="dark">Dark</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="system" id="system" />
+                  <Label htmlFor="system">System</Label>
+                </div>
+              </RadioGroup>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="account" className="space-y-6 mt-6">
+            <div className="space-y-4">
+              <h3>Account Information</h3>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="your@email.com"
+                    defaultValue="john.doe@example.com"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="username">Username</Label>
+                  <Input
+                    id="username"
+                    placeholder="username"
+                    defaultValue="johndoe"
+                  />
+                </div>
+                <Button className="w-full">Save Changes</Button>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="connections" className="space-y-6 mt-6">
+            <div className="space-y-4">
+              <h3>API Connections</h3>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="github-token">GitHub Token</Label>
+                  <Input
+                    id="github-token"
+                    type="password"
+                    placeholder="ghp_xxxxxxxxxxxx"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Required for private repositories
+                  </p>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="ai-token">AI API Token</Label>
+                  <Input
+                    id="ai-token"
+                    type="password"
+                    placeholder="sk-xxxxxxxxxxxx"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    For enhanced AI-powered insights
+                  </p>
+                </div>
+                <Button className="w-full">Save Tokens</Button>
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/apps/frontend/src/components/figma/ImageWithFallback.tsx b/apps/frontend/src/components/figma/ImageWithFallback.tsx
new file mode 100644
index 00000000..0b119580
--- /dev/null
+++ b/apps/frontend/src/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,41 @@
+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}
+    />
+  );
+}
diff --git a/apps/frontend/src/components/ui/accordion.tsx b/apps/frontend/src/components/ui/accordion.tsx
new file mode 100644
index 00000000..1f038ccd
--- /dev/null
+++ b/apps/frontend/src/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+
+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 };
diff --git a/apps/frontend/src/components/ui/alert-dialog.tsx b/apps/frontend/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..ea119720
--- /dev/null
+++ b/apps/frontend/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/alert.tsx b/apps/frontend/src/components/ui/alert.tsx
new file mode 100644
index 00000000..06dfe5c2
--- /dev/null
+++ b/apps/frontend/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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 };
diff --git a/apps/frontend/src/components/ui/aspect-ratio.tsx b/apps/frontend/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000..afb7845c
--- /dev/null
+++ b/apps/frontend/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };
diff --git a/apps/frontend/src/components/ui/avatar.tsx b/apps/frontend/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..f8cba895
--- /dev/null
+++ b/apps/frontend/src/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+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 };
diff --git a/apps/frontend/src/components/ui/badge.tsx b/apps/frontend/src/components/ui/badge.tsx
new file mode 100644
index 00000000..c342cb9a
--- /dev/null
+++ b/apps/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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 };
diff --git a/apps/frontend/src/components/ui/breadcrumb.tsx b/apps/frontend/src/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000..263388c1
--- /dev/null
+++ b/apps/frontend/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/button.tsx b/apps/frontend/src/components/ui/button.tsx
new file mode 100644
index 00000000..6adccd80
--- /dev/null
+++ b/apps/frontend/src/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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',
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/apps/frontend/src/components/ui/calendar.tsx b/apps/frontend/src/components/ui/calendar.tsx
new file mode 100644
index 00000000..cab52822
--- /dev/null
+++ b/apps/frontend/src/components/ui/calendar.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+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 }: React.ComponentProps<'svg'>) => (
+          <ChevronLeft className={cn('size-4', className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }: React.ComponentProps<'svg'>) => (
+          <ChevronRight className={cn('size-4', className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };
diff --git a/apps/frontend/src/components/ui/card.tsx b/apps/frontend/src/components/ui/card.tsx
new file mode 100644
index 00000000..78e776f8
--- /dev/null
+++ b/apps/frontend/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <h4
+      data-slot="card-title"
+      className={cn('leading-none', className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6 [&:last-child]:pb-6', className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 pb-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};
diff --git a/apps/frontend/src/components/ui/carousel.tsx b/apps/frontend/src/components/ui/carousel.tsx
new file mode 100644
index 00000000..6b53938f
--- /dev/null
+++ b/apps/frontend/src/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+'use client';
+
+import * as React from 'react';
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/chart.tsx b/apps/frontend/src/components/ui/chart.tsx
new file mode 100644
index 00000000..1219871a
--- /dev/null
+++ b/apps/frontend/src/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+'use client';
+
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+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: any, index: number) => {
+          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: any) => {
+        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,
+};
diff --git a/apps/frontend/src/components/ui/checkbox.tsx b/apps/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..17706c14
--- /dev/null
+++ b/apps/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+
+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 };
diff --git a/apps/frontend/src/components/ui/collapsible.tsx b/apps/frontend/src/components/ui/collapsible.tsx
new file mode 100644
index 00000000..672136a8
--- /dev/null
+++ b/apps/frontend/src/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+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 };
diff --git a/apps/frontend/src/components/ui/command.tsx b/apps/frontend/src/components/ui/command.tsx
new file mode 100644
index 00000000..f2a07f2b
--- /dev/null
+++ b/apps/frontend/src/components/ui/command.tsx
@@ -0,0 +1,177 @@
+'use client';
+
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/context-menu.tsx b/apps/frontend/src/components/ui/context-menu.tsx
new file mode 100644
index 00000000..b91f4153
--- /dev/null
+++ b/apps/frontend/src/components/ui/context-menu.tsx
@@ -0,0 +1,252 @@
+'use client';
+
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/dialog.tsx b/apps/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..6bd12381
--- /dev/null
+++ b/apps/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from './utils';
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      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}
+    />
+  );
+}
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/drawer.tsx b/apps/frontend/src/components/ui/drawer.tsx
new file mode 100644
index 00000000..7ce3e3cf
--- /dev/null
+++ b/apps/frontend/src/components/ui/drawer.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/dropdown-menu.tsx b/apps/frontend/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..7c6cfaf4
--- /dev/null
+++ b/apps/frontend/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+
+import { cn } from './utils';
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-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,
+};
diff --git a/apps/frontend/src/components/ui/form.tsx b/apps/frontend/src/components/ui/form.tsx
new file mode 100644
index 00000000..a6b2663b
--- /dev/null
+++ b/apps/frontend/src/components/ui/form.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/hover-card.tsx b/apps/frontend/src/components/ui/hover-card.tsx
new file mode 100644
index 00000000..ec45fae2
--- /dev/null
+++ b/apps/frontend/src/components/ui/hover-card.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+
+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 };
diff --git a/apps/frontend/src/components/ui/input-otp.tsx b/apps/frontend/src/components/ui/input-otp.tsx
new file mode 100644
index 00000000..094e1559
--- /dev/null
+++ b/apps/frontend/src/components/ui/input-otp.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+
+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 as any)?.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 };
diff --git a/apps/frontend/src/components/ui/input.tsx b/apps/frontend/src/components/ui/input.tsx
new file mode 100644
index 00000000..eb8111fa
--- /dev/null
+++ b/apps/frontend/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/apps/frontend/src/components/ui/label.tsx b/apps/frontend/src/components/ui/label.tsx
new file mode 100644
index 00000000..68bc28df
--- /dev/null
+++ b/apps/frontend/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+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 };
diff --git a/apps/frontend/src/components/ui/menubar.tsx b/apps/frontend/src/components/ui/menubar.tsx
new file mode 100644
index 00000000..13ec05ea
--- /dev/null
+++ b/apps/frontend/src/components/ui/menubar.tsx
@@ -0,0 +1,276 @@
+'use client';
+
+import * as React from 'react';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/navigation-menu.tsx b/apps/frontend/src/components/ui/navigation-menu.tsx
new file mode 100644
index 00000000..813cde45
--- /dev/null
+++ b/apps/frontend/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDownIcon } from 'lucide-react';
+
+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,
+};
diff --git a/apps/frontend/src/components/ui/pagination.tsx b/apps/frontend/src/components/ui/pagination.tsx
new file mode 100644
index 00000000..3039e56d
--- /dev/null
+++ b/apps/frontend/src/components/ui/pagination.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react';
+
+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"
+      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"
+      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,
+};
diff --git a/apps/frontend/src/components/ui/popover.tsx b/apps/frontend/src/components/ui/popover.tsx
new file mode 100644
index 00000000..ee284e1b
--- /dev/null
+++ b/apps/frontend/src/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+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 };
diff --git a/apps/frontend/src/components/ui/progress.tsx b/apps/frontend/src/components/ui/progress.tsx
new file mode 100644
index 00000000..0e47fa43
--- /dev/null
+++ b/apps/frontend/src/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+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 };
diff --git a/apps/frontend/src/components/ui/radio-group.tsx b/apps/frontend/src/components/ui/radio-group.tsx
new file mode 100644
index 00000000..d1b4581d
--- /dev/null
+++ b/apps/frontend/src/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CircleIcon } from 'lucide-react';
+
+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 };
diff --git a/apps/frontend/src/components/ui/resizable.tsx b/apps/frontend/src/components/ui/resizable.tsx
new file mode 100644
index 00000000..47a3666d
--- /dev/null
+++ b/apps/frontend/src/components/ui/resizable.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import { GripVerticalIcon } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+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 };
diff --git a/apps/frontend/src/components/ui/scroll-area.tsx b/apps/frontend/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..a66259a5
--- /dev/null
+++ b/apps/frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from './utils';
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };
diff --git a/apps/frontend/src/components/ui/select.tsx b/apps/frontend/src/components/ui/select.tsx
new file mode 100644
index 00000000..e33c070a
--- /dev/null
+++ b/apps/frontend/src/components/ui/select.tsx
@@ -0,0 +1,185 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+
+import { cn } from './utils';
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/apps/frontend/src/components/ui/separator.tsx b/apps/frontend/src/components/ui/separator.tsx
new file mode 100644
index 00000000..c59a2d7a
--- /dev/null
+++ b/apps/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from './utils';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/apps/frontend/src/components/ui/sheet.tsx b/apps/frontend/src/components/ui/sheet.tsx
new file mode 100644
index 00000000..1813e104
--- /dev/null
+++ b/apps/frontend/src/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from './utils';
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-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 SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/apps/frontend/src/components/ui/sidebar.tsx b/apps/frontend/src/components/ui/sidebar.tsx
new file mode 100644
index 00000000..af3effdf
--- /dev/null
+++ b/apps/frontend/src/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+'use client';
+
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { VariantProps, cva } from 'class-variance-authority';
+import { PanelLeftIcon } from 'lucide-react';
+
+import { useIsMobile } from './use-mobile';
+import { cn } from './utils';
+import { Button } from './button';
+import { Input } from './input';
+import { Separator } from './separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from './sheet';
+import { Skeleton } from './skeleton';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './tooltip';
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === 'function' ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? 'expanded' : 'collapsed';
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right';
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('bg-background h-8 w-full shadow-none', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = 'default',
+  size = 'default',
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : 'button';
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+  size?: 'sm' | 'md';
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/apps/frontend/src/components/ui/skeleton.tsx b/apps/frontend/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..9fbb6120
--- /dev/null
+++ b/apps/frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from './utils';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/apps/frontend/src/components/ui/slider.tsx b/apps/frontend/src/components/ui/slider.tsx
new file mode 100644
index 00000000..1fc17e42
--- /dev/null
+++ b/apps/frontend/src/components/ui/slider.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+import { cn } from './utils';
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };
diff --git a/apps/frontend/src/components/ui/sonner.tsx b/apps/frontend/src/components/ui/sonner.tsx
new file mode 100644
index 00000000..564a6547
--- /dev/null
+++ b/apps/frontend/src/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, ToasterProps } from 'sonner';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/apps/frontend/src/components/ui/switch.tsx b/apps/frontend/src/components/ui/switch.tsx
new file mode 100644
index 00000000..bb5ab0d5
--- /dev/null
+++ b/apps/frontend/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from './utils';
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-card dark:data-[state=unchecked]:bg-card-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };
diff --git a/apps/frontend/src/components/ui/table.tsx b/apps/frontend/src/components/ui/table.tsx
new file mode 100644
index 00000000..12d338ca
--- /dev/null
+++ b/apps/frontend/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from './utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/apps/frontend/src/components/ui/tabs.tsx b/apps/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..9349b375
--- /dev/null
+++ b/apps/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from './utils';
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-xl p-[3px] flex',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-card dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/frontend/src/components/ui/textarea.tsx b/apps/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..b10894af
--- /dev/null
+++ b/apps/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from './utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'resize-none border-input placeholder:text-muted-foreground 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 flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/apps/frontend/src/components/ui/toggle-group.tsx b/apps/frontend/src/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..950d0778
--- /dev/null
+++ b/apps/frontend/src/components/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from './utils';
+import { toggleVariants } from './toggle';
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default',
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/apps/frontend/src/components/ui/toggle.tsx b/apps/frontend/src/components/ui/toggle.tsx
new file mode 100644
index 00000000..96e5dcad
--- /dev/null
+++ b/apps/frontend/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from './utils';
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };
diff --git a/apps/frontend/src/components/ui/tooltip.tsx b/apps/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..345fe379
--- /dev/null
+++ b/apps/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from './utils';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/frontend/src/components/ui/use-mobile.ts b/apps/frontend/src/components/ui/use-mobile.ts
new file mode 100644
index 00000000..6be5f6c1
--- /dev/null
+++ b/apps/frontend/src/components/ui/use-mobile.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/apps/frontend/src/components/ui/utils.ts b/apps/frontend/src/components/ui/utils.ts
new file mode 100644
index 00000000..2819a830
--- /dev/null
+++ b/apps/frontend/src/components/ui/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 3cf5b764..ad0345e4 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -1,94 +1,4192 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
+    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *,
+    :before,
+    :after,
+    ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-rotate-x: rotateX(0);
+      --tw-rotate-y: rotateY(0);
+      --tw-rotate-z: rotateZ(0);
+      --tw-skew-x: skewX(0);
+      --tw-skew-y: skewY(0);
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
+      --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+    }
+  }
+}
+
+@layer theme {
+  :root,
+  :host {
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    --color-red-500: oklch(0.637 0.237 25.331);
+    --color-orange-400: oklch(0.75 0.183 55.934);
+    --color-orange-500: oklch(0.705 0.213 47.604);
+    --color-orange-600: oklch(0.646 0.222 41.116);
+    --color-yellow-400: oklch(0.852 0.199 91.936);
+    --color-yellow-500: oklch(0.795 0.184 86.047);
+    --color-yellow-600: oklch(0.681 0.162 75.834);
+    --color-green-500: oklch(0.723 0.219 149.579);
+    --color-blue-500: oklch(0.623 0.214 259.815);
+    --color-purple-400: oklch(0.714 0.203 305.504);
+    --color-purple-500: oklch(0.627 0.265 303.9);
+    --color-purple-600: oklch(0.558 0.288 302.321);
+    --color-pink-500: oklch(0.656 0.241 354.308);
+    --color-gray-300: oklch(0.872 0.01 258.338);
+    --color-gray-500: oklch(0.551 0.027 264.364);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-3xl: 48rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
+    --tracking-widest: 0.1em;
+    --leading-relaxed: 1.625;
+    --radius-xs: 0.125rem;
+    --radius-2xl: 1rem;
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-transition-duration: 0.15s;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --default-font-variation-settings: var(
+      --font-sans--font-variation-settings
+    );
+    --default-mono-font-family: var(--font-mono);
+    --default-mono-font-feature-settings: var(
+      --font-mono--font-feature-settings
+    );
+    --default-mono-font-variation-settings: var(
+      --font-mono--font-variation-settings
+    );
+  }
+}
+
+@layer base {
+  *,
+  :after,
+  :before,
+  ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  html,
+  :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(
+      --default-font-family,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji'
+    );
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    line-height: inherit;
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(
+      --default-mono-font-family,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      'Courier New',
+      monospace
+    );
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(
+      --default-mono-font-variation-settings,
+      normal
+    );
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    vertical-align: middle;
+    display: block;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+    color: currentColor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    ::placeholder {
+      color: color-mix(in oklab, currentColor 50%, transparent);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) h1 {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) h2 {
+    font-size: var(--text-xl);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) h3 {
+    font-size: var(--text-lg);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) h4 {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) p {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) label,
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) button {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5;
+  }
+
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) input {
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+}
+
+@layer utilities {
+  .\@container\/card-header {
+    container: card-header / inline-size;
+  }
+
+  .pointer-events-none {
+    pointer-events: none;
+  }
+
+  .sr-only {
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .sticky {
+    position: sticky;
+  }
+
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
+
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
+
+  .-top-3 {
+    top: calc(var(--spacing) * -3);
+  }
+
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+
+  .top-1\/2 {
+    top: 50%;
+  }
+
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+
+  .top-\[50\%\] {
+    top: 50%;
+  }
+
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
+
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
+
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+
+  .left-1\/2 {
+    left: 50%;
+  }
+
+  .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
+
+  .left-\[50\%\] {
+    left: 50%;
+  }
+
+  .z-10 {
+    z-index: 10;
+  }
+
+  .z-50 {
+    z-index: 50;
+  }
+
+  .col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
+  .row-start-1 {
+    grid-row-start: 1;
+  }
+
+  .container {
+    width: 100%;
+  }
+
+  @media (width >= 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (width >= 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
+
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
+
+  .-mx-4 {
+    margin-inline: calc(var(--spacing) * -4);
+  }
+
+  .mx-auto {
+    margin-inline: auto;
+  }
+
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
+
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+
+  .mt-auto {
+    margin-top: auto;
+  }
+
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
+
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+
+  .ml-auto {
+    margin-left: auto;
+  }
+
+  .line-clamp-1 {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .inline-flex {
+    display: inline-flex;
+  }
+
+  .table {
+    display: table;
+  }
+
+  .aspect-square {
+    aspect-ratio: 1;
+  }
+
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
+
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
+
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+
+  .h-\[1\.15rem\] {
+    height: 1.15rem;
+  }
+
+  .h-\[200px\] {
+    height: 200px;
+  }
+
+  .h-\[280px\] {
+    height: 280px;
+  }
+
+  .h-\[300px\] {
+    height: 300px;
+  }
+
+  .h-\[calc\(100\%-1px\)\] {
+    height: calc(100% - 1px);
+  }
+
+  .h-\[var\(--radix-select-trigger-height\)\] {
+    height: var(--radix-select-trigger-height);
+  }
+
+  .h-auto {
+    height: auto;
+  }
+
+  .h-full {
+    height: 100%;
+  }
+
+  .h-px {
+    height: 1px;
+  }
+
+  .max-h-\(--radix-dropdown-menu-content-available-height\) {
+    max-height: var(--radix-dropdown-menu-content-available-height);
+  }
+
+  .max-h-\(--radix-select-content-available-height\) {
+    max-height: var(--radix-select-content-available-height);
+  }
+
+  .min-h-4 {
+    min-height: calc(var(--spacing) * 4);
+  }
+
+  .min-h-\[calc\(100vh-8rem\)\] {
+    min-height: calc(100vh - 8rem);
+  }
+
+  .min-h-screen {
+    min-height: 100vh;
+  }
+
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+
+  .w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+  }
+
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+
+  .w-3\/4 {
+    width: 75%;
+  }
+
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+
+  .w-48 {
+    width: calc(var(--spacing) * 48);
+  }
+
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
+
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+
+  .w-auto {
+    width: auto;
+  }
+
+  .w-fit {
+    width: fit-content;
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+
+  .max-w-\[calc\(100\%-2rem\)\] {
+    max-width: calc(100% - 2rem);
+  }
+
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
+
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+
+  .min-w-\[8rem\] {
+    min-width: 8rem;
+  }
+
+  .min-w-\[60px\] {
+    min-width: 60px;
+  }
+
+  .min-w-\[var\(--radix-select-trigger-width\)\] {
+    min-width: var(--radix-select-trigger-width);
+  }
+
+  .min-w-max {
+    min-width: max-content;
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+
+  .flex-shrink-0,
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  }
+
+  .origin-\(--radix-hover-card-content-transform-origin\) {
+    transform-origin: var(--radix-hover-card-content-transform-origin);
+  }
+
+  .origin-\(--radix-select-content-transform-origin\) {
+    transform-origin: var(--radix-select-content-transform-origin);
+  }
+
+  .origin-\(--radix-tooltip-content-transform-origin\) {
+    transform-origin: var(--radix-tooltip-content-transform-origin);
+  }
+
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .translate-y-\[calc\(-50\%_-_2px\)\] {
+    --tw-translate-y: calc(-50% - 2px);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .scale-105 {
+    --tw-scale-x: 105%;
+    --tw-scale-y: 105%;
+    --tw-scale-z: 105%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .rotate-45 {
+    rotate: 45deg;
+  }
+
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
+      var(--tw-skew-x) var(--tw-skew-y);
+  }
+
+  .animate-in {
+    animation: enter var(--tw-duration, 0.15s) var(--tw-ease, ease);
+  }
+
+  .cursor-default {
+    cursor: default;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+
+  .touch-none {
+    touch-action: none;
+  }
+
+  .scroll-my-1 {
+    scroll-margin-block: calc(var(--spacing) * 1);
+  }
+
+  .auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-cols-\[0_1fr\] {
+    grid-template-columns: 0 1fr;
+  }
+
+  .grid-rows-\[auto_auto\] {
+    grid-template-rows: auto auto;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-items-start {
+    justify-items: start;
+  }
+
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+
+  :where(.space-y-0\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(
+      calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse)
+    );
+    margin-block-end: calc(
+      calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse))
+    );
+  }
+
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(
+      calc(var(--spacing) * 1) * var(--tw-space-y-reverse)
+    );
+    margin-block-end: calc(
+      calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))
+    );
+  }
+
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(
+      calc(var(--spacing) * 2) * var(--tw-space-y-reverse)
+    );
+    margin-block-end: calc(
+      calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))
+    );
+  }
+
+  :where(.space-y-3 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(
+      calc(var(--spacing) * 3) * var(--tw-space-y-reverse)
+    );
+    margin-block-end: calc(
+      calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))
+    );
+  }
+
+  :where(.space-y-4 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(
+      calc(var(--spacing) * 4) * var(--tw-space-y-reverse)
+    );
+    margin-block-end: calc(
+      calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))
+    );
+  }
+
+  :where(.space-y-6 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(
+      calc(var(--spacing) * 6) * var(--tw-space-y-reverse)
+    );
+    margin-block-end: calc(
+      calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))
+    );
+  }
+
+  :where(.space-y-8 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(
+      calc(var(--spacing) * 8) * var(--tw-space-y-reverse)
+    );
+    margin-block-end: calc(
+      calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))
+    );
+  }
+
+  :where(.space-x-2 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(
+      calc(var(--spacing) * 2) * var(--tw-space-x-reverse)
+    );
+    margin-inline-end: calc(
+      calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))
+    );
+  }
+
+  .gap-y-0\.5 {
+    row-gap: calc(var(--spacing) * 0.5);
+  }
+
+  .self-start {
+    align-self: flex-start;
+  }
+
+  .justify-self-end {
+    justify-self: flex-end;
+  }
+
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .rounded {
+    border-radius: 0.25rem;
+  }
+
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+
+  .rounded-\[2px\] {
+    border-radius: 2px;
+  }
+
+  .rounded-\[inherit\] {
+    border-radius: inherit;
+  }
+
+  .rounded-full {
+    border-radius: 3.40282e38px;
+  }
+
+  .rounded-lg {
+    border-radius: var(--radius);
+  }
+
+  .rounded-md {
+    border-radius: calc(var(--radius) - 2px);
+  }
+
+  .rounded-sm {
+    border-radius: calc(var(--radius) - 4px);
+  }
+
+  .rounded-xl {
+    border-radius: calc(var(--radius) + 4px);
+  }
+
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
+
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+
+  .border-background {
+    border-color: var(--background);
+  }
+
+  .border-border {
+    border-color: var(--border);
+  }
+
+  .border-destructive\/50 {
+    border-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-destructive\/50 {
+      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    }
+  }
+
+  .border-green-500\/20 {
+    border-color: color-mix(
+      in srgb,
+      oklch(0.723 0.219 149.579) 20%,
+      transparent
+    );
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-green-500\/20 {
+      border-color: color-mix(
+        in oklab,
+        var(--color-green-500) 20%,
+        transparent
+      );
+    }
+  }
+
+  .border-input {
+    border-color: var(--input);
+  }
+
+  .border-muted {
+    border-color: var(--muted);
+  }
+
+  .border-primary {
+    border-color: var(--primary);
+  }
+
+  .border-primary\/50 {
+    border-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-primary\/50 {
+      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
+    }
+  }
+
+  .border-red-500\/20 {
+    border-color: color-mix(
+      in srgb,
+      oklch(0.637 0.237 25.331) 20%,
+      transparent
+    );
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-red-500\/20 {
+      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    }
+  }
+
+  .border-transparent {
+    border-color: #0000;
+  }
+
+  .border-yellow-500 {
+    border-color: var(--color-yellow-500);
+  }
+
+  .border-yellow-500\/50 {
+    border-color: color-mix(
+      in srgb,
+      oklch(0.795 0.184 86.047) 50%,
+      transparent
+    );
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-yellow-500\/50 {
+      border-color: color-mix(
+        in oklab,
+        var(--color-yellow-500) 50%,
+        transparent
+      );
+    }
+  }
+
+  .border-t-transparent {
+    border-top-color: #0000;
+  }
+
+  .border-l-transparent {
+    border-left-color: #0000;
+  }
+
+  .bg-background {
+    background-color: var(--background);
+  }
+
+  .bg-background\/95 {
+    background-color: var(--background);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-background\/95 {
+      background-color: color-mix(in oklab, var(--background) 95%, transparent);
+    }
+  }
+
+  .bg-black\/50 {
+    background-color: #00000080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/50 {
+      background-color: color-mix(
+        in oklab,
+        var(--color-black) 50%,
+        transparent
+      );
+    }
+  }
+
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
+
+  .bg-border {
+    background-color: var(--border);
+  }
+
+  .bg-card {
+    background-color: var(--card);
+  }
+
+  .bg-destructive {
+    background-color: var(--destructive);
+  }
+
+  .bg-destructive\/10 {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-destructive\/10 {
+      background-color: color-mix(
+        in oklab,
+        var(--destructive) 10%,
+        transparent
+      );
+    }
+  }
+
+  .bg-green-500 {
+    background-color: var(--color-green-500);
+  }
+
+  .bg-green-500\/10 {
+    background-color: color-mix(
+      in srgb,
+      oklch(0.723 0.219 149.579) 10%,
+      transparent
+    );
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-green-500\/10 {
+      background-color: color-mix(
+        in oklab,
+        var(--color-green-500) 10%,
+        transparent
+      );
+    }
+  }
+
+  .bg-input-background {
+    background-color: var(--input-background);
+  }
+
+  .bg-muted {
+    background-color: var(--muted);
+  }
+
+  .bg-muted\/30 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/30 {
+      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+    }
+  }
+
+  .bg-muted\/50 {
+    background-color: var(--muted);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-muted\/50 {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
+  }
+
+  .bg-pink-500 {
+    background-color: var(--color-pink-500);
+  }
+
+  .bg-popover {
+    background-color: var(--popover);
+  }
+
+  .bg-primary {
+    background-color: var(--primary);
+  }
+
+  .bg-primary\/5 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/5 {
+      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
+    }
+  }
+
+  .bg-primary\/10 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/10 {
+      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
+
+  .bg-primary\/20 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/20 {
+      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+
+  .bg-primary\/40 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/40 {
+      background-color: color-mix(in oklab, var(--primary) 40%, transparent);
+    }
+  }
+
+  .bg-primary\/60 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/60 {
+      background-color: color-mix(in oklab, var(--primary) 60%, transparent);
+    }
+  }
+
+  .bg-primary\/80 {
+    background-color: var(--primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-primary\/80 {
+      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+    }
+  }
+
+  .bg-purple-500 {
+    background-color: var(--color-purple-500);
+  }
+
+  .bg-red-500\/10 {
+    background-color: color-mix(
+      in srgb,
+      oklch(0.637 0.237 25.331) 10%,
+      transparent
+    );
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-red-500\/10 {
+      background-color: color-mix(
+        in oklab,
+        var(--color-red-500) 10%,
+        transparent
+      );
+    }
+  }
+
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
+
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
+
+  .bg-yellow-500\/10 {
+    background-color: color-mix(
+      in srgb,
+      oklch(0.795 0.184 86.047) 10%,
+      transparent
+    );
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-yellow-500\/10 {
+      background-color: color-mix(
+        in oklab,
+        var(--color-yellow-500) 10%,
+        transparent
+      );
+    }
+  }
+
+  .bg-gradient-to-br {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .from-gray-300 {
+    --tw-gradient-from: var(--color-gray-300);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .from-orange-400 {
+    --tw-gradient-from: var(--color-orange-400);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .from-primary {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .from-primary\/5 {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .from-primary\/5 {
+      --tw-gradient-from: color-mix(in oklab, var(--primary) 5%, transparent);
+    }
+  }
+
+  .from-purple-400 {
+    --tw-gradient-from: var(--color-purple-400);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .from-yellow-400 {
+    --tw-gradient-from: var(--color-yellow-400);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .via-primary {
+    --tw-gradient-via: var(--primary);
+    --tw-gradient-via-stops:
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-via) var(--tw-gradient-via-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  .to-gray-500 {
+    --tw-gradient-to: var(--color-gray-500);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .to-orange-600 {
+    --tw-gradient-to: var(--color-orange-600);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .to-purple-600 {
+    --tw-gradient-to: var(--color-purple-600);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .to-secondary {
+    --tw-gradient-to: var(--secondary);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .to-secondary\/5 {
+    --tw-gradient-to: var(--secondary);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .to-secondary\/5 {
+      --tw-gradient-to: color-mix(in oklab, var(--secondary) 5%, transparent);
+    }
+  }
+
+  .to-yellow-600 {
+    --tw-gradient-to: var(--color-yellow-600);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+
+  .bg-clip-text {
+    background-clip: text;
+  }
+
+  .fill-current {
+    fill: currentColor;
+  }
+
+  .fill-primary {
+    fill: var(--primary);
+  }
+
+  .stroke-border {
+    stroke: var(--border);
+  }
+
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+
+  .p-\[3px\] {
+    padding: 3px;
+  }
+
+  .p-px {
+    padding: 1px;
+  }
+
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-left {
+    text-align: left;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+
+  .leading-3 {
+    --tw-leading: calc(var(--spacing) * 3);
+    line-height: calc(var(--spacing) * 3);
+  }
+
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+
+  .tracking-widest {
+    --tw-tracking: var(--tracking-widest);
+    letter-spacing: var(--tracking-widest);
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .break-all {
+    word-break: break-all;
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .text-card-foreground {
+    color: var(--card-foreground);
+  }
+
+  .text-destructive {
+    color: var(--destructive);
+  }
+
+  .text-foreground {
+    color: var(--foreground);
+  }
+
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
+
+  .text-muted-foreground {
+    color: var(--muted-foreground);
+  }
+
+  .text-popover-foreground {
+    color: var(--popover-foreground);
+  }
+
+  .text-primary {
+    color: var(--primary);
+  }
+
+  .text-primary-foreground {
+    color: var(--primary-foreground);
+  }
+
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+
+  .text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
+
+  .text-transparent {
+    color: #0000;
+  }
+
+  .text-white {
+    color: var(--color-white);
+  }
+
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
+
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+
+  .opacity-0 {
+    opacity: 0;
+  }
+
+  .opacity-50 {
+    opacity: 0.5;
+  }
+
+  .opacity-70 {
+    opacity: 0.7;
+  }
+
+  .shadow-lg {
+    --tw-shadow:
+      0 10px 15px -3px var(--tw-shadow-color, #0000001a),
+      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-md {
+    --tw-shadow:
+      0 4px 6px -1px var(--tw-shadow-color, #0000001a),
+      0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-sm {
+    --tw-shadow:
+      0 1px 3px 0 var(--tw-shadow-color, #0000001a),
+      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+      calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .ring-ring\/50 {
+    --tw-ring-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-ring\/50 {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--background);
+  }
+
+  .outline-hidden {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .outline-hidden {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
+      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
+      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
+      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
+      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
+      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
+      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
+      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
+      var(--tw-backdrop-sepia,);
+  }
+
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
+      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
+      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
+      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
+      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
+      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
+      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
+      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
+      var(--tw-backdrop-sepia,);
+  }
+
+  .transition {
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      --tw-gradient-from,
+      --tw-gradient-via,
+      --tw-gradient-to,
+      opacity,
+      box-shadow,
+      transform,
+      translate,
+      scale,
+      rotate,
+      filter,
+      -webkit-backdrop-filter,
+      backdrop-filter;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-\[color\,box-shadow\] {
+    transition-property: color, box-shadow;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-colors {
+    transition-property:
+      color, background-color, border-color, outline-color,
+      text-decoration-color, fill, stroke, --tw-gradient-from,
+      --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .duration-200 {
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+  }
+
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .fade-in-0 {
+    --tw-enter-opacity: 0;
+  }
+
+  .zoom-in-95 {
+    --tw-enter-scale: 0.95;
+  }
+
+  @media (hover: hover) {
+    .group-hover\:translate-x-1:is(:where(.group):hover *) {
+      --tw-translate-x: calc(var(--spacing) * 1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:opacity-100:is(:where(.group):hover *) {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: hover) {
+    .group-hover\:shadow-lg:is(:where(.group):hover *) {
+      --tw-shadow:
+        0 10px 15px -3px var(--tw-shadow-color, #0000001a),
+        0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+      box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  .group-data-\[disabled\=true\]\:pointer-events-none:is(
+    :where(.group)[data-disabled='true'] *
+  ) {
+    pointer-events: none;
+  }
+
+  .group-data-\[disabled\=true\]\:opacity-50:is(
+    :where(.group)[data-disabled='true'] *
+  ) {
+    opacity: 0.5;
+  }
+
+  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
+    cursor: not-allowed;
+  }
+
+  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
+    opacity: 0.5;
+  }
+
+  .selection\:bg-primary ::selection,
+  .selection\:bg-primary::selection {
+    background-color: var(--primary);
+  }
+
+  .selection\:text-primary-foreground ::selection,
+  .selection\:text-primary-foreground::selection {
+    color: var(--primary-foreground);
+  }
+
+  .file\:inline-flex::file-selector-button {
+    display: inline-flex;
+  }
+
+  .file\:h-7::file-selector-button {
+    height: calc(var(--spacing) * 7);
+  }
+
+  .file\:border-0::file-selector-button {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .file\:bg-transparent::file-selector-button {
+    background-color: #0000;
+  }
+
+  .file\:text-sm::file-selector-button {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .file\:font-medium::file-selector-button {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .file\:text-foreground::file-selector-button {
+    color: var(--foreground);
+  }
+
+  .placeholder\:text-muted-foreground::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  .last\:border-0:last-child {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .last\:pb-0:last-child {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-accent\/50:hover {
+      background-color: var(--accent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-accent\/50:hover {
+        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-destructive\/90:hover {
+      background-color: var(--destructive);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-destructive\/90:hover {
+        background-color: color-mix(
+          in oklab,
+          var(--destructive) 90%,
+          transparent
+        );
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-muted\/50:hover {
+      background-color: var(--muted);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-muted\/50:hover {
+        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary:hover {
+      background-color: var(--primary);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary\/20:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/20:hover {
+        background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-primary\/90:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:bg-secondary\/80:hover {
+      background-color: var(--secondary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-secondary\/80:hover {
+        background-color: color-mix(
+          in oklab,
+          var(--secondary) 80%,
+          transparent
+        );
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-primary:hover {
+      color: var(--primary);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:text-primary-foreground:hover {
+      color: var(--primary-foreground);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:opacity-100:hover {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-lg:hover {
+      --tw-shadow:
+        0 10px 15px -3px var(--tw-shadow-color, #0000001a),
+        0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+      box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-md:hover {
+      --tw-shadow:
+        0 4px 6px -1px var(--tw-shadow-color, #0000001a),
+        0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+      box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:shadow-xl:hover {
+      --tw-shadow:
+        0 20px 25px -5px var(--tw-shadow-color, #0000001a),
+        0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+      box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:ring-2:hover {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+        calc(2px + var(--tw-ring-offset-width))
+        var(--tw-ring-color, currentcolor);
+      box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:ring-4:hover {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+        calc(4px + var(--tw-ring-offset-width))
+        var(--tw-ring-color, currentcolor);
+      box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+
+  @media (hover: hover) {
+    .hover\:ring-primary:hover {
+      --tw-ring-color: var(--primary);
+    }
+  }
+
+  .focus\:border-primary:focus {
+    border-color: var(--primary);
+  }
+
+  .focus\:bg-accent:focus {
+    background-color: var(--accent);
+  }
+
+  .focus\:text-accent-foreground:focus {
+    color: var(--accent-foreground);
+  }
+
+  .focus\:ring-2:focus {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus\:ring-ring:focus {
+    --tw-ring-color: var(--ring);
+  }
+
+  .focus\:ring-offset-2:focus {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+
+  .focus\:outline-hidden:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .focus\:outline-hidden:focus {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .focus-visible\:border-ring:focus-visible {
+    border-color: var(--ring);
+  }
+
+  .focus-visible\:ring-4:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+      calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-visible\:ring-\[3px\]:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+      calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus-visible\:ring-destructive\/20:focus-visible {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-destructive\/20:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
+  .focus-visible\:ring-ring\/50:focus-visible {
+    --tw-ring-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-ring\/50:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .focus-visible\:outline-hidden:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  @media (forced-colors: active) {
+    .focus-visible\:outline-hidden:focus-visible {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .focus-visible\:outline-1:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  .focus-visible\:outline-ring:focus-visible {
+    outline-color: var(--ring);
+  }
+
+  .disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\:opacity-50:disabled {
+    opacity: 0.5;
+  }
+
+  .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has(
+    [data-slot='card-action']
+  ) {
+    grid-template-columns: 1fr auto;
+  }
+
+  .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(> svg) {
+    grid-template-columns: calc(var(--spacing) * 4) 1fr;
+  }
+
+  .has-\[\>svg\]\:gap-x-3:has(> svg) {
+    column-gap: calc(var(--spacing) * 3);
+  }
+
+  .has-\[\>svg\]\:px-2\.5:has(> svg) {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+
+  .has-\[\>svg\]\:px-3:has(> svg) {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .has-\[\>svg\]\:px-4:has(> svg) {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .aria-invalid\:border-destructive[aria-invalid='true'] {
+    border-color: var(--destructive);
+  }
+
+  .aria-invalid\:ring-destructive\/20[aria-invalid='true'] {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .aria-invalid\:ring-destructive\/20[aria-invalid='true'] {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
+  .data-\[disabled\]\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+
+  .data-\[disabled\]\:opacity-50[data-disabled] {
+    opacity: 0.5;
+  }
+
+  .data-\[inset\]\:pl-8[data-inset] {
+    padding-left: calc(var(--spacing) * 8);
+  }
+
+  .data-\[orientation\=horizontal\]\:h-4[data-orientation='horizontal'] {
+    height: calc(var(--spacing) * 4);
+  }
+
+  .data-\[orientation\=horizontal\]\:h-full[data-orientation='horizontal'] {
+    height: 100%;
+  }
+
+  .data-\[orientation\=horizontal\]\:w-full[data-orientation='horizontal'] {
+    width: 100%;
+  }
+
+  .data-\[orientation\=vertical\]\:h-full[data-orientation='vertical'] {
+    height: 100%;
+  }
+
+  .data-\[orientation\=vertical\]\:min-h-44[data-orientation='vertical'] {
+    min-height: calc(var(--spacing) * 44);
+  }
+
+  .data-\[orientation\=vertical\]\:w-1\.5[data-orientation='vertical'] {
+    width: calc(var(--spacing) * 1.5);
+  }
+
+  .data-\[orientation\=vertical\]\:w-auto[data-orientation='vertical'] {
+    width: auto;
+  }
+
+  .data-\[orientation\=vertical\]\:w-full[data-orientation='vertical'] {
+    width: 100%;
+  }
+
+  .data-\[orientation\=vertical\]\:flex-col[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
+    color: var(--muted-foreground);
+  }
+
+  .data-\[side\=bottom\]\:translate-y-1[data-side='bottom'] {
+    --tw-translate-y: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side='bottom'] {
+    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
+  }
+
+  .data-\[side\=left\]\:-translate-x-1[data-side='left'] {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=left\]\:slide-in-from-right-2[data-side='left'] {
+    --tw-enter-translate-x: calc(2 * var(--spacing));
+  }
+
+  .data-\[side\=right\]\:translate-x-1[data-side='right'] {
+    --tw-translate-x: calc(var(--spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=right\]\:slide-in-from-left-2[data-side='right'] {
+    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
+  }
+
+  .data-\[side\=top\]\:-translate-y-1[data-side='top'] {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side='top'] {
+    --tw-enter-translate-y: calc(2 * var(--spacing));
+  }
+
+  .data-\[size\=default\]\:h-9[data-size='default'] {
+    height: calc(var(--spacing) * 9);
+  }
+
+  .data-\[size\=sm\]\:h-8[data-size='sm'] {
+    height: calc(var(--spacing) * 8);
+  }
+
+  :is(
+    .\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *
+  )[data-slot='alert-description'] {
+    color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(
+      .\*\:data-\[slot\=alert-description\]\:text-destructive\/90 > *
+    )[data-slot='alert-description'] {
+      color: color-mix(in oklab, var(--destructive) 90%, transparent);
+    }
+  }
+
+  :is(
+    .\*\:data-\[slot\=select-value\]\:line-clamp-1 > *
+  )[data-slot='select-value'] {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot='select-value'] {
+    display: flex;
+  }
+
+  :is(
+    .\*\:data-\[slot\=select-value\]\:items-center > *
+  )[data-slot='select-value'] {
+    align-items: center;
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot='select-value'] {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .data-\[state\=active\]\:bg-card[data-state='active'] {
+    background-color: var(--card);
+  }
+
+  .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state='checked'] {
+    --tw-translate-x: calc(100% - 2px);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[state\=checked\]\:bg-primary[data-state='checked'] {
+    background-color: var(--primary);
+  }
+
+  .data-\[state\=closed\]\:animate-out[data-state='closed'] {
+    animation: exit var(--tw-duration, 0.15s) var(--tw-ease, ease);
+  }
+
+  .data-\[state\=closed\]\:duration-300[data-state='closed'] {
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+  }
+
+  .data-\[state\=closed\]\:fade-out-0[data-state='closed'] {
+    --tw-exit-opacity: 0;
+  }
+
+  .data-\[state\=closed\]\:slide-out-to-bottom[data-state='closed'] {
+    --tw-exit-translate-y: 100%;
+  }
+
+  .data-\[state\=closed\]\:slide-out-to-left[data-state='closed'] {
+    --tw-exit-translate-x: -100%;
+  }
+
+  .data-\[state\=closed\]\:slide-out-to-right[data-state='closed'] {
+    --tw-exit-translate-x: 100%;
+  }
+
+  .data-\[state\=closed\]\:slide-out-to-top[data-state='closed'] {
+    --tw-exit-translate-y: -100%;
+  }
+
+  .data-\[state\=closed\]\:zoom-out-95[data-state='closed'] {
+    --tw-exit-scale: 0.95;
+  }
+
+  .data-\[state\=open\]\:animate-in[data-state='open'] {
+    animation: enter var(--tw-duration, 0.15s) var(--tw-ease, ease);
+  }
+
+  .data-\[state\=open\]\:bg-accent[data-state='open'] {
+    background-color: var(--accent);
+  }
+
+  .data-\[state\=open\]\:bg-secondary[data-state='open'] {
+    background-color: var(--secondary);
+  }
+
+  .data-\[state\=open\]\:text-accent-foreground[data-state='open'] {
+    color: var(--accent-foreground);
+  }
+
+  .data-\[state\=open\]\:text-muted-foreground[data-state='open'] {
+    color: var(--muted-foreground);
+  }
+
+  .data-\[state\=open\]\:duration-500[data-state='open'] {
+    --tw-duration: 0.5s;
+    transition-duration: 0.5s;
+  }
+
+  .data-\[state\=open\]\:fade-in-0[data-state='open'] {
+    --tw-enter-opacity: 0;
+  }
+
+  .data-\[state\=open\]\:slide-in-from-bottom[data-state='open'] {
+    --tw-enter-translate-y: 100%;
+  }
+
+  .data-\[state\=open\]\:slide-in-from-left[data-state='open'] {
+    --tw-enter-translate-x: -100%;
+  }
+
+  .data-\[state\=open\]\:slide-in-from-right[data-state='open'] {
+    --tw-enter-translate-x: 100%;
+  }
+
+  .data-\[state\=open\]\:slide-in-from-top[data-state='open'] {
+    --tw-enter-translate-y: -100%;
+  }
+
+  .data-\[state\=open\]\:zoom-in-95[data-state='open'] {
+    --tw-enter-scale: 0.95;
+  }
+
+  .data-\[state\=unchecked\]\:translate-x-0[data-state='unchecked'] {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .data-\[state\=unchecked\]\:bg-switch-background[data-state='unchecked'] {
+    background-color: var(--switch-background);
+  }
+
+  .data-\[variant\=destructive\]\:text-destructive[data-variant='destructive'] {
+    color: var(--destructive);
+  }
+
+  .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant='destructive']:focus {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant='destructive']:focus {
+      background-color: color-mix(
+        in oklab,
+        var(--destructive) 10%,
+        transparent
+      );
+    }
+  }
+
+  .data-\[variant\=destructive\]\:focus\:text-destructive[data-variant='destructive']:focus {
+    color: var(--destructive);
+  }
+
+  @supports (
+    (-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))
+  ) {
+    .supports-\[backdrop-filter\]\:bg-background\/60 {
+      background-color: var(--background);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .supports-\[backdrop-filter\]\:bg-background\/60 {
+        background-color: color-mix(
+          in oklab,
+          var(--background) 60%,
+          transparent
+        );
+      }
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:hidden {
+      display: none;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:inline {
+      display: inline;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-lg {
+      max-width: var(--container-lg);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-md {
+      max-width: var(--container-md);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:max-w-sm {
+      max-width: var(--container-sm);
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:items-center {
+      align-items: center;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:justify-between {
+      justify-content: space-between;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:justify-end {
+      justify-content: flex-end;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .sm\:text-left {
+      text-align: left;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:mx-0 {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:block {
+      display: block;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid {
+      display: grid;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-3 {
+      height: calc(var(--spacing) * 3);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-5 {
+      height: calc(var(--spacing) * 5);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-6 {
+      height: calc(var(--spacing) * 6);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-10 {
+      height: calc(var(--spacing) * 10);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-12 {
+      height: calc(var(--spacing) * 12);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-14 {
+      height: calc(var(--spacing) * 14);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:h-16 {
+      height: calc(var(--spacing) * 16);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-3 {
+      width: calc(var(--spacing) * 3);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-5 {
+      width: calc(var(--spacing) * 5);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-6 {
+      width: calc(var(--spacing) * 6);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-10 {
+      width: calc(var(--spacing) * 10);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-12 {
+      width: calc(var(--spacing) * 12);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:w-full {
+      width: 100%;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:flex-row {
+      flex-direction: row;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:gap-2 {
+      gap: calc(var(--spacing) * 2);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:gap-4 {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:gap-6 {
+      gap: calc(var(--spacing) * 6);
+    }
+  }
+
+  @media (width >= 48rem) {
+    :where(.md\:space-y-6 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(
+        calc(var(--spacing) * 6) * var(--tw-space-y-reverse)
+      );
+      margin-block-end: calc(
+        calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))
+      );
+    }
+  }
+
+  @media (width >= 48rem) {
+    :where(.md\:space-y-8 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(
+        calc(var(--spacing) * 8) * var(--tw-space-y-reverse)
+      );
+      margin-block-end: calc(
+        calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))
+      );
+    }
+  }
+
+  @media (width >= 48rem) {
+    :where(.md\:space-y-12 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(
+        calc(var(--spacing) * 12) * var(--tw-space-y-reverse)
+      );
+      margin-block-end: calc(
+        calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse))
+      );
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:px-0 {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:px-8 {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:py-8 {
+      padding-block: calc(var(--spacing) * 8);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:py-12 {
+      padding-block: calc(var(--spacing) * 12);
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-2xl {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-7xl {
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-base {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-lg {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-sm {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+
+  @media (width >= 48rem) {
+    .md\:text-xl {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:row-span-2 {
+      grid-row: span 2 / span 2;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 64rem) {
+    .lg\:text-8xl {
+      font-size: var(--text-8xl);
+      line-height: var(--tw-leading, var(--text-8xl--line-height));
+    }
+  }
+
+  .dark\:border-input:is(.dark *) {
+    border-color: var(--input);
+  }
+
+  .dark\:bg-destructive\/60:is(.dark *) {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-destructive\/60:is(.dark *) {
+      background-color: color-mix(
+        in oklab,
+        var(--destructive) 60%,
+        transparent
+      );
+    }
+  }
+
+  .dark\:bg-input\/30:is(.dark *) {
+    background-color: var(--input);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-input\/30:is(.dark *) {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+
+  .dark\:text-muted-foreground:is(.dark *) {
+    color: var(--muted-foreground);
+  }
+
+  @media (hover: hover) {
+    .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+      background-color: var(--accent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-accent\/50:is(.dark *):hover {
+        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    .dark\:hover\:bg-input\/50:is(.dark *):hover {
+      background-color: var(--input);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:hover\:bg-input\/50:is(.dark *):hover {
+        background-color: color-mix(in oklab, var(--input) 50%, transparent);
+      }
+    }
+  }
+
+  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
+  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid='true'] {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid='true'] {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
+  .dark\:data-\[state\=active\]\:border-input:is(.dark *)[data-state='active'] {
+    border-color: var(--input);
+  }
+
+  .dark\:data-\[state\=active\]\:bg-input\/30:is(.dark *)[data-state='active'] {
+    background-color: var(--input);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[state\=active\]\:bg-input\/30:is(
+        .dark *
+      )[data-state='active'] {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+
+  .dark\:data-\[state\=active\]\:text-foreground:is(
+      .dark *
+    )[data-state='active'] {
+    color: var(--foreground);
+  }
+
+  .dark\:data-\[state\=checked\]\:bg-primary-foreground:is(
+      .dark *
+    )[data-state='checked'] {
+    background-color: var(--primary-foreground);
+  }
+
+  .dark\:data-\[state\=unchecked\]\:bg-card-foreground:is(
+      .dark *
+    )[data-state='unchecked'] {
+    background-color: var(--card-foreground);
+  }
+
+  .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(
+      .dark *
+    )[data-state='unchecked'] {
+    background-color: var(--input);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(
+        .dark *
+      )[data-state='unchecked'] {
+      background-color: color-mix(in oklab, var(--input) 80%, transparent);
+    }
+  }
+
+  .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(
+      .dark *
+    )[data-variant='destructive']:focus {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:is(
+        .dark *
+      )[data-variant='destructive']:focus {
+      background-color: color-mix(
+        in oklab,
+        var(--destructive) 20%,
+        transparent
+      );
+    }
+  }
+
+  .\[\&_p\]\:leading-relaxed p {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+
+  .\[\&_svg\]\:pointer-events-none svg {
+    pointer-events: none;
+  }
+
+  .\[\&_svg\]\:shrink-0 svg {
+    flex-shrink: 0;
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground
+    svg:not([class*='text-']) {
+    color: var(--muted-foreground);
+  }
+
+  .\[\.border-b\]\:pb-6.border-b {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .\[\.border-t\]\:pt-6.border-t {
+    padding-top: calc(var(--spacing) * 6);
+  }
+
+  :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
+    display: flex;
+  }
+
+  :is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child {
+    align-items: center;
+  }
+
+  :is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :is(
+    .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive[data-variant='destructive']
+      > *
+  ):is(svg) {
+    color: var(--destructive) !important;
+  }
+
+  .\[\&\:last-child\]\:pb-6:last-child {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
+  .\[\&\>svg\]\:pointer-events-none > svg {
+    pointer-events: none;
+  }
+
+  .\[\&\>svg\]\:size-3 > svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+
+  .\[\&\>svg\]\:size-4 > svg {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  .\[\&\>svg\]\:translate-y-0\.5 > svg {
+    --tw-translate-y: calc(var(--spacing) * 0.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .\[\&\>svg\]\:text-current > svg {
+    color: currentColor;
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-destructive\/90:hover {
+      background-color: var(--destructive);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-destructive\/90:hover {
+        background-color: color-mix(
+          in oklab,
+          var(--destructive) 90%,
+          transparent
+        );
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-primary\/90:hover {
+      background-color: var(--primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:bg-secondary\/90:hover {
+      background-color: var(--secondary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      a.\[a\&\]\:hover\:bg-secondary\/90:hover {
+        background-color: color-mix(
+          in oklab,
+          var(--secondary) 90%,
+          transparent
+        );
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    a.\[a\&\]\:hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+  }
+
+  .text-gradient {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+    --tw-gradient-to: var(--secondary);
+    color: #0000;
+    background-clip: text;
+  }
+}
 
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+  --font-size: 16px;
+  --background: #eff7f6;
+  --foreground: #272829;
+  --card: #fff;
+  --card-foreground: #272829;
+  --popover: #fff;
+  --popover-foreground: #272829;
+  --primary: #5b9a8b;
+  --primary-foreground: #eff7f6;
+  --secondary: #ffa69e;
+  --secondary-foreground: #272829;
+  --muted: #d4dedd;
+  --muted-foreground: #6a7271;
+  --accent: #5b9a8b;
+  --accent-foreground: #eff7f6;
+  --destructive: #d4183d;
+  --destructive-foreground: #fff;
+  --border: #2728291a;
+  --input: #2728291a;
+  --input-background: #fff;
+  --switch-background: #d4dedd;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: #5b9a8b;
+  --chart-1: #5b9a8b;
+  --chart-2: #ffa69e;
+  --chart-3: #2e073f;
+  --chart-4: #7db9a5;
+  --chart-5: #ffb8b1;
+  --radius: 1rem;
+  --sidebar: #fff;
+  --sidebar-foreground: #272829;
+  --sidebar-primary: #5b9a8b;
+  --sidebar-primary-foreground: #eff7f6;
+  --sidebar-accent: #f5faf9;
+  --sidebar-accent-foreground: #272829;
+  --sidebar-border: #2728291a;
+  --sidebar-ring: #5b9a8b;
+}
+
+.dark {
+  --background: #272829;
+  --foreground: #eff7f6;
+  --card: #323435;
+  --card-foreground: #eff7f6;
+  --popover: #323435;
+  --popover-foreground: #eff7f6;
+  --primary: #5b9a8b;
+  --primary-foreground: #eff7f6;
+  --secondary: #ffa69e;
+  --secondary-foreground: #272829;
+  --muted: #3a3c3d;
+  --muted-foreground: #a8b0af;
+  --accent: #2e073f;
+  --accent-foreground: #eff7f6;
+  --destructive: #d4183d;
+  --destructive-foreground: #eff7f6;
+  --border: #eff7f61a;
+  --input: #eff7f61a;
+  --ring: #5b9a8b;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --chart-1: #5b9a8b;
+  --chart-2: #ffa69e;
+  --chart-3: #2e073f;
+  --chart-4: #7db9a5;
+  --chart-5: #ffb8b1;
+  --sidebar: #323435;
+  --sidebar-foreground: #eff7f6;
+  --sidebar-primary: #5b9a8b;
+  --sidebar-primary-foreground: #eff7f6;
+  --sidebar-accent: #3a3c3d;
+  --sidebar-accent-foreground: #eff7f6;
+  --sidebar-border: #eff7f61a;
+  --sidebar-ring: #5b9a8b;
+}
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+html {
+  font-size: var(--font-size);
+  scroll-behavior: smooth;
+}
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.dark ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+.dark ::-webkit-scrollbar-track {
+  background: #eff7f60d;
 }
-a:hover {
-  color: #535bf2;
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #5b9a8b80;
+  border-radius: 4px;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #5b9a8bb3;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+::-webkit-scrollbar-track {
+  background: #2728290d;
 }
-button:hover {
-  border-color: #646cff;
+
+::-webkit-scrollbar-thumb {
+  background: #5b9a8b80;
+  border-radius: 4px;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+::-webkit-scrollbar-thumb:hover {
+  background: #5b9a8bb3;
 }
 
-/* Color scale for react-calendar-heatmap */
-.color-empty {
-  background-color: #2d333b;
-  fill: #2d333b;
+@property --tw-translate-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
 }
-.color-scale-1 {
-  background-color: #0e4429;
-  fill: #0e4429;
+
+@property --tw-translate-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
 }
-.color-scale-2 {
-  background-color: #006d32;
-  fill: #006d32;
+
+@property --tw-translate-z {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
 }
-.color-scale-3 {
-  background-color: #26a641;
-  fill: #26a641;
+
+@property --tw-scale-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
 }
-.color-scale-4 {
-  background-color: #39d353;
-  fill: #39d353;
+
+@property --tw-scale-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
+@property --tw-scale-z {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-rotate-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: rotateX(0);
+}
+
+@property --tw-rotate-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: rotateY(0);
+}
+
+@property --tw-rotate-z {
+  syntax: '*';
+  inherits: false;
+  initial-value: rotateZ(0);
+}
+
+@property --tw-skew-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: skewX(0);
+}
+
+@property --tw-skew-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: skewY(0);
+}
+
+@property --tw-space-y-reverse {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-space-x-reverse {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-border-style {
+  syntax: '*';
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-gradient-position {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-gradient-from {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-via {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-to {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-stops {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-gradient-via-stops {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-gradient-from-position {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-gradient-via-position {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 50%;
+}
+
+@property --tw-gradient-to-position {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-leading {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-font-weight {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-tracking {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-shadow-alpha {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-ring-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-ring-offset-width {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: '*';
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-outline-style {
+  syntax: '*';
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-backdrop-blur {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-backdrop-brightness {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-backdrop-contrast {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-backdrop-invert {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-backdrop-opacity {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-backdrop-saturate {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-backdrop-sepia {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-duration {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --tw-ease {
+  syntax: '*';
+  inherits: false;
+}
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(
+        var(--tw-enter-translate-x, 0),
+        var(--tw-enter-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1)
+      )
+      rotate(var(--tw-enter-rotate, 0));
   }
-  button {
-    background-color: #f9f9f9;
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(
+        var(--tw-exit-translate-x, 0),
+        var(--tw-exit-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1)
+      )
+      rotate(var(--tw-exit-rotate, 0));
   }
 }
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index 7c708c99..35f6c8fa 100644
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -1,15 +1,5 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import './index.css';
 import App from './App.tsx';
+import './index.css';
 
-/**
- * Application bootstrap that mounts the React component tree into the DOM.
- */
-
-// Mount the root React component tree
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/apps/frontend/src/pages/MainPage.tsx b/apps/frontend/src/pages/MainPage.tsx
deleted file mode 100644
index c410548d..00000000
--- a/apps/frontend/src/pages/MainPage.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useState } from 'react';
-
-/**
- * Main application page that orchestrates repository input and visualizations.
- * Displays commit information and an optional activity heatmap for the chosen
- * repository.
- */
-import RepoInput from '../components/RepoInput';
-import CommitList from '../components/CommitList';
-import ActivityHeatmap from '../components/ActivityHeatmap';
-import RiveLoader from '../components/RiveLoader';
-import RiveLogo from '../components/RiveLogo';
-import { getRepositoryFullData } from '../services/api';
-import { Commit } from '@gitray/shared-types';
-
-/**
- * Top-level page component combining repository input, commit list and
- * heatmap visualizations. Maintains the state for the currently loaded
- * repository.
- */
-const MainPage: React.FC = () => {
-  const [commits, setCommits] = useState<Commit[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-  const [repoUrl, setRepoUrl] = useState<string>('');
-  const [showHeatmap, setShowHeatmap] = useState<boolean>(false);
-
-  /**
-   * Fetches repository data when the user requests visualization of a new
-   * repository URL. Errors are captured and displayed to the user.
-   */
-  const handleVisualize = async (inputRepoUrl: string) => {
-    // Trigger data fetch for the entered repository URL
-    console.log('Visualizing:', inputRepoUrl);
-    setRepoUrl(inputRepoUrl);
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      // Use the optimized endpoint to fetch both commits and heatmap data at once
-      const { commits } = await getRepositoryFullData(inputRepoUrl, 'day');
-
-      setCommits(commits);
-      setShowHeatmap(true); // Show heatmap by default after fetching
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : 'An unknown error occurred'
-      );
-      setCommits([]);
-      setShowHeatmap(false);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const canShowVisualizations =
-    isLoading === false && error == null && commits.length > 0;
-
-  return (
-    <div className="bg-gray-900 min-h-screen flex flex-col text-white">
-      {/* Header with Logo and Login/Signup Buttons */}
-      <header className="w-full container mx-auto px-4 p-4 flex justify-between items-center">
-        {/* Logo in top-left corner */}
-        <div className="flex items-center">
-          <RiveLogo
-            size={50}
-            className="hover:scale-110 transition-transform duration-300"
-          />
-        </div>
-
-        {/* Login/Signup buttons in top-right corner */}
-        <div className="flex gap-2">
-          <button className="bg-gray-700 hover:bg-gray-600 text-green-400 font-bold py-2 px-4 rounded-md">
-            Login
-          </button>
-          <button className="bg-gray-700 hover:bg-gray-600 text-green-400 font-bold py-2 px-4 rounded-md">
-            Signup
-          </button>
-        </div>
-      </header>
-
-      {/* Main area */}
-      <main className="w-full max-w-4xl mx-auto flex flex-col flex-grow space-y-8 px-4">
-        <RepoInput onVisualize={handleVisualize} />
-
-        {isLoading && (
-          <div className="mt-8 text-center">
-            <RiveLoader
-              size={120}
-              message="Loading repository data..."
-              className="py-8"
-            />
-          </div>
-        )}
-
-        {error && (
-          <div className="mt-8 p-4 bg-red-900 border border-red-700 text-red-200 rounded-md">
-            <p>
-              <strong>Error:</strong> {error}
-            </p>
-          </div>
-        )}
-
-        {canShowVisualizations && (
-          <>
-            {/* Visualization selector */}
-            <div className="flex flex-wrap gap-2 mt-6 mb-2 justify-center">
-              <button
-                className={`px-4 py-2 rounded-md font-medium ${
-                  showHeatmap
-                    ? 'bg-gray-700 text-gray-300'
-                    : 'bg-green-600 text-white'
-                }`}
-                onClick={() => setShowHeatmap(false)}
-              >
-                Commit List
-              </button>
-              <button
-                className={`px-4 py-2 rounded-md font-medium ${
-                  showHeatmap
-                    ? 'bg-green-600 text-white'
-                    : 'bg-gray-700 text-gray-300'
-                }`}
-                onClick={() => setShowHeatmap(true)}
-              >
-                Activity Heatmap
-              </button>
-            </div>
-
-            {/* Show either commit list or heatmap based on selection */}
-            {showHeatmap ? (
-              <ActivityHeatmap repoUrl={repoUrl} commits={commits} />
-            ) : (
-              <CommitList commits={commits} />
-            )}
-          </>
-        )}
-
-        {!isLoading && !error && commits.length === 0 && (
-          <div className="flex flex-wrap gap-4 mt-8 justify-center">
-            <button className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-md">
-              Explanation 1
-            </button>
-            <button className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-md">
-              Explanation 2
-            </button>
-            <button className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-md">
-              Explanation 3
-            </button>
-          </div>
-        )}
-      </main>
-
-      {/* Footer */}
-      <footer className="w-full container mx-auto px-4 border-t border-gray-800 py-4 text-center text-gray-500 text-sm">
-        <p>Nach dem runterscrollen:</p>
-        <div>
-          Links: Impressum; Datenschutzerklärung; "Über Uns"-Seite; created by
-          "Namen von uns"
-        </div>
-      </footer>
-    </div>
-  );
-};
-
-export default MainPage;
diff --git a/apps/frontend/src/services/api.ts b/apps/frontend/src/services/api.ts
index b5ea33c2..2632ca49 100644
--- a/apps/frontend/src/services/api.ts
+++ b/apps/frontend/src/services/api.ts
@@ -1,14 +1,17 @@
 import axios from 'axios';
 import {
   Commit,
-  TimePeriod,
   CommitFilterOptions,
   CommitHeatmapData,
+  FileTypeDistribution,
+  CodeChurnAnalysis,
+  RepositorySummary,
 } from '@gitray/shared-types';
 
 // Define the base URL for the API
-// In a production app, this would typically come from an environment variable
-const API_BASE_URL = 'http://localhost:3001';
+// In development, Vite proxy will forward /api requests to http://localhost:3001
+// In production, this would come from an environment variable
+const API_BASE_URL = import.meta.env.VITE_API_URL || '';
 
 // Create an axios instance with default config
 const apiClient = axios.create({
@@ -20,65 +23,234 @@ const apiClient = axios.create({
 });
 
 /**
- * Fetches commits for a given repository URL
+ * Fetches commit heatmap data (aggregated from ALL commits)
  * @param repoUrl The URL of the git repository
- * @returns Promise containing an array of commits
+ * @param filterOptions Optional filters to apply
+ * @returns Promise containing heatmap data
+ */
+export const getRepositoryHeatmap = async (
+  repoUrl: string,
+  filterOptions?: CommitFilterOptions
+): Promise<CommitHeatmapData> => {
+  try {
+    // Ensure URL ends with .git for proper Git URL format
+    const normalizedUrl = repoUrl.endsWith('.git') ? repoUrl : `${repoUrl}.git`;
+
+    // Build query parameters (omit undefined values for stable cache keys)
+    const params = new URLSearchParams();
+    params.set('repoUrl', normalizedUrl);
+
+    // Add filter options as flat query parameters
+    if (filterOptions?.author) {
+      params.set('author', filterOptions.author);
+    }
+    if (filterOptions?.authors && filterOptions.authors.length > 0) {
+      params.set('authors', filterOptions.authors.join(','));
+    }
+    if (filterOptions?.fromDate) {
+      params.set('fromDate', filterOptions.fromDate);
+    }
+    if (filterOptions?.toDate) {
+      params.set('toDate', filterOptions.toDate);
+    }
+
+    const response = await apiClient.get(
+      `/api/repositories/heatmap?${params.toString()}`
+    );
+
+    return response.data.heatmapData;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      if (error.response) {
+        // Log full error details for debugging heatmap
+        console.error('[Heatmap API Error]:', {
+          status: error.response.status,
+          data: error.response.data,
+          url: error.config?.url,
+        });
+        throw new Error(
+          `Heatmap error (${error.response.status}): ${JSON.stringify(error.response.data)}`
+        );
+      } else if (error.request) {
+        console.error('[Heatmap] No response from server');
+        throw new Error(
+          'No response from server. Please check your network connection.'
+        );
+      } else {
+        throw new Error(`Error: ${error.message}`);
+      }
+    }
+    console.error('[Heatmap] Unexpected error:', error);
+    throw new Error('An unexpected error occurred');
+  }
+};
+
+/**
+ * Fetches paginated commits from a repository
+ * @param repoUrl The URL of the git repository
+ * @param page Page number (default: 1)
+ * @param limit Items per page (default: 100)
+ * @returns Promise containing paginated commits
  */
-export const getWorkspaceCommits = async (
+export const getRepositoryCommits = async (
+  repoUrl: string,
+  page: number = 1,
+  limit: number = 100
+): Promise<{ commits: Commit[]; page: number; limit: number }> => {
+  try {
+    // Ensure URL ends with .git for proper Git URL format
+    const normalizedUrl = repoUrl.endsWith('.git') ? repoUrl : `${repoUrl}.git`;
+
+    // Build query parameters (send numbers as strings)
+    const params = new URLSearchParams();
+    params.set('repoUrl', normalizedUrl);
+    params.set('page', String(page));
+    params.set('limit', String(limit));
+
+    const response = await apiClient.get(
+      `/api/repositories/commits?${params.toString()}`
+    );
+
+    return {
+      commits: response.data.commits,
+      page: response.data.page,
+      limit: response.data.limit,
+    };
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      if (error.response) {
+        throw new Error(
+          `Server error: ${error.response.data?.error ?? error.message}`
+        );
+      } else if (error.request) {
+        throw new Error(
+          'No response from server. Please check your network connection.'
+        );
+      } else {
+        throw new Error(`Error: ${error.message}`);
+      }
+    }
+    throw new Error('An unexpected error occurred');
+  }
+};
+
+/**
+ * Fetches file type distribution analysis for a repository
+ * @param repoUrl The URL of the git repository
+ * @returns Promise containing file type distribution data
+ */
+export const getFileAnalysis = async (
   repoUrl: string
-): Promise<Commit[]> => {
+): Promise<FileTypeDistribution> => {
   try {
-    const response = await apiClient.post('/api/repositories', { repoUrl });
-    return response.data.commits;
-  } catch (error) {
+    // Ensure URL ends with .git for proper Git URL format
+    const normalizedUrl = repoUrl.endsWith('.git') ? repoUrl : `${repoUrl}.git`;
+
+    const params = new URLSearchParams();
+    params.set('repoUrl', normalizedUrl);
+
+    // Correct endpoint path: /api/commits/file-analysis
+    const response = await apiClient.get(
+      `/api/commits/file-analysis?${params.toString()}`
+    );
+    return response.data;
+  } catch (error: unknown) {
     if (axios.isAxiosError(error)) {
       if (error.response) {
-        // The request was made and the server responded with a status code
-        // that falls out of the range of 2xx
         throw new Error(
           `Server error: ${error.response.data?.error ?? error.message}`
         );
       } else if (error.request) {
-        // The request was made but no response was received
         throw new Error(
           'No response from server. Please check your network connection.'
         );
       } else {
-        // Something happened in setting up the request
         throw new Error(`Error: ${error.message}`);
       }
     }
-    // For non-Axios errors
     throw new Error('An unexpected error occurred');
   }
 };
 
 /**
- * Fetches heatmap data for a repository
+ * Fetches code churn analysis for a repository
  * @param repoUrl The URL of the git repository
- * @param timePeriod The time period to aggregate by
- * @param filterOptions Optional filters to apply
- * @returns Promise containing heatmap data
+ * @param fromDate Optional start date filter (ISO 8601 format)
+ * @param toDate Optional end date filter (ISO 8601 format)
+ * @param minChanges Optional minimum number of changes filter
+ * @param extensions Optional array of file extensions to filter by
+ * @returns Promise containing code churn data
  */
-export const getHeatmapData = async (
+export const getCodeChurn = async (
   repoUrl: string,
-  timePeriod: TimePeriod,
-  filterOptions?: CommitFilterOptions
-): Promise<CommitHeatmapData> => {
+  fromDate?: string,
+  toDate?: string,
+  minChanges?: number,
+  extensions?: string[]
+): Promise<CodeChurnAnalysis> => {
   try {
-    const params = new URLSearchParams({ repoUrl, timePeriod });
-    if (filterOptions?.authors && filterOptions.authors.length > 0) {
-      params.append('authors', filterOptions.authors.join(','));
-    } else if (filterOptions?.author) {
-      params.append('author', filterOptions.author);
+    // Ensure URL ends with .git for proper Git URL format
+    const normalizedUrl = repoUrl.endsWith('.git') ? repoUrl : `${repoUrl}.git`;
+
+    // Build query parameters (omit undefined values for stable cache keys)
+    const params = new URLSearchParams();
+    params.set('repoUrl', normalizedUrl);
+
+    if (fromDate) {
+      params.set('fromDate', fromDate);
+    }
+    if (toDate) {
+      params.set('toDate', toDate);
+    }
+    if (minChanges !== undefined) {
+      params.set('minChanges', String(minChanges));
+    }
+    if (extensions && extensions.length > 0) {
+      params.set('extensions', extensions.join(','));
     }
-    if (filterOptions?.fromDate)
-      params.append('fromDate', filterOptions.fromDate);
-    if (filterOptions?.toDate) params.append('toDate', filterOptions.toDate);
 
-    const response = await apiClient.get('/api/commits/heatmap', { params });
-    return response.data;
-  } catch (error) {
+    const response = await apiClient.get(
+      `/api/repositories/churn?${params.toString()}`
+    );
+    return response.data.churnData;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      if (error.response) {
+        throw new Error(
+          `Server error: ${error.response.data?.error ?? error.message}`
+        );
+      } else if (error.request) {
+        throw new Error(
+          'No response from server. Please check your network connection.'
+        );
+      } else {
+        throw new Error(`Error: ${error.message}`);
+      }
+    }
+    throw new Error('An unexpected error occurred');
+  }
+};
+
+/**
+ * Fetches repository summary statistics
+ * @param repoUrl The URL of the git repository
+ * @returns Promise containing repository summary data
+ */
+export const getRepositorySummary = async (
+  repoUrl: string
+): Promise<RepositorySummary> => {
+  try {
+    // Ensure URL ends with .git for proper Git URL format
+    const normalizedUrl = repoUrl.endsWith('.git') ? repoUrl : `${repoUrl}.git`;
+
+    const params = new URLSearchParams();
+    params.set('repoUrl', normalizedUrl);
+
+    const response = await apiClient.get(
+      `/api/repositories/summary?${params.toString()}`
+    );
+    return response.data.summary;
+  } catch (error: unknown) {
     if (axios.isAxiosError(error)) {
       if (error.response) {
         throw new Error(
@@ -99,33 +271,135 @@ export const getHeatmapData = async (
 /**
  * Fetches both commits and heatmap data in a single request
  * @param repoUrl The URL of the git repository
- * @param timePeriod The time period to aggregate by
+ * @param _timePeriod The time period for aggregation (unused by backend, kept for compatibility)
+ * @param page Page number (default: 1)
+ * @param limit Items per page (default: 100)
  * @param filterOptions Optional filters to apply
- * @returns Promise containing both commit and heatmap data
+ * @returns Promise containing commits, heatmap data, and pagination info
  */
 export const getRepositoryFullData = async (
   repoUrl: string,
-  timePeriod: TimePeriod = 'month',
+  _timePeriod?: 'day' | 'week' | 'month',
+  page: number = 1,
+  limit: number = 100,
   filterOptions?: CommitFilterOptions
-): Promise<{ commits: Commit[]; heatmapData: CommitHeatmapData }> => {
+): Promise<{
+  commits: Commit[];
+  heatmapData: CommitHeatmapData;
+  page: number;
+  limit: number;
+  isValidHeatmap: boolean;
+}> => {
   try {
-    const response = await apiClient.post('/api/repositories/full-data', {
-      repoUrl,
-      timePeriod,
-      filterOptions,
-    });
+    // Ensure URL ends with .git for proper Git URL format
+    const normalizedUrl = repoUrl.endsWith('.git') ? repoUrl : `${repoUrl}.git`;
+
+    // Build query parameters (send numbers as strings, omit undefined values)
+    const params = new URLSearchParams();
+    params.set('repoUrl', normalizedUrl);
+    params.set('page', String(page));
+    params.set('limit', String(limit));
+
+    // Add filter options as flat query parameters
+    if (filterOptions?.author) {
+      params.set('author', filterOptions.author);
+    }
+    if (filterOptions?.authors && filterOptions.authors.length > 0) {
+      params.set('authors', filterOptions.authors.join(','));
+    }
+    if (filterOptions?.fromDate) {
+      params.set('fromDate', filterOptions.fromDate);
+    }
+    if (filterOptions?.toDate) {
+      params.set('toDate', filterOptions.toDate);
+    }
+
+    const response = await apiClient.get(
+      `/api/repositories/full-data?${params.toString()}`
+    );
 
     return {
       commits: response.data.commits,
       heatmapData: response.data.heatmapData,
+      page: response.data.page,
+      limit: response.data.limit,
+      isValidHeatmap: response.data.isValidHeatmap,
     };
-  } catch (error) {
+  } catch (error: unknown) {
     if (axios.isAxiosError(error)) {
       if (error.response) {
+        console.error('[Full-Data API Error]:', {
+          status: error.response.status,
+          data: error.response.data,
+          url: error.config?.url,
+        });
         throw new Error(
-          `Server error: ${error.response.data?.error ?? error.message}`
+          `Full-data error (${error.response.status}): ${JSON.stringify(error.response.data)}`
+        );
+      } else if (error.request) {
+        console.error('[Full-Data] No response from server');
+        throw new Error(
+          'No response from server. Please check your network connection.'
+        );
+      } else {
+        throw new Error(`Error: ${error.message}`);
+      }
+    }
+    console.error('[Full-Data] Unexpected error:', error);
+    throw new Error('An unexpected error occurred');
+  }
+};
+
+/**
+ * Fetches all unique contributors from a repository (GDPR-compliant)
+ * @param repoUrl The URL of the git repository
+ * @param filterOptions Optional filters to apply
+ * @returns Promise containing list of contributors with only login names
+ */
+export const getRepositoryContributors = async (
+  repoUrl: string,
+  filterOptions?: CommitFilterOptions
+): Promise<Array<{ login: string }>> => {
+  try {
+    // Ensure URL ends with .git for proper Git URL format
+    const normalizedUrl = repoUrl.endsWith('.git') ? repoUrl : `${repoUrl}.git`;
+
+    // Build query parameters (omit undefined values for stable cache keys)
+    const params = new URLSearchParams();
+    params.set('repoUrl', normalizedUrl);
+
+    // Add filter options as flat query parameters
+    if (filterOptions?.author) {
+      params.set('author', filterOptions.author);
+    }
+    if (filterOptions?.authors && filterOptions.authors.length > 0) {
+      params.set('authors', filterOptions.authors.join(','));
+    }
+    if (filterOptions?.fromDate) {
+      params.set('fromDate', filterOptions.fromDate);
+    }
+    if (filterOptions?.toDate) {
+      params.set('toDate', filterOptions.toDate);
+    }
+
+    const response = await apiClient.get(
+      `/api/repositories/contributors?${params.toString()}`
+    );
+
+    return response.data.contributors;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      if (error.response) {
+        console.error('[Contributors API Error]:', {
+          status: error.response.status,
+          data: error.response.data,
+          url: error.config?.url,
+        });
+        throw new Error(
+          `Contributors error (${error.response.status}): ${JSON.stringify(error.response.data)}`
         );
       } else if (error.request) {
+        console.error('[Contributors] No response from server');
         throw new Error(
           'No response from server. Please check your network connection.'
         );
@@ -133,12 +407,17 @@ export const getRepositoryFullData = async (
         throw new Error(`Error: ${error.message}`);
       }
     }
+    console.error('[Contributors] Unexpected error:', error);
     throw new Error('An unexpected error occurred');
   }
 };
 
 export default {
-  getWorkspaceCommits,
-  getHeatmapData,
+  getRepositoryHeatmap,
+  getRepositoryCommits,
+  getFileAnalysis,
+  getCodeChurn,
+  getRepositorySummary,
   getRepositoryFullData,
+  getRepositoryContributors,
 };
diff --git a/apps/frontend/src/styles/globals.css b/apps/frontend/src/styles/globals.css
new file mode 100644
index 00000000..ca4aade9
--- /dev/null
+++ b/apps/frontend/src/styles/globals.css
@@ -0,0 +1,234 @@
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --font-size: 16px;
+  --background: #eff7f6;
+  --foreground: #272829;
+  --card: #ffffff;
+  --card-foreground: #272829;
+  --popover: #ffffff;
+  --popover-foreground: #272829;
+  --primary: #5b9a8b;
+  --primary-foreground: #eff7f6;
+  --secondary: #ffa69e;
+  --secondary-foreground: #272829;
+  --muted: #d4dedd;
+  --muted-foreground: #6a7271;
+  --accent: #5b9a8b;
+  --accent-foreground: #eff7f6;
+  --destructive: #d4183d;
+  --destructive-foreground: #ffffff;
+  --border: rgba(39, 40, 41, 0.1);
+  --input: rgba(39, 40, 41, 0.1);
+  --input-background: #ffffff;
+  --switch-background: #d4dedd;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: #5b9a8b;
+  --chart-1: #5b9a8b;
+  --chart-2: #ffa69e;
+  --chart-3: #2e073f;
+  --chart-4: #7db9a5;
+  --chart-5: #ffb8b1;
+  --radius: 1rem;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #272829;
+  --sidebar-primary: #5b9a8b;
+  --sidebar-primary-foreground: #eff7f6;
+  --sidebar-accent: #f5faf9;
+  --sidebar-accent-foreground: #272829;
+  --sidebar-border: rgba(39, 40, 41, 0.1);
+  --sidebar-ring: #5b9a8b;
+}
+
+.dark {
+  --background: #272829;
+  --foreground: #eff7f6;
+  --card: #323435;
+  --card-foreground: #eff7f6;
+  --popover: #323435;
+  --popover-foreground: #eff7f6;
+  --primary: #5b9a8b;
+  --primary-foreground: #eff7f6;
+  --secondary: #ffa69e;
+  --secondary-foreground: #272829;
+  --muted: #3a3c3d;
+  --muted-foreground: #a8b0af;
+  --accent: #2e073f;
+  --accent-foreground: #eff7f6;
+  --destructive: #d4183d;
+  --destructive-foreground: #eff7f6;
+  --border: rgba(239, 247, 246, 0.1);
+  --input: rgba(239, 247, 246, 0.1);
+  --ring: #5b9a8b;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --chart-1: #5b9a8b;
+  --chart-2: #ffa69e;
+  --chart-3: #2e073f;
+  --chart-4: #7db9a5;
+  --chart-5: #ffb8b1;
+  --sidebar: #323435;
+  --sidebar-foreground: #eff7f6;
+  --sidebar-primary: #5b9a8b;
+  --sidebar-primary-foreground: #eff7f6;
+  --sidebar-accent: #3a3c3d;
+  --sidebar-accent-foreground: #eff7f6;
+  --sidebar-border: rgba(239, 247, 246, 0.1);
+  --sidebar-ring: #5b9a8b;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/**
+ * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
+ */
+@layer base {
+  :where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) {
+    h1 {
+      font-size: var(--text-2xl);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    h2 {
+      font-size: var(--text-xl);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    h3 {
+      font-size: var(--text-lg);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    h4 {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    p {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-normal);
+      line-height: 1.5;
+    }
+
+    label {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    button {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+
+    input {
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-normal);
+      line-height: 1.5;
+    }
+  }
+}
+
+html {
+  font-size: var(--font-size);
+  scroll-behavior: smooth;
+}
+
+@layer utilities {
+  .text-gradient {
+    @apply bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent;
+  }
+}
+
+/* Custom scrollbar for dark mode */
+.dark ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.dark ::-webkit-scrollbar-track {
+  background: rgba(239, 247, 246, 0.05);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(91, 154, 139, 0.5);
+  border-radius: 4px;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(91, 154, 139, 0.7);
+}
+
+/* Custom scrollbar for light mode */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(39, 40, 41, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(91, 154, 139, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(91, 154, 139, 0.7);
+}
diff --git a/apps/frontend/src/styles/heatmap.css b/apps/frontend/src/styles/heatmap.css
deleted file mode 100644
index 13d8c3c7..00000000
--- a/apps/frontend/src/styles/heatmap.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/* Base heatmap colors */
-.react-calendar-heatmap .color-empty {
-  fill: #161b22;
-}
-.react-calendar-heatmap .color-scale-1 {
-  fill: #0e4429;
-}
-.react-calendar-heatmap .color-scale-2 {
-  fill: #006d32;
-}
-.react-calendar-heatmap .color-scale-3 {
-  fill: #26a641;
-}
-.react-calendar-heatmap .color-scale-4 {
-  fill: #39d353;
-}
-
-/* Hover effects */
-.react-calendar-heatmap rect:hover {
-  stroke: #fff;
-  stroke-width: 2;
-  transition: all 0.15s ease-in-out;
-  cursor: pointer;
-}
-
-/* Make the SVG responsive */
-.react-calendar-heatmap {
-  width: 100%;
-  height: auto;
-}
-
-/* Text styling */
-.react-calendar-heatmap text {
-  fill: #8b949e;
-  font-size: 12px;
-}
-
-.react-calendar-heatmap .react-calendar-heatmap-month-label {
-  font-size: 14px;
-  fill: #c9d1d9;
-}
-
-.react-calendar-heatmap .react-calendar-heatmap-weekday-label {
-  font-size: 12px;
-  fill: #8b949e;
-}
-
-/* Additional box styling for legend */
-.color-empty {
-  background-color: #161b22;
-}
-.color-scale-1 {
-  background-color: #0e4429;
-}
-.color-scale-2 {
-  background-color: #006d32;
-}
-.color-scale-3 {
-  background-color: #26a641;
-}
-.color-scale-4 {
-  background-color: #39d353;
-}
-
-/* Style for the Select component's placeholder */
-.css-1wa3eu0-placeholder {
-  color: #9ca3af; /* Light gray for better visibility */
-}
-
-/* Style for the Select component's input text */
-.css-1uccc91-singleValue {
-  color: #ffffff; /* White text for better contrast */
-}
diff --git a/apps/frontend/src/test-setup.ts b/apps/frontend/src/test-setup.ts
index d2c5ea19..076fd471 100644
--- a/apps/frontend/src/test-setup.ts
+++ b/apps/frontend/src/test-setup.ts
@@ -32,3 +32,11 @@ import React from 'react';
 globalThis.React = React;
 
 console.log('Vitest setup file loaded!');
+
+// Mock PointerEvent for Radix UI Tabs
+if (typeof window.PointerEvent === 'undefined') {
+  window.PointerEvent = window.MouseEvent as any;
+}
+window.HTMLElement.prototype.hasPointerCapture = vi.fn();
+window.HTMLElement.prototype.releasePointerCapture = vi.fn();
+window.HTMLElement.prototype.setPointerCapture = vi.fn();
diff --git a/apps/frontend/src/types/react-calendar-heatmap.d.ts b/apps/frontend/src/types/react-calendar-heatmap.d.ts
deleted file mode 100644
index d15b9888..00000000
--- a/apps/frontend/src/types/react-calendar-heatmap.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'react-calendar-heatmap';
diff --git a/apps/frontend/src/utils/dateUtils.ts b/apps/frontend/src/utils/dateUtils.ts
deleted file mode 100644
index d19f998b..00000000
--- a/apps/frontend/src/utils/dateUtils.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * Utility functions for working with dates in the heatmap visualization
- */
-
-import { TimePeriod } from '@gitray/shared-types';
-
-/**
- * Formats a date according to the specified time period
- * @param date The date to format
- * @param timePeriod The time period format
- * @returns Formatted date string
- */
-export const formatDateByPeriod = (
-  date: Date,
-  timePeriod: TimePeriod
-): string => {
-  switch (timePeriod) {
-    case 'day':
-      return date.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      });
-    case 'week': {
-      // Get start of the week
-      const startOfWeek = new Date(date);
-      const dayOfWeek = date.getDay();
-      startOfWeek.setDate(date.getDate() - dayOfWeek);
-
-      // Get end of the week
-      const endOfWeek = new Date(startOfWeek);
-      endOfWeek.setDate(startOfWeek.getDate() + 6);
-
-      // Format as "Apr 1 - Apr 7, 2023"
-      return `${startOfWeek.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${endOfWeek.toLocaleDateString(
-        'en-US',
-        {
-          month: 'short',
-          day: 'numeric',
-          year: 'numeric',
-        }
-      )}`;
-    }
-    case 'month':
-      return date.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'long',
-      });
-    case 'year':
-      return date.toLocaleDateString('en-US', { year: 'numeric' });
-    default:
-      return date.toLocaleDateString();
-  }
-};
-
-/**
- * Generates a range of dates for the given time period
- * @param startDate Start of the range
- * @param endDate End of the range
- * @param timePeriod The time period to use
- * @returns Array of date strings formatted according to the time period
- */
-export const generateDateRange = (
-  startDate: Date,
-  endDate: Date,
-  timePeriod: TimePeriod
-): string[] => {
-  const dates: string[] = [];
-  const currentDate = new Date(startDate);
-
-  // Ensure dates are at the start of their respective periods
-  switch (timePeriod) {
-    case 'day':
-      // No adjustment needed for days
-      break;
-    case 'week': {
-      // Set to start of week (Sunday)
-      const dayOfWeek = currentDate.getDay();
-      currentDate.setDate(currentDate.getDate() - dayOfWeek);
-      break;
-    }
-    case 'month':
-      // Set to first day of month
-      currentDate.setDate(1);
-      break;
-    case 'year':
-      // Set to first day of year
-      currentDate.setMonth(0, 1);
-      break;
-  }
-
-  // Generate the date range
-  while (currentDate <= endDate) {
-    dates.push(formatDateByPeriod(new Date(currentDate), timePeriod));
-
-    // Move to the next period
-    switch (timePeriod) {
-      case 'day':
-        currentDate.setDate(currentDate.getDate() + 1);
-        break;
-      case 'week':
-        currentDate.setDate(currentDate.getDate() + 7);
-        break;
-      case 'month':
-        currentDate.setMonth(currentDate.getMonth() + 1);
-        break;
-      case 'year':
-        currentDate.setFullYear(currentDate.getFullYear() + 1);
-        break;
-    }
-  }
-
-  return dates;
-};
-
-/**
- * Gets a color shade based on commit count relative to the maximum
- * @param commitCount Number of commits
- * @param maxCommitCount Maximum number of commits in the dataset
- * @returns CSS color value in the green spectrum
- */
-export const getColorShade = (
-  commitCount: number,
-  maxCommitCount: number
-): string => {
-  if (commitCount === 0) return '#ebedf0'; // Light gray for no commits
-
-  // Calculate intensity (0-1)
-  const intensity = Math.min(commitCount / maxCommitCount, 1);
-
-  // Use a green color spectrum with 5 intensity levels
-  if (intensity < 0.2) return '#9be9a8'; // Lightest green
-  if (intensity < 0.4) return '#40c463';
-  if (intensity < 0.6) return '#30a14e';
-  if (intensity < 0.8) return '#216e39';
-  return '#0d4620'; // Darkest green
-};
-
-/**
- * Creates a tooltip text for a heatmap cell
- * @param commitCount Number of commits
- * @param periodText The text describing the time period
- * @param authors Optional array of author names
- * @returns Formatted tooltip text
- */
-export const createTooltipText = (
-  commitCount: number,
-  periodText: string,
-  authors?: string[]
-): string => {
-  const commitText = commitCount === 1 ? '1 commit' : `${commitCount} commits`;
-  let tooltip = `${commitText} on ${periodText}`;
-
-  if (authors && authors.length > 0) {
-    const uniqueAuthors = [...new Set(authors)];
-    const authorText =
-      uniqueAuthors.length === 1
-        ? `by ${uniqueAuthors[0]}`
-        : `by ${uniqueAuthors.length} authors`;
-
-    tooltip += ` ${authorText}`;
-  }
-
-  return tooltip;
-};
diff --git a/apps/frontend/tailwind.config.cjs b/apps/frontend/tailwind.config.cjs
deleted file mode 100644
index 62c6d9c7..00000000
--- a/apps/frontend/tailwind.config.cjs
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
diff --git a/apps/frontend/tsconfig.app.json b/apps/frontend/tsconfig.app.json
index dfb15197..7db56f15 100644
--- a/apps/frontend/tsconfig.app.json
+++ b/apps/frontend/tsconfig.app.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
@@ -16,8 +17,8 @@
     "jsx": "react-jsx",
 
     /* Path mapping */
-    "baseUrl": ".",
     "paths": {
+      "@/*": ["./src/*"],
       "@gitray/shared-types": ["../../packages/shared-types/src"],
       "@gitray/shared-types/*": ["../../packages/shared-types/src/*"]
     },
@@ -29,8 +30,7 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "types": ["vitest/globals", "@testing-library/jest-dom"]
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src", "__tests__"],
   "references": [{ "path": "../../packages/shared-types" }]
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
index ffeff873..1087934e 100644
--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -5,9 +5,6 @@
     { "path": "./tsconfig.node.json" }
   ],
   "compilerOptions": {
-    // … deine bestehenden Optionen …
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "composite": true
   }
 }
diff --git a/apps/frontend/tsconfig.node.json b/apps/frontend/tsconfig.node.json
index db0becc8..036cf813 100644
--- a/apps/frontend/tsconfig.node.json
+++ b/apps/frontend/tsconfig.node.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
     "lib": ["ES2023"],
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
index 289c5838..e8256efb 100644
--- a/apps/frontend/vite.config.ts
+++ b/apps/frontend/vite.config.ts
@@ -1,13 +1,71 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-  define: {
-    // Define environment variables with default values
-    'import.meta.env.VITE_API_BASE_URL': JSON.stringify(
-      process.env.VITE_API_BASE_URL || 'http://localhost:3000'
-    ),
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+    alias: {
+      'vaul@1.1.2': 'vaul',
+      'sonner@2.0.3': 'sonner',
+      'recharts@2.15.2': 'recharts',
+      'react-resizable-panels@2.1.7': 'react-resizable-panels',
+      'react-hook-form@7.55.0': 'react-hook-form',
+      'react-day-picker@8.10.1': 'react-day-picker',
+      'next-themes@0.4.6': 'next-themes',
+      'lucide-react@0.487.0': 'lucide-react',
+      'input-otp@1.4.2': 'input-otp',
+      'embla-carousel-react@8.6.0': 'embla-carousel-react',
+      'cmdk@1.1.1': 'cmdk',
+      'class-variance-authority@0.7.1': 'class-variance-authority',
+      '@radix-ui/react-tooltip@1.1.8': '@radix-ui/react-tooltip',
+      '@radix-ui/react-toggle@1.1.2': '@radix-ui/react-toggle',
+      '@radix-ui/react-toggle-group@1.1.2': '@radix-ui/react-toggle-group',
+      '@radix-ui/react-tabs@1.1.3': '@radix-ui/react-tabs',
+      '@radix-ui/react-switch@1.1.3': '@radix-ui/react-switch',
+      '@radix-ui/react-slot@1.1.2': '@radix-ui/react-slot',
+      '@radix-ui/react-slider@1.2.3': '@radix-ui/react-slider',
+      '@radix-ui/react-separator@1.1.2': '@radix-ui/react-separator',
+      '@radix-ui/react-select@2.1.6': '@radix-ui/react-select',
+      '@radix-ui/react-scroll-area@1.2.3': '@radix-ui/react-scroll-area',
+      '@radix-ui/react-radio-group@1.2.3': '@radix-ui/react-radio-group',
+      '@radix-ui/react-progress@1.1.2': '@radix-ui/react-progress',
+      '@radix-ui/react-popover@1.1.6': '@radix-ui/react-popover',
+      '@radix-ui/react-navigation-menu@1.2.5':
+        '@radix-ui/react-navigation-menu',
+      '@radix-ui/react-menubar@1.1.6': '@radix-ui/react-menubar',
+      '@radix-ui/react-label@2.1.2': '@radix-ui/react-label',
+      '@radix-ui/react-hover-card@1.1.6': '@radix-ui/react-hover-card',
+      '@radix-ui/react-dropdown-menu@2.1.6': '@radix-ui/react-dropdown-menu',
+      '@radix-ui/react-dialog@1.1.6': '@radix-ui/react-dialog',
+      '@radix-ui/react-context-menu@2.2.6': '@radix-ui/react-context-menu',
+      '@radix-ui/react-collapsible@1.1.3': '@radix-ui/react-collapsible',
+      '@radix-ui/react-checkbox@1.1.4': '@radix-ui/react-checkbox',
+      '@radix-ui/react-avatar@1.1.3': '@radix-ui/react-avatar',
+      '@radix-ui/react-aspect-ratio@1.1.2': '@radix-ui/react-aspect-ratio',
+      '@radix-ui/react-alert-dialog@1.1.6': '@radix-ui/react-alert-dialog',
+      '@radix-ui/react-accordion@1.2.3': '@radix-ui/react-accordion',
+      '@': path.resolve(__dirname, './src'),
+      '@gitray/shared-types': path.resolve(
+        __dirname,
+        '../../packages/shared-types/src'
+      ),
+    },
+  },
+  build: {
+    target: 'esnext',
+    outDir: 'build',
+  },
+  server: {
+    port: 5173,
+    open: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
   },
 });
diff --git a/apps/frontend/vitest.config.ts b/apps/frontend/vitest.config.ts
index 9d129f55..bac7e44b 100644
--- a/apps/frontend/vitest.config.ts
+++ b/apps/frontend/vitest.config.ts
@@ -1,7 +1,7 @@
 // apps/frontend/vitest.config.ts - Create this file
 /// <reference types="vitest" />
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import * as path from 'path';
 import * as os from 'os';
 
@@ -70,6 +70,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      '@': path.resolve(__dirname, './src'),
       '@gitray/shared-types': path.resolve(
         __dirname,
         '../../packages/shared-types/src'
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 3a42af91..74a46dcb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -18,7 +18,6 @@ export default tseslint.config(
     ignores: [
       'eslint.config.mjs', // Config file itself
       'apps/frontend/postcss.config.cjs',
-      'apps/frontend/tailwind.config.cjs',
       'prettier.config.js',
       '**/dist/**',
       '**/build/**',
@@ -42,7 +41,7 @@ export default tseslint.config(
     ],
     plugins: {
       '@typescript-eslint': tseslint.plugin,
-      'sonarjs': sonarjs,
+      sonarjs: sonarjs,
     },
     languageOptions: {
       parser: tseslint.parser,
@@ -58,12 +57,15 @@ export default tseslint.config(
     rules: {
       ...tseslint.configs.recommended.rules,
       'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['warn', {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-      }],
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
       '@typescript-eslint/no-explicit-any': 'off',
-      'complexity': ['warn', { max: 15 }],
+      complexity: ['warn', { max: 15 }],
       'sonarjs/cognitive-complexity': ['warn', 15],
     },
   },
@@ -71,13 +73,10 @@ export default tseslint.config(
   // Frontend TypeScript files (exclude config files)
   {
     files: ['apps/frontend/**/*.ts'], // Only .ts files, .tsx handled by React config
-    ignores: [
-      'apps/frontend/vite.config.ts',
-      'apps/frontend/vitest.config.ts',
-    ],
+    ignores: ['apps/frontend/vite.config.ts', 'apps/frontend/vitest.config.ts'],
     plugins: {
       '@typescript-eslint': tseslint.plugin,
-      'sonarjs': sonarjs,
+      sonarjs: sonarjs,
     },
     languageOptions: {
       parser: tseslint.parser,
@@ -93,12 +92,15 @@ export default tseslint.config(
     rules: {
       ...tseslint.configs.recommended.rules,
       'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['warn', {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-      }],
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
       '@typescript-eslint/no-explicit-any': 'off',
-      'complexity': ['warn', { max: 15 }],
+      complexity: ['warn', { max: 15 }],
       'sonarjs/cognitive-complexity': ['warn', 15],
     },
   },
@@ -108,7 +110,7 @@ export default tseslint.config(
     files: ['packages/shared-types/**/*.ts'],
     plugins: {
       '@typescript-eslint': tseslint.plugin,
-      'sonarjs': sonarjs,
+      sonarjs: sonarjs,
     },
     languageOptions: {
       parser: tseslint.parser,
@@ -120,24 +122,71 @@ export default tseslint.config(
     rules: {
       ...tseslint.configs.recommended.rules,
       'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['warn', {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-        // Allow unused constructor parameters (they're used as public/readonly class properties)
-        args: 'after-used',
-      }],
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          // Allow unused constructor parameters (they're used as public/readonly class properties)
+          args: 'after-used',
+        },
+      ],
       '@typescript-eslint/no-explicit-any': 'off',
-      'complexity': ['warn', { max: 15 }],
+      complexity: ['warn', { max: 15 }],
       'sonarjs/cognitive-complexity': ['warn', 15],
     },
   },
 
+  // Frontend test files configuration (without strict type checking) - MUST come before React config
+  {
+    files: [
+      'apps/frontend/**/*.test.ts',
+      'apps/frontend/**/*.test.tsx',
+      'apps/frontend/**/*.spec.ts',
+      'apps/frontend/**/*.spec.tsx',
+      'apps/frontend/**/__tests__/**/*.ts',
+      'apps/frontend/**/__tests__/**/*.tsx',
+      'apps/frontend/src/test-setup.ts',
+    ],
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      react,
+      'react-hooks': reactHooks,
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.vitest,
+        React: 'readonly',
+      },
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      'no-undef': 'off',
+    },
+  },
+
   // React specific configuration
   {
     files: ['apps/frontend/**/*.tsx', 'apps/frontend/**/*.jsx'],
+    ignores: [
+      'apps/frontend/**/*.test.tsx',
+      'apps/frontend/**/*.spec.tsx',
+      'apps/frontend/**/__tests__/**/*.tsx',
+    ],
     plugins: {
       '@typescript-eslint': tseslint.plugin,
-      'sonarjs': sonarjs,
+      sonarjs: sonarjs,
       react,
       'react-hooks': reactHooks,
       'jsx-a11y': jsxA11y,
@@ -157,12 +206,15 @@ export default tseslint.config(
     rules: {
       ...tseslint.configs.recommended.rules,
       'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['warn', {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-      }],
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
       '@typescript-eslint/no-explicit-any': 'off',
-      'complexity': ['warn', { max: 15 }],
+      complexity: ['warn', { max: 15 }],
       'sonarjs/cognitive-complexity': ['warn', 15],
       'react/react-in-jsx-scope': 'off',
       'react-hooks/rules-of-hooks': 'error',
@@ -234,5 +286,5 @@ export default tseslint.config(
     rules: {
       'no-undef': 'off', // k6 has special globals
     },
-  },
+  }
 );
diff --git a/package.json b/package.json
index 68503756..d6078f27 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "packageManager": "pnpm@10.16.1",
+  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
   "devDependencies": {
     "@eslint/js": "^9.27.0",
     "@vitest/coverage-v8": "^3.2.3",
diff --git a/packages/shared-types/src/index.ts b/packages/shared-types/src/index.ts
index 136f5f53..2c8352c8 100644
--- a/packages/shared-types/src/index.ts
+++ b/packages/shared-types/src/index.ts
@@ -427,6 +427,8 @@ export interface ChurnFilterOptions {
   paths?: string[];
   /** Filter by specific risk levels */
   riskLevels?: ChurnRiskLevel[];
+  /** Maximum number of files to return (returns top N by change count) */
+  limit?: number;
 }
 
 /**
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3714ebd1..5da0be0c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,13 +9,13 @@ importers:
     dependencies:
       '@rive-app/react-canvas':
         specifier: ^4.21.3
-        version: 4.23.3(react@18.3.1)
+        version: 4.24.0(react@18.3.1)
       '@types/react':
         specifier: ^18.3.24
-        version: 18.3.24
+        version: 18.3.27
       '@types/react-dom':
         specifier: ^18.3.7
-        version: 18.3.7(@types/react@18.3.24)
+        version: 18.3.7(@types/react@18.3.27)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -25,7 +25,7 @@ importers:
     devDependencies:
       '@eslint/js':
         specifier: ^9.27.0
-        version: 9.35.0
+        version: 9.39.1
       '@vitest/coverage-v8':
         specifier: ^3.2.3
         version: 3.2.4(vitest@3.2.4)
@@ -34,25 +34,25 @@ importers:
         version: 3.2.4(vitest@3.2.4)
       baseline-browser-mapping:
         specifier: ^2.8.28
-        version: 2.8.28
+        version: 2.8.30
       eslint:
         specifier: ^9.27.0
-        version: 9.35.0(jiti@2.5.1)
+        version: 9.39.1(jiti@2.6.1)
       eslint-config-prettier:
         specifier: ^10.1.5
-        version: 10.1.8(eslint@9.35.0(jiti@2.5.1))
+        version: 10.1.8(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-jsx-a11y:
         specifier: ^6.10.2
-        version: 6.10.2(eslint@9.35.0(jiti@2.5.1))
+        version: 6.10.2(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-react:
         specifier: ^7.37.5
-        version: 7.37.5(eslint@9.35.0(jiti@2.5.1))
+        version: 7.37.5(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
-        version: 5.2.0(eslint@9.35.0(jiti@2.5.1))
+        version: 5.2.0(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-sonarjs:
         specifier: ^3.0.3
-        version: 3.0.5(eslint@9.35.0(jiti@2.5.1))
+        version: 3.0.5(eslint@9.39.1(jiti@2.6.1))
       globals:
         specifier: ^15.15.0
         version: 15.15.0
@@ -79,10 +79,10 @@ importers:
         version: 5.7.3
       typescript-eslint:
         specifier: ^8.32.1
-        version: 8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)
+        version: 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)
       vitest:
         specifier: ^3.2.3
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.5)(@vitest/ui@3.2.4)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.1)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
 
   apps/backend:
     dependencies:
@@ -91,7 +91,7 @@ importers:
         version: link:../../packages/shared-types
       '@types/k6':
         specifier: ^1.0.2
-        version: 1.2.0
+        version: 1.4.0
       cors:
         specifier: ^2.8.5
         version: 2.8.5
@@ -109,31 +109,31 @@ importers:
         version: 7.5.1(express@5.1.0)
       express-validator:
         specifier: ^7.2.1
-        version: 7.2.1
+        version: 7.3.1
       helmet:
         specifier: ^8.1.0
         version: 8.1.0
       ioredis:
         specifier: ^5.6.1
-        version: 5.7.0
+        version: 5.8.2
       k6-html-reporter:
         specifier: ^1.0.5
         version: 1.0.5
       nanoid:
         specifier: ^5.1.5
-        version: 5.1.5
+        version: 5.1.6
       prom-client:
         specifier: ^15.1.3
         version: 15.1.3
       simple-git:
         specifier: ^3.27.0
-        version: 3.28.0
+        version: 3.30.0
       winston:
         specifier: ^3.17.0
-        version: 3.17.0
+        version: 3.18.3
       winston-daily-rotate-file:
         specifier: ^5.0.0
-        version: 5.0.0(winston@3.17.0)
+        version: 5.0.0(winston@3.18.3)
       zod:
         specifier: ^3.25.28
         version: 3.25.76
@@ -143,10 +143,10 @@ importers:
         version: 2.8.19
       '@types/express':
         specifier: ^5.0.3
-        version: 5.0.3
+        version: 5.0.5
       '@types/node':
         specifier: ^22.15.31
-        version: 22.18.5
+        version: 22.19.1
       '@types/supertest':
         specifier: ^6.0.3
         version: 6.0.3
@@ -155,89 +155,191 @@ importers:
         version: 3.2.4(vitest@3.2.4)
       eslint-plugin-sonarjs:
         specifier: ^3.0.3
-        version: 3.0.5(eslint@9.35.0(jiti@2.5.1))
+        version: 3.0.5(eslint@9.39.1(jiti@2.6.1))
       nodemon:
         specifier: ^3.1.10
-        version: 3.1.10
+        version: 3.1.11
       supertest:
         specifier: ^7.1.0
         version: 7.1.4
       ts-node:
         specifier: ^10.9.2
-        version: 10.9.2(@types/node@22.18.5)(typescript@5.7.3)
+        version: 10.9.2(@swc/core@1.15.3)(@types/node@22.19.1)(typescript@5.7.3)
       tsconfig-paths:
         specifier: ^4.2.0
         version: 4.2.0
       tsx:
         specifier: ^4.20.2
-        version: 4.20.5
+        version: 4.20.6
       typescript:
         specifier: ~5.7.3
         version: 5.7.3
       vitest:
         specifier: ^3.2.3
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.5)(@vitest/ui@3.2.4)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.1)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
 
   apps/frontend:
     dependencies:
-      '@gitray/shared-types':
-        specifier: workspace:*
-        version: link:../../packages/shared-types
+      '@radix-ui/react-accordion':
+        specifier: ^1.2.3
+        version: 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-alert-dialog':
+        specifier: ^1.1.6
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-aspect-ratio':
+        specifier: ^1.1.2
+        version: 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.3
+        version: 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.4
+        version: 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.3
+        version: 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-context-menu':
+        specifier: ^2.2.6
+        version: 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.6
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.6
+        version: 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.6
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-label':
+        specifier: ^2.1.2
+        version: 2.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-menubar':
+        specifier: ^1.1.6
+        version: 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-navigation-menu':
+        specifier: ^1.2.5
+        version: 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.6
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-progress':
+        specifier: ^1.1.2
+        version: 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.2.3
+        version: 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.3
+        version: 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-select':
+        specifier: ^2.1.6
+        version: 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.2
+        version: 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slider':
+        specifier: ^1.2.3
+        version: 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.1.2
+        version: 1.2.4(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-switch':
+        specifier: ^1.1.3
+        version: 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.3
+        version: 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.2
+        version: 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.2
+        version: 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.1.8
+        version: 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@rive-app/react-canvas':
-        specifier: ^4.21.3
-        version: 4.23.3(react@19.1.1)
-      apexcharts:
-        specifier: ^4.7.0
-        version: 4.7.0
+        specifier: ^4.24.0
+        version: 4.24.0(react@18.3.1)
       axios:
-        specifier: ^1.9.0
-        version: 1.12.2
-      date-fns:
-        specifier: ^4.1.0
-        version: 4.1.0
+        specifier: ^1.13.2
+        version: 1.13.2
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: '*'
+        version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@18.3.1)
+      input-otp:
+        specifier: ^1.4.2
+        version: 1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lucide-react:
+        specifier: ^0.487.0
+        version: 0.487.0(react@18.3.1)
+      motion:
+        specifier: '*'
+        version: 12.23.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
-        specifier: ^19.1.0
-        version: 19.1.1
-      react-apexcharts:
-        specifier: ^1.7.0
-        version: 1.7.0(apexcharts@4.7.0)(react@19.1.1)
-      react-calendar-heatmap:
-        specifier: ^1.10.0
-        version: 1.10.0(react@19.1.1)
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-day-picker:
+        specifier: ^8.10.1
+        version: 8.10.1(date-fns@4.1.0)(react@18.3.1)
       react-dom:
-        specifier: ^19.1.0
-        version: 19.1.1(react@19.1.1)
-      react-select:
-        specifier: ^5.10.1
-        version: 5.10.2(@types/react@19.1.13)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      typescript:
-        specifier: ~5.7.3
-        version: 5.7.3
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.55.0
+        version: 7.66.1(react@18.3.1)
+      react-resizable-panels:
+        specifier: ^2.1.7
+        version: 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts:
+        specifier: ^2.15.2
+        version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      sonner:
+        specifier: ^2.0.3
+        version: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwind-merge:
+        specifier: '*'
+        version: 3.4.0
+      vaul:
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
-      '@tailwindcss/cli':
-        specifier: ^4.1.7
-        version: 4.1.13
       '@tailwindcss/postcss':
         specifier: ^4.1.7
-        version: 4.1.13
+        version: 4.1.18
       '@testing-library/jest-dom':
         specifier: ^6.6.3
-        version: 6.8.0
+        version: 6.9.1
       '@testing-library/react':
         specifier: ^14.3.1
-        version: 14.3.1(@types/react@19.1.13)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 14.3.1(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@9.3.4)
+      '@types/node':
+        specifier: ^20.10.0
+        version: 20.19.25
       '@types/react':
-        specifier: ^19.1.8
-        version: 19.1.13
+        specifier: ^18.3.18
+        version: 18.3.27
       '@types/react-dom':
-        specifier: ^19.1.6
-        version: 19.1.9(@types/react@19.1.13)
-      '@vitejs/plugin-react':
-        specifier: ^4.4.1
-        version: 4.7.0(vite@6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))
+        specifier: ^18.3.5
+        version: 18.3.7(@types/react@18.3.27)
+      '@vitejs/plugin-react-swc':
+        specifier: ^3.10.2
+        version: 3.11.0(vite@6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1))
       '@vitest/coverage-v8':
         specifier: ^3.2.3
         version: 3.2.4(vitest@3.2.4)
@@ -246,10 +348,7 @@ importers:
         version: 3.2.4(vitest@3.2.4)
       autoprefixer:
         specifier: ^10.4.21
-        version: 10.4.21(postcss@8.5.6)
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.20
-        version: 0.4.20(eslint@9.35.0(jiti@2.5.1))
+        version: 10.4.22(postcss@8.5.6)
       jsdom:
         specifier: ^26.1.0
         version: 26.1.0
@@ -258,13 +357,16 @@ importers:
         version: 8.5.6
       tailwindcss:
         specifier: ^4.1.7
-        version: 4.1.13
+        version: 4.1.17
+      typescript:
+        specifier: ~5.7.3
+        version: 5.7.3
       vite:
-        specifier: ^6.3.5
-        version: 6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+        specifier: 6.3.5
+        version: 6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
       vitest:
         specifier: ^3.2.3
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.5)(@vitest/ui@3.2.4)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@20.19.25)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
 
   packages/shared-types:
     devDependencies:
@@ -309,24 +411,24 @@ packages:
       }
     engines: { node: '>=6.9.0' }
 
-  '@babel/compat-data@7.28.4':
+  '@babel/compat-data@7.28.5':
     resolution:
       {
-        integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==,
+        integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==,
       }
     engines: { node: '>=6.9.0' }
 
-  '@babel/core@7.28.4':
+  '@babel/core@7.28.5':
     resolution:
       {
-        integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==,
+        integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==,
       }
     engines: { node: '>=6.9.0' }
 
-  '@babel/generator@7.28.3':
+  '@babel/generator@7.28.5':
     resolution:
       {
-        integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==,
+        integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==,
       }
     engines: { node: '>=6.9.0' }
 
@@ -360,13 +462,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-plugin-utils@7.27.1':
-    resolution:
-      {
-        integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==,
-      }
-    engines: { node: '>=6.9.0' }
-
   '@babel/helper-string-parser@7.27.1':
     resolution:
       {
@@ -374,10 +469,10 @@ packages:
       }
     engines: { node: '>=6.9.0' }
 
-  '@babel/helper-validator-identifier@7.27.1':
+  '@babel/helper-validator-identifier@7.28.5':
     resolution:
       {
-        integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==,
+        integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==,
       }
     engines: { node: '>=6.9.0' }
 
@@ -395,32 +490,14 @@ packages:
       }
     engines: { node: '>=6.9.0' }
 
-  '@babel/parser@7.28.4':
+  '@babel/parser@7.28.5':
     resolution:
       {
-        integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==,
+        integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==,
       }
     engines: { node: '>=6.0.0' }
     hasBin: true
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1':
-    resolution:
-      {
-        integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==,
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1':
-    resolution:
-      {
-        integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==,
-      }
-    engines: { node: '>=6.9.0' }
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/runtime@7.28.4':
     resolution:
       {
@@ -435,17 +512,17 @@ packages:
       }
     engines: { node: '>=6.9.0' }
 
-  '@babel/traverse@7.28.4':
+  '@babel/traverse@7.28.5':
     resolution:
       {
-        integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==,
+        integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==,
       }
     engines: { node: '>=6.9.0' }
 
-  '@babel/types@7.28.4':
+  '@babel/types@7.28.5':
     resolution:
       {
-        integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==,
+        integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==,
       }
     engines: { node: '>=6.9.0' }
 
@@ -513,315 +590,241 @@ packages:
       }
     engines: { node: '>=18' }
 
-  '@dabh/diagnostics@2.0.3':
-    resolution:
-      {
-        integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==,
-      }
-
-  '@emotion/babel-plugin@11.13.5':
-    resolution:
-      {
-        integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==,
-      }
-
-  '@emotion/cache@11.14.0':
-    resolution:
-      {
-        integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==,
-      }
-
-  '@emotion/hash@0.9.2':
-    resolution:
-      {
-        integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==,
-      }
-
-  '@emotion/memoize@0.9.0':
-    resolution:
-      {
-        integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==,
-      }
-
-  '@emotion/react@11.14.0':
-    resolution:
-      {
-        integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/serialize@1.3.3':
-    resolution:
-      {
-        integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==,
-      }
-
-  '@emotion/sheet@1.4.0':
-    resolution:
-      {
-        integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==,
-      }
-
-  '@emotion/unitless@0.10.0':
-    resolution:
-      {
-        integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==,
-      }
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
-    resolution:
-      {
-        integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==,
-      }
-    peerDependencies:
-      react: '>=16.8.0'
-
-  '@emotion/utils@1.4.2':
-    resolution:
-      {
-        integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==,
-      }
-
-  '@emotion/weak-memoize@0.4.0':
+  '@dabh/diagnostics@2.0.8':
     resolution:
       {
-        integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==,
+        integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==,
       }
 
-  '@esbuild/aix-ppc64@0.25.9':
+  '@esbuild/aix-ppc64@0.25.12':
     resolution:
       {
-        integrity: sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==,
+        integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==,
       }
     engines: { node: '>=18' }
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.25.9':
+  '@esbuild/android-arm64@0.25.12':
     resolution:
       {
-        integrity: sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==,
+        integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==,
       }
     engines: { node: '>=18' }
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.25.9':
+  '@esbuild/android-arm@0.25.12':
     resolution:
       {
-        integrity: sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==,
+        integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==,
       }
     engines: { node: '>=18' }
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.25.9':
+  '@esbuild/android-x64@0.25.12':
     resolution:
       {
-        integrity: sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==,
+        integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==,
       }
     engines: { node: '>=18' }
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.25.9':
+  '@esbuild/darwin-arm64@0.25.12':
     resolution:
       {
-        integrity: sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==,
+        integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==,
       }
     engines: { node: '>=18' }
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.9':
+  '@esbuild/darwin-x64@0.25.12':
     resolution:
       {
-        integrity: sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==,
+        integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==,
       }
     engines: { node: '>=18' }
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.25.9':
+  '@esbuild/freebsd-arm64@0.25.12':
     resolution:
       {
-        integrity: sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==,
+        integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==,
       }
     engines: { node: '>=18' }
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.9':
+  '@esbuild/freebsd-x64@0.25.12':
     resolution:
       {
-        integrity: sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==,
+        integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==,
       }
     engines: { node: '>=18' }
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.25.9':
+  '@esbuild/linux-arm64@0.25.12':
     resolution:
       {
-        integrity: sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==,
+        integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==,
       }
     engines: { node: '>=18' }
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.9':
+  '@esbuild/linux-arm@0.25.12':
     resolution:
       {
-        integrity: sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==,
+        integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==,
       }
     engines: { node: '>=18' }
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.9':
+  '@esbuild/linux-ia32@0.25.12':
     resolution:
       {
-        integrity: sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==,
+        integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==,
       }
     engines: { node: '>=18' }
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.9':
+  '@esbuild/linux-loong64@0.25.12':
     resolution:
       {
-        integrity: sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==,
+        integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==,
       }
     engines: { node: '>=18' }
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.9':
+  '@esbuild/linux-mips64el@0.25.12':
     resolution:
       {
-        integrity: sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==,
+        integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==,
       }
     engines: { node: '>=18' }
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.9':
+  '@esbuild/linux-ppc64@0.25.12':
     resolution:
       {
-        integrity: sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==,
+        integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==,
       }
     engines: { node: '>=18' }
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.9':
+  '@esbuild/linux-riscv64@0.25.12':
     resolution:
       {
-        integrity: sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==,
+        integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==,
       }
     engines: { node: '>=18' }
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.9':
+  '@esbuild/linux-s390x@0.25.12':
     resolution:
       {
-        integrity: sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==,
+        integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==,
       }
     engines: { node: '>=18' }
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.9':
+  '@esbuild/linux-x64@0.25.12':
     resolution:
       {
-        integrity: sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==,
+        integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==,
       }
     engines: { node: '>=18' }
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.25.9':
+  '@esbuild/netbsd-arm64@0.25.12':
     resolution:
       {
-        integrity: sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==,
+        integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==,
       }
     engines: { node: '>=18' }
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.9':
+  '@esbuild/netbsd-x64@0.25.12':
     resolution:
       {
-        integrity: sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==,
+        integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==,
       }
     engines: { node: '>=18' }
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.25.9':
+  '@esbuild/openbsd-arm64@0.25.12':
     resolution:
       {
-        integrity: sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==,
+        integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==,
       }
     engines: { node: '>=18' }
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.9':
+  '@esbuild/openbsd-x64@0.25.12':
     resolution:
       {
-        integrity: sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==,
+        integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==,
       }
     engines: { node: '>=18' }
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.25.9':
+  '@esbuild/openharmony-arm64@0.25.12':
     resolution:
       {
-        integrity: sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==,
+        integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==,
       }
     engines: { node: '>=18' }
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.25.9':
+  '@esbuild/sunos-x64@0.25.12':
     resolution:
       {
-        integrity: sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==,
+        integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==,
       }
     engines: { node: '>=18' }
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.25.9':
+  '@esbuild/win32-arm64@0.25.12':
     resolution:
       {
-        integrity: sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==,
+        integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==,
       }
     engines: { node: '>=18' }
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.9':
+  '@esbuild/win32-ia32@0.25.12':
     resolution:
       {
-        integrity: sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==,
+        integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==,
       }
     engines: { node: '>=18' }
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.9':
+  '@esbuild/win32-x64@0.25.12':
     resolution:
       {
-        integrity: sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==,
+        integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==,
       }
     engines: { node: '>=18' }
     cpu: [x64]
@@ -843,24 +846,31 @@ packages:
       }
     engines: { node: ^12.0.0 || ^14.0.0 || >=16.0.0 }
 
-  '@eslint/config-array@0.21.0':
+  '@eslint-community/regexpp@4.12.2':
     resolution:
       {
-        integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==,
+        integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==,
+      }
+    engines: { node: ^12.0.0 || ^14.0.0 || >=16.0.0 }
+
+  '@eslint/config-array@0.21.1':
+    resolution:
+      {
+        integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/config-helpers@0.3.1':
+  '@eslint/config-helpers@0.4.2':
     resolution:
       {
-        integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==,
+        integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/core@0.15.2':
+  '@eslint/core@0.17.0':
     resolution:
       {
-        integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==,
+        integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
@@ -871,24 +881,24 @@ packages:
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/js@9.35.0':
+  '@eslint/js@9.39.1':
     resolution:
       {
-        integrity: sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==,
+        integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/object-schema@2.1.6':
+  '@eslint/object-schema@2.1.7':
     resolution:
       {
-        integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==,
+        integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@eslint/plugin-kit@0.3.5':
+  '@eslint/plugin-kit@0.4.1':
     resolution:
       {
-        integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==,
+        integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
@@ -904,6 +914,15 @@ packages:
         integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==,
       }
 
+  '@floating-ui/react-dom@2.1.6':
+    resolution:
+      {
+        integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==,
+      }
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@floating-ui/utils@0.2.10':
     resolution:
       {
@@ -951,13 +970,6 @@ packages:
       }
     engines: { node: '>=12' }
 
-  '@isaacs/fs-minipass@4.0.1':
-    resolution:
-      {
-        integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==,
-      }
-    engines: { node: '>=18.0.0' }
-
   '@istanbuljs/load-nyc-config@1.1.0':
     resolution:
       {
@@ -1056,333 +1068,1031 @@ packages:
       }
     engines: { node: '>=8.0.0' }
 
-  '@paralleldrive/cuid2@2.2.2':
+  '@paralleldrive/cuid2@2.3.1':
     resolution:
       {
-        integrity: sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==,
+        integrity: sha512-XO7cAxhnTZl0Yggq6jOgjiOHhbgcO4NqFqwSmQpjK3b6TEE6Uj/jfSk6wzYyemh3+I0sHirKSetjQwn5cZktFw==,
       }
 
-  '@parcel/watcher-android-arm64@2.5.1':
+  '@pkgjs/parseargs@0.11.0':
     resolution:
       {
-        integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==,
+        integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [arm64]
-    os: [android]
+    engines: { node: '>=14' }
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
+  '@polka/url@1.0.0-next.29':
     resolution:
       {
-        integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==,
+        integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [arm64]
-    os: [darwin]
 
-  '@parcel/watcher-darwin-x64@2.5.1':
+  '@radix-ui/number@1.1.1':
     resolution:
       {
-        integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==,
+        integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [x64]
-    os: [darwin]
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
+  '@radix-ui/primitive@1.1.3':
     resolution:
       {
-        integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==,
+        integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [x64]
-    os: [freebsd]
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
+  '@radix-ui/react-accordion@1.2.12':
     resolution:
       {
-        integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==,
+        integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [arm]
-    os: [linux]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@parcel/watcher-linux-arm-musl@2.5.1':
+  '@radix-ui/react-alert-dialog@1.1.15':
     resolution:
       {
-        integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==,
+        integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [arm]
-    os: [linux]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+  '@radix-ui/react-arrow@1.1.7':
     resolution:
       {
-        integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==,
+        integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [arm64]
-    os: [linux]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
+  '@radix-ui/react-aspect-ratio@1.1.8':
     resolution:
       {
-        integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==,
+        integrity: sha512-5nZrJTF7gH+e0nZS7/QxFz6tJV4VimhQb1avEgtsJxvvIp5JilL+c58HICsKzPxghdwaDt48hEfPM1au4zGy+w==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [arm64]
-    os: [linux]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
+  '@radix-ui/react-avatar@1.1.11':
     resolution:
       {
-        integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==,
+        integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [x64]
-    os: [linux]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@parcel/watcher-linux-x64-musl@2.5.1':
+  '@radix-ui/react-checkbox@1.3.3':
     resolution:
       {
-        integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==,
+        integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [x64]
-    os: [linux]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@parcel/watcher-win32-arm64@2.5.1':
+  '@radix-ui/react-collapsible@1.1.12':
     resolution:
       {
-        integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==,
+        integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [arm64]
-    os: [win32]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@parcel/watcher-win32-ia32@2.5.1':
+  '@radix-ui/react-collection@1.1.7':
     resolution:
       {
-        integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==,
+        integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [ia32]
-    os: [win32]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@parcel/watcher-win32-x64@2.5.1':
+  '@radix-ui/react-compose-refs@1.1.2':
     resolution:
       {
-        integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==,
+        integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==,
       }
-    engines: { node: '>= 10.0.0' }
-    cpu: [x64]
-    os: [win32]
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@parcel/watcher@2.5.1':
+  '@radix-ui/react-context-menu@2.2.16':
     resolution:
       {
-        integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==,
+        integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==,
       }
-    engines: { node: '>= 10.0.0' }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@pkgjs/parseargs@0.11.0':
+  '@radix-ui/react-context@1.1.2':
     resolution:
       {
-        integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==,
+        integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==,
       }
-    engines: { node: '>=14' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@polka/url@1.0.0-next.29':
+  '@radix-ui/react-context@1.1.3':
     resolution:
       {
-        integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==,
+        integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==,
       }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@rive-app/canvas@2.31.5':
+  '@radix-ui/react-dialog@1.1.15':
     resolution:
       {
-        integrity: sha512-rVWN1RHM7nflvmJCOhrN/Q3d2Sasf8/J8EhArxB7/rFvby/96AREwkXlmKAMxgar8PzN9hyCKyanY5TmPAPd9A==,
+        integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==,
       }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@rive-app/react-canvas@4.23.3':
+  '@radix-ui/react-direction@1.1.1':
     resolution:
       {
-        integrity: sha512-qvy896Joes4w1yTMo8BPdF2JfPKZ5rawGy0JEX2UXFM5VjMHc/NG46BIbdnBrk9ozX/HQ2uRWTp4hNkybJzgSQ==,
+        integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==,
       }
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@rolldown/pluginutils@1.0.0-beta.27':
+  '@radix-ui/react-dismissable-layer@1.1.11':
     resolution:
       {
-        integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==,
+        integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==,
       }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.50.2':
+  '@radix-ui/react-dropdown-menu@2.1.16':
     resolution:
       {
-        integrity: sha512-uLN8NAiFVIRKX9ZQha8wy6UUs06UNSZ32xj6giK/rmMXAgKahwExvK6SsmgU5/brh4w/nSgj8e0k3c1HBQpa0A==,
+        integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==,
       }
-    cpu: [arm]
-    os: [android]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@rollup/rollup-android-arm64@4.50.2':
+  '@radix-ui/react-focus-guards@1.1.3':
     resolution:
       {
-        integrity: sha512-oEouqQk2/zxxj22PNcGSskya+3kV0ZKH+nQxuCCOGJ4oTXBdNTbv+f/E3c74cNLeMO1S5wVWacSws10TTSB77g==,
+        integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==,
       }
-    cpu: [arm64]
-    os: [android]
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@rollup/rollup-darwin-arm64@4.50.2':
+  '@radix-ui/react-focus-scope@1.1.7':
     resolution:
       {
-        integrity: sha512-OZuTVTpj3CDSIxmPgGH8en/XtirV5nfljHZ3wrNwvgkT5DQLhIKAeuFSiwtbMto6oVexV0k1F1zqURPKf5rI1Q==,
+        integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==,
       }
-    cpu: [arm64]
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.15':
+    resolution:
+      {
+        integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution:
+      {
+        integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.8':
+    resolution:
+      {
+        integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.16':
+    resolution:
+      {
+        integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menubar@1.1.16':
+    resolution:
+      {
+        integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.14':
+    resolution:
+      {
+        integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.15':
+    resolution:
+      {
+        integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution:
+      {
+        integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution:
+      {
+        integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution:
+      {
+        integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution:
+      {
+        integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution:
+      {
+        integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.8':
+    resolution:
+      {
+        integrity: sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.3.8':
+    resolution:
+      {
+        integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution:
+      {
+        integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.10':
+    resolution:
+      {
+        integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.6':
+    resolution:
+      {
+        integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.8':
+    resolution:
+      {
+        integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.3.6':
+    resolution:
+      {
+        integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution:
+      {
+        integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution:
+      {
+        integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.2.6':
+    resolution:
+      {
+        integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.13':
+    resolution:
+      {
+        integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.11':
+    resolution:
+      {
+        integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.10':
+    resolution:
+      {
+        integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution:
+      {
+        integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution:
+      {
+        integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution:
+      {
+        integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution:
+      {
+        integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution:
+      {
+        integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution:
+      {
+        integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution:
+      {
+        integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution:
+      {
+        integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution:
+      {
+        integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution:
+      {
+        integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution:
+      {
+        integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution:
+      {
+        integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==,
+      }
+
+  '@rive-app/canvas@2.32.0':
+    resolution:
+      {
+        integrity: sha512-RZRZQRWItH7e0NVmHVhffkm02J/9CO/Qdq71Vu1TkExj312Oc22FpBVn8rBnyEeQak75bJy9m/ig84Crcr7qog==,
+      }
+
+  '@rive-app/react-canvas@4.24.0':
+    resolution:
+      {
+        integrity: sha512-L/a+2Oi+tHoYmDIlj49Zudu75AI00jedFRTUA4na1bnQ2WVSJqKP2/tuK6uJDqUhQ7+9fCqgRkJws7KpFHOBag==,
+      }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0
+
+  '@rolldown/pluginutils@1.0.0-beta.27':
+    resolution:
+      {
+        integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==,
+      }
+
+  '@rollup/rollup-android-arm-eabi@4.53.3':
+    resolution:
+      {
+        integrity: sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==,
+      }
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.53.3':
+    resolution:
+      {
+        integrity: sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==,
+      }
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.53.3':
+    resolution:
+      {
+        integrity: sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==,
+      }
+    cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.50.2':
+  '@rollup/rollup-darwin-x64@4.53.3':
     resolution:
       {
-        integrity: sha512-Wa/Wn8RFkIkr1vy1k1PB//VYhLnlnn5eaJkfTQKivirOvzu5uVd2It01ukeQstMursuz7S1bU+8WW+1UPXpa8A==,
+        integrity: sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==,
       }
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.50.2':
+  '@rollup/rollup-freebsd-arm64@4.53.3':
     resolution:
       {
-        integrity: sha512-QkzxvH3kYN9J1w7D1A+yIMdI1pPekD+pWx7G5rXgnIlQ1TVYVC6hLl7SOV9pi5q9uIDF9AuIGkuzcbF7+fAhow==,
+        integrity: sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==,
       }
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.50.2':
+  '@rollup/rollup-freebsd-x64@4.53.3':
     resolution:
       {
-        integrity: sha512-dkYXB0c2XAS3a3jmyDkX4Jk0m7gWLFzq1C3qUnJJ38AyxIF5G/dyS4N9B30nvFseCfgtCEdbYFhk0ChoCGxPog==,
+        integrity: sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==,
       }
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.50.2':
+  '@rollup/rollup-linux-arm-gnueabihf@4.53.3':
     resolution:
       {
-        integrity: sha512-9VlPY/BN3AgbukfVHAB8zNFWB/lKEuvzRo1NKev0Po8sYFKx0i+AQlCYftgEjcL43F2h9Ui1ZSdVBc4En/sP2w==,
+        integrity: sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==,
       }
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.50.2':
+  '@rollup/rollup-linux-arm-musleabihf@4.53.3':
     resolution:
       {
-        integrity: sha512-+GdKWOvsifaYNlIVf07QYan1J5F141+vGm5/Y8b9uCZnG/nxoGqgCmR24mv0koIWWuqvFYnbURRqw1lv7IBINw==,
+        integrity: sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==,
       }
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.50.2':
+  '@rollup/rollup-linux-arm64-gnu@4.53.3':
     resolution:
       {
-        integrity: sha512-df0Eou14ojtUdLQdPFnymEQteENwSJAdLf5KCDrmZNsy1c3YaCNaJvYsEUHnrg+/DLBH612/R0xd3dD03uz2dg==,
+        integrity: sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==,
       }
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.50.2':
+  '@rollup/rollup-linux-arm64-musl@4.53.3':
     resolution:
       {
-        integrity: sha512-iPeouV0UIDtz8j1YFR4OJ/zf7evjauqv7jQ/EFs0ClIyL+by++hiaDAfFipjOgyz6y6xbDvJuiU4HwpVMpRFDQ==,
+        integrity: sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==,
       }
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loong64-gnu@4.50.2':
+  '@rollup/rollup-linux-loong64-gnu@4.53.3':
     resolution:
       {
-        integrity: sha512-OL6KaNvBopLlj5fTa5D5bau4W82f+1TyTZRr2BdnfsrnQnmdxh4okMxR2DcDkJuh4KeoQZVuvHvzuD/lyLn2Kw==,
+        integrity: sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==,
       }
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.50.2':
+  '@rollup/rollup-linux-ppc64-gnu@4.53.3':
     resolution:
       {
-        integrity: sha512-I21VJl1w6z/K5OTRl6aS9DDsqezEZ/yKpbqlvfHbW0CEF5IL8ATBMuUx6/mp683rKTK8thjs/0BaNrZLXetLag==,
+        integrity: sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==,
       }
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.50.2':
+  '@rollup/rollup-linux-riscv64-gnu@4.53.3':
     resolution:
       {
-        integrity: sha512-Hq6aQJT/qFFHrYMjS20nV+9SKrXL2lvFBENZoKfoTH2kKDOJqff5OSJr4x72ZaG/uUn+XmBnGhfr4lwMRrmqCQ==,
+        integrity: sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==,
       }
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.50.2':
+  '@rollup/rollup-linux-riscv64-musl@4.53.3':
     resolution:
       {
-        integrity: sha512-82rBSEXRv5qtKyr0xZ/YMF531oj2AIpLZkeNYxmKNN6I2sVE9PGegN99tYDLK2fYHJITL1P2Lgb4ZXnv0PjQvw==,
+        integrity: sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==,
       }
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.50.2':
+  '@rollup/rollup-linux-s390x-gnu@4.53.3':
     resolution:
       {
-        integrity: sha512-4Q3S3Hy7pC6uaRo9gtXUTJ+EKo9AKs3BXKc2jYypEcMQ49gDPFU2P1ariX9SEtBzE5egIX6fSUmbmGazwBVF9w==,
+        integrity: sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==,
       }
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.50.2':
+  '@rollup/rollup-linux-x64-gnu@4.53.3':
     resolution:
       {
-        integrity: sha512-9Jie/At6qk70dNIcopcL4p+1UirusEtznpNtcq/u/C5cC4HBX7qSGsYIcG6bdxj15EYWhHiu02YvmdPzylIZlA==,
+        integrity: sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==,
       }
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.50.2':
+  '@rollup/rollup-linux-x64-musl@4.53.3':
     resolution:
       {
-        integrity: sha512-HPNJwxPL3EmhzeAnsWQCM3DcoqOz3/IC6de9rWfGR8ZCuEHETi9km66bH/wG3YH0V3nyzyFEGUZeL5PKyy4xvw==,
+        integrity: sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==,
       }
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-openharmony-arm64@4.50.2':
+  '@rollup/rollup-openharmony-arm64@4.53.3':
     resolution:
       {
-        integrity: sha512-nMKvq6FRHSzYfKLHZ+cChowlEkR2lj/V0jYj9JnGUVPL2/mIeFGmVM2mLaFeNa5Jev7W7TovXqXIG2d39y1KYA==,
+        integrity: sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==,
       }
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.50.2':
+  '@rollup/rollup-win32-arm64-msvc@4.53.3':
     resolution:
       {
-        integrity: sha512-eFUvvnTYEKeTyHEijQKz81bLrUQOXKZqECeiWH6tb8eXXbZk+CXSG2aFrig2BQ/pjiVRj36zysjgILkqarS2YA==,
+        integrity: sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==,
       }
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.50.2':
+  '@rollup/rollup-win32-ia32-msvc@4.53.3':
     resolution:
       {
-        integrity: sha512-cBaWmXqyfRhH8zmUxK3d3sAhEWLrtMjWBRwdMMHJIXSjvjLKvv49adxiEz+FJ8AP90apSDDBx2Tyd/WylV6ikA==,
+        integrity: sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==,
       }
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.50.2':
+  '@rollup/rollup-win32-x64-gnu@4.53.3':
+    resolution:
+      {
+        integrity: sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==,
+      }
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.53.3':
     resolution:
       {
-        integrity: sha512-APwKy6YUhvZaEoHyM+9xqmTpviEI+9eL7LoCH+aLcvWYHJ663qG5zx7WzWZY+a9qkg5JtzcMyJ9z0WtQBMDmgA==,
+        integrity: sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==,
       }
     cpu: [x64]
     os: [win32]
@@ -1392,146 +2102,219 @@ packages:
       {
         integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==,
       }
-    engines: { node: '>=18' }
+    engines: { node: '>=18' }
+
+  '@so-ric/colorspace@1.1.6':
+    resolution:
+      {
+        integrity: sha512-/KiKkpHNOBgkFJwu9sh48LkHSMYGyuTcSFK/qMBdnOAlrRJzRSXAOFB5qwzaVQuDl8wAvHVMkaASQDReTahxuw==,
+      }
+
+  '@swc/core-darwin-arm64@1.15.3':
+    resolution:
+      {
+        integrity: sha512-AXfeQn0CvcQ4cndlIshETx6jrAM45oeUrK8YeEY6oUZU/qzz0Id0CyvlEywxkWVC81Ajpd8TQQ1fW5yx6zQWkQ==,
+      }
+    engines: { node: '>=10' }
+    cpu: [arm64]
+    os: [darwin]
+
+  '@swc/core-darwin-x64@1.15.3':
+    resolution:
+      {
+        integrity: sha512-p68OeCz1ui+MZYG4wmfJGvcsAcFYb6Sl25H9TxWl+GkBgmNimIiRdnypK9nBGlqMZAcxngNPtnG3kEMNnvoJ2A==,
+      }
+    engines: { node: '>=10' }
+    cpu: [x64]
+    os: [darwin]
+
+  '@swc/core-linux-arm-gnueabihf@1.15.3':
+    resolution:
+      {
+        integrity: sha512-Nuj5iF4JteFgwrai97mUX+xUOl+rQRHqTvnvHMATL/l9xE6/TJfPBpd3hk/PVpClMXG3Uvk1MxUFOEzM1JrMYg==,
+      }
+    engines: { node: '>=10' }
+    cpu: [arm]
+    os: [linux]
+
+  '@swc/core-linux-arm64-gnu@1.15.3':
+    resolution:
+      {
+        integrity: sha512-2Nc/s8jE6mW2EjXWxO/lyQuLKShcmTrym2LRf5Ayp3ICEMX6HwFqB1EzDhwoMa2DcUgmnZIalesq2lG3krrUNw==,
+      }
+    engines: { node: '>=10' }
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-arm64-musl@1.15.3':
+    resolution:
+      {
+        integrity: sha512-j4SJniZ/qaZ5g8op+p1G9K1z22s/EYGg1UXIb3+Cg4nsxEpF5uSIGEE4mHUfA70L0BR9wKT2QF/zv3vkhfpX4g==,
+      }
+    engines: { node: '>=10' }
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-x64-gnu@1.15.3':
+    resolution:
+      {
+        integrity: sha512-aKttAZnz8YB1VJwPQZtyU8Uk0BfMP63iDMkvjhJzRZVgySmqt/apWSdnoIcZlUoGheBrcqbMC17GGUmur7OT5A==,
+      }
+    engines: { node: '>=10' }
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-linux-x64-musl@1.15.3':
+    resolution:
+      {
+        integrity: sha512-oe8FctPu1gnUsdtGJRO2rvOUIkkIIaHqsO9xxN0bTR7dFTlPTGi2Fhk1tnvXeyAvCPxLIcwD8phzKg6wLv9yug==,
+      }
+    engines: { node: '>=10' }
+    cpu: [x64]
+    os: [linux]
 
-  '@svgdotjs/svg.draggable.js@3.0.6':
+  '@swc/core-win32-arm64-msvc@1.15.3':
     resolution:
       {
-        integrity: sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==,
+        integrity: sha512-L9AjzP2ZQ/Xh58e0lTRMLvEDrcJpR7GwZqAtIeNLcTK7JVE+QineSyHp0kLkO1rttCHyCy0U74kDTj0dRz6raA==,
       }
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
+    engines: { node: '>=10' }
+    cpu: [arm64]
+    os: [win32]
 
-  '@svgdotjs/svg.filter.js@3.0.9':
+  '@swc/core-win32-ia32-msvc@1.15.3':
     resolution:
       {
-        integrity: sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==,
+        integrity: sha512-B8UtogMzErUPDWUoKONSVBdsgKYd58rRyv2sHJWKOIMCHfZ22FVXICR4O/VwIYtlnZ7ahERcjayBHDlBZpR0aw==,
       }
-    engines: { node: '>= 0.8.0' }
+    engines: { node: '>=10' }
+    cpu: [ia32]
+    os: [win32]
 
-  '@svgdotjs/svg.js@3.2.5':
+  '@swc/core-win32-x64-msvc@1.15.3':
     resolution:
       {
-        integrity: sha512-/VNHWYhNu+BS7ktbYoVGrCmsXDh+chFMaONMwGNdIBcFHrWqk2jY8fNyr3DLdtQUIalvkPfM554ZSFa3dm3nxQ==,
+        integrity: sha512-SpZKMR9QBTecHeqpzJdYEfgw30Oo8b/Xl6rjSzBt1g0ZsXyy60KLXrp6IagQyfTYqNYE/caDvwtF2FPn7pomog==,
       }
+    engines: { node: '>=10' }
+    cpu: [x64]
+    os: [win32]
 
-  '@svgdotjs/svg.resize.js@2.0.5':
+  '@swc/core@1.15.3':
     resolution:
       {
-        integrity: sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==,
+        integrity: sha512-Qd8eBPkUFL4eAONgGjycZXj1jFCBW8Fd+xF0PzdTlBCWQIV1xnUT7B93wUANtW3KGjl3TRcOyxwSx/u/jyKw/Q==,
       }
-    engines: { node: '>= 14.18' }
+    engines: { node: '>=10' }
     peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-      '@svgdotjs/svg.select.js': ^4.0.1
+      '@swc/helpers': '>=0.5.17'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
 
-  '@svgdotjs/svg.select.js@4.0.3':
+  '@swc/counter@0.1.3':
     resolution:
       {
-        integrity: sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==,
+        integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==,
       }
-    engines: { node: '>= 14.18' }
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
 
-  '@tailwindcss/cli@4.1.13':
+  '@swc/types@0.1.25':
     resolution:
       {
-        integrity: sha512-KEu/iL4CYBzGza/2yZBLXqjCCZB/eRWkRLP8Vg2kkEWk4usC8HLGJW0QAhLS7U5DsAWumsisxgabuppE6NinLw==,
+        integrity: sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==,
       }
-    hasBin: true
 
-  '@tailwindcss/node@4.1.13':
+  '@tailwindcss/node@4.1.18':
     resolution:
       {
-        integrity: sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==,
+        integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==,
       }
 
-  '@tailwindcss/oxide-android-arm64@4.1.13':
+  '@tailwindcss/oxide-android-arm64@4.1.18':
     resolution:
       {
-        integrity: sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==,
+        integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==,
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.13':
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
     resolution:
       {
-        integrity: sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==,
+        integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==,
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.13':
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
     resolution:
       {
-        integrity: sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==,
+        integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==,
       }
     engines: { node: '>= 10' }
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.13':
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
     resolution:
       {
-        integrity: sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==,
+        integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==,
       }
     engines: { node: '>= 10' }
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
     resolution:
       {
-        integrity: sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==,
+        integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==,
       }
     engines: { node: '>= 10' }
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
     resolution:
       {
-        integrity: sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==,
+        integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==,
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution:
       {
-        integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==,
+        integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==,
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution:
       {
-        integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==,
+        integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==,
       }
     engines: { node: '>= 10' }
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution:
       {
-        integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==,
+        integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==,
       }
     engines: { node: '>= 10' }
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution:
       {
-        integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==,
+        integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==,
       }
     engines: { node: '>=14.0.0' }
     cpu: [wasm32]
@@ -1543,35 +2326,35 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
     resolution:
       {
-        integrity: sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==,
+        integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==,
       }
     engines: { node: '>= 10' }
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
     resolution:
       {
-        integrity: sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==,
+        integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==,
       }
     engines: { node: '>= 10' }
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.1.13':
+  '@tailwindcss/oxide@4.1.18':
     resolution:
       {
-        integrity: sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==,
+        integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==,
       }
     engines: { node: '>= 10' }
 
-  '@tailwindcss/postcss@4.1.13':
+  '@tailwindcss/postcss@4.1.18':
     resolution:
       {
-        integrity: sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==,
+        integrity: sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==,
       }
 
   '@testing-library/dom@9.3.4':
@@ -1581,10 +2364,10 @@ packages:
       }
     engines: { node: '>=14' }
 
-  '@testing-library/jest-dom@6.8.0':
+  '@testing-library/jest-dom@6.9.1':
     resolution:
       {
-        integrity: sha512-WgXcWzVM6idy5JaftTVC8Vs83NKRmGJz4Hqs4oyOuO2J4r/y79vvKZsb+CaGyCSEbUPI6OsewfPd0G1A0/TUZQ==,
+        integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==,
       }
     engines: { node: '>=14', npm: '>=6', yarn: '>=1' }
 
@@ -1607,10 +2390,10 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
-  '@tsconfig/node10@1.0.11':
+  '@tsconfig/node10@1.0.12':
     resolution:
       {
-        integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==,
+        integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==,
       }
 
   '@tsconfig/node12@1.0.11':
@@ -1637,58 +2420,88 @@ packages:
         integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==,
       }
 
-  '@types/babel__core@7.20.5':
+  '@types/body-parser@1.19.6':
     resolution:
       {
-        integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==,
+        integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==,
       }
 
-  '@types/babel__generator@7.27.0':
+  '@types/chai@5.2.3':
     resolution:
       {
-        integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==,
+        integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==,
       }
 
-  '@types/babel__template@7.4.4':
+  '@types/connect@3.4.38':
     resolution:
       {
-        integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==,
+        integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==,
       }
 
-  '@types/babel__traverse@7.28.0':
+  '@types/cookiejar@2.1.5':
     resolution:
       {
-        integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==,
+        integrity: sha512-he+DHOWReW0nghN24E1WUqM0efK4kI9oTqDm6XmK8ZPe2djZ90BSNdGnIyCLzCPw7/pogPlGbzI2wHGGmi4O/Q==,
       }
 
-  '@types/body-parser@1.19.6':
+  '@types/cors@2.8.19':
     resolution:
       {
-        integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==,
+        integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==,
       }
 
-  '@types/chai@5.2.2':
+  '@types/d3-array@3.2.2':
     resolution:
       {
-        integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==,
+        integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==,
       }
 
-  '@types/connect@3.4.38':
+  '@types/d3-color@3.1.3':
     resolution:
       {
-        integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==,
+        integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==,
       }
 
-  '@types/cookiejar@2.1.5':
+  '@types/d3-ease@3.0.2':
     resolution:
       {
-        integrity: sha512-he+DHOWReW0nghN24E1WUqM0efK4kI9oTqDm6XmK8ZPe2djZ90BSNdGnIyCLzCPw7/pogPlGbzI2wHGGmi4O/Q==,
+        integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==,
       }
 
-  '@types/cors@2.8.19':
+  '@types/d3-interpolate@3.0.4':
     resolution:
       {
-        integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==,
+        integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==,
+      }
+
+  '@types/d3-path@3.1.1':
+    resolution:
+      {
+        integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==,
+      }
+
+  '@types/d3-scale@4.0.9':
+    resolution:
+      {
+        integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==,
+      }
+
+  '@types/d3-shape@3.1.7':
+    resolution:
+      {
+        integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==,
+      }
+
+  '@types/d3-time@3.0.4':
+    resolution:
+      {
+        integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==,
+      }
+
+  '@types/d3-timer@3.0.2':
+    resolution:
+      {
+        integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==,
       }
 
   '@types/debug@4.1.12':
@@ -1709,16 +2522,16 @@ packages:
         integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==,
       }
 
-  '@types/express-serve-static-core@5.0.7':
+  '@types/express-serve-static-core@5.1.0':
     resolution:
       {
-        integrity: sha512-R+33OsgWw7rOhD1emjU7dzCDHucJrgJXMA5PYCzJxVil0dsyx5iBEPHqpPfiKNJQb7lZ1vxwoLR4Z87bBUpeGQ==,
+        integrity: sha512-jnHMsrd0Mwa9Cf4IdOzbz543y4XJepXrbia2T4b6+spXC2We3t1y6K44D3mR8XMFSXMCf3/l7rCgddfx7UNVBA==,
       }
 
-  '@types/express@5.0.3':
+  '@types/express@5.0.5':
     resolution:
       {
-        integrity: sha512-wGA0NX93b19/dZC1J18tKWVIYWyyF2ZjT9vin/NRu0qzzvfVzWjs04iq2rQ3H65vCTQYlRqs3YHfY7zjdV+9Kw==,
+        integrity: sha512-LuIQOcb6UmnF7C1PCFmEU1u2hmiHL43fgFQX67sN3H4Z+0Yk0Neo++mFsBjhOAuLzvlQeqAAkeDOZrJs9rzumQ==,
       }
 
   '@types/http-errors@2.0.5':
@@ -1733,10 +2546,10 @@ packages:
         integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==,
       }
 
-  '@types/k6@1.2.0':
+  '@types/k6@1.4.0':
     resolution:
       {
-        integrity: sha512-7F/vjekOUCzFi5AY+yYBOL38iEtN9EXufdKOAMFkJsdLryJ3/bB/W9jppED1FO5o7zeaPf8M46ardYPD8xgy/w==,
+        integrity: sha512-2tgKVnzNXZTZT1TDAGLY/3cuvHPZLyOF751N7M8T2dBgWzInzUVZYjGn9zVW01S1yNLqAr1az9gctyJHTW6GRQ==,
       }
 
   '@types/katex@0.16.7':
@@ -1763,16 +2576,16 @@ packages:
         integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==,
       }
 
-  '@types/node@22.18.5':
+  '@types/node@20.19.25':
     resolution:
       {
-        integrity: sha512-g9BpPfJvxYBXUWI9bV37j6d6LTMNQ88hPwdWWUeYZnMhlo66FIg9gCc1/DZb15QylJSKwOZjwrckvOTWpOiChg==,
+        integrity: sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==,
       }
 
-  '@types/parse-json@4.0.2':
+  '@types/node@22.19.1':
     resolution:
       {
-        integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==,
+        integrity: sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==,
       }
 
   '@types/prop-types@15.7.15':
@@ -1801,44 +2614,28 @@ packages:
     peerDependencies:
       '@types/react': ^18.0.0
 
-  '@types/react-dom@19.1.9':
-    resolution:
-      {
-        integrity: sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==,
-      }
-    peerDependencies:
-      '@types/react': ^19.0.0
-
-  '@types/react-transition-group@4.4.12':
-    resolution:
-      {
-        integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==,
-      }
-    peerDependencies:
-      '@types/react': '*'
-
-  '@types/react@18.3.24':
+  '@types/react@18.3.27':
     resolution:
       {
-        integrity: sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==,
+        integrity: sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==,
       }
 
-  '@types/react@19.1.13':
+  '@types/send@0.17.6':
     resolution:
       {
-        integrity: sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==,
+        integrity: sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==,
       }
 
-  '@types/send@0.17.5':
+  '@types/send@1.2.1':
     resolution:
       {
-        integrity: sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==,
+        integrity: sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==,
       }
 
-  '@types/serve-static@1.15.8':
+  '@types/serve-static@1.15.10':
     resolution:
       {
-        integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==,
+        integrity: sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==,
       }
 
   '@types/superagent@8.1.9':
@@ -1865,103 +2662,102 @@ packages:
         integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==,
       }
 
-  '@typescript-eslint/eslint-plugin@8.44.0':
+  '@typescript-eslint/eslint-plugin@8.47.0':
     resolution:
       {
-        integrity: sha512-EGDAOGX+uwwekcS0iyxVDmRV9HX6FLSM5kzrAToLTsr9OWCIKG/y3lQheCq18yZ5Xh78rRKJiEpP0ZaCs4ryOQ==,
+        integrity: sha512-fe0rz9WJQ5t2iaLfdbDc9T80GJy0AeO453q8C3YCilnGozvOyCG5t+EZtg7j7D88+c3FipfP/x+wzGnh1xp8ZA==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
-      '@typescript-eslint/parser': ^8.44.0
+      '@typescript-eslint/parser': ^8.47.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.44.0':
+  '@typescript-eslint/parser@8.47.0':
     resolution:
       {
-        integrity: sha512-VGMpFQGUQWYT9LfnPcX8ouFojyrZ/2w3K5BucvxL/spdNehccKhB4jUyB1yBCXpr2XFm0jkECxgrpXBW2ipoAw==,
+        integrity: sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.44.0':
+  '@typescript-eslint/project-service@8.47.0':
     resolution:
       {
-        integrity: sha512-ZeaGNraRsq10GuEohKTo4295Z/SuGcSq2LzfGlqiuEvfArzo/VRrT0ZaJsVPuKZ55lVbNk8U6FcL+ZMH8CoyVA==,
+        integrity: sha512-2X4BX8hUeB5JcA1TQJ7GjcgulXQ+5UkNb0DL8gHsHUHdFoiCTJoYLTpib3LtSDPZsRET5ygN4qqIWrHyYIKERA==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.44.0':
+  '@typescript-eslint/scope-manager@8.47.0':
     resolution:
       {
-        integrity: sha512-87Jv3E+al8wpD+rIdVJm/ItDBe/Im09zXIjFoipOjr5gHUhJmTzfFLuTJ/nPTMc2Srsroy4IBXwcTCHyRR7KzA==,
+        integrity: sha512-a0TTJk4HXMkfpFkL9/WaGTNuv7JWfFTQFJd6zS9dVAjKsojmv9HT55xzbEpnZoY+VUb+YXLMp+ihMLz/UlZfDg==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@typescript-eslint/tsconfig-utils@8.44.0':
+  '@typescript-eslint/tsconfig-utils@8.47.0':
     resolution:
       {
-        integrity: sha512-x5Y0+AuEPqAInc6yd0n5DAcvtoQ/vyaGwuX5HE9n6qAefk1GaedqrLQF8kQGylLUb9pnZyLf+iEiL9fr8APDtQ==,
+        integrity: sha512-ybUAvjy4ZCL11uryalkKxuT3w3sXJAuWhOoGS3T/Wu+iUu1tGJmk5ytSY8gbdACNARmcYEB0COksD2j6hfGK2g==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.44.0':
+  '@typescript-eslint/type-utils@8.47.0':
     resolution:
       {
-        integrity: sha512-9cwsoSxJ8Sak67Be/hD2RNt/fsqmWnNE1iHohG8lxqLSNY8xNfyY7wloo5zpW3Nu9hxVgURevqfcH6vvKCt6yg==,
+        integrity: sha512-QC9RiCmZ2HmIdCEvhd1aJELBlD93ErziOXXlHEZyuBo3tBiAZieya0HLIxp+DoDWlsQqDawyKuNEhORyku+P8A==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.44.0':
+  '@typescript-eslint/types@8.47.0':
     resolution:
       {
-        integrity: sha512-ZSl2efn44VsYM0MfDQe68RKzBz75NPgLQXuGypmym6QVOWL5kegTZuZ02xRAT9T+onqvM6T8CdQk0OwYMB6ZvA==,
+        integrity: sha512-nHAE6bMKsizhA2uuYZbEbmp5z2UpffNrPEqiKIeN7VsV6UY/roxanWfoRrf6x/k9+Obf+GQdkm0nPU+vnMXo9A==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@typescript-eslint/typescript-estree@8.44.0':
+  '@typescript-eslint/typescript-estree@8.47.0':
     resolution:
       {
-        integrity: sha512-lqNj6SgnGcQZwL4/SBJ3xdPEfcBuhCG8zdcwCPgYcmiPLgokiNDKlbPzCwEwu7m279J/lBYWtDYL+87OEfn8Jw==,
+        integrity: sha512-k6ti9UepJf5NpzCjH31hQNLHQWupTRPhZ+KFF8WtTuTpy7uHPfeg2NM7cP27aCGajoEplxJDFVCEm9TGPYyiVg==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.44.0':
+  '@typescript-eslint/utils@8.47.0':
     resolution:
       {
-        integrity: sha512-nktOlVcg3ALo0mYlV+L7sWUD58KG4CMj1rb2HUVOO4aL3K/6wcD+NERqd0rrA5Vg06b42YhF6cFxeixsp9Riqg==,
+        integrity: sha512-g7XrNf25iL4TJOiPqatNuaChyqt49a/onq5YsJ9+hXeugK+41LVg7AxikMfM02PC6jbNtZLCJj6AUcQXJS/jGQ==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.44.0':
+  '@typescript-eslint/visitor-keys@8.47.0':
     resolution:
       {
-        integrity: sha512-zaz9u8EJ4GBmnehlrpoKvj/E3dNbuQ7q0ucyZImm3cLqJ8INTc970B1qEqDX/Rzq65r3TvVTN7kHWPBoyW7DWw==,
+        integrity: sha512-SIV3/6eftCy1bNzCQoPmbWsRLujS8t5iDIZ4spZOBHqrM+yfX2ogg8Tt3PDTAVKw3sSCiUgg30uOAvK2r9zGjQ==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  '@vitejs/plugin-react@4.7.0':
+  '@vitejs/plugin-react-swc@3.11.0':
     resolution:
       {
-        integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==,
+        integrity: sha512-YTJCGFdNMHCMfjODYtxRNVAYmTWQ1Lb8PulP/2/f/oEEtglw8oKxKIZmmRkyXrVrHfsKOaVkAc3NT9/dMutO5w==,
       }
-    engines: { node: ^14.18.0 || >=16.0.0 }
     peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: ^4 || ^5 || ^6 || ^7
 
   '@vitest/coverage-v8@3.2.4':
     resolution:
@@ -2033,12 +2829,6 @@ packages:
         integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==,
       }
 
-  '@yr/monotone-cubic-spline@1.0.3':
-    resolution:
-      {
-        integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==,
-      }
-
   accepts@2.0.0:
     resolution:
       {
@@ -2089,10 +2879,10 @@ packages:
         integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==,
       }
 
-  ansi-escapes@7.1.0:
+  ansi-escapes@7.2.0:
     resolution:
       {
-        integrity: sha512-YdhtCd19sKRKfAAUsrcC1wzm4JuzJoiX4pOJqIoW2qmKj5WzG/dL8uUJ0361zaXtHqK7gEhOwtAtz7t3Yq3X5g==,
+        integrity: sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==,
       }
     engines: { node: '>=18' }
 
@@ -2138,12 +2928,6 @@ packages:
       }
     engines: { node: '>= 8' }
 
-  apexcharts@4.7.0:
-    resolution:
-      {
-        integrity: sha512-iZSrrBGvVlL+nt2B1NpqfDuBZ9jX61X9I2+XV0hlYXHtTwhwLTHDKGXjNXAgFBDLuvSYCB/rq2nPWVPRv2DrGA==,
-      }
-
   append-transform@2.0.0:
     resolution:
       {
@@ -2175,6 +2959,13 @@ packages:
         integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==,
       }
 
+  aria-hidden@1.2.6:
+    resolution:
+      {
+        integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==,
+      }
+    engines: { node: '>=10' }
+
   aria-query@5.1.3:
     resolution:
       {
@@ -2256,10 +3047,10 @@ packages:
         integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==,
       }
 
-  ast-v8-to-istanbul@0.3.5:
+  ast-v8-to-istanbul@0.3.8:
     resolution:
       {
-        integrity: sha512-9SdXjNheSiE8bALAQCQQuT6fgQaoxJh7IRYrRGZ8/9nv8WhJeC1aXAwN8TbaOssGOukUvyvnkgD9+Yuykvl1aA==,
+        integrity: sha512-szgSZqUxI5T8mLKvS7WTjF9is+MVbOeLADU73IseOcrqhxr/VAvy6wfoVE39KnKzA7JRhjF5eUagNlHwvZPlKQ==,
       }
 
   async-function@1.0.0:
@@ -2281,10 +3072,10 @@ packages:
         integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==,
       }
 
-  autoprefixer@10.4.21:
+  autoprefixer@10.4.22:
     resolution:
       {
-        integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==,
+        integrity: sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==,
       }
     engines: { node: ^10 || ^12 || >=14 }
     hasBin: true
@@ -2298,17 +3089,17 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
-  axe-core@4.10.3:
+  axe-core@4.11.0:
     resolution:
       {
-        integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==,
+        integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==,
       }
     engines: { node: '>=4' }
 
-  axios@1.12.2:
+  axios@1.13.2:
     resolution:
       {
-        integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==,
+        integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==,
       }
 
   axobject-query@4.1.0:
@@ -2318,30 +3109,16 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
-  babel-plugin-macros@3.1.0:
-    resolution:
-      {
-        integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==,
-      }
-    engines: { node: '>=10', npm: '>=6' }
-
   balanced-match@1.0.2:
     resolution:
       {
         integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==,
       }
 
-  baseline-browser-mapping@2.8.28:
-    resolution:
-      {
-        integrity: sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==,
-      }
-    hasBin: true
-
-  baseline-browser-mapping@2.8.4:
+  baseline-browser-mapping@2.8.30:
     resolution:
       {
-        integrity: sha512-L+YvJwGAgwJBV1p6ffpSTa2KRc69EeeYGYjRVWKs0GKrK+LON0GC0gV+rKSNtALEDvMDqkvCFq9r1r94/Gjwxw==,
+        integrity: sha512-aTUKW4ptQhS64+v2d6IkPzymEzzhw+G0bA1g3uBRV3+ntkH+svttKseW5IOR4Ed6NUVKqnY7qT3dKvzQ7io4AA==,
       }
     hasBin: true
 
@@ -2384,10 +3161,10 @@ packages:
       }
     engines: { node: '>=8' }
 
-  browserslist@4.26.2:
+  browserslist@4.28.0:
     resolution:
       {
-        integrity: sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==,
+        integrity: sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==,
       }
     engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
     hasBin: true
@@ -2455,10 +3232,10 @@ packages:
       }
     engines: { node: '>=6' }
 
-  caniuse-lite@1.0.30001743:
+  caniuse-lite@1.0.30001756:
     resolution:
       {
-        integrity: sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==,
+        integrity: sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==,
       }
 
   chai@5.3.3:
@@ -2514,12 +3291,11 @@ packages:
       }
     engines: { node: '>= 8.10.0' }
 
-  chownr@3.0.0:
+  class-variance-authority@0.7.1:
     resolution:
       {
-        integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==,
+        integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==,
       }
-    engines: { node: '>=18' }
 
   clean-stack@2.2.0:
     resolution:
@@ -2548,6 +3324,13 @@ packages:
         integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==,
       }
 
+  clsx@2.1.1:
+    resolution:
+      {
+        integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==,
+      }
+    engines: { node: '>=6' }
+
   cluster-key-slot@1.1.2:
     resolution:
       {
@@ -2555,11 +3338,14 @@ packages:
       }
     engines: { node: '>=0.10.0' }
 
-  color-convert@1.9.3:
+  cmdk@1.1.1:
     resolution:
       {
-        integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==,
+        integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==,
       }
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
 
   color-convert@2.0.1:
     resolution:
@@ -2568,11 +3354,12 @@ packages:
       }
     engines: { node: '>=7.0.0' }
 
-  color-name@1.1.3:
+  color-convert@3.1.3:
     resolution:
       {
-        integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==,
+        integrity: sha512-fasDH2ont2GqF5HpyO4w0+BcewlhHEZOFn9c1ckZdHpJ56Qb7MHhH/IcJZbBGgvdtwdwNbLvxiBEdg336iA9Sg==,
       }
+    engines: { node: '>=14.6' }
 
   color-name@1.1.4:
     resolution:
@@ -2580,28 +3367,31 @@ packages:
         integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==,
       }
 
-  color-string@1.9.1:
+  color-name@2.1.0:
     resolution:
       {
-        integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==,
+        integrity: sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg==,
       }
+    engines: { node: '>=12.20' }
 
-  color@3.2.1:
+  color-string@2.1.4:
     resolution:
       {
-        integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==,
+        integrity: sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg==,
       }
+    engines: { node: '>=18' }
 
-  colorette@2.0.20:
+  color@5.0.3:
     resolution:
       {
-        integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==,
+        integrity: sha512-ezmVcLR3xAVp8kYOm4GS45ZLLgIE6SPAFoduLr6hTDajwb3KZ2F46gulK3XpcwRFb5KKGCSezCBAY4Dw4HsyXA==,
       }
+    engines: { node: '>=18' }
 
-  colorspace@1.1.4:
+  colorette@2.0.20:
     resolution:
       {
-        integrity: sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==,
+        integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==,
       }
 
   combined-stream@1.0.8:
@@ -2643,12 +3433,12 @@ packages:
         integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==,
       }
 
-  content-disposition@1.0.0:
+  content-disposition@1.0.1:
     resolution:
       {
-        integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==,
+        integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==,
       }
-    engines: { node: '>= 0.6' }
+    engines: { node: '>=18' }
 
   content-type@1.0.5:
     resolution:
@@ -2696,13 +3486,6 @@ packages:
       }
     engines: { node: '>= 0.10' }
 
-  cosmiconfig@7.1.0:
-    resolution:
-      {
-        integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==,
-      }
-    engines: { node: '>=10' }
-
   create-require@1.1.1:
     resolution:
       {
@@ -2729,11 +3512,88 @@ packages:
       }
     engines: { node: '>=18' }
 
-  csstype@3.1.3:
+  csstype@3.2.3:
+    resolution:
+      {
+        integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==,
+      }
+
+  d3-array@3.2.4:
+    resolution:
+      {
+        integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==,
+      }
+    engines: { node: '>=12' }
+
+  d3-color@3.1.0:
+    resolution:
+      {
+        integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==,
+      }
+    engines: { node: '>=12' }
+
+  d3-ease@3.0.1:
+    resolution:
+      {
+        integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==,
+      }
+    engines: { node: '>=12' }
+
+  d3-format@3.1.0:
     resolution:
       {
-        integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==,
+        integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==,
       }
+    engines: { node: '>=12' }
+
+  d3-interpolate@3.0.1:
+    resolution:
+      {
+        integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==,
+      }
+    engines: { node: '>=12' }
+
+  d3-path@3.1.0:
+    resolution:
+      {
+        integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==,
+      }
+    engines: { node: '>=12' }
+
+  d3-scale@4.0.2:
+    resolution:
+      {
+        integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==,
+      }
+    engines: { node: '>=12' }
+
+  d3-shape@3.2.0:
+    resolution:
+      {
+        integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==,
+      }
+    engines: { node: '>=12' }
+
+  d3-time-format@4.1.0:
+    resolution:
+      {
+        integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==,
+      }
+    engines: { node: '>=12' }
+
+  d3-time@3.1.0:
+    resolution:
+      {
+        integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==,
+      }
+    engines: { node: '>=12' }
+
+  d3-timer@3.0.1:
+    resolution:
+      {
+        integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==,
+      }
+    engines: { node: '>=12' }
 
   damerau-levenshtein@1.0.8:
     resolution:
@@ -2794,6 +3654,12 @@ packages:
       }
     engines: { node: '>=0.10.0' }
 
+  decimal.js-light@2.5.1:
+    resolution:
+      {
+        integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==,
+      }
+
   decimal.js@10.6.0:
     resolution:
       {
@@ -2875,20 +3741,18 @@ packages:
       }
     engines: { node: '>=6' }
 
-  detect-libc@1.0.3:
+  detect-libc@2.1.2:
     resolution:
       {
-        integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==,
+        integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==,
       }
-    engines: { node: '>=0.10' }
-    hasBin: true
+    engines: { node: '>=8' }
 
-  detect-libc@2.1.0:
+  detect-node-es@1.1.0:
     resolution:
       {
-        integrity: sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==,
+        integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==,
       }
-    engines: { node: '>=8' }
 
   devlop@1.1.0:
     resolution:
@@ -2968,16 +3832,38 @@ packages:
     engines: { node: '>=0.10.0' }
     hasBin: true
 
-  electron-to-chromium@1.5.220:
+  electron-to-chromium@1.5.259:
+    resolution:
+      {
+        integrity: sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==,
+      }
+
+  embla-carousel-react@8.6.0:
     resolution:
       {
-        integrity: sha512-TWXijEwR1ggr4BdAKrb1nMNqYLTx1/4aD1fkeZU+FVJGTKu53/T7UyHKXlqEX3Ub02csyHePbHmkvnrjcaYzMA==,
+        integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==,
+      }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution:
+      {
+        integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==,
+      }
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution:
+      {
+        integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==,
       }
 
-  emoji-regex@10.5.0:
+  emoji-regex@10.6.0:
     resolution:
       {
-        integrity: sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==,
+        integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==,
       }
 
   emoji-regex@8.0.0:
@@ -3005,10 +3891,10 @@ packages:
       }
     engines: { node: '>= 0.8' }
 
-  enhanced-resolve@5.18.3:
+  enhanced-resolve@5.18.4:
     resolution:
       {
-        integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==,
+        integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==,
       }
     engines: { node: '>=10.13.0' }
 
@@ -3033,12 +3919,6 @@ packages:
       }
     engines: { node: '>=18' }
 
-  error-ex@1.3.4:
-    resolution:
-      {
-        integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==,
-      }
-
   es-abstract@1.24.0:
     resolution:
       {
@@ -3113,10 +3993,10 @@ packages:
         integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==,
       }
 
-  esbuild@0.25.9:
+  esbuild@0.25.12:
     resolution:
       {
-        integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==,
+        integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==,
       }
     engines: { node: '>=18' }
     hasBin: true
@@ -3168,14 +4048,6 @@ packages:
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
 
-  eslint-plugin-react-refresh@0.4.20:
-    resolution:
-      {
-        integrity: sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==,
-      }
-    peerDependencies:
-      eslint: '>=8.40'
-
   eslint-plugin-react@7.37.5:
     resolution:
       {
@@ -3214,10 +4086,10 @@ packages:
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
-  eslint@9.35.0:
+  eslint@9.39.1:
     resolution:
       {
-        integrity: sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==,
+        integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     hasBin: true
@@ -3283,6 +4155,12 @@ packages:
       }
     engines: { node: '>= 0.6' }
 
+  eventemitter3@4.0.7:
+    resolution:
+      {
+        integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==,
+      }
+
   eventemitter3@5.0.1:
     resolution:
       {
@@ -3312,10 +4190,10 @@ packages:
     peerDependencies:
       express: '>= 4.11'
 
-  express-validator@7.2.1:
+  express-validator@7.3.1:
     resolution:
       {
-        integrity: sha512-CjNE6aakfpuwGaHQZ3m8ltCG2Qvivd7RHtVMS/6nVxOM7xVGqr4bhflsm4+N5FP5zI7Zxp+Hae+9RE+o8e3ZOQ==,
+        integrity: sha512-IGenaSf+DnWc69lKuqlRE9/i/2t5/16VpH5bXoqdxWz1aCpRvEdrBuu1y95i/iL5QP8ZYVATiwLFhwk3EDl5vg==,
       }
     engines: { node: '>= 8.0.0' }
 
@@ -3332,6 +4210,13 @@ packages:
         integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==,
       }
 
+  fast-equals@5.3.3:
+    resolution:
+      {
+        integrity: sha512-/boTcHZeIAQ2r/tL11voclBHDeP9WPxLt+tyAbVSyyXuUFyh0Tne7gJZTqGbxnvj79TjLdCXLOY7UIPhyG5MTw==,
+      }
+    engines: { node: '>=6.0.0' }
+
   fast-glob@3.3.3:
     resolution:
       {
@@ -3427,12 +4312,6 @@ packages:
       }
     engines: { node: '>=8' }
 
-  find-root@1.1.0:
-    resolution:
-      {
-        integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==,
-      }
-
   find-up@4.1.0:
     resolution:
       {
@@ -3499,10 +4378,10 @@ packages:
       }
     engines: { node: '>=14' }
 
-  form-data@4.0.4:
+  form-data@4.0.5:
     resolution:
       {
-        integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==,
+        integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==,
       }
     engines: { node: '>= 6' }
 
@@ -3520,12 +4399,29 @@ packages:
       }
     engines: { node: '>= 0.6' }
 
-  fraction.js@4.3.7:
+  fraction.js@5.3.4:
     resolution:
       {
-        integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==,
+        integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==,
       }
 
+  framer-motion@12.23.24:
+    resolution:
+      {
+        integrity: sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==,
+      }
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fresh@2.0.0:
     resolution:
       {
@@ -3578,6 +4474,13 @@ packages:
         integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==,
       }
 
+  generator-function@2.0.1:
+    resolution:
+      {
+        integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==,
+      }
+    engines: { node: '>= 0.4' }
+
   gensync@1.0.0-beta.2:
     resolution:
       {
@@ -3606,6 +4509,13 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  get-nonce@1.0.1:
+    resolution:
+      {
+        integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==,
+      }
+    engines: { node: '>=6' }
+
   get-package-type@0.1.0:
     resolution:
       {
@@ -3634,10 +4544,10 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
-  get-tsconfig@4.10.1:
+  get-tsconfig@4.13.0:
     resolution:
       {
-        integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==,
+        integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==,
       }
 
   glob-parent@5.1.2:
@@ -3654,10 +4564,10 @@ packages:
       }
     engines: { node: '>=10.13.0' }
 
-  glob@10.4.5:
+  glob@10.5.0:
     resolution:
       {
-        integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==,
+        integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==,
       }
     hasBin: true
 
@@ -3784,12 +4694,6 @@ packages:
       }
     engines: { node: '>=18.0.0' }
 
-  hoist-non-react-statics@3.3.2:
-    resolution:
-      {
-        integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==,
-      }
-
   html-encoding-sniffer@4.0.0:
     resolution:
       {
@@ -3803,10 +4707,10 @@ packages:
         integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==,
       }
 
-  http-errors@2.0.0:
+  http-errors@2.0.1:
     resolution:
       {
-        integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==,
+        integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==,
       }
     engines: { node: '>= 0.8' }
 
@@ -3907,6 +4811,15 @@ packages:
         integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==,
       }
 
+  input-otp@1.4.2:
+    resolution:
+      {
+        integrity: sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==,
+      }
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   internal-slot@1.1.0:
     resolution:
       {
@@ -3914,10 +4827,17 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
-  ioredis@5.7.0:
+  internmap@2.0.3:
+    resolution:
+      {
+        integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==,
+      }
+    engines: { node: '>=12' }
+
+  ioredis@5.8.2:
     resolution:
       {
-        integrity: sha512-NUcA93i1lukyXU+riqEyPtSEkyFq8tX90uL659J+qpCZ3rEdViB/APC58oAhIh3+bJln2hzdlZbBZsGNrlsR8g==,
+        integrity: sha512-C6uC+kleiIMmjViJINWk80sOQw5lEzse1ZmvD+S/s8p8CWapftSaC+kocGTx6xrbrJ4WmYQGC08ffHLr6ToR6Q==,
       }
     engines: { node: '>=12.22.0' }
 
@@ -3943,28 +4863,16 @@ packages:
   is-arguments@1.2.0:
     resolution:
       {
-        integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==,
-      }
-    engines: { node: '>= 0.4' }
-
-  is-array-buffer@3.0.5:
-    resolution:
-      {
-        integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==,
-      }
-    engines: { node: '>= 0.4' }
-
-  is-arrayish@0.2.1:
-    resolution:
-      {
-        integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==,
+        integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==,
       }
+    engines: { node: '>= 0.4' }
 
-  is-arrayish@0.3.4:
+  is-array-buffer@3.0.5:
     resolution:
       {
-        integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==,
+        integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==,
       }
+    engines: { node: '>= 0.4' }
 
   is-async-function@2.1.1:
     resolution:
@@ -4063,10 +4971,10 @@ packages:
       }
     engines: { node: '>=18' }
 
-  is-generator-function@1.1.0:
+  is-generator-function@1.1.2:
     resolution:
       {
-        integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==,
+        integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==,
       }
     engines: { node: '>= 0.4' }
 
@@ -4302,10 +5210,10 @@ packages:
     engines: { node: '>=10' }
     hasBin: true
 
-  jiti@2.5.1:
+  jiti@2.6.1:
     resolution:
       {
-        integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==,
+        integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==,
       }
     hasBin: true
 
@@ -4321,10 +5229,10 @@ packages:
         integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==,
       }
 
-  js-yaml@3.14.1:
+  js-yaml@3.14.2:
     resolution:
       {
-        integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==,
+        integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==,
       }
     hasBin: true
 
@@ -4335,6 +5243,13 @@ packages:
       }
     hasBin: true
 
+  js-yaml@4.1.1:
+    resolution:
+      {
+        integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==,
+      }
+    hasBin: true
+
   jsdom@26.1.0:
     resolution:
       {
@@ -4361,12 +5276,6 @@ packages:
         integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==,
       }
 
-  json-parse-even-better-errors@2.3.1:
-    resolution:
-      {
-        integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==,
-      }
-
   json-schema-traverse@0.4.1:
     resolution:
       {
@@ -4413,10 +5322,10 @@ packages:
         integrity: sha512-JWGwikqKm6gfsZsOabhnhLapTXEtlxYixLQmrkjKvr9BQBBnyceJe7ZS9YBDF6rw+4FNv76ZZD65f5ovrRDuTQ==,
       }
 
-  katex@0.16.22:
+  katex@0.16.25:
     resolution:
       {
-        integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==,
+        integrity: sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==,
       }
     hasBin: true
 
@@ -4452,100 +5361,109 @@ packages:
       }
     engines: { node: '>= 0.8.0' }
 
-  lightningcss-darwin-arm64@1.30.1:
+  lightningcss-android-arm64@1.30.2:
+    resolution:
+      {
+        integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==,
+      }
+    engines: { node: '>= 12.0.0' }
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
     resolution:
       {
-        integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==,
+        integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.30.1:
+  lightningcss-darwin-x64@1.30.2:
     resolution:
       {
-        integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==,
+        integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.30.1:
+  lightningcss-freebsd-x64@1.30.2:
     resolution:
       {
-        integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==,
+        integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.30.1:
+  lightningcss-linux-arm-gnueabihf@1.30.2:
     resolution:
       {
-        integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==,
+        integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.30.1:
+  lightningcss-linux-arm64-gnu@1.30.2:
     resolution:
       {
-        integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==,
+        integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-arm64-musl@1.30.1:
+  lightningcss-linux-arm64-musl@1.30.2:
     resolution:
       {
-        integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==,
+        integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-x64-gnu@1.30.1:
+  lightningcss-linux-x64-gnu@1.30.2:
     resolution:
       {
-        integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==,
+        integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [x64]
     os: [linux]
 
-  lightningcss-linux-x64-musl@1.30.1:
+  lightningcss-linux-x64-musl@1.30.2:
     resolution:
       {
-        integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==,
+        integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [x64]
     os: [linux]
 
-  lightningcss-win32-arm64-msvc@1.30.1:
+  lightningcss-win32-arm64-msvc@1.30.2:
     resolution:
       {
-        integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==,
+        integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.30.1:
+  lightningcss-win32-x64-msvc@1.30.2:
     resolution:
       {
-        integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==,
+        integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==,
       }
     engines: { node: '>= 12.0.0' }
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.30.1:
+  lightningcss@1.30.2:
     resolution:
       {
-        integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==,
+        integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==,
       }
     engines: { node: '>= 12.0.0' }
 
@@ -4556,12 +5474,6 @@ packages:
       }
     engines: { node: '>=14' }
 
-  lines-and-columns@1.2.4:
-    resolution:
-      {
-        integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==,
-      }
-
   linkify-it@5.0.0:
     resolution:
       {
@@ -4666,6 +5578,14 @@ packages:
         integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==,
       }
 
+  lucide-react@0.487.0:
+    resolution:
+      {
+        integrity: sha512-aKqhOQ+YmFnwq8dWgGjOuLc8V1R9/c/yOd+zDY4+ohsR2Jo05lSGc3WsstYPIzcTpeosN7LoCkLReUUITvaIvw==,
+      }
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   lz-string@1.5.0:
     resolution:
       {
@@ -4673,10 +5593,10 @@ packages:
       }
     hasBin: true
 
-  magic-string@0.30.19:
+  magic-string@0.30.21:
     resolution:
       {
-        integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==,
+        integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==,
       }
 
   magicast@0.3.5:
@@ -4755,18 +5675,6 @@ packages:
       }
     engines: { node: '>= 0.8' }
 
-  memoize-one@5.2.1:
-    resolution:
-      {
-        integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==,
-      }
-
-  memoize-one@6.0.0:
-    resolution:
-      {
-        integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==,
-      }
-
   merge-descriptors@2.0.0:
     resolution:
       {
@@ -4972,12 +5880,12 @@ packages:
       }
     engines: { node: '>= 0.6' }
 
-  mime-types@3.0.1:
+  mime-types@3.0.2:
     resolution:
       {
-        integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==,
+        integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==,
       }
-    engines: { node: '>= 0.6' }
+    engines: { node: '>=18' }
 
   mime@2.6.0:
     resolution:
@@ -5041,33 +5949,40 @@ packages:
       }
     engines: { node: '>=16 || 14 >=14.17' }
 
-  minizlib@3.0.2:
+  moment@2.30.1:
     resolution:
       {
-        integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==,
+        integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==,
       }
-    engines: { node: '>= 18' }
 
-  mkdirp@3.0.1:
+  motion-dom@12.23.23:
     resolution:
       {
-        integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==,
+        integrity: sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==,
       }
-    engines: { node: '>=10' }
-    hasBin: true
 
-  moment@2.30.1:
+  motion-utils@12.23.6:
     resolution:
       {
-        integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==,
+        integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==,
       }
 
-  mri@1.2.0:
+  motion@12.23.24:
     resolution:
       {
-        integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==,
+        integrity: sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==,
       }
-    engines: { node: '>=4' }
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
 
   mrmime@2.0.1:
     resolution:
@@ -5090,10 +6005,10 @@ packages:
     engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
     hasBin: true
 
-  nanoid@5.1.5:
+  nanoid@5.1.6:
     resolution:
       {
-        integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==,
+        integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==,
       }
     engines: { node: ^18 || >=20 }
     hasBin: true
@@ -5111,11 +6026,14 @@ packages:
       }
     engines: { node: '>= 0.6' }
 
-  node-addon-api@7.1.1:
+  next-themes@0.4.6:
     resolution:
       {
-        integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==,
+        integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==,
       }
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
   node-preload@0.2.1:
     resolution:
@@ -5124,16 +6042,16 @@ packages:
       }
     engines: { node: '>=8' }
 
-  node-releases@2.0.21:
+  node-releases@2.0.27:
     resolution:
       {
-        integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==,
+        integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==,
       }
 
-  nodemon@3.1.10:
+  nodemon@3.1.11:
     resolution:
       {
-        integrity: sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==,
+        integrity: sha512-is96t8F/1//UHAjNPHpbsNY46ELPpftGUoSVNXwUfMk/qdjSylYrWSu1XavVTBOn526kFiOR733ATgNBCQyH0g==,
       }
     engines: { node: '>=10' }
     hasBin: true
@@ -5351,13 +6269,6 @@ packages:
         integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==,
       }
 
-  parse-json@5.2.0:
-    resolution:
-      {
-        integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==,
-      }
-    engines: { node: '>=8' }
-
   parse5@7.3.0:
     resolution:
       {
@@ -5418,13 +6329,6 @@ packages:
         integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==,
       }
 
-  path-type@4.0.0:
-    resolution:
-      {
-        integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==,
-      }
-    engines: { node: '>=8' }
-
   path-type@5.0.0:
     resolution:
       {
@@ -5595,29 +6499,21 @@ packages:
       }
     engines: { node: '>= 0.6' }
 
-  raw-body@3.0.1:
+  raw-body@3.0.2:
     resolution:
       {
-        integrity: sha512-9G8cA+tuMS75+6G/TzW8OtLzmBDMo8p1JRxN5AZ+LAp8uxGA8V8GZm4GQ4/N5QNQEnLmg6SS7wyuSmbKepiKqA==,
+        integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==,
       }
     engines: { node: '>= 0.10' }
 
-  react-apexcharts@1.7.0:
-    resolution:
-      {
-        integrity: sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==,
-      }
-    peerDependencies:
-      apexcharts: '>=4.0.0'
-      react: '>=0.13'
-
-  react-calendar-heatmap@1.10.0:
+  react-day-picker@8.10.1:
     resolution:
       {
-        integrity: sha512-e5vcrzMWzKIF710egr1FpjWyuDEFeZm39nvV25muc8Wtqqi8iDOfqREELeQ9Wouqf9hhj939gq0i+iAxo7KdSw==,
+        integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==,
       }
     peerDependencies:
-      react: '>=0.14.0'
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
   react-dom@18.3.1:
     resolution:
@@ -5627,13 +6523,14 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
-  react-dom@19.1.1:
+  react-hook-form@7.66.1:
     resolution:
       {
-        integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==,
+        integrity: sha512-2KnjpgG2Rhbi+CIiIBQQ9Df6sMGH5ExNyFl4Hw9qO7pIqMBR8Bvu9RQyjl3JM4vehzCh9soiNUM/xYMswb2EiA==,
       }
+    engines: { node: '>=18.0.0' }
     peerDependencies:
-      react: ^19.1.1
+      react: ^16.8.0 || ^17 || ^18 || ^19
 
   react-is@16.13.1:
     resolution:
@@ -5647,22 +6544,69 @@ packages:
         integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==,
       }
 
-  react-refresh@0.17.0:
+  react-is@18.3.1:
     resolution:
       {
-        integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==,
+        integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==,
       }
-    engines: { node: '>=0.10.0' }
 
-  react-select@5.10.2:
+  react-remove-scroll-bar@2.3.8:
+    resolution:
+      {
+        integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.1:
+    resolution:
+      {
+        integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-resizable-panels@2.1.9:
+    resolution:
+      {
+        integrity: sha512-z77+X08YDIrgAes4jl8xhnUu1LNIRp4+E7cv4xHmLOxxUPO/ML7PSrE813b90vj7xvQ1lcf7g2uA9GeMZonjhQ==,
+      }
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  react-smooth@4.0.4:
     resolution:
       {
-        integrity: sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ==,
+        integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==,
       }
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-style-singleton@2.2.3:
+    resolution:
+      {
+        integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-transition-group@4.4.5:
     resolution:
       {
@@ -5679,13 +6623,6 @@ packages:
       }
     engines: { node: '>=0.10.0' }
 
-  react@19.1.1:
-    resolution:
-      {
-        integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==,
-      }
-    engines: { node: '>=0.10.0' }
-
   readable-stream@3.6.2:
     resolution:
       {
@@ -5700,6 +6637,22 @@ packages:
       }
     engines: { node: '>=8.10.0' }
 
+  recharts-scale@0.4.5:
+    resolution:
+      {
+        integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==,
+      }
+
+  recharts@2.15.4:
+    resolution:
+      {
+        integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==,
+      }
+    engines: { node: '>=14' }
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   redent@3.0.0:
     resolution:
       {
@@ -5789,14 +6742,6 @@ packages:
         integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==,
       }
 
-  resolve@1.22.10:
-    resolution:
-      {
-        integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==,
-      }
-    engines: { node: '>= 0.4' }
-    hasBin: true
-
   resolve@2.0.0-next.5:
     resolution:
       {
@@ -5839,10 +6784,10 @@ packages:
       }
     hasBin: true
 
-  rollup@4.50.2:
+  rollup@4.53.3:
     resolution:
       {
-        integrity: sha512-BgLRGy7tNS9H66aIMASq1qSYbAAJV6Z6WR4QYTvj5FgF15rZ/ympT1uixHXwzbZUBDbkvqUI1KR0fH1FhMaQ9w==,
+        integrity: sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==,
       }
     engines: { node: '>=18.0.0', npm: '>=8.0.0' }
     hasBin: true
@@ -5919,12 +6864,6 @@ packages:
         integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==,
       }
 
-  scheduler@0.26.0:
-    resolution:
-      {
-        integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==,
-      }
-
   scslre@0.3.0:
     resolution:
       {
@@ -5947,6 +6886,14 @@ packages:
     engines: { node: '>=10' }
     hasBin: true
 
+  semver@7.7.3:
+    resolution:
+      {
+        integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==,
+      }
+    engines: { node: '>=10' }
+    hasBin: true
+
   send@1.2.0:
     resolution:
       {
@@ -6055,16 +7002,10 @@ packages:
       }
     engines: { node: '>=14' }
 
-  simple-git@3.28.0:
-    resolution:
-      {
-        integrity: sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==,
-      }
-
-  simple-swizzle@0.2.4:
+  simple-git@3.30.0:
     resolution:
       {
-        integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==,
+        integrity: sha512-q6lxyDsCmEal/MEGhP1aVyQ3oxnagGlBDOVSIB4XUVLl1iZh0Pah6ebC9V4xBap/RfgP2WlI8EKs0WS0rMEJHg==,
       }
 
   simple-update-notifier@2.0.0:
@@ -6102,17 +7043,19 @@ packages:
       }
     engines: { node: '>=18' }
 
-  source-map-js@1.2.1:
+  sonner@2.0.7:
     resolution:
       {
-        integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==,
+        integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==,
       }
-    engines: { node: '>=0.10.0' }
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
 
-  source-map@0.5.7:
+  source-map-js@1.2.1:
     resolution:
       {
-        integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==,
+        integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==,
       }
     engines: { node: '>=0.10.0' }
 
@@ -6154,13 +7097,6 @@ packages:
         integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==,
       }
 
-  statuses@2.0.1:
-    resolution:
-      {
-        integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==,
-      }
-    engines: { node: '>= 0.8' }
-
   statuses@2.0.2:
     resolution:
       {
@@ -6168,10 +7104,10 @@ packages:
       }
     engines: { node: '>= 0.8' }
 
-  std-env@3.9.0:
+  std-env@3.10.0:
     resolution:
       {
-        integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==,
+        integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==,
       }
 
   stop-iteration-iterator@1.1.0:
@@ -6305,16 +7241,10 @@ packages:
       }
     engines: { node: '>=8' }
 
-  strip-literal@3.0.0:
-    resolution:
-      {
-        integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==,
-      }
-
-  stylis@4.2.0:
+  strip-literal@3.1.0:
     resolution:
       {
-        integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==,
+        integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==,
       }
 
   superagent@10.2.3:
@@ -6358,25 +7288,30 @@ packages:
         integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==,
       }
 
-  tailwindcss@4.1.13:
+  tailwind-merge@3.4.0:
     resolution:
       {
-        integrity: sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==,
+        integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==,
       }
 
-  tapable@2.2.3:
+  tailwindcss@4.1.17:
     resolution:
       {
-        integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==,
+        integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==,
       }
-    engines: { node: '>=6' }
 
-  tar@7.4.3:
+  tailwindcss@4.1.18:
     resolution:
       {
-        integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==,
+        integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==,
       }
-    engines: { node: '>=18' }
+
+  tapable@2.3.0:
+    resolution:
+      {
+        integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==,
+      }
+    engines: { node: '>=6' }
 
   tdigest@0.1.2:
     resolution:
@@ -6404,6 +7339,12 @@ packages:
         integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==,
       }
 
+  tiny-invariant@1.3.3:
+    resolution:
+      {
+        integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==,
+      }
+
   tinybench@2.9.0:
     resolution:
       {
@@ -6437,10 +7378,10 @@ packages:
       }
     engines: { node: '>=14.0.0' }
 
-  tinyspy@4.0.3:
+  tinyspy@4.0.4:
     resolution:
       {
-        integrity: sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==,
+        integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==,
       }
     engines: { node: '>=14.0.0' }
 
@@ -6539,10 +7480,16 @@ packages:
       }
     engines: { node: '>=6' }
 
-  tsx@4.20.5:
+  tslib@2.8.1:
+    resolution:
+      {
+        integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==,
+      }
+
+  tsx@4.20.6:
     resolution:
       {
-        integrity: sha512-+wKjMNU9w/EaQayHXb7WA7ZaHY6hN8WgfvHNQ3t1PnU91/7O8TcTnIhCDYTZwnt8JsO9IBqZ30Ln1r7pPF52Aw==,
+        integrity: sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==,
       }
     engines: { node: '>=18.0.0' }
     hasBin: true
@@ -6602,10 +7549,10 @@ packages:
         integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==,
       }
 
-  typescript-eslint@8.44.0:
+  typescript-eslint@8.47.0:
     resolution:
       {
-        integrity: sha512-ib7mCkYuIzYonCq9XWF5XNw+fkj2zg629PSa9KNIQ47RXFF763S5BIX4wqz1+FLPogTZoiw8KmCiRPRa8bL3qw==,
+        integrity: sha512-Lwe8i2XQ3WoMjua/r1PHrCTpkubPYJCAfOurtn+mtTzqB6jNd+14n9UN1bJ4s3F49x9ixAm0FLflB/JzQ57M8Q==,
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
     peerDependencies:
@@ -6659,10 +7606,10 @@ packages:
       }
     engines: { node: '>= 0.8' }
 
-  update-browserslist-db@1.1.3:
+  update-browserslist-db@1.1.4:
     resolution:
       {
-        integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==,
+        integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==,
       }
     hasBin: true
     peerDependencies:
@@ -6674,18 +7621,40 @@ packages:
         integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==,
       }
 
-  use-isomorphic-layout-effect@1.2.1:
+  use-callback-ref@1.3.3:
     resolution:
       {
-        integrity: sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==,
+        integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==,
       }
+    engines: { node: '>=10' }
     peerDependencies:
       '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
+  use-sidecar@1.1.3:
+    resolution:
+      {
+        integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution:
+      {
+        integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==,
+      }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution:
       {
@@ -6705,10 +7674,10 @@ packages:
         integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==,
       }
 
-  validator@13.12.0:
+  validator@13.15.23:
     resolution:
       {
-        integrity: sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==,
+        integrity: sha512-4yoz1kEWqUjzi5zsPbAS/903QXSYp0UOtHsPpp7p9rHAw/W+dkInskAE386Fat3oKRROwO98d9ZB0G4cObgUyw==,
       }
     engines: { node: '>= 0.10' }
 
@@ -6719,6 +7688,21 @@ packages:
       }
     engines: { node: '>= 0.8' }
 
+  vaul@1.1.2:
+    resolution:
+      {
+        integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==,
+      }
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
+  victory-vendor@36.9.2:
+    resolution:
+      {
+        integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==,
+      }
+
   vite-node@3.2.4:
     resolution:
       {
@@ -6727,10 +7711,10 @@ packages:
     engines: { node: ^18.0.0 || ^20.0.0 || >=22.0.0 }
     hasBin: true
 
-  vite@6.3.6:
+  vite@6.3.5:
     resolution:
       {
-        integrity: sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==,
+        integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==,
       }
     engines: { node: ^18.0.0 || ^20.0.0 || >=22.0.0 }
     hasBin: true
@@ -6902,10 +7886,10 @@ packages:
       }
     engines: { node: '>= 12.0.0' }
 
-  winston@3.17.0:
+  winston@3.18.3:
     resolution:
       {
-        integrity: sha512-DLiFIXYC5fMPxaRg832S6F5mJYvePtmO5G9v9IgUFPhXm9/GkXarH/TUrBAVzhTCzAj9anE/+GjrgXp/54nOgw==,
+        integrity: sha512-NoBZauFNNWENgsnC9YpgyYwOVrl2m58PpQ8lNHjV3kosGs7KJ7Npk9pCUE+WJlawVSe8mykWDKWFSVfs3QO9ww==,
       }
     engines: { node: '>= 12.0.0' }
 
@@ -6996,20 +7980,6 @@ packages:
         integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==,
       }
 
-  yallist@5.0.0:
-    resolution:
-      {
-        integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==,
-      }
-    engines: { node: '>=18' }
-
-  yaml@1.10.2:
-    resolution:
-      {
-        integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==,
-      }
-    engines: { node: '>= 6' }
-
   yaml@2.8.1:
     resolution:
       {
@@ -7072,23 +8042,23 @@ snapshots:
 
   '@babel/code-frame@7.27.1':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.28.4': {}
+  '@babel/compat-data@7.28.5': {}
 
-  '@babel/core@7.28.4':
+  '@babel/core@7.28.5':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
+      '@babel/generator': 7.28.5
       '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
       '@babel/helpers': 7.28.4
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
       debug: 4.4.3(supports-color@5.5.0)
@@ -7098,19 +8068,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.28.3':
+  '@babel/generator@7.28.5':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
   '@babel/helper-compilation-targets@7.27.2':
     dependencies:
-      '@babel/compat-data': 7.28.4
+      '@babel/compat-data': 7.28.5
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.26.2
+      browserslist: 4.28.0
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -7118,71 +8088,59 @@ snapshots:
 
   '@babel/helper-module-imports@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.4)':
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-plugin-utils@7.27.1': {}
-
   '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.27.1': {}
+  '@babel/helper-validator-identifier@7.28.5': {}
 
   '@babel/helper-validator-option@7.27.1': {}
 
   '@babel/helpers@7.28.4':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.4
-
-  '@babel/parser@7.28.4':
-    dependencies:
-      '@babel/types': 7.28.4
-
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.4)':
-    dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/types': 7.28.5
 
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.4)':
+  '@babel/parser@7.28.5':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/types': 7.28.5
 
   '@babel/runtime@7.28.4': {}
 
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
 
-  '@babel/traverse@7.28.4':
+  '@babel/traverse@7.28.5':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
+      '@babel/generator': 7.28.5
       '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
       debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.28.4':
+  '@babel/types@7.28.5':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
 
   '@bcoe/v8-coverage@1.0.2': {}
 
@@ -7194,190 +8152,130 @@ snapshots:
 
   '@csstools/color-helpers@5.1.0': {}
 
-  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-tokenizer': 3.0.4
-
-  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
-    dependencies:
-      '@csstools/color-helpers': 5.1.0
-      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-tokenizer': 3.0.4
-
-  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
-    dependencies:
-      '@csstools/css-tokenizer': 3.0.4
-
-  '@csstools/css-tokenizer@3.0.4': {}
-
-  '@dabh/diagnostics@2.0.3':
-    dependencies:
-      colorspace: 1.1.4
-      enabled: 2.0.0
-      kuler: 2.0.0
-
-  '@emotion/babel-plugin@11.13.5':
-    dependencies:
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/runtime': 7.28.4
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/serialize': 1.3.3
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/cache@11.14.0':
-    dependencies:
-      '@emotion/memoize': 0.9.0
-      '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.4.0
-      stylis: 4.2.0
-
-  '@emotion/hash@0.9.2': {}
-
-  '@emotion/memoize@0.9.0': {}
-
-  '@emotion/react@11.14.0(@types/react@19.1.13)(react@19.1.1)':
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@emotion/babel-plugin': 11.13.5
-      '@emotion/cache': 11.14.0
-      '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.1.1)
-      '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.4.0
-      hoist-non-react-statics: 3.3.2
-      react: 19.1.1
-    optionalDependencies:
-      '@types/react': 19.1.13
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/serialize@1.3.3':
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.2
-      csstype: 3.1.3
-
-  '@emotion/sheet@1.4.0': {}
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
 
-  '@emotion/unitless@0.10.0': {}
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.1.1)':
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
     dependencies:
-      react: 19.1.1
+      '@csstools/css-tokenizer': 3.0.4
 
-  '@emotion/utils@1.4.2': {}
+  '@csstools/css-tokenizer@3.0.4': {}
 
-  '@emotion/weak-memoize@0.4.0': {}
+  '@dabh/diagnostics@2.0.8':
+    dependencies:
+      '@so-ric/colorspace': 1.1.6
+      enabled: 2.0.0
+      kuler: 2.0.0
 
-  '@esbuild/aix-ppc64@0.25.9':
+  '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/android-arm64@0.25.9':
+  '@esbuild/android-arm64@0.25.12':
     optional: true
 
-  '@esbuild/android-arm@0.25.9':
+  '@esbuild/android-arm@0.25.12':
     optional: true
 
-  '@esbuild/android-x64@0.25.9':
+  '@esbuild/android-x64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.9':
+  '@esbuild/darwin-arm64@0.25.12':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.9':
+  '@esbuild/darwin-x64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.9':
+  '@esbuild/freebsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.9':
+  '@esbuild/freebsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.9':
+  '@esbuild/linux-arm64@0.25.12':
     optional: true
 
-  '@esbuild/linux-arm@0.25.9':
+  '@esbuild/linux-arm@0.25.12':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.9':
+  '@esbuild/linux-ia32@0.25.12':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.9':
+  '@esbuild/linux-loong64@0.25.12':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.9':
+  '@esbuild/linux-mips64el@0.25.12':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.9':
+  '@esbuild/linux-ppc64@0.25.12':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.9':
+  '@esbuild/linux-riscv64@0.25.12':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.9':
+  '@esbuild/linux-s390x@0.25.12':
     optional: true
 
-  '@esbuild/linux-x64@0.25.9':
+  '@esbuild/linux-x64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.9':
+  '@esbuild/netbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.9':
+  '@esbuild/netbsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.9':
+  '@esbuild/openbsd-arm64@0.25.12':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.9':
+  '@esbuild/openbsd-x64@0.25.12':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.25.9':
+  '@esbuild/openharmony-arm64@0.25.12':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.9':
+  '@esbuild/sunos-x64@0.25.12':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.9':
+  '@esbuild/win32-arm64@0.25.12':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.9':
+  '@esbuild/win32-ia32@0.25.12':
     optional: true
 
-  '@esbuild/win32-x64@0.25.9':
+  '@esbuild/win32-x64@0.25.12':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.35.0(jiti@2.5.1))':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@2.6.1))':
     dependencies:
-      eslint: 9.35.0(jiti@2.5.1)
+      eslint: 9.39.1(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/config-array@0.21.0':
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.1':
     dependencies:
-      '@eslint/object-schema': 2.1.6
+      '@eslint/object-schema': 2.1.7
       debug: 4.4.3(supports-color@5.5.0)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.3.1': {}
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
 
-  '@eslint/core@0.15.2':
+  '@eslint/core@0.17.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
@@ -7389,19 +8287,19 @@ snapshots:
       globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
-      js-yaml: 4.1.0
+      js-yaml: 4.1.1
       minimatch: 3.1.2
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.35.0': {}
+  '@eslint/js@9.39.1': {}
 
-  '@eslint/object-schema@2.1.6': {}
+  '@eslint/object-schema@2.1.7': {}
 
-  '@eslint/plugin-kit@0.3.5':
+  '@eslint/plugin-kit@0.4.1':
     dependencies:
-      '@eslint/core': 0.15.2
+      '@eslint/core': 0.17.0
       levn: 0.4.1
 
   '@floating-ui/core@1.7.3':
@@ -7413,6 +8311,12 @@ snapshots:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
+  '@floating-ui/react-dom@2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@floating-ui/utils@0.2.10': {}
 
   '@humanfs/core@0.19.1': {}
@@ -7437,16 +8341,12 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@isaacs/fs-minipass@4.0.1':
-    dependencies:
-      minipass: 7.1.2
-
   '@istanbuljs/load-nyc-config@1.1.0':
     dependencies:
       camelcase: 5.3.1
       find-up: 4.1.0
       get-package-type: 0.1.0
-      js-yaml: 3.14.1
+      js-yaml: 3.14.2
       resolve-from: 5.0.0
 
   '@istanbuljs/schema@0.1.3': {}
@@ -7499,254 +8399,892 @@ snapshots:
 
   '@opentelemetry/api@1.9.0': {}
 
-  '@paralleldrive/cuid2@2.2.2':
+  '@paralleldrive/cuid2@2.3.1':
     dependencies:
       '@noble/hashes': 1.8.0
 
-  '@parcel/watcher-android-arm64@2.5.1':
+  '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.5.1':
-    optional: true
+  '@polka/url@1.0.0-next.29': {}
 
-  '@parcel/watcher-darwin-x64@2.5.1':
-    optional: true
+  '@radix-ui/number@1.1.1': {}
 
-  '@parcel/watcher-freebsd-x64@2.5.1':
-    optional: true
+  '@radix-ui/primitive@1.1.3': {}
 
-  '@parcel/watcher-linux-arm-glibc@2.5.1':
-    optional: true
+  '@radix-ui/react-accordion@1.2.12(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
-  '@parcel/watcher-linux-arm-musl@2.5.1':
-    optional: true
+  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
-  '@parcel/watcher-linux-arm64-glibc@2.5.1':
-    optional: true
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
-  '@parcel/watcher-linux-arm64-musl@2.5.1':
-    optional: true
+  '@radix-ui/react-aspect-ratio@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
-  '@parcel/watcher-linux-x64-glibc@2.5.1':
-    optional: true
+  '@radix-ui/react-avatar@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
-  '@parcel/watcher-linux-x64-musl@2.5.1':
-    optional: true
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
-  '@parcel/watcher-win32-arm64@2.5.1':
-    optional: true
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
 
-  '@parcel/watcher-win32-ia32@2.5.1':
-    optional: true
+  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
-  '@parcel/watcher-win32-x64@2.5.1':
-    optional: true
+  '@radix-ui/react-context@1.1.2(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
 
-  '@parcel/watcher@2.5.1':
+  '@radix-ui/react-context@1.1.3(@types/react@18.3.27)(react@18.3.1)':
     dependencies:
-      detect-libc: 1.0.3
-      is-glob: 4.0.3
-      micromatch: 4.0.8
-      node-addon-api: 7.1.1
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.27)(react@18.3.1)
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.5.1
-      '@parcel/watcher-darwin-arm64': 2.5.1
-      '@parcel/watcher-darwin-x64': 2.5.1
-      '@parcel/watcher-freebsd-x64': 2.5.1
-      '@parcel/watcher-linux-arm-glibc': 2.5.1
-      '@parcel/watcher-linux-arm-musl': 2.5.1
-      '@parcel/watcher-linux-arm64-glibc': 2.5.1
-      '@parcel/watcher-linux-arm64-musl': 2.5.1
-      '@parcel/watcher-linux-x64-glibc': 2.5.1
-      '@parcel/watcher-linux-x64-musl': 2.5.1
-      '@parcel/watcher-win32-arm64': 2.5.1
-      '@parcel/watcher-win32-ia32': 2.5.1
-      '@parcel/watcher-win32-x64': 2.5.1
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
 
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
+  '@radix-ui/react-direction@1.1.1(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
 
-  '@polka/url@1.0.0-next.29': {}
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-id@1.1.1(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-label@2.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.27)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-menubar@1.1.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.27)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-progress@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.7.1(@types/react@18.3.27)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-slider@1.3.6(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-slot@1.2.4(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      use-sync-external-store: 1.6.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
 
-  '@rive-app/canvas@2.31.5': {}
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.3.27)(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.27
 
-  '@rive-app/react-canvas@4.23.3(react@18.3.1)':
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@rive-app/canvas': 2.31.5
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+
+  '@radix-ui/rect@1.1.1': {}
 
-  '@rive-app/react-canvas@4.23.3(react@19.1.1)':
+  '@rive-app/canvas@2.32.0': {}
+
+  '@rive-app/react-canvas@4.24.0(react@18.3.1)':
     dependencies:
-      '@rive-app/canvas': 2.31.5
-      react: 19.1.1
+      '@rive-app/canvas': 2.32.0
+      react: 18.3.1
 
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
-  '@rollup/rollup-android-arm-eabi@4.50.2':
+  '@rollup/rollup-android-arm-eabi@4.53.3':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.53.3':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.50.2':
+  '@rollup/rollup-darwin-arm64@4.53.3':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.50.2':
+  '@rollup/rollup-darwin-x64@4.53.3':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.50.2':
+  '@rollup/rollup-freebsd-arm64@4.53.3':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.50.2':
+  '@rollup/rollup-freebsd-x64@4.53.3':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.50.2':
+  '@rollup/rollup-linux-arm-gnueabihf@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.50.2':
+  '@rollup/rollup-linux-arm-musleabihf@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.50.2':
+  '@rollup/rollup-linux-arm64-gnu@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.50.2':
+  '@rollup/rollup-linux-arm64-musl@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.50.2':
+  '@rollup/rollup-linux-loong64-gnu@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.50.2':
+  '@rollup/rollup-linux-ppc64-gnu@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.50.2':
+  '@rollup/rollup-linux-riscv64-gnu@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.50.2':
+  '@rollup/rollup-linux-riscv64-musl@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.50.2':
+  '@rollup/rollup-linux-s390x-gnu@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.50.2':
+  '@rollup/rollup-linux-x64-gnu@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.50.2':
+  '@rollup/rollup-linux-x64-musl@4.53.3':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.50.2':
+  '@rollup/rollup-openharmony-arm64@4.53.3':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.50.2':
+  '@rollup/rollup-win32-arm64-msvc@4.53.3':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.50.2':
+  '@rollup/rollup-win32-ia32-msvc@4.53.3':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.50.2':
+  '@rollup/rollup-win32-x64-gnu@4.53.3':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.50.2':
+  '@rollup/rollup-win32-x64-msvc@4.53.3':
     optional: true
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
-  '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
+  '@so-ric/colorspace@1.1.6':
     dependencies:
-      '@svgdotjs/svg.js': 3.2.5
+      color: 5.0.3
+      text-hex: 1.0.0
 
-  '@svgdotjs/svg.filter.js@3.0.9':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.5
+  '@swc/core-darwin-arm64@1.15.3':
+    optional: true
+
+  '@swc/core-darwin-x64@1.15.3':
+    optional: true
 
-  '@svgdotjs/svg.js@3.2.5': {}
+  '@swc/core-linux-arm-gnueabihf@1.15.3':
+    optional: true
 
-  '@svgdotjs/svg.resize.js@2.0.5(@svgdotjs/svg.js@3.2.5)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5))':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.5
-      '@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.5)
+  '@swc/core-linux-arm64-gnu@1.15.3':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.15.3':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.15.3':
+    optional: true
 
-  '@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5)':
+  '@swc/core-linux-x64-musl@1.15.3':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.15.3':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.15.3':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.15.3':
+    optional: true
+
+  '@swc/core@1.15.3':
     dependencies:
-      '@svgdotjs/svg.js': 3.2.5
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.25
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.15.3
+      '@swc/core-darwin-x64': 1.15.3
+      '@swc/core-linux-arm-gnueabihf': 1.15.3
+      '@swc/core-linux-arm64-gnu': 1.15.3
+      '@swc/core-linux-arm64-musl': 1.15.3
+      '@swc/core-linux-x64-gnu': 1.15.3
+      '@swc/core-linux-x64-musl': 1.15.3
+      '@swc/core-win32-arm64-msvc': 1.15.3
+      '@swc/core-win32-ia32-msvc': 1.15.3
+      '@swc/core-win32-x64-msvc': 1.15.3
+
+  '@swc/counter@0.1.3': {}
 
-  '@tailwindcss/cli@4.1.13':
+  '@swc/types@0.1.25':
     dependencies:
-      '@parcel/watcher': 2.5.1
-      '@tailwindcss/node': 4.1.13
-      '@tailwindcss/oxide': 4.1.13
-      enhanced-resolve: 5.18.3
-      mri: 1.2.0
-      picocolors: 1.1.1
-      tailwindcss: 4.1.13
+      '@swc/counter': 0.1.3
 
-  '@tailwindcss/node@4.1.13':
+  '@tailwindcss/node@4.1.18':
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.18.3
-      jiti: 2.5.1
-      lightningcss: 1.30.1
-      magic-string: 0.30.19
+      enhanced-resolve: 5.18.4
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
       source-map-js: 1.2.1
-      tailwindcss: 4.1.13
+      tailwindcss: 4.1.18
 
-  '@tailwindcss/oxide-android-arm64@4.1.13':
+  '@tailwindcss/oxide-android-arm64@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.13':
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.13':
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.13':
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide@4.1.13':
-    dependencies:
-      detect-libc: 2.1.0
-      tar: 7.4.3
+  '@tailwindcss/oxide@4.1.18':
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.13
-      '@tailwindcss/oxide-darwin-arm64': 4.1.13
-      '@tailwindcss/oxide-darwin-x64': 4.1.13
-      '@tailwindcss/oxide-freebsd-x64': 4.1.13
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.13
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.13
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.13
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.13
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.13
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.13
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.13
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.13
-
-  '@tailwindcss/postcss@4.1.13':
+      '@tailwindcss/oxide-android-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-x64': 4.1.18
+      '@tailwindcss/oxide-freebsd-x64': 4.1.18
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
+
+  '@tailwindcss/postcss@4.1.18':
     dependencies:
       '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.13
-      '@tailwindcss/oxide': 4.1.13
+      '@tailwindcss/node': 4.1.18
+      '@tailwindcss/oxide': 4.1.18
       postcss: 8.5.6
-      tailwindcss: 4.1.13
+      tailwindcss: 4.1.18
 
   '@testing-library/dom@9.3.4':
     dependencies:
@@ -7759,7 +9297,7 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@6.8.0':
+  '@testing-library/jest-dom@6.9.1':
     dependencies:
       '@adobe/css-tools': 4.4.4
       aria-query: 5.3.2
@@ -7768,13 +9306,13 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@14.3.1(@types/react@19.1.13)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+  '@testing-library/react@14.3.1(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@testing-library/dom': 9.3.4
-      '@types/react-dom': 18.3.7(@types/react@19.1.13)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
+      '@types/react-dom': 18.3.7(@types/react@18.3.27)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
 
@@ -7782,7 +9320,7 @@ snapshots:
     dependencies:
       '@testing-library/dom': 9.3.4
 
-  '@tsconfig/node10@1.0.11': {}
+  '@tsconfig/node10@1.0.12': {}
 
   '@tsconfig/node12@1.0.11': {}
 
@@ -7792,45 +9330,49 @@ snapshots:
 
   '@types/aria-query@5.0.4': {}
 
-  '@types/babel__core@7.20.5':
+  '@types/body-parser@1.19.6':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.28.0
+      '@types/connect': 3.4.38
+      '@types/node': 22.19.1
 
-  '@types/babel__generator@7.27.0':
+  '@types/chai@5.2.3':
     dependencies:
-      '@babel/types': 7.28.4
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
 
-  '@types/babel__template@7.4.4':
+  '@types/connect@3.4.38':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@types/node': 22.19.1
+
+  '@types/cookiejar@2.1.5': {}
 
-  '@types/babel__traverse@7.28.0':
+  '@types/cors@2.8.19':
     dependencies:
-      '@babel/types': 7.28.4
+      '@types/node': 22.19.1
 
-  '@types/body-parser@1.19.6':
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
     dependencies:
-      '@types/connect': 3.4.38
-      '@types/node': 22.18.5
+      '@types/d3-color': 3.1.3
 
-  '@types/chai@5.2.2':
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
     dependencies:
-      '@types/deep-eql': 4.0.2
+      '@types/d3-time': 3.0.4
 
-  '@types/connect@3.4.38':
+  '@types/d3-shape@3.1.7':
     dependencies:
-      '@types/node': 22.18.5
+      '@types/d3-path': 3.1.1
 
-  '@types/cookiejar@2.1.5': {}
+  '@types/d3-time@3.0.4': {}
 
-  '@types/cors@2.8.19':
-    dependencies:
-      '@types/node': 22.18.5
+  '@types/d3-timer@3.0.2': {}
 
   '@types/debug@4.1.12':
     dependencies:
@@ -7840,24 +9382,24 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
-  '@types/express-serve-static-core@5.0.7':
+  '@types/express-serve-static-core@5.1.0':
     dependencies:
-      '@types/node': 22.18.5
+      '@types/node': 22.19.1
       '@types/qs': 6.14.0
       '@types/range-parser': 1.2.7
-      '@types/send': 0.17.5
+      '@types/send': 1.2.1
 
-  '@types/express@5.0.3':
+  '@types/express@5.0.5':
     dependencies:
       '@types/body-parser': 1.19.6
-      '@types/express-serve-static-core': 5.0.7
-      '@types/serve-static': 1.15.8
+      '@types/express-serve-static-core': 5.1.0
+      '@types/serve-static': 1.15.10
 
   '@types/http-errors@2.0.5': {}
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/k6@1.2.0': {}
+  '@types/k6@1.4.0': {}
 
   '@types/katex@0.16.7': {}
 
@@ -7867,11 +9409,13 @@ snapshots:
 
   '@types/ms@2.1.0': {}
 
-  '@types/node@22.18.5':
+  '@types/node@20.19.25':
     dependencies:
       undici-types: 6.21.0
 
-  '@types/parse-json@4.0.2': {}
+  '@types/node@22.19.1':
+    dependencies:
+      undici-types: 6.21.0
 
   '@types/prop-types@15.7.15': {}
 
@@ -7879,48 +9423,36 @@ snapshots:
 
   '@types/range-parser@1.2.7': {}
 
-  '@types/react-dom@18.3.7(@types/react@18.3.24)':
-    dependencies:
-      '@types/react': 18.3.24
-
-  '@types/react-dom@18.3.7(@types/react@19.1.13)':
-    dependencies:
-      '@types/react': 19.1.13
-
-  '@types/react-dom@19.1.9(@types/react@19.1.13)':
-    dependencies:
-      '@types/react': 19.1.13
-
-  '@types/react-transition-group@4.4.12(@types/react@19.1.13)':
+  '@types/react-dom@18.3.7(@types/react@18.3.27)':
     dependencies:
-      '@types/react': 19.1.13
+      '@types/react': 18.3.27
 
-  '@types/react@18.3.24':
+  '@types/react@18.3.27':
     dependencies:
       '@types/prop-types': 15.7.15
-      csstype: 3.1.3
+      csstype: 3.2.3
 
-  '@types/react@19.1.13':
+  '@types/send@0.17.6':
     dependencies:
-      csstype: 3.1.3
+      '@types/mime': 1.3.5
+      '@types/node': 22.19.1
 
-  '@types/send@0.17.5':
+  '@types/send@1.2.1':
     dependencies:
-      '@types/mime': 1.3.5
-      '@types/node': 22.18.5
+      '@types/node': 22.19.1
 
-  '@types/serve-static@1.15.8':
+  '@types/serve-static@1.15.10':
     dependencies:
       '@types/http-errors': 2.0.5
-      '@types/node': 22.18.5
-      '@types/send': 0.17.5
+      '@types/node': 22.19.1
+      '@types/send': 0.17.6
 
   '@types/superagent@8.1.9':
     dependencies:
       '@types/cookiejar': 2.1.5
       '@types/methods': 1.1.4
-      '@types/node': 22.18.5
-      form-data: 4.0.4
+      '@types/node': 22.19.1
+      form-data: 4.0.5
 
   '@types/supertest@6.0.3':
     dependencies:
@@ -7931,15 +9463,15 @@ snapshots:
 
   '@types/unist@2.0.11': {}
 
-  '@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3))(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)':
+  '@typescript-eslint/eslint-plugin@8.47.0(@typescript-eslint/parser@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)
-      '@typescript-eslint/scope-manager': 8.44.0
-      '@typescript-eslint/type-utils': 8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 8.44.0
-      eslint: 9.35.0(jiti@2.5.1)
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/scope-manager': 8.47.0
+      '@typescript-eslint/type-utils': 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 8.47.0
+      eslint: 9.39.1(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -7948,128 +9480,132 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)':
+  '@typescript-eslint/parser@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.44.0
-      '@typescript-eslint/types': 8.44.0
-      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.7.3)
-      '@typescript-eslint/visitor-keys': 8.44.0
+      '@typescript-eslint/scope-manager': 8.47.0
+      '@typescript-eslint/types': 8.47.0
+      '@typescript-eslint/typescript-estree': 8.47.0(typescript@5.7.3)
+      '@typescript-eslint/visitor-keys': 8.47.0
       debug: 4.4.3(supports-color@5.5.0)
-      eslint: 9.35.0(jiti@2.5.1)
+      eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.44.0(typescript@5.7.3)':
+  '@typescript-eslint/project-service@8.47.0(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.44.0(typescript@5.7.3)
-      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/tsconfig-utils': 8.47.0(typescript@5.7.3)
+      '@typescript-eslint/types': 8.47.0
       debug: 4.4.3(supports-color@5.5.0)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.44.0':
+  '@typescript-eslint/scope-manager@8.47.0':
     dependencies:
-      '@typescript-eslint/types': 8.44.0
-      '@typescript-eslint/visitor-keys': 8.44.0
+      '@typescript-eslint/types': 8.47.0
+      '@typescript-eslint/visitor-keys': 8.47.0
 
-  '@typescript-eslint/tsconfig-utils@8.44.0(typescript@5.7.3)':
+  '@typescript-eslint/tsconfig-utils@8.47.0(typescript@5.7.3)':
     dependencies:
       typescript: 5.7.3
 
-  '@typescript-eslint/type-utils@8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)':
+  '@typescript-eslint/type-utils@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/types': 8.44.0
-      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)
+      '@typescript-eslint/types': 8.47.0
+      '@typescript-eslint/typescript-estree': 8.47.0(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)
       debug: 4.4.3(supports-color@5.5.0)
-      eslint: 9.35.0(jiti@2.5.1)
+      eslint: 9.39.1(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.44.0': {}
+  '@typescript-eslint/types@8.47.0': {}
 
-  '@typescript-eslint/typescript-estree@8.44.0(typescript@5.7.3)':
+  '@typescript-eslint/typescript-estree@8.47.0(typescript@5.7.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.44.0(typescript@5.7.3)
-      '@typescript-eslint/tsconfig-utils': 8.44.0(typescript@5.7.3)
-      '@typescript-eslint/types': 8.44.0
-      '@typescript-eslint/visitor-keys': 8.44.0
+      '@typescript-eslint/project-service': 8.47.0(typescript@5.7.3)
+      '@typescript-eslint/tsconfig-utils': 8.47.0(typescript@5.7.3)
+      '@typescript-eslint/types': 8.47.0
+      '@typescript-eslint/visitor-keys': 8.47.0
       debug: 4.4.3(supports-color@5.5.0)
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      semver: 7.7.3
       ts-api-utils: 2.1.0(typescript@5.7.3)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)':
+  '@typescript-eslint/utils@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.35.0(jiti@2.5.1))
-      '@typescript-eslint/scope-manager': 8.44.0
-      '@typescript-eslint/types': 8.44.0
-      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.7.3)
-      eslint: 9.35.0(jiti@2.5.1)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.47.0
+      '@typescript-eslint/types': 8.47.0
+      '@typescript-eslint/typescript-estree': 8.47.0(typescript@5.7.3)
+      eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.44.0':
+  '@typescript-eslint/visitor-keys@8.47.0':
     dependencies:
-      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/types': 8.47.0
       eslint-visitor-keys: 4.2.1
 
-  '@vitejs/plugin-react@4.7.0(vite@6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))':
+  '@vitejs/plugin-react-swc@3.11.0(vite@6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1))':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.4)
       '@rolldown/pluginutils': 1.0.0-beta.27
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.17.0
-      vite: 6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+      '@swc/core': 1.15.3
+      vite: 6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
     transitivePeerDependencies:
-      - supports-color
+      - '@swc/helpers'
 
   '@vitest/coverage-v8@3.2.4(vitest@3.2.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 1.0.2
-      ast-v8-to-istanbul: 0.3.5
+      ast-v8-to-istanbul: 0.3.8
       debug: 4.4.3(supports-color@5.5.0)
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 5.0.6
       istanbul-reports: 3.2.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       magicast: 0.3.5
-      std-env: 3.9.0
+      std-env: 3.10.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.5)(@vitest/ui@3.2.4)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@20.19.25)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
   '@vitest/expect@3.2.4':
     dependencies:
-      '@types/chai': 5.2.2
+      '@types/chai': 5.2.3
       '@vitest/spy': 3.2.4
       '@vitest/utils': 3.2.4
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))':
+  '@vitest/mocker@3.2.4(vite@6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1))':
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
+
+  '@vitest/mocker@3.2.4(vite@6.3.5(@types/node@22.19.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
-      magic-string: 0.30.19
+      magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.19.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -8079,17 +9615,17 @@ snapshots:
     dependencies:
       '@vitest/utils': 3.2.4
       pathe: 2.0.3
-      strip-literal: 3.0.0
+      strip-literal: 3.1.0
 
   '@vitest/snapshot@3.2.4':
     dependencies:
       '@vitest/pretty-format': 3.2.4
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       pathe: 2.0.3
 
   '@vitest/spy@3.2.4':
     dependencies:
-      tinyspy: 4.0.3
+      tinyspy: 4.0.4
 
   '@vitest/ui@3.2.4(vitest@3.2.4)':
     dependencies:
@@ -8100,7 +9636,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.5)(@vitest/ui@3.2.4)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@20.19.25)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -8108,11 +9644,9 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
-  '@yr/monotone-cubic-spline@1.0.3': {}
-
   accepts@2.0.0:
     dependencies:
-      mime-types: 3.0.1
+      mime-types: 3.0.2
       negotiator: 1.0.0
 
   acorn-jsx@5.3.2(acorn@8.15.0):
@@ -8139,7 +9673,7 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ansi-escapes@7.1.0:
+  ansi-escapes@7.2.0:
     dependencies:
       environment: 1.1.0
 
@@ -8160,15 +9694,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  apexcharts@4.7.0:
-    dependencies:
-      '@svgdotjs/svg.draggable.js': 3.0.6(@svgdotjs/svg.js@3.2.5)
-      '@svgdotjs/svg.filter.js': 3.0.9
-      '@svgdotjs/svg.js': 3.2.5
-      '@svgdotjs/svg.resize.js': 2.0.5(@svgdotjs/svg.js@3.2.5)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5))
-      '@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.5)
-      '@yr/monotone-cubic-spline': 1.0.3
-
   append-transform@2.0.0:
     dependencies:
       default-require-extensions: 3.0.1
@@ -8183,6 +9708,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.1.3:
     dependencies:
       deep-equal: 2.2.3
@@ -8252,7 +9781,7 @@ snapshots:
 
   ast-types-flow@0.0.8: {}
 
-  ast-v8-to-istanbul@0.3.5:
+  ast-v8-to-istanbul@0.3.8:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       estree-walker: 3.0.3
@@ -8264,11 +9793,11 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  autoprefixer@10.4.21(postcss@8.5.6):
+  autoprefixer@10.4.22(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.2
-      caniuse-lite: 1.0.30001743
-      fraction.js: 4.3.7
+      browserslist: 4.28.0
+      caniuse-lite: 1.0.30001756
+      fraction.js: 5.3.4
       normalize-range: 0.1.2
       picocolors: 1.1.1
       postcss: 8.5.6
@@ -8278,29 +9807,21 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axe-core@4.10.3: {}
+  axe-core@4.11.0: {}
 
-  axios@1.12.2:
+  axios@1.13.2:
     dependencies:
       follow-redirects: 1.15.11
-      form-data: 4.0.4
+      form-data: 4.0.5
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
 
   axobject-query@4.1.0: {}
 
-  babel-plugin-macros@3.1.0:
-    dependencies:
-      '@babel/runtime': 7.28.4
-      cosmiconfig: 7.1.0
-      resolve: 1.22.10
-
   balanced-match@1.0.2: {}
 
-  baseline-browser-mapping@2.8.28: {}
-
-  baseline-browser-mapping@2.8.4: {}
+  baseline-browser-mapping@2.8.30: {}
 
   binary-extensions@2.3.0: {}
 
@@ -8311,11 +9832,11 @@ snapshots:
       bytes: 3.1.2
       content-type: 1.0.5
       debug: 4.4.3(supports-color@5.5.0)
-      http-errors: 2.0.0
+      http-errors: 2.0.1
       iconv-lite: 0.6.3
       on-finished: 2.4.1
       qs: 6.14.0
-      raw-body: 3.0.1
+      raw-body: 3.0.2
       type-is: 2.0.1
     transitivePeerDependencies:
       - supports-color
@@ -8333,13 +9854,13 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.26.2:
+  browserslist@4.28.0:
     dependencies:
-      baseline-browser-mapping: 2.8.4
-      caniuse-lite: 1.0.30001743
-      electron-to-chromium: 1.5.220
-      node-releases: 2.0.21
-      update-browserslist-db: 1.1.3(browserslist@4.26.2)
+      baseline-browser-mapping: 2.8.30
+      caniuse-lite: 1.0.30001756
+      electron-to-chromium: 1.5.259
+      node-releases: 2.0.27
+      update-browserslist-db: 1.1.4(browserslist@4.28.0)
 
   builtin-modules@3.3.0: {}
 
@@ -8375,7 +9896,7 @@ snapshots:
 
   camelcase@5.3.1: {}
 
-  caniuse-lite@1.0.30001743: {}
+  caniuse-lite@1.0.30001756: {}
 
   chai@5.3.3:
     dependencies:
@@ -8412,7 +9933,9 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  chownr@3.0.0: {}
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
 
   clean-stack@2.2.0: {}
 
@@ -8431,37 +9954,45 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 6.2.0
 
+  clsx@2.1.1: {}
+
   cluster-key-slot@1.1.2: {}
 
-  color-convert@1.9.3:
+  cmdk@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      color-name: 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
 
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
-  color-name@1.1.3: {}
+  color-convert@3.1.3:
+    dependencies:
+      color-name: 2.1.0
 
   color-name@1.1.4: {}
 
-  color-string@1.9.1:
+  color-name@2.1.0: {}
+
+  color-string@2.1.4:
     dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.4
+      color-name: 2.1.0
 
-  color@3.2.1:
+  color@5.0.3:
     dependencies:
-      color-convert: 1.9.3
-      color-string: 1.9.1
+      color-convert: 3.1.3
+      color-string: 2.1.4
 
   colorette@2.0.20: {}
 
-  colorspace@1.1.4:
-    dependencies:
-      color: 3.2.1
-      text-hex: 1.0.0
-
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -8476,9 +10007,7 @@ snapshots:
 
   concat-map@0.0.1: {}
 
-  content-disposition@1.0.0:
-    dependencies:
-      safe-buffer: 5.2.1
+  content-disposition@1.0.1: {}
 
   content-type@1.0.5: {}
 
@@ -8497,14 +10026,6 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
-  cosmiconfig@7.1.0:
-    dependencies:
-      '@types/parse-json': 4.0.2
-      import-fresh: 3.3.1
-      parse-json: 5.2.0
-      path-type: 4.0.0
-      yaml: 1.10.2
-
   create-require@1.1.1: {}
 
   cross-spawn@7.0.6:
@@ -8520,7 +10041,45 @@ snapshots:
       '@asamuzakjp/css-color': 3.2.0
       rrweb-cssom: 0.8.0
 
-  csstype@3.1.3: {}
+  csstype@3.2.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
 
   damerau-levenshtein@1.0.8: {}
 
@@ -8557,6 +10116,8 @@ snapshots:
 
   decamelize@1.2.0: {}
 
+  decimal.js-light@2.5.1: {}
+
   decimal.js@10.6.0: {}
 
   decode-named-character-reference@1.2.0:
@@ -8612,9 +10173,9 @@ snapshots:
 
   dequal@2.0.3: {}
 
-  detect-libc@1.0.3: {}
+  detect-libc@2.1.2: {}
 
-  detect-libc@2.1.0: {}
+  detect-node-es@1.1.0: {}
 
   devlop@1.1.0:
     dependencies:
@@ -8638,7 +10199,7 @@ snapshots:
   dom-helpers@5.2.1:
     dependencies:
       '@babel/runtime': 7.28.4
-      csstype: 3.1.3
+      csstype: 3.2.3
 
   dotenv@16.6.1: {}
 
@@ -8656,9 +10217,21 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
-  electron-to-chromium@1.5.220: {}
+  electron-to-chromium@1.5.259: {}
+
+  embla-carousel-react@8.6.0(react@18.3.1):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 18.3.1
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0: {}
 
-  emoji-regex@10.5.0: {}
+  emoji-regex@10.6.0: {}
 
   emoji-regex@8.0.0: {}
 
@@ -8668,10 +10241,10 @@ snapshots:
 
   encodeurl@2.0.0: {}
 
-  enhanced-resolve@5.18.3:
+  enhanced-resolve@5.18.4:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.2.3
+      tapable: 2.3.0
 
   entities@4.5.0: {}
 
@@ -8679,10 +10252,6 @@ snapshots:
 
   environment@1.1.0: {}
 
-  error-ex@1.3.4:
-    dependencies:
-      is-arrayish: 0.2.1
-
   es-abstract@1.24.0:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -8800,34 +10369,34 @@ snapshots:
 
   es6-error@4.1.1: {}
 
-  esbuild@0.25.9:
+  esbuild@0.25.12:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.9
-      '@esbuild/android-arm': 0.25.9
-      '@esbuild/android-arm64': 0.25.9
-      '@esbuild/android-x64': 0.25.9
-      '@esbuild/darwin-arm64': 0.25.9
-      '@esbuild/darwin-x64': 0.25.9
-      '@esbuild/freebsd-arm64': 0.25.9
-      '@esbuild/freebsd-x64': 0.25.9
-      '@esbuild/linux-arm': 0.25.9
-      '@esbuild/linux-arm64': 0.25.9
-      '@esbuild/linux-ia32': 0.25.9
-      '@esbuild/linux-loong64': 0.25.9
-      '@esbuild/linux-mips64el': 0.25.9
-      '@esbuild/linux-ppc64': 0.25.9
-      '@esbuild/linux-riscv64': 0.25.9
-      '@esbuild/linux-s390x': 0.25.9
-      '@esbuild/linux-x64': 0.25.9
-      '@esbuild/netbsd-arm64': 0.25.9
-      '@esbuild/netbsd-x64': 0.25.9
-      '@esbuild/openbsd-arm64': 0.25.9
-      '@esbuild/openbsd-x64': 0.25.9
-      '@esbuild/openharmony-arm64': 0.25.9
-      '@esbuild/sunos-x64': 0.25.9
-      '@esbuild/win32-arm64': 0.25.9
-      '@esbuild/win32-ia32': 0.25.9
-      '@esbuild/win32-x64': 0.25.9
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
 
   escalade@3.2.0: {}
 
@@ -8835,21 +10404,21 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.5.1)):
+  eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      eslint: 9.35.0(jiti@2.5.1)
+      eslint: 9.39.1(jiti@2.6.1)
 
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.35.0(jiti@2.5.1)):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       aria-query: 5.3.2
       array-includes: 3.1.9
       array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
-      axe-core: 4.10.3
+      axe-core: 4.11.0
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      eslint: 9.35.0(jiti@2.5.1)
+      eslint: 9.39.1(jiti@2.6.1)
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
@@ -8858,15 +10427,11 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.35.0(jiti@2.5.1)):
-    dependencies:
-      eslint: 9.35.0(jiti@2.5.1)
-
-  eslint-plugin-react-refresh@0.4.20(eslint@9.35.0(jiti@2.5.1)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      eslint: 9.35.0(jiti@2.5.1)
+      eslint: 9.39.1(jiti@2.6.1)
 
-  eslint-plugin-react@7.37.5(eslint@9.35.0(jiti@2.5.1)):
+  eslint-plugin-react@7.37.5(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
@@ -8874,7 +10439,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.2.1
-      eslint: 9.35.0(jiti@2.5.1)
+      eslint: 9.39.1(jiti@2.6.1)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -8888,12 +10453,12 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-sonarjs@3.0.5(eslint@9.35.0(jiti@2.5.1)):
+  eslint-plugin-sonarjs@3.0.5(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       '@eslint-community/regexpp': 4.12.1
       builtin-modules: 3.3.0
       bytes: 3.1.2
-      eslint: 9.35.0(jiti@2.5.1)
+      eslint: 9.39.1(jiti@2.6.1)
       functional-red-black-tree: 1.0.1
       jsx-ast-utils-x: 0.1.0
       lodash.merge: 4.6.2
@@ -8911,21 +10476,20 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.35.0(jiti@2.5.1):
+  eslint@9.39.1(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.35.0(jiti@2.5.1))
-      '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.21.0
-      '@eslint/config-helpers': 0.3.1
-      '@eslint/core': 0.15.2
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
       '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.35.0
-      '@eslint/plugin-kit': 0.3.5
+      '@eslint/js': 9.39.1
+      '@eslint/plugin-kit': 0.4.1
       '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.3
       '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
@@ -8949,7 +10513,7 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
     optionalDependencies:
-      jiti: 2.5.1
+      jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
 
@@ -8979,6 +10543,8 @@ snapshots:
 
   etag@1.8.1: {}
 
+  eventemitter3@4.0.7: {}
+
   eventemitter3@5.0.1: {}
 
   execa@8.0.1:
@@ -8999,16 +10565,16 @@ snapshots:
     dependencies:
       express: 5.1.0
 
-  express-validator@7.2.1:
+  express-validator@7.3.1:
     dependencies:
       lodash: 4.17.21
-      validator: 13.12.0
+      validator: 13.15.23
 
   express@5.1.0:
     dependencies:
       accepts: 2.0.0
       body-parser: 2.2.0
-      content-disposition: 1.0.0
+      content-disposition: 1.0.1
       content-type: 1.0.5
       cookie: 0.7.2
       cookie-signature: 1.2.2
@@ -9018,9 +10584,9 @@ snapshots:
       etag: 1.8.1
       finalhandler: 2.1.0
       fresh: 2.0.0
-      http-errors: 2.0.0
+      http-errors: 2.0.1
       merge-descriptors: 2.0.0
-      mime-types: 3.0.1
+      mime-types: 3.0.2
       on-finished: 2.4.1
       once: 1.4.0
       parseurl: 1.3.3
@@ -9038,6 +10604,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-equals@5.3.3: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -9097,8 +10665,6 @@ snapshots:
       make-dir: 3.1.0
       pkg-dir: 4.2.0
 
-  find-root@1.1.0: {}
-
   find-up@4.1.0:
     dependencies:
       locate-path: 5.0.0
@@ -9134,7 +10700,7 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  form-data@4.0.4:
+  form-data@4.0.5:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
@@ -9144,13 +10710,22 @@ snapshots:
 
   formidable@3.5.4:
     dependencies:
-      '@paralleldrive/cuid2': 2.2.2
+      '@paralleldrive/cuid2': 2.3.1
       dezalgo: 1.0.4
       once: 1.4.0
 
   forwarded@0.2.0: {}
 
-  fraction.js@4.3.7: {}
+  fraction.js@5.3.4: {}
+
+  framer-motion@12.23.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      motion-dom: 12.23.23
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   fresh@2.0.0: {}
 
@@ -9176,6 +10751,8 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  generator-function@2.0.1: {}
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -9195,6 +10772,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-package-type@0.1.0: {}
 
   get-proto@1.0.1:
@@ -9210,7 +10789,7 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
-  get-tsconfig@4.10.1:
+  get-tsconfig@4.13.0:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -9222,7 +10801,7 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@10.4.5:
+  glob@10.5.0:
     dependencies:
       foreground-child: 3.3.1
       jackspeak: 3.4.3
@@ -9295,22 +10874,18 @@ snapshots:
 
   helmet@8.1.0: {}
 
-  hoist-non-react-statics@3.3.2:
-    dependencies:
-      react-is: 16.13.1
-
   html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
 
   html-escaper@2.0.2: {}
 
-  http-errors@2.0.0:
+  http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
       inherits: 2.0.4
       setprototypeof: 1.2.0
-      statuses: 2.0.1
+      statuses: 2.0.2
       toidentifier: 1.0.1
 
   http-proxy-agent@7.0.2:
@@ -9361,13 +10936,20 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  input-otp@1.4.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
-  ioredis@5.7.0:
+  internmap@2.0.3: {}
+
+  ioredis@5.8.2:
     dependencies:
       '@ioredis/commands': 1.4.0
       cluster-key-slot: 1.1.2
@@ -9401,10 +10983,6 @@ snapshots:
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
-  is-arrayish@0.2.1: {}
-
-  is-arrayish@0.3.4: {}
-
   is-async-function@2.1.1:
     dependencies:
       async-function: 1.0.0
@@ -9459,9 +11037,10 @@ snapshots:
     dependencies:
       get-east-asian-width: 1.4.0
 
-  is-generator-function@1.1.0:
+  is-generator-function@1.1.2:
     dependencies:
       call-bound: 1.0.4
+      generator-function: 2.0.1
       get-proto: 1.0.1
       has-tostringtag: 1.0.2
       safe-regex-test: 1.1.0
@@ -9546,11 +11125,11 @@ snapshots:
 
   istanbul-lib-instrument@6.0.3:
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/parser': 7.28.4
+      '@babel/core': 7.28.5
+      '@babel/parser': 7.28.5
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
-      semver: 7.7.2
+      semver: 7.7.3
     transitivePeerDependencies:
       - supports-color
 
@@ -9611,13 +11190,13 @@ snapshots:
       filelist: 1.0.4
       picocolors: 1.1.1
 
-  jiti@2.5.1: {}
+  jiti@2.6.1: {}
 
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
 
-  js-yaml@3.14.1:
+  js-yaml@3.14.2:
     dependencies:
       argparse: 1.0.10
       esprima: 4.0.1
@@ -9626,6 +11205,10 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
   jsdom@26.1.0:
     dependencies:
       cssstyle: 4.6.0
@@ -9657,8 +11240,6 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
-  json-parse-even-better-errors@2.3.1: {}
-
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
@@ -9680,7 +11261,7 @@ snapshots:
     dependencies:
       ejs: 3.1.10
 
-  katex@0.16.22:
+  katex@0.16.25:
     dependencies:
       commander: 8.3.0
 
@@ -9701,55 +11282,57 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lightningcss-darwin-arm64@1.30.1:
+  lightningcss-android-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-arm64@1.30.2:
     optional: true
 
-  lightningcss-darwin-x64@1.30.1:
+  lightningcss-darwin-x64@1.30.2:
     optional: true
 
-  lightningcss-freebsd-x64@1.30.1:
+  lightningcss-freebsd-x64@1.30.2:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.30.1:
+  lightningcss-linux-arm-gnueabihf@1.30.2:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.30.1:
+  lightningcss-linux-arm64-gnu@1.30.2:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.30.1:
+  lightningcss-linux-arm64-musl@1.30.2:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.30.1:
+  lightningcss-linux-x64-gnu@1.30.2:
     optional: true
 
-  lightningcss-linux-x64-musl@1.30.1:
+  lightningcss-linux-x64-musl@1.30.2:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.30.1:
+  lightningcss-win32-arm64-msvc@1.30.2:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.30.1:
+  lightningcss-win32-x64-msvc@1.30.2:
     optional: true
 
-  lightningcss@1.30.1:
+  lightningcss@1.30.2:
     dependencies:
-      detect-libc: 2.1.0
+      detect-libc: 2.1.2
     optionalDependencies:
-      lightningcss-darwin-arm64: 1.30.1
-      lightningcss-darwin-x64: 1.30.1
-      lightningcss-freebsd-x64: 1.30.1
-      lightningcss-linux-arm-gnueabihf: 1.30.1
-      lightningcss-linux-arm64-gnu: 1.30.1
-      lightningcss-linux-arm64-musl: 1.30.1
-      lightningcss-linux-x64-gnu: 1.30.1
-      lightningcss-linux-x64-musl: 1.30.1
-      lightningcss-win32-arm64-msvc: 1.30.1
-      lightningcss-win32-x64-msvc: 1.30.1
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
 
   lilconfig@3.1.3: {}
 
-  lines-and-columns@1.2.4: {}
-
   linkify-it@5.0.0:
     dependencies:
       uc.micro: 2.1.0
@@ -9798,7 +11381,7 @@ snapshots:
 
   log-update@6.1.0:
     dependencies:
-      ansi-escapes: 7.1.0
+      ansi-escapes: 7.2.0
       cli-cursor: 5.0.0
       slice-ansi: 7.1.2
       strip-ansi: 7.1.2
@@ -9825,16 +11408,20 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@0.487.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   lz-string@1.5.0: {}
 
-  magic-string@0.30.19:
+  magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
   magicast@0.3.5:
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
       source-map-js: 1.2.1
 
   make-dir@3.1.0:
@@ -9843,7 +11430,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   make-error@1.3.6: {}
 
@@ -9891,10 +11478,6 @@ snapshots:
 
   media-typer@1.1.0: {}
 
-  memoize-one@5.2.1: {}
-
-  memoize-one@6.0.0: {}
-
   merge-descriptors@2.0.0: {}
 
   merge-stream@2.0.0: {}
@@ -9962,7 +11545,7 @@ snapshots:
     dependencies:
       '@types/katex': 0.16.7
       devlop: 1.1.0
-      katex: 0.16.22
+      katex: 0.16.25
       micromark-factory-space: 2.0.1
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
@@ -10088,7 +11671,7 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  mime-types@3.0.1:
+  mime-types@3.0.2:
     dependencies:
       mime-db: 1.54.0
 
@@ -10116,15 +11699,21 @@ snapshots:
 
   minipass@7.1.2: {}
 
-  minizlib@3.0.2:
-    dependencies:
-      minipass: 7.1.2
+  moment@2.30.1: {}
 
-  mkdirp@3.0.1: {}
+  motion-dom@12.23.23:
+    dependencies:
+      motion-utils: 12.23.6
 
-  moment@2.30.1: {}
+  motion-utils@12.23.6: {}
 
-  mri@1.2.0: {}
+  motion@12.23.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      framer-motion: 12.23.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   mrmime@2.0.1: {}
 
@@ -10132,28 +11721,31 @@ snapshots:
 
   nanoid@3.3.11: {}
 
-  nanoid@5.1.5: {}
+  nanoid@5.1.6: {}
 
   natural-compare@1.4.0: {}
 
   negotiator@1.0.0: {}
 
-  node-addon-api@7.1.1: {}
+  next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   node-preload@0.2.1:
     dependencies:
       process-on-spawn: 1.1.0
 
-  node-releases@2.0.21: {}
+  node-releases@2.0.27: {}
 
-  nodemon@3.1.10:
+  nodemon@3.1.11:
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.3(supports-color@5.5.0)
       ignore-by-default: 1.0.1
       minimatch: 3.1.2
       pstree.remy: 1.1.8
-      semver: 7.7.2
+      semver: 7.7.3
       simple-update-notifier: 2.0.0
       supports-color: 5.5.0
       touch: 3.1.1
@@ -10324,13 +11916,6 @@ snapshots:
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
 
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      error-ex: 1.3.4
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
   parse5@7.3.0:
     dependencies:
       entities: 6.0.1
@@ -10354,8 +11939,6 @@ snapshots:
 
   path-to-regexp@8.3.0: {}
 
-  path-type@4.0.0: {}
-
   path-type@5.0.0: {}
 
   pathe@2.0.3: {}
@@ -10430,24 +12013,17 @@ snapshots:
 
   range-parser@1.2.1: {}
 
-  raw-body@3.0.1:
+  raw-body@3.0.2:
     dependencies:
       bytes: 3.1.2
-      http-errors: 2.0.0
+      http-errors: 2.0.1
       iconv-lite: 0.7.0
       unpipe: 1.0.0
 
-  react-apexcharts@1.7.0(apexcharts@4.7.0)(react@19.1.1):
-    dependencies:
-      apexcharts: 4.7.0
-      prop-types: 15.8.1
-      react: 19.1.1
-
-  react-calendar-heatmap@1.10.0(react@19.1.1):
+  react-day-picker@8.10.1(date-fns@4.1.0)(react@18.3.1):
     dependencies:
-      memoize-one: 5.2.1
-      prop-types: 15.8.1
-      react: 19.1.1
+      date-fns: 4.1.0
+      react: 18.3.1
 
   react-dom@18.3.1(react@18.3.1):
     dependencies:
@@ -10455,49 +12031,69 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
-  react-dom@19.1.1(react@19.1.1):
+  react-hook-form@7.66.1(react@18.3.1):
     dependencies:
-      react: 19.1.1
-      scheduler: 0.26.0
+      react: 18.3.1
 
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
 
-  react-refresh@0.17.0: {}
+  react-is@18.3.1: {}
 
-  react-select@5.10.2(@types/react@19.1.13)(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+  react-remove-scroll-bar@2.3.8(@types/react@18.3.27)(react@18.3.1):
     dependencies:
-      '@babel/runtime': 7.28.4
-      '@emotion/cache': 11.14.0
-      '@emotion/react': 11.14.0(@types/react@19.1.13)(react@19.1.1)
-      '@floating-ui/dom': 1.7.4
-      '@types/react-transition-group': 4.4.12(@types/react@19.1.13)
-      memoize-one: 6.0.0
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.3.27)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  react-remove-scroll@2.7.1(@types/react@18.3.27)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.3.27)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.3.27)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.3.27)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.3.27)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  react-resizable-panels@2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      fast-equals: 5.3.3
       prop-types: 15.8.1
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      react-transition-group: 4.4.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      use-isomorphic-layout-effect: 1.2.1(@types/react@19.1.13)(react@19.1.1)
-    transitivePeerDependencies:
-      - '@types/react'
-      - supports-color
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  react-transition-group@4.4.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+  react-style-singleton@2.2.3(@types/react@18.3.27)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.28.4
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
 
-  react@19.1.1: {}
-
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
@@ -10508,6 +12104,23 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -10562,12 +12175,6 @@ snapshots:
 
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.10:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   resolve@2.0.0-next.5:
     dependencies:
       is-core-module: 2.16.1
@@ -10589,33 +12196,34 @@ snapshots:
 
   rimraf@5.0.10:
     dependencies:
-      glob: 10.4.5
+      glob: 10.5.0
 
-  rollup@4.50.2:
+  rollup@4.53.3:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.50.2
-      '@rollup/rollup-android-arm64': 4.50.2
-      '@rollup/rollup-darwin-arm64': 4.50.2
-      '@rollup/rollup-darwin-x64': 4.50.2
-      '@rollup/rollup-freebsd-arm64': 4.50.2
-      '@rollup/rollup-freebsd-x64': 4.50.2
-      '@rollup/rollup-linux-arm-gnueabihf': 4.50.2
-      '@rollup/rollup-linux-arm-musleabihf': 4.50.2
-      '@rollup/rollup-linux-arm64-gnu': 4.50.2
-      '@rollup/rollup-linux-arm64-musl': 4.50.2
-      '@rollup/rollup-linux-loong64-gnu': 4.50.2
-      '@rollup/rollup-linux-ppc64-gnu': 4.50.2
-      '@rollup/rollup-linux-riscv64-gnu': 4.50.2
-      '@rollup/rollup-linux-riscv64-musl': 4.50.2
-      '@rollup/rollup-linux-s390x-gnu': 4.50.2
-      '@rollup/rollup-linux-x64-gnu': 4.50.2
-      '@rollup/rollup-linux-x64-musl': 4.50.2
-      '@rollup/rollup-openharmony-arm64': 4.50.2
-      '@rollup/rollup-win32-arm64-msvc': 4.50.2
-      '@rollup/rollup-win32-ia32-msvc': 4.50.2
-      '@rollup/rollup-win32-x64-msvc': 4.50.2
+      '@rollup/rollup-android-arm-eabi': 4.53.3
+      '@rollup/rollup-android-arm64': 4.53.3
+      '@rollup/rollup-darwin-arm64': 4.53.3
+      '@rollup/rollup-darwin-x64': 4.53.3
+      '@rollup/rollup-freebsd-arm64': 4.53.3
+      '@rollup/rollup-freebsd-x64': 4.53.3
+      '@rollup/rollup-linux-arm-gnueabihf': 4.53.3
+      '@rollup/rollup-linux-arm-musleabihf': 4.53.3
+      '@rollup/rollup-linux-arm64-gnu': 4.53.3
+      '@rollup/rollup-linux-arm64-musl': 4.53.3
+      '@rollup/rollup-linux-loong64-gnu': 4.53.3
+      '@rollup/rollup-linux-ppc64-gnu': 4.53.3
+      '@rollup/rollup-linux-riscv64-gnu': 4.53.3
+      '@rollup/rollup-linux-riscv64-musl': 4.53.3
+      '@rollup/rollup-linux-s390x-gnu': 4.53.3
+      '@rollup/rollup-linux-x64-gnu': 4.53.3
+      '@rollup/rollup-linux-x64-musl': 4.53.3
+      '@rollup/rollup-openharmony-arm64': 4.53.3
+      '@rollup/rollup-win32-arm64-msvc': 4.53.3
+      '@rollup/rollup-win32-ia32-msvc': 4.53.3
+      '@rollup/rollup-win32-x64-gnu': 4.53.3
+      '@rollup/rollup-win32-x64-msvc': 4.53.3
       fsevents: 2.3.3
 
   router@2.2.0:
@@ -10667,8 +12275,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  scheduler@0.26.0: {}
-
   scslre@0.3.0:
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -10679,6 +12285,8 @@ snapshots:
 
   semver@7.7.2: {}
 
+  semver@7.7.3: {}
+
   send@1.2.0:
     dependencies:
       debug: 4.4.3(supports-color@5.5.0)
@@ -10686,8 +12294,8 @@ snapshots:
       escape-html: 1.0.3
       etag: 1.8.1
       fresh: 2.0.0
-      http-errors: 2.0.0
-      mime-types: 3.0.1
+      http-errors: 2.0.1
+      mime-types: 3.0.2
       ms: 2.1.3
       on-finished: 2.4.1
       range-parser: 1.2.1
@@ -10770,7 +12378,7 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  simple-git@3.28.0:
+  simple-git@3.30.0:
     dependencies:
       '@kwsites/file-exists': 1.1.1
       '@kwsites/promise-deferred': 1.1.1
@@ -10778,13 +12386,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  simple-swizzle@0.2.4:
-    dependencies:
-      is-arrayish: 0.3.4
-
   simple-update-notifier@2.0.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   sirv@3.0.2:
     dependencies:
@@ -10804,9 +12408,12 @@ snapshots:
       ansi-styles: 6.2.3
       is-fullwidth-code-point: 5.1.0
 
-  source-map-js@1.2.1: {}
+  sonner@2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  source-map@0.5.7: {}
+  source-map-js@1.2.1: {}
 
   source-map@0.6.1: {}
 
@@ -10827,11 +12434,9 @@ snapshots:
 
   standard-as-callback@2.1.0: {}
 
-  statuses@2.0.1: {}
-
   statuses@2.0.2: {}
 
-  std-env@3.9.0: {}
+  std-env@3.10.0: {}
 
   stop-iteration-iterator@1.1.0:
     dependencies:
@@ -10854,7 +12459,7 @@ snapshots:
 
   string-width@7.2.0:
     dependencies:
-      emoji-regex: 10.5.0
+      emoji-regex: 10.6.0
       get-east-asian-width: 1.4.0
       strip-ansi: 7.1.2
 
@@ -10932,19 +12537,17 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  strip-literal@3.0.0:
+  strip-literal@3.1.0:
     dependencies:
       js-tokens: 9.0.1
 
-  stylis@4.2.0: {}
-
   superagent@10.2.3:
     dependencies:
       component-emitter: 1.3.1
       cookiejar: 2.1.4
       debug: 4.4.3(supports-color@5.5.0)
       fast-safe-stringify: 2.1.1
-      form-data: 4.0.4
+      form-data: 4.0.5
       formidable: 3.5.4
       methods: 1.1.2
       mime: 2.6.0
@@ -10971,18 +12574,13 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
-  tailwindcss@4.1.13: {}
+  tailwind-merge@3.4.0: {}
 
-  tapable@2.2.3: {}
+  tailwindcss@4.1.17: {}
 
-  tar@7.4.3:
-    dependencies:
-      '@isaacs/fs-minipass': 4.0.1
-      chownr: 3.0.0
-      minipass: 7.1.2
-      minizlib: 3.0.2
-      mkdirp: 3.0.1
-      yallist: 5.0.0
+  tailwindcss@4.1.18: {}
+
+  tapable@2.3.0: {}
 
   tdigest@0.1.2:
     dependencies:
@@ -10997,11 +12595,13 @@ snapshots:
   test-exclude@7.0.1:
     dependencies:
       '@istanbuljs/schema': 0.1.3
-      glob: 10.4.5
+      glob: 10.5.0
       minimatch: 9.0.5
 
   text-hex@1.0.0: {}
 
+  tiny-invariant@1.3.3: {}
+
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
@@ -11015,7 +12615,7 @@ snapshots:
 
   tinyrainbow@2.0.0: {}
 
-  tinyspy@4.0.3: {}
+  tinyspy@4.0.4: {}
 
   tldts-core@6.1.86: {}
 
@@ -11047,14 +12647,14 @@ snapshots:
     dependencies:
       typescript: 5.7.3
 
-  ts-node@10.9.2(@types/node@22.18.5)(typescript@5.7.3):
+  ts-node@10.9.2(@swc/core@1.15.3)(@types/node@22.19.1)(typescript@5.7.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node10': 1.0.12
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 22.18.5
+      '@types/node': 22.19.1
       acorn: 8.15.0
       acorn-walk: 8.3.4
       arg: 4.1.3
@@ -11064,6 +12664,8 @@ snapshots:
       typescript: 5.7.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.15.3
 
   tsconfig-paths@4.2.0:
     dependencies:
@@ -11071,10 +12673,12 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tsx@4.20.5:
+  tslib@2.8.1: {}
+
+  tsx@4.20.6:
     dependencies:
-      esbuild: 0.25.9
-      get-tsconfig: 4.10.1
+      esbuild: 0.25.12
+      get-tsconfig: 4.13.0
     optionalDependencies:
       fsevents: 2.3.3
 
@@ -11088,7 +12692,7 @@ snapshots:
     dependencies:
       content-type: 1.0.5
       media-typer: 1.1.0
-      mime-types: 3.0.1
+      mime-types: 3.0.2
 
   typed-array-buffer@1.0.3:
     dependencies:
@@ -11127,13 +12731,13 @@ snapshots:
     dependencies:
       is-typedarray: 1.0.0
 
-  typescript-eslint@8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3):
+  typescript-eslint@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3))(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)
-      '@typescript-eslint/parser': 8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)
-      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.7.3)
-      eslint: 9.35.0(jiti@2.5.1)
+      '@typescript-eslint/eslint-plugin': 8.47.0(@typescript-eslint/parser@8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/parser': 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.47.0(typescript@5.7.3)
+      '@typescript-eslint/utils': 8.47.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.7.3)
+      eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.7.3
     transitivePeerDependencies:
       - supports-color
@@ -11157,9 +12761,9 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  update-browserslist-db@1.1.3(browserslist@4.26.2):
+  update-browserslist-db@1.1.4(browserslist@4.28.0):
     dependencies:
-      browserslist: 4.26.2
+      browserslist: 4.28.0
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -11167,11 +12771,24 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  use-isomorphic-layout-effect@1.2.1(@types/react@19.1.13)(react@19.1.1):
+  use-callback-ref@1.3.3(@types/react@18.3.27)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.27
+
+  use-sidecar@1.1.3(@types/react@18.3.27)(react@18.3.1):
     dependencies:
-      react: 19.1.1
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.1.13
+      '@types/react': 18.3.27
+
+  use-sync-external-store@1.6.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
 
   util-deprecate@1.0.2: {}
 
@@ -11179,17 +12796,64 @@ snapshots:
 
   v8-compile-cache-lib@3.0.1: {}
 
-  validator@13.12.0: {}
+  validator@13.15.23: {}
 
   vary@1.1.2: {}
 
-  vite-node@3.2.4(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1):
+  vaul@1.1.2(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  vite-node@3.2.4(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3(supports-color@5.5.0)
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite-node@3.2.4(@types/node@22.19.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3(supports-color@5.5.0)
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.19.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -11204,27 +12868,87 @@ snapshots:
       - tsx
       - yaml
 
-  vite@6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1):
+  vite@6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.53.3
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 20.19.25
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      tsx: 4.20.6
+      yaml: 2.8.1
+
+  vite@6.3.5(@types/node@22.19.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1):
     dependencies:
-      esbuild: 0.25.9
+      esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
-      rollup: 4.50.2
+      rollup: 4.53.3
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 22.18.5
+      '@types/node': 22.19.1
       fsevents: 2.3.3
-      jiti: 2.5.1
-      lightningcss: 1.30.1
-      tsx: 4.20.5
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      tsx: 4.20.6
       yaml: 2.8.1
 
-  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.5)(@vitest/ui@3.2.4)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@20.19.25)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3(supports-color@5.5.0)
+      expect-type: 1.2.2
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 6.3.5(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@20.19.25)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/debug': 4.1.12
+      '@types/node': 20.19.25
+      '@vitest/ui': 3.2.4(vitest@3.2.4)
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.19.1)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1):
     dependencies:
-      '@types/chai': 5.2.2
+      '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@22.19.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -11233,21 +12957,21 @@ snapshots:
       chai: 5.3.3
       debug: 4.4.3(supports-color@5.5.0)
       expect-type: 1.2.2
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       pathe: 2.0.3
       picomatch: 4.0.3
-      std-env: 3.9.0
+      std-env: 3.10.0
       tinybench: 2.9.0
       tinyexec: 0.3.2
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 6.3.6(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@22.18.5)(jiti@2.5.1)(lightningcss@1.30.1)(tsx@4.20.5)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.19.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@22.19.1)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.6)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12
-      '@types/node': 22.18.5
+      '@types/node': 22.19.1
       '@vitest/ui': 3.2.4(vitest@3.2.4)
       jsdom: 26.1.0
     transitivePeerDependencies:
@@ -11297,7 +13021,7 @@ snapshots:
       is-async-function: 2.1.1
       is-date-object: 1.1.0
       is-finalizationregistry: 1.1.1
-      is-generator-function: 1.1.0
+      is-generator-function: 1.1.2
       is-regex: 1.2.1
       is-weakref: 1.1.1
       isarray: 2.0.5
@@ -11333,12 +13057,12 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  winston-daily-rotate-file@5.0.0(winston@3.17.0):
+  winston-daily-rotate-file@5.0.0(winston@3.18.3):
     dependencies:
       file-stream-rotator: 0.6.1
       object-hash: 3.0.0
       triple-beam: 1.4.1
-      winston: 3.17.0
+      winston: 3.18.3
       winston-transport: 4.9.0
 
   winston-transport@4.9.0:
@@ -11347,10 +13071,10 @@ snapshots:
       readable-stream: 3.6.2
       triple-beam: 1.4.1
 
-  winston@3.17.0:
+  winston@3.18.3:
     dependencies:
       '@colors/colors': 1.6.0
-      '@dabh/diagnostics': 2.0.3
+      '@dabh/diagnostics': 2.0.8
       async: 3.2.6
       is-stream: 2.0.1
       logform: 2.7.0
@@ -11406,10 +13130,6 @@ snapshots:
 
   yallist@3.1.1: {}
 
-  yallist@5.0.0: {}
-
-  yaml@1.10.2: {}
-
   yaml@2.8.1: {}
 
   yargs-parser@18.1.3:
diff --git a/prompts/comments-enhancement-backend.md b/prompts/comments-enhancement-backend.md
index 71217192..ce09dfd3 100644
--- a/prompts/comments-enhancement-backend.md
+++ b/prompts/comments-enhancement-backend.md
@@ -2,14 +2,14 @@
 
 ## Project Context
 
-You are enhancing the backend codebase for *gitray*, an open-source project that
+You are enhancing the backend codebase for _gitray_, an open-source project that
 provides visualizations and analysis of Git repositories. This codebase uses
 TypeScript exclusively and will undergo professional code review focusing on
 comment quality and best practices adherence.
 
 ## Core Commenting Philosophy
 
-*BALANCE IS KEY*: Add meaningful, professional comments that enhance code
+_BALANCE IS KEY_: Add meaningful, professional comments that enhance code
 understanding WITHOUT creating comment clutter. Comments should illuminate the
 "why" and complex "how", not obvious "what".
 
@@ -18,7 +18,7 @@ understanding WITHOUT creating comment clutter. Comments should illuminate the
 ### 1. JSDoc for Public APIs
 
 typescript
-/**
+/\*\*
 
 - Analyzes Git repository commit patterns and generates statistical insights.
 -
@@ -34,16 +34,14 @@ typescript
 - includeFileChanges: true,
 - maxCommits: 1000
 - });
--
-
- */
+- \*/
 
 ### 2. Strategic Inline Comments
 
-- *Complex Business Logic*: Explain algorithms, calculations, and non-obvious decisions
-- *Performance Optimizations*: Why specific approaches were chosen
-- *Edge Cases*: Handling of unusual but important scenarios
-- *External Dependencies*: Integration points and API interactions
+- _Complex Business Logic_: Explain algorithms, calculations, and non-obvious decisions
+- _Performance Optimizations_: Why specific approaches were chosen
+- _Edge Cases_: Handling of unusual but important scenarios
+- _External Dependencies_: Integration points and API interactions
 
 ### 3. What NOT to Comment
 
@@ -58,11 +56,11 @@ typescript
 
 typescript
 // Example of GOOD commenting for database operations:
-/**
+/\*\*
 
 - Optimizes commit history queries by batching requests and using indexed fields.
 - Prevents memory overflow for repositories with 100k+ commits.
- */
+  \*/
 
 ### Git Integration Logic
 
@@ -108,26 +106,26 @@ typescript
 ### Type Definitions
 
 typescript
-/**
+/\*\*
 
 - Represents a Git commit with enhanced metadata for visualization.
 - Optimized for frontend consumption and chart generation.
- */
-interface CommitVisualizationData {
+  _/
+  interface CommitVisualizationData {
   // Only comment complex or domain-specific properties
-  /**Calculated impact score based on files changed and line additions/deletions*/
+  /\*\*Calculated impact score based on files changed and line additions/deletions_/
   impactScore: number;
-}
+  }
 
 ### Generic Functions
 
 typescript
-/**
+/\*\*
 
 - Generic repository data transformer that converts raw Git data
 - into visualization-ready formats while preserving type safety.
- */
-function transformRepositoryData<T extends RepositoryData>(data: T): VisualizationData<T>
+  \*/
+  function transformRepositoryData<T extends RepositoryData>(data: T): VisualizationData<T>
 
 ## Code Review Standards
 
@@ -141,12 +139,12 @@ Remember: This code will be professionally reviewed. Comments should:
 
 ## Implementation Instructions
 
-1. *Scan each file* for functions/classes that handle complex logic
-2. *Prioritize public APIs* and exported functions for comprehensive JSDoc
-3. *Focus on git-specific operations* that may not be familiar to all developers
-4. *Add strategic inline comments* for business logic and optimizations
-5. *Review existing comments* and enhance or remove as needed
-6. *Maintain consistency* in comment style across the entire backend
+1. _Scan each file_ for functions/classes that handle complex logic
+2. _Prioritize public APIs_ and exported functions for comprehensive JSDoc
+3. _Focus on git-specific operations_ that may not be familiar to all developers
+4. _Add strategic inline comments_ for business logic and optimizations
+5. _Review existing comments_ and enhance or remove as needed
+6. _Maintain consistency_ in comment style across the entire backend
 
 ## Final Quality Check
 
@@ -160,5 +158,5 @@ Before finalizing, ensure:
 
 ---
 
-*Remember*: Professional code comments are like good documentation—they make
+_Remember_: Professional code comments are like good documentation—they make
 the complex simple, not the simple complex.
diff --git a/prompts/unit-test-optimization.md b/prompts/unit-test-optimization.md
index ed29dc91..cfe1a93e 100644
--- a/prompts/unit-test-optimization.md
+++ b/prompts/unit-test-optimization.md
@@ -19,21 +19,20 @@ You receive:
 
 **Step 1: Find Uncovered Paths**
 
-* Enumerate every function, method, class, constructor, loop, branch (`if/else`, `switch`), early return, and `try/catch`.
-* Highlight paths *not* exercised by the present tests.
-* Give special attention to:
-
-  * Error-handling blocks (`catch`).
-  * `process.env` or feature-flag conditionals.
-  * Boundary values and edge cases.
-  * Constructor logic and default assignments.
-  * Private helpers that influence public behaviour.
+- Enumerate every function, method, class, constructor, loop, branch (`if/else`, `switch`), early return, and `try/catch`.
+- Highlight paths _not_ exercised by the present tests.
+- Give special attention to:
+  - Error-handling blocks (`catch`).
+  - `process.env` or feature-flag conditionals.
+  - Boundary values and edge cases.
+  - Constructor logic and default assignments.
+  - Private helpers that influence public behaviour.
 
 **Step 2: Real vs Potential Coverage**
 
-* Estimate current line/branch/function coverage.
-* Rank missing paths by impact on core functionality.
-* Focus first on high-impact and high-risk paths.
+- Estimate current line/branch/function coverage.
+- Rank missing paths by impact on core functionality.
+- Focus first on high-impact and high-risk paths.
 
 ---
 
@@ -41,7 +40,7 @@ You receive:
 
 Identify anti-patterns:
 
-| ❌ Anti-Pattern                    | Example                                                      |
+| ❌ Anti-Pattern                   | Example                                                      |
 | --------------------------------- | ------------------------------------------------------------ |
 | **Language-feature tests**        | `ts expect(JSON.parse(result))`                              |
 | **Happy-path explosion**          | 20 near-identical tests for type variants                    |
@@ -51,9 +50,9 @@ Identify anti-patterns:
 
 Remove / merge anything that:
 
-* Re-tests JavaScript built-ins or third-party libs.
-* Exercises identical logic with cosmetic input changes.
-* Depends on production resources in a “unit” context.
+- Re-tests JavaScript built-ins or third-party libs.
+- Exercises identical logic with cosmetic input changes.
+- Depends on production resources in a “unit” context.
 
 ---
 
@@ -61,15 +60,15 @@ Remove / merge anything that:
 
 Ask:
 
-* Which `process.env` variables, feature flags, or platform guards modify behaviour?
-* Are mocks masking real error, retry, or async paths?
-* Do production-only code branches stay untested?
+- Which `process.env` variables, feature flags, or platform guards modify behaviour?
+- Are mocks masking real error, retry, or async paths?
+- Do production-only code branches stay untested?
 
 Common pitfalls:
 
-* Tests pass in CI but fail in prod due to env mismatches.
-* Disabled flags hide dead code.
-* Over-mocking prevents observing real exceptions or retries.
+- Tests pass in CI but fail in prod due to env mismatches.
+- Disabled flags hide dead code.
+- Over-mocking prevents observing real exceptions or retries.
 
 ---
 
@@ -98,11 +97,11 @@ Common pitfalls:
 1. **Env-Variable Paths** – simulate different `process.env` and flag combos.
 2. **Error Paths** – provoke every `catch` block and retry loop.
 3. **Branch Coverage** – guarantee both sides of each conditional.
-4. **Boundary & Edge** – choose edge inputs that *actually* create new branches.
+4. **Boundary & Edge** – choose edge inputs that _actually_ create new branches.
 
 ### Phase 3 — Optimise Test Structure
 
-1. Enforce the **AAA pattern** in *every* test.
+1. Enforce the **AAA pattern** in _every_ test.
 2. Start with a clear, green **happy path**.
 3. Keep setup minimal; prefer explicit factories/context helpers over `beforeEach`.
 4. One intention per test; descriptive titles: `should <behaviour> when <condition>`.
@@ -125,7 +124,7 @@ Common pitfalls:
 | **12**                     | **Fast In-Memory Cache Mock**                                | Map-based mock implementing `get`, `set`, `del`, `getStats`.                                   |
 | **Performance Monitoring** | Patch `global.test` to emit 🐌 warnings if runtime > 100 ms. |                                                                                                |
 
-*(Technique numbers match the original list; #1 and #10 omitted because they involve direct config edits.)*
+_(Technique numbers match the original list; #1 and #10 omitted because they involve direct config edits.)_
 
 ---
 
@@ -135,48 +134,48 @@ Return **exactly** this structure:
 
 ### 🔍 Coverage Analysis
 
-* **Current Estimated Coverage:** X %
-* **Target Coverage:** Y %
-* **Primary Coverage Gaps:** …
-* **Root Cause of Low Coverage:** …
+- **Current Estimated Coverage:** X %
+- **Target Coverage:** Y %
+- **Primary Coverage Gaps:** …
+- **Root Cause of Low Coverage:** …
 
 ### 🗑️ Bloat Identification
 
-* **Lines of Bloated Tests:** …
-* **Anti-Patterns Found:** …
-* **Redundant Test Count:** …
+- **Lines of Bloated Tests:** …
+- **Anti-Patterns Found:** …
+- **Redundant Test Count:** …
 
 ### 🎯 Optimisation Strategy
 
-* **High-Impact Tests Needed (3-5):** …
-* **Environment/Config Tests:** …
-* **Error Path Tests:** …
+- **High-Impact Tests Needed (3-5):** …
+- **Environment/Config Tests:** …
+- **Error Path Tests:** …
 
 ### ✅ Optimised Test Suite
 
-*(full rewritten `test.ts` here – strictly AAA, descriptive titles, no language built-ins, shorter yet higher coverage)*
+_(full rewritten `test.ts` here – strictly AAA, descriptive titles, no language built-ins, shorter yet higher coverage)_
 
 ---
 
 ## ⛔ NEVER TEST
 
-* Built-ins (`JSON.stringify`, `typeof`, `Array.map`, …).
-* Third-party internals (unless wrapped by your logic).
-* Pure pass-through validation to built-ins.
+- Built-ins (`JSON.stringify`, `typeof`, `Array.map`, …).
+- Third-party internals (unless wrapped by your logic).
+- Pure pass-through validation to built-ins.
 
 ## ✅ ALWAYS TEST
 
-* Error handling, retries, fallbacks.
-* Business-logic branches.
-* Feature-flag and `process.env` variations.
-* State transitions & cleanup.
-* Integration logic (how you *use* dependencies).
-* Algorithmic paths.
+- Error handling, retries, fallbacks.
+- Business-logic branches.
+- Feature-flag and `process.env` variations.
+- State transitions & cleanup.
+- Integration logic (how you _use_ dependencies).
+- Algorithmic paths.
 
 ## 🏷️ TEST NAME FORMAT
 
 `should <expected behaviour> when <specific condition>`
-*(e.g. `should switch to fallback mode when worker init fails`)*
+_(e.g. `should switch to fallback mode when worker init fails`)_
 
 ## 🏗️ AAA TEMPLATE
 
@@ -199,11 +198,11 @@ test('should [behaviour] when [condition]', () => {
 
 ## 🎯 SUCCESS METRICS
 
-* **≥ 80 % relative coverage gain** with ≤ original lines.
-* **≥ 50 % test-file length reduction**.
-* **0** language-built-in assertions.
-* **100 % AAA compliance**.
-* Clear mapping of tests to code paths.
+- **≥ 80 % relative coverage gain** with ≤ original lines.
+- **≥ 50 % test-file length reduction**.
+- **0** language-built-in assertions.
+- **100 % AAA compliance**.
+- Clear mapping of tests to code paths.
 
 ---
 
diff --git a/scripts/api_test_scenarios.md b/scripts/api_test_scenarios.md
index df96a8ce..b13b27f8 100644
--- a/scripts/api_test_scenarios.md
+++ b/scripts/api_test_scenarios.md
@@ -1,9 +1,11 @@
 <!-- markdownlint-disable -->
+
 # Comprehensive API Testing Scenarios
 
 ## Route 1: `/api/repositories/heatmap` (REFACTORED)
 
 ### Valid Scenarios
+
 1. **No filters** - Baseline test
    - Expected: Full heatmap data with all commits
    - Validates: Basic functionality works after refactor
@@ -39,17 +41,20 @@
    - Validates: Complete filter pipeline
 
 ### Cache Behavior
+
 1. **First call** - Should be cache MISS
 2. **Second call (same params)** - Should be cache HIT
 3. **Different params** - Should be cache MISS
 
 ### Error Scenarios
+
 1. **Missing repoUrl** - HTTP 400
 2. **Invalid repoUrl format** - HTTP 400
 3. **Invalid date format** - HTTP 400
 4. **Invalid URL scheme** - HTTP 400
 
 ### Response Validation
+
 - Contains `data` array
 - Contains `timePeriod` field
 - Data points have required fields: date, commits, authors
@@ -60,6 +65,7 @@
 ## Route 2: `/api/repositories/contributors` (REFACTORED)
 
 ### Valid Scenarios
+
 1. **No filters** - All contributors
    - Expected: Array of contributors with stats
    - Validates: Basic functionality
@@ -84,12 +90,15 @@
    - Input: `fromDate=2024-01-01&toDate=2024-12-31&author=jonas`
 
 ### Cache Behavior
+
 - Same as heatmap
 
 ### Error Scenarios
+
 - Same as heatmap
 
 ### Response Validation
+
 - Returns array of contributor objects
 - Each contributor has: name, email, commits, additions, deletions
 - Sorted by commit count descending
@@ -100,6 +109,7 @@
 ## Route 3: `/api/repositories/churn` (REFACTORED)
 
 ### Valid Scenarios
+
 1. **No filters** - All churn data
    - Expected: Complete churn analysis
    - Validates: Basic functionality
@@ -137,13 +147,16 @@
    - Expected: All filters applied
 
 ### Cache Behavior
+
 - Same pattern as other routes
 
 ### Error Scenarios
+
 - Same as heatmap
 - Invalid minChanges (non-numeric) - HTTP 400
 
 ### Response Validation
+
 - Contains `files` array
 - Contains `summary` object
 - Files have: path, additions, deletions, changes
@@ -154,6 +167,7 @@
 ## Route 4: `/api/repositories/full-data` (NOT REFACTORED)
 
 ### Valid Scenarios
+
 1. **No filters, default pagination**
    - Expected: First 100 commits + heatmap
    - Validates: No regression in non-refactored code
@@ -174,14 +188,17 @@
    - Input: `fromDate=2024-01-01&page=1&limit=5`
 
 ### Cache Behavior
+
 - Two cache operations (commits + heatmapData)
 - Sequential fetching (not parallel)
 - Both should cache independently
 
 ### Error Scenarios
+
 - Same as heatmap
 
 ### Response Validation
+
 - Contains `commits` array
 - Contains `heatmapData` object
 - heatmapData has `data` and `timePeriod`
@@ -194,6 +211,7 @@
 ## Route 5: `/api/repositories/commits` (NOT REFACTORED)
 
 ### Valid Scenarios
+
 1. **Default pagination**
    - Expected: First 100 commits
 
@@ -206,12 +224,15 @@
    - Expected: Commits 21-40
 
 ### Cache Behavior
+
 - Standard cache hit/miss pattern
 
 ### Error Scenarios
+
 - Same as heatmap
 
 ### Response Validation
+
 - Returns array of commit objects
 - Each commit has: hash, message, author, date, stats
 - Proper pagination applied
@@ -222,17 +243,21 @@
 ## Route 6: `/api/repositories/summary` (NOT REFACTORED)
 
 ### Valid Scenarios
+
 1. **Basic request**
    - Expected: Repository summary with all stats
 
 ### Cache Behavior
+
 - Single cache operation
 - Should cache entire summary
 
 ### Error Scenarios
+
 - Same as heatmap
 
 ### Response Validation
+
 - Contains `repository` object (name, url, defaultBranch)
 - Contains `statistics` object (commits, contributors, files, etc.)
 - Contains `timeline` data
@@ -243,16 +268,19 @@
 ## Cross-Route Testing
 
 ### Cache Consistency
+
 1. Call heatmap → cache miss
 2. Call contributors → separate cache miss
 3. Call heatmap again → cache hit
 4. Call contributors again → cache hit
 
 ### Filter Consistency
+
 1. Same date filters across routes should use same data subset
 2. Author filters should match commit authors
 
 ### Performance
+
 1. First call (cache miss) - slower
 2. Second call (cache hit) - fast (<50ms)
 3. Different params - cache miss
@@ -262,6 +290,7 @@
 ## Error Handling Consistency
 
 All routes should handle these consistently:
+
 1. Missing repoUrl → HTTP 400, specific error message
 2. Invalid repoUrl → HTTP 400, validation error
 3. Invalid date format → HTTP 400, validation error
diff --git a/scripts/verify-health.sh b/scripts/verify-health.sh
new file mode 100644
index 00000000..708ad419
--- /dev/null
+++ b/scripts/verify-health.sh
@@ -0,0 +1,161 @@
+#!/bin/bash
+
+# GitRay - Comprehensive Verification Script
+# Tests all critical commands after migration or major changes
+
+set -e  # Exit on error
+
+# Color codes
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Counters
+PASSED=0
+FAILED=0
+WARNINGS=0
+
+# Helper functions
+print_header() {
+    echo -e "\n${BLUE}========================================${NC}"
+    echo -e "${BLUE}$1${NC}"
+    echo -e "${BLUE}========================================${NC}\n"
+}
+
+print_test() {
+    echo -e "${YELLOW}Testing: $1${NC}"
+}
+
+print_success() {
+    echo -e "${GREEN}✅ PASSED: $1${NC}"
+    ((PASSED++))
+}
+
+print_failure() {
+    echo -e "${RED}❌ FAILED: $1${NC}"
+    ((FAILED++))
+}
+
+print_warning() {
+    echo -e "${YELLOW}⚠️  WARNING: $1${NC}"
+    ((WARNINGS++))
+}
+
+# Test function wrapper
+run_test() {
+    local test_name="$1"
+    local command="$2"
+    local expect_success="${3:-true}"
+    
+    print_test "$test_name"
+    
+    if eval "$command" > /tmp/gitray_test_output.log 2>&1; then
+        if [ "$expect_success" = "true" ]; then
+            print_success "$test_name"
+        else
+            print_warning "$test_name (expected to fail but passed)"
+        fi
+    else
+        if [ "$expect_success" = "true" ]; then
+            print_failure "$test_name"
+            echo "Command output:"
+            tail -20 /tmp/gitray_test_output.log
+        else
+            print_success "$test_name (expected to fail)"
+        fi
+    fi
+}
+
+# Main test suite
+main() {
+    print_header "GitRay Verification Script"
+    
+    echo "Starting comprehensive verification..."
+    echo "Date: $(date)"
+    echo ""
+    
+    # Check dependencies
+    print_header "1. Dependency Check"
+    
+    for cmd in pnpm node docker git; do
+        if command -v $cmd &> /dev/null; then
+            print_success "$cmd is installed"
+        else
+            print_failure "$cmd is NOT installed"
+        fi
+    done
+    
+    # Check for legacy references
+    print_header "2. Migration Verification"
+    
+    print_test "Checking for legacy 'frontendOld' references"
+    if ! grep -r "frontendOld" --exclude-dir=node_modules --exclude-dir=dist --exclude-dir=.git --exclude="*.log" . 2>/dev/null; then
+        print_success "No legacy references found"
+    else
+        print_warning "Found references to 'frontendOld'"
+    fi
+    
+    # Build tests
+    print_header "3. Build Commands"
+    
+    run_test "Build shared-types" "pnpm run build:shared-types"
+    run_test "Build backend" "pnpm --filter backend build"
+    run_test "Build frontend" "pnpm --filter frontend build"
+    
+    # Lint tests
+    print_header "4. Code Quality"
+    
+    run_test "ESLint check" "pnpm run lint"
+    run_test "Markdown lint" "pnpm run lint:md"
+    run_test "TypeScript check (frontend)" "pnpm --filter frontend run type-check"
+    
+    # Test suite
+    print_header "5. Test Suite"
+    
+    run_test "Backend tests" "pnpm run test:backend"
+    run_test "Frontend tests" "pnpm run test:frontend"
+    
+    # Cleanup tests
+    print_header "6. Cleanup Commands"
+    
+    run_test "Clean cache" "pnpm run clean:cache"
+    
+    # Shell script verification
+    print_header "7. Shell Scripts"
+    
+    for script in scripts/*.sh; do
+        if [ -x "$script" ]; then
+            print_success "$(basename $script) is executable"
+        else
+            print_warning "$(basename $script) is NOT executable"
+        fi
+    done
+    
+    # Summary
+    print_header "VERIFICATION SUMMARY"
+    
+    echo -e "Total Passed:   ${GREEN}$PASSED${NC}"
+    echo -e "Total Failed:   ${RED}$FAILED${NC}"
+    echo -e "Total Warnings: ${YELLOW}$WARNINGS${NC}"
+    echo ""
+    
+    if [ $FAILED -eq 0 ]; then
+        echo -e "${GREEN}✅ All critical tests passed!${NC}"
+        exit 0
+    else
+        echo -e "${RED}❌ Some tests failed. Please review the output above.${NC}"
+        exit 1
+    fi
+}
+
+# Cleanup
+cleanup() {
+    rm -f /tmp/gitray_test_output.log
+}
+
+trap cleanup EXIT
+
+# Run main
+main "$@"