refactor(web): migrate from Next.js to Vite + React Router

web/src/app/auth/space/callback/page.tsx

@@ -1,7 +1,7 @@
-'use client';
+
 
 import { useEffect, useState, useCallback, Suspense } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -23,7 +23,7 @@ import { LoadingSpinner } from '@/components/ui/loading-spinner';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
 
 function SpaceOAuthCallbackContent() {
-  const router = useRouter();
+  const navigate = useNavigate();
   const searchParams = useSearchParams();
   const { t } = useTranslation();
 
@@ -51,7 +51,7 @@ function SpaceOAuthCallbackContent() {
         const wizardState = localStorage.getItem('langbot_wizard_state');
         const redirectTo = wizardState ? '/wizard' : '/home';
         setTimeout(() => {
-          router.push(redirectTo);
+          navigate(redirectTo);
         }, 1000);
       } catch (err) {
         setStatus('error');
@@ -81,7 +81,7 @@ function SpaceOAuthCallbackContent() {
         setStatus('success');
         toast.success(t('account.bindSpaceSuccess'));
         setTimeout(() => {
-          router.push('/home');
+          navigate('/home');
         }, 1000);
       } catch (err) {
         setStatus('error');
@@ -146,7 +146,7 @@ function SpaceOAuthCallbackContent() {
   };
 
   const handleCancelBind = () => {
-    router.push('/home');
+    navigate('/home');
   };
 
   return (
@@ -217,7 +217,7 @@ function SpaceOAuthCallbackContent() {
             <>
               <AlertCircle className="h-12 w-12 text-red-500" />
               <Button
-                onClick={() => router.push(isBindMode ? '/home' : '/login')}
+                onClick={() => navigate(isBindMode ? '/home' : '/login')}
                 className="w-full mt-4"
               >
                 {isBindMode ? t('common.backToHome') : t('common.backToLogin')}

web/src/app/global.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+@import "tw-animate-css";
 :root {
   /* 适用于 Firefox 的滚动条 */
   scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* 滑块颜色 + 轨道颜色 */
@@ -72,9 +74,7 @@
   }
 }
 
-@import 'tailwindcss';
 
-@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 

web/src/app/home/bots/BotDetailContent.tsx

@@ -1,7 +1,7 @@
-'use client';
+
 
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
@@ -34,7 +34,7 @@ import { toast } from 'sonner';
 
 export default function BotDetailContent({ id }: { id: string }) {
   const isCreateMode = id === 'new';
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { refreshBots, bots, setDetailEntityName } = useSidebarData();
 
@@ -105,12 +105,12 @@ export default function BotDetailContent({ id }: { id: string }) {
 
   function handleBotDeleted() {
     refreshBots();
-    router.push('/home/bots');
+    navigate('/home/bots');
   }
 
   function handleNewBotCreated(newBotId: string) {
     refreshBots();
-    router.push(`/home/bots?id=${encodeURIComponent(newBotId)}`);
+    navigate(`/home/bots?id=${encodeURIComponent(newBotId)}`);
   }
 
   function confirmDelete() {

web/src/app/home/bots/components/bot-log/view/BotLogCard.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useState } from 'react';
 import { BotLog } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';

web/src/app/home/bots/components/bot-log/view/BotLogListComponent.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { BotLogManager } from '@/app/home/bots/components/bot-log/BotLogManager';
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
@@ -15,7 +15,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { ChevronDownIcon, ExternalLink } from 'lucide-react';
 import { debounce } from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 
 export function BotLogListComponent({
   botId,
@@ -32,7 +32,7 @@ export function BotLogListComponent({
   hideToolbar?: boolean;
 }) {
   const { t } = useTranslation();
-  const router = useRouter();
+  const navigate = useNavigate();
   const manager = useRef(new BotLogManager(botId)).current;
   const [botLogList, setBotLogList] = useState<BotLog[]>([]);
   const [autoFlush, setAutoFlush] = useState(true);
@@ -231,7 +231,7 @@ export function BotLogListComponent({
               variant="outline"
               size="sm"
               className="gap-1"
-              onClick={() => router.push(`/home/monitoring?botId=${botId}`)}
+              onClick={() => navigate(`/home/monitoring?botId=${botId}`)}
             >
               <ExternalLink className="size-3.5" />
               <span className="text-sm">{t('bots.viewDetailedLogs')}</span>

web/src/app/home/bots/components/bot-session/BotSessionMonitor.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, {
   useState,

web/src/app/home/bots/page.tsx

@@ -1,6 +1,6 @@
-'use client';
 
-import { useSearchParams } from 'next/navigation';
+
+import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import BotDetailContent from './BotDetailContent';
 

web/src/app/home/components/account-settings-dialog/AccountSettingsDialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import { useState, useEffect } from 'react';

web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx

@@ -1,11 +1,11 @@
-'use client';
+
 
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { Copy, Check, Trash2, Plus } from 'lucide-react';
-import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import {
   Dialog,
   DialogContent,
@@ -67,8 +67,9 @@ export default function ApiIntegrationDialog({
   onOpenChange,
 }: ApiIntegrationDialogProps) {
   const { t } = useTranslation();
-  const router = useRouter();
-  const pathname = usePathname();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pathname = location.pathname;;
   const searchParams = useSearchParams();
   const [activeTab, setActiveTab] = useState('apikeys');
   const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
@@ -94,7 +95,7 @@ export default function ApiIntegrationDialog({
     if (open) {
       const params = new URLSearchParams(searchParams.toString());
       params.set('action', 'showApiIntegrationSettings');
-      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+      navigate(`${pathname}?${params.toString()}`, { scroll: false });
     }
   }, [open]);
 
@@ -108,7 +109,7 @@ export default function ApiIntegrationDialog({
       const newUrl = params.toString()
         ? `${pathname}?${params.toString()}`
         : pathname;
-      router.replace(newUrl, { scroll: false });
+      navigate(newUrl, { scroll: false });
     }
     onOpenChange(newOpen);
   };

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -1,8 +1,8 @@
-'use client';
+
 
 import { useEffect, useState } from 'react';
 import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild';
-import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { sidebarConfigList } from '@/app/home/components/home-sidebar/sidbarConfigList';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
 import { systemInfo, httpClient } from '@/app/infra/http/HttpClient';
@@ -29,7 +29,7 @@ import {
   Github,
   Zap,
 } from 'lucide-react';
-import { useTheme } from 'next-themes';
+import { useTheme } from '@/components/providers/theme-provider';
 
 import {
   DropdownMenu,
@@ -244,8 +244,9 @@ function NavItems({
   sectionOpenState: Record<string, boolean>;
   onSectionToggle: (id: string, open: boolean) => void;
 }) {
-  const router = useRouter();
-  const pathname = usePathname();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pathname = location.pathname;;
   const searchParams = useSearchParams();
   const sidebarData = useSidebarData();
   const { setPendingPluginInstallAction } = sidebarData;
@@ -413,7 +414,7 @@ function NavItems({
                           'bg-accent text-accent-foreground font-medium',
                       )}
                       onClick={() => {
-                        router.push(itemRoute);
+                        navigate(itemRoute);
                         setPopoverOpen((prev) => ({
                           ...prev,
                           [config.id]: false,
@@ -471,7 +472,7 @@ function NavItems({
                             )}
                             onClick={(e) => {
                               e.preventDefault();
-                              router.push(itemRoute);
+                              navigate(itemRoute);
                             }}
                           >
                             {item.emoji ? (
@@ -623,7 +624,7 @@ function NavItems({
                               <DropdownMenuItem
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  router.push('/home/market');
+                                  navigate('/home/market');
                                   setPopoverOpen((prev) => ({
                                     ...prev,
                                     [config.id]: false,
@@ -638,7 +639,7 @@ function NavItems({
                               onClick={(e) => {
                                 e.stopPropagation();
                                 setPendingPluginInstallAction('local');
-                                router.push('/home/plugins');
+                                navigate('/home/plugins');
                                 setPopoverOpen((prev) => ({
                                   ...prev,
                                   [config.id]: false,
@@ -652,7 +653,7 @@ function NavItems({
                               onClick={(e) => {
                                 e.stopPropagation();
                                 setPendingPluginInstallAction('github');
-                                router.push('/home/plugins');
+                                navigate('/home/plugins');
                                 setPopoverOpen((prev) => ({
                                   ...prev,
                                   [config.id]: false,
@@ -669,7 +670,7 @@ function NavItems({
                           type="button"
                           className="p-1 rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
                           onClick={() => {
-                            router.push(`${routePrefix}?id=new`);
+                            navigate(`${routePrefix}?id=new`);
                             setPopoverOpen((prev) => ({
                               ...prev,
                               [config.id]: false,
@@ -731,7 +732,7 @@ function NavItems({
                             <DropdownMenuItem
                               onClick={(e) => {
                                 e.stopPropagation();
-                                router.push('/home/market');
+                                navigate('/home/market');
                               }}
                             >
                               <Store className="size-4" />
@@ -742,7 +743,7 @@ function NavItems({
                             onClick={(e) => {
                               e.stopPropagation();
                               setPendingPluginInstallAction('local');
-                              router.push('/home/plugins');
+                              navigate('/home/plugins');
                             }}
                           >
                             <Upload className="size-4" />
@@ -752,7 +753,7 @@ function NavItems({
                             onClick={(e) => {
                               e.stopPropagation();
                               setPendingPluginInstallAction('github');
-                              router.push('/home/plugins');
+                              navigate('/home/plugins');
                             }}
                           >
                             <Github className="size-4" />
@@ -766,7 +767,7 @@ function NavItems({
                         className="p-1 rounded-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground opacity-0 group-hover/category-header:opacity-100 transition-all"
                         onClick={(e) => {
                           e.stopPropagation();
-                          router.push(`${routePrefix}?id=new`);
+                          navigate(`${routePrefix}?id=new`);
                         }}
                       >
                         <Plus className="size-3.5" />
@@ -1029,8 +1030,9 @@ export default function HomeSidebar({
 }: {
   onSelectedChangeAction: (sidebarChild: SidebarChildVO) => void;
 }) {
-  const router = useRouter();
-  const pathname = usePathname();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pathname = location.pathname;;
   const searchParams = useSearchParams();
   const { isMobile } = useSidebar();
 
@@ -1071,14 +1073,14 @@ export default function HomeSidebar({
     if (open) {
       const params = new URLSearchParams(searchParams.toString());
       params.set('action', 'showModelSettings');
-      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+      navigate(`${pathname}?${params.toString()}`, { scroll: false });
     } else {
       const params = new URLSearchParams(searchParams.toString());
       params.delete('action');
       const newUrl = params.toString()
         ? `${pathname}?${params.toString()}`
         : pathname;
-      router.replace(newUrl, { scroll: false });
+      navigate(newUrl, { scroll: false });
     }
   }
 
@@ -1087,14 +1089,14 @@ export default function HomeSidebar({
     if (open) {
       const params = new URLSearchParams(searchParams.toString());
       params.set('action', 'showAccountSettings');
-      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+      navigate(`${pathname}?${params.toString()}`, { scroll: false });
     } else {
       const params = new URLSearchParams(searchParams.toString());
       params.delete('action');
       const newUrl = params.toString()
         ? `${pathname}?${params.toString()}`
         : pathname;
-      router.replace(newUrl, { scroll: false });
+      navigate(newUrl, { scroll: false });
     }
   }
 
@@ -1165,7 +1167,7 @@ export default function HomeSidebar({
   // User click: update state AND navigate
   function handleChildClick(child: SidebarChildVO) {
     selectChild(child);
-    router.push(child.route);
+    navigate(child.route);
   }
 
   function initSelect() {
@@ -1406,7 +1408,7 @@ export default function HomeSidebar({
                     <DropdownMenuItem
                       onClick={() => {
                         setUserMenuOpen(false);
-                        router.push('/wizard');
+                        navigate('/wizard');
                       }}
                     >
                       <Zap className="text-blue-500" />

web/src/app/home/components/home-sidebar/SidebarDataContext.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, {
   createContext,

web/src/app/home/components/models-dialog/ModelsDialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useState, useEffect } from 'react';
 import { Plus, Boxes } from 'lucide-react';

web/src/app/home/components/models-dialog/components/AddModelPopover.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useState, useEffect } from 'react';
 import { Plus, MessageSquareText, Cpu, Eye, Wrench, Check } from 'lucide-react';

web/src/app/home/components/models-dialog/components/ExtraArgsEditor.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { Plus, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';

web/src/app/home/components/models-dialog/components/ModelItem.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useState, useEffect } from 'react';
 import { Trash2, Eye, Wrench, Check } from 'lucide-react';

web/src/app/home/components/models-dialog/components/ProviderCard.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useState } from 'react';
 import {

web/src/app/home/components/new-version-dialog/NewVersionDialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';

web/src/app/home/components/password-change-dialog/PasswordChangeDialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import { useState, useEffect } from 'react';

web/src/app/home/components/survey/SurveyWidget.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';

web/src/app/home/knowledge/KBDetailContent.tsx

@@ -1,7 +1,7 @@
-'use client';
+
 
 import { useState, useEffect, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
 import {
@@ -32,7 +32,7 @@ import { FileText, FolderOpen, Search, Trash2 } from 'lucide-react';
 
 export default function KBDetailContent({ id }: { id: string }) {
   const isCreateMode = id === 'new';
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { refreshKnowledgeBases, knowledgeBases, setDetailEntityName } =
     useSidebarData();
@@ -84,12 +84,12 @@ export default function KBDetailContent({ id }: { id: string }) {
 
   function handleKbDeleted() {
     refreshKnowledgeBases();
-    router.push('/home/knowledge');
+    navigate('/home/knowledge');
   }
 
   function handleNewKbCreated(newKbId: string) {
     refreshKnowledgeBases();
-    router.push(`/home/knowledge?id=${encodeURIComponent(newKbId)}`);
+    navigate(`/home/knowledge?id=${encodeURIComponent(newKbId)}`);
   }
 
   function handleKbUpdated() {

web/src/app/home/knowledge/components/kb-docs/documents/columns.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { ColumnDef } from '@tanstack/react-table';
 import { MoreHorizontal } from 'lucide-react';

web/src/app/home/knowledge/components/kb-docs/documents/data-table.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import {
   ColumnDef,

web/src/app/home/knowledge/components/kb-form/KBForm.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';

web/src/app/home/knowledge/components/kb-migration-dialog/KBMigrationDialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useState } from 'react';
 import {

web/src/app/home/knowledge/components/kb-retrieve/KBRetrieveGeneric.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

web/src/app/home/knowledge/page.tsx

@@ -1,6 +1,6 @@
-'use client';
 
-import { useSearchParams } from 'next/navigation';
+
+import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';

web/src/app/home/layout.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import HomeSidebar from '@/app/home/components/home-sidebar/HomeSidebar';
 import SurveyWidget from '@/app/home/components/survey/SurveyWidget';
@@ -21,8 +21,8 @@ import {
   initializeUserInfo,
   initializeSystemInfo,
 } from '@/app/infra/http';
-import { usePathname, useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { CircleHelp } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -59,7 +59,7 @@ export default function HomeLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const router = useRouter();
+  const navigate = useNavigate();
 
   // Initialize user info if not already initialized
   useEffect(() => {
@@ -75,7 +75,7 @@ export default function HomeLayout({
         // Always re-fetch to ensure we have the latest wizard_status from backend
         await initializeSystemInfo();
         if (systemInfo.wizard_status === 'none') {
-          router.replace('/wizard');
+          navigate('/wizard');
         }
       } catch {
         // If fetching system info fails, don't redirect
@@ -101,7 +101,8 @@ function HomeLayoutInner({ children }: { children: React.ReactNode }) {
     zh_Hans: '',
   });
   const { detailEntityName } = useSidebarData();
-  const pathname = usePathname();
+  const location = useLocation();
+  const pathname = location.pathname;;
   const { t } = useTranslation();
 
   const onSelectedChangeAction = useCallback((child: SidebarChildVO) => {
@@ -139,7 +140,7 @@ function HomeLayoutInner({ children }: { children: React.ReactNode }) {
               <BreadcrumbList>
                 <BreadcrumbItem className="hidden md:block">
                   <BreadcrumbLink asChild>
-                    <Link href={sectionLink}>{sectionLabel}</Link>
+                    <Link to={sectionLink}>{sectionLabel}</Link>
                   </BreadcrumbLink>
                 </BreadcrumbItem>
                 <BreadcrumbSeparator className="hidden md:block" />

web/src/app/home/market/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import MarketPage from '@/app/home/plugins/components/plugin-market/PluginMarketComponent';
 import {

web/src/app/home/mcp/MCPDetailContent.tsx

@@ -1,7 +1,7 @@
-'use client';
+
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
@@ -30,7 +30,7 @@ import { toast } from 'sonner';
 
 export default function MCPDetailContent({ id }: { id: string }) {
   const isCreateMode = id === 'new';
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { refreshMCPServers, mcpServers, setDetailEntityName } =
     useSidebarData();
@@ -96,12 +96,12 @@ export default function MCPDetailContent({ id }: { id: string }) {
 
   function handleServerDeleted() {
     refreshMCPServers();
-    router.push('/home/mcp');
+    navigate('/home/mcp');
   }
 
   function handleNewServerCreated(serverName: string) {
     refreshMCPServers();
-    router.push(`/home/mcp?id=${encodeURIComponent(serverName)}`);
+    navigate(`/home/mcp?id=${encodeURIComponent(serverName)}`);
   }
 
   function confirmDelete() {

web/src/app/home/mcp/components/mcp-form/MCPForm.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, {
   useState,

web/src/app/home/mcp/page.tsx

@@ -1,6 +1,6 @@
-'use client';
 
-import { useSearchParams } from 'next/navigation';
+
+import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import MCPDetailContent from './MCPDetailContent';
 

web/src/app/home/monitoring/components/ExportDropdown.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/monitoring/components/FeedbackCard.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/monitoring/components/FeedbackList.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/monitoring/components/MessageContentRenderer.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useState } from 'react';
 import {

web/src/app/home/monitoring/components/MessageDetailsCard.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/monitoring/components/filters/MonitoringFilters.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/monitoring/components/overview-cards/MetricCard.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/monitoring/components/overview-cards/TrafficChart.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/monitoring/hooks/useMonitoringFilters.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'react-router-dom';
 import { FilterState, TimeRangeOption, DateRange } from '../types/monitoring';
 import { getPresetDateRange } from '../utils/dateUtils';
 

web/src/app/home/monitoring/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { Suspense, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/pipelines/PipelineDetailContent.tsx

@@ -1,7 +1,7 @@
-'use client';
+
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
 import PipelineFormComponent from '@/app/home/pipelines/components/pipeline-form/PipelineFormComponent';
@@ -13,7 +13,7 @@ import { Settings, Bug, BarChart3 } from 'lucide-react';
 
 export default function PipelineDetailContent({ id }: { id: string }) {
   const isCreateMode = id === 'new';
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { refreshPipelines, pipelines, setDetailEntityName } = useSidebarData();
 
@@ -38,7 +38,7 @@ export default function PipelineDetailContent({ id }: { id: string }) {
 
   function handleNewPipelineCreated(newPipelineId: string) {
     refreshPipelines();
-    router.push(`/home/pipelines?id=${encodeURIComponent(newPipelineId)}`);
+    navigate(`/home/pipelines?id=${encodeURIComponent(newPipelineId)}`);
   }
 
   // ==================== Create Mode ====================
@@ -73,7 +73,7 @@ export default function PipelineDetailContent({ id }: { id: string }) {
 
   function handleDeletePipeline() {
     refreshPipelines();
-    router.push('/home/pipelines');
+    navigate('/home/pipelines');
   }
 
   // ==================== Edit Mode ====================
@@ -129,7 +129,7 @@ export default function PipelineDetailContent({ id }: { id: string }) {
             onFinish={handleFinish}
             onNewPipelineCreated={handleNewPipelineCreated}
             onDeletePipeline={handleDeletePipeline}
-            onCancel={() => router.push('/home/pipelines')}
+            onCancel={() => navigate('/home/pipelines')}
             onDirtyChange={setFormDirty}
           />
         </TabsContent>
@@ -152,7 +152,7 @@ export default function PipelineDetailContent({ id }: { id: string }) {
           <PipelineMonitoringTab
             pipelineId={id}
             onNavigateToMonitoring={() => {
-              router.push('/home/monitoring');
+              navigate('/home/monitoring');
             }}
           />
         </TabsContent>

web/src/app/home/pipelines/components/monitoring-tab/PipelineMonitoringTab.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/pipelines/components/pipeline-extensions/PipelineExtension.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/pipelines/page.tsx

@@ -1,6 +1,6 @@
-'use client';
 
-import { useSearchParams } from 'next/navigation';
+
+import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import PipelineDetailContent from './PipelineDetailContent';
 

web/src/app/home/plugins/PluginDetailContent.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useEffect } from 'react';
 import PluginForm from '@/app/home/plugins/components/plugin-installed/plugin-form/PluginForm';

web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 import {

web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskContext.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, {
   createContext,

web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskQueue.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx

@@ -1,7 +1,7 @@
-'use client';
+
 
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { PluginCardVO } from '@/app/home/plugins/components/plugin-installed/PluginCardVO';
 import PluginCardComponent from '@/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent';
 import styles from '@/app/home/plugins/plugins.module.css';
@@ -37,7 +37,7 @@ enum PluginOperationType {
 const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
   (props, ref) => {
     const { t } = useTranslation();
-    const router = useRouter();
+    const navigate = useNavigate();
     const { refreshPlugins } = useSidebarData();
     const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
     const [showOperationModal, setShowOperationModal] = useState(false);
@@ -163,7 +163,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
 
     function handlePluginClick(plugin: PluginCardVO) {
       const pluginId = `${plugin.author}/${plugin.name}`;
-      router.push(`/home/plugins?id=${encodeURIComponent(pluginId)}`);
+      navigate(`/home/plugins?id=${encodeURIComponent(pluginId)}`);
     }
 
     function handlePluginDelete(plugin: PluginCardVO) {

web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx

@@ -1,7 +1,7 @@
-'use client';
+
 
 import { useState, useEffect, useCallback, useRef, Suspense } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'react-router-dom';
 import { Input } from '@/components/ui/input';
 import {
   Select,

web/src/app/home/plugins/components/plugin-market/RecommendationLists.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { ChevronLeft, ChevronRight, Star } from 'lucide-react';

web/src/app/home/plugins/components/plugin-market/TagsFilter.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useTranslation } from 'react-i18next';
 import {

web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useEffect, useState, useRef } from 'react';
 import MCPCardComponent from '@/app/home/plugins/mcp-server/mcp-card/MCPCardComponent';

web/src/app/home/plugins/mcp-server/mcp-form/MCPDeleteConfirmDialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/plugins/mcp-server/mcp-form/MCPFormDialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';

web/src/app/home/plugins/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 import PluginInstalledComponent, {
   PluginInstalledComponentRef,
 } from '@/app/home/plugins/components/plugin-installed/PluginInstalledComponent';
@@ -45,7 +45,7 @@ import {
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -97,7 +97,7 @@ export default function PluginConfigPage() {
 
 function PluginListView() {
   const { t } = useTranslation();
-  const router = useRouter();
+  const navigate = useNavigate();
   const {
     refreshPlugins,
     pendingPluginInstallAction,
@@ -672,7 +672,7 @@ function PluginListView() {
             {systemInfo.enable_marketplace && (
               <DropdownMenuItem
                 onClick={() => {
-                  router.push('/home/market');
+                  navigate('/home/market');
                 }}
               >
                 <StoreIcon className="w-4 h-4" />

web/src/app/login/layout.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 

web/src/app/login/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -22,12 +22,12 @@ import {
 } from '@/components/ui/form';
 import { useEffect, useState } from 'react';
 import { httpClient, initializeUserInfo } from '@/app/infra/http';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { Mail, Lock, Loader2, AlertCircle, RefreshCw } from 'lucide-react';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
 import { LoadingSpinner } from '@/components/ui/loading-spinner';
 
@@ -40,7 +40,7 @@ const formSchema = (t: (key: string) => string) =>
 type AccountType = 'local' | 'space';
 
 export default function Login() {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const [spaceLoading, setSpaceLoading] = useState(false);
   const [accountType, setAccountType] = useState<AccountType | null>(null);
@@ -66,7 +66,7 @@ export default function Login() {
       setLoadError(null);
       const res = await httpClient.getAccountInfo();
       if (!res.initialized) {
-        router.push('/register');
+        navigate('/register');
         return;
       }
       setAccountType(res.account_type || 'local');
@@ -97,7 +97,7 @@ export default function Login() {
       .then((res) => {
         if (res.token) {
           localStorage.setItem('token', res.token);
-          router.push('/home');
+          navigate('/home');
         }
       })
       .catch(() => {});
@@ -114,7 +114,7 @@ export default function Login() {
         localStorage.setItem('token', res.token);
         localStorage.setItem('userEmail', username);
         await initializeUserInfo();
-        router.push('/home');
+        navigate('/home');
         toast.success(t('common.loginSuccess'));
       })
       .catch(() => {

web/src/app/page.tsx

@@ -1,12 +1,12 @@
-'use client';
 
-import { useRouter } from 'next/navigation';
+
+import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
 
 export default function Home() {
-  const router = useRouter();
+  const navigate = useNavigate();
   useEffect(() => {
-    router.push('/login');
+    navigate('/login');
   }, []);
   return <div className={``}></div>;
 }

web/src/app/register/layout.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 

web/src/app/register/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -22,7 +22,7 @@ import {
 } from '@/components/ui/form';
 import { useEffect, useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { Mail, Lock, Loader2, Info } from 'lucide-react';
 import {
   Popover,
@@ -42,7 +42,7 @@ const formSchema = (t: (key: string) => string) =>
   });
 
 export default function Register() {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const [spaceLoading, setSpaceLoading] = useState(false);
 
@@ -63,7 +63,7 @@ export default function Register() {
       .checkIfInited()
       .then((res) => {
         if (res.initialized) {
-          router.push('/login');
+          navigate('/login');
         }
       })
       .catch(() => {});
@@ -78,7 +78,7 @@ export default function Register() {
       .initUser(username, password)
       .then(() => {
         toast.success(t('register.initSuccess'));
-        router.push('/login');
+        navigate('/login');
       })
       .catch((err: Error) => {
         toast.error(t('register.initFailed') + (err as CustomApiError).msg);

web/src/app/reset-password/layout.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import React from 'react';
 

web/src/app/reset-password/page.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -28,11 +28,11 @@ import {
 } from '@/components/ui/form';
 import { useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { Mail, Lock, ArrowLeft } from 'lucide-react';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
 
 const REGEXP_ONLY_DIGITS_AND_CHARS = /^[0-9a-zA-Z]+$/;
@@ -45,7 +45,7 @@ const formSchema = (t: (key: string) => string) =>
   });
 
 export default function ResetPassword() {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const [isResetting, setIsResetting] = useState(false);
 
@@ -72,7 +72,7 @@ export default function ResetPassword() {
       .resetPassword(email, recoveryKey, newPassword)
       .then(() => {
         toast.success(t('resetPassword.resetSuccess'));
-        router.push('/login');
+        navigate('/login');
       })
       .catch(() => {
         toast.error(t('resetPassword.resetFailed'));

web/src/app/wizard/page.tsx

@@ -1,7 +1,7 @@
-'use client';
+
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { UUID } from 'uuidjs';
 import { toast } from 'sonner';
@@ -81,7 +81,7 @@ const TOTAL_STEPS = 4;
 
 export default function WizardPage() {
   const { t } = useTranslation();
-  const router = useRouter();
+  const navigate = useNavigate();
 
   // ---- Wizard state ----
   const [currentStep, setCurrentStep] = useState(0);
@@ -519,7 +519,7 @@ export default function WizardPage() {
     }
     setIsSkipping(false);
     setShowSkipConfirm(false);
-    router.push('/home');
+    navigate('/home');
   }, [router, t]);
 
   // ---- Render ----
@@ -1169,7 +1169,7 @@ function StepAIEngine({
 
 function StepDone() {
   const { t } = useTranslation();
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const [particles] = useState(() =>
     Array.from({ length: 30 }, (_, i) => ({
@@ -1213,7 +1213,7 @@ function StepDone() {
       return;
     }
     setIsCompleting(false);
-    router.push('/home/bots');
+    navigate('/home/bots');
   }, [router, t]);
 
   return (

web/src/components/providers/theme-provider.tsx

@@ -1,18 +1,79 @@
-'use client';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { type ThemeProviderProps } from 'next-themes';
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+interface ThemeProviderState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  resolvedTheme: string;
+}
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+  resolvedTheme: 'light',
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'langbot-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+  const [resolvedTheme, setResolvedTheme] = useState('light');
+
+  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);
+      setResolvedTheme(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+    setResolvedTheme(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+    resolvedTheme,
+  };
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return (
-    <NextThemesProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-      {...props}
-    >
+    <ThemeProviderContext.Provider {...props} value={value}>
       {children}
-    </NextThemesProvider>
+    </ThemeProviderContext.Provider>
   );
 }
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};

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

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';

web/src/components/ui/avatar.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';

web/src/components/ui/checkbox.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';

web/src/components/ui/collapsible.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 

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

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';

web/src/components/ui/dialog.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';

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

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';

web/src/components/ui/form.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';

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

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';

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

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import { OTPInput, OTPInputContext } from 'input-otp';

web/src/components/ui/label.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';

web/src/components/ui/language-selector.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { useState, useEffect } from 'react';
 import {

web/src/components/ui/popover.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';

web/src/components/ui/progress.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';

web/src/components/ui/scroll-area.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';

web/src/components/ui/select.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';

web/src/components/ui/separator.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';

web/src/components/ui/sheet.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';

web/src/components/ui/sidebar.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';

web/src/components/ui/sonner.tsx

@@ -1,6 +1,6 @@
-'use client';
 
-import { useTheme } from 'next-themes';
+
+import { useTheme } from '@/components/providers/theme-provider';
 import { Toaster as Sonner, ToasterProps } from 'sonner';
 
 const Toaster = ({ ...props }: ToasterProps) => {

web/src/components/ui/switch.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';

web/src/components/ui/table.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 

web/src/components/ui/tabs.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';

web/src/components/ui/theme-toggle.tsx

@@ -1,8 +1,8 @@
-'use client';
+
 
 import * as React from 'react';
 import { Moon, Sun, Monitor } from 'lucide-react';
-import { useTheme } from 'next-themes';
+import { useTheme } from '@/components/providers/theme-provider';
 
 import { Button } from '@/components/ui/button';
 

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

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';

web/src/components/ui/toggle.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';

web/src/components/ui/tooltip.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';

web/src/i18n/I18nProvider.tsx

@@ -1,4 +1,4 @@
-'use client';
+
 
 import { ReactNode } from 'react';
 import '@/i18n';

web/src/i18n/index.ts

@@ -1,4 +1,4 @@
-'use client';
+
 
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';

web/src/main.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+
+import './app/global.css';
+import 'react-photo-view/dist/react-photo-view.css';
+
+import { ThemeProvider } from '@/components/providers/theme-provider';
+import I18nProvider from '@/i18n/I18nProvider';
+import { Toaster } from '@/components/ui/sonner';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <I18nProvider>
+        <RouterProvider router={router} />
+        <Toaster />
+      </I18nProvider>
+    </ThemeProvider>
+  </React.StrictMode>
+);

web/src/router.tsx

@@ -0,0 +1,144 @@
+import React, { Suspense } from 'react';
+import { createBrowserRouter, Navigate } from 'react-router-dom';
+
+// Layouts
+import LoginLayout from '@/app/login/layout';
+import RegisterLayout from '@/app/register/layout';
+import ResetPasswordLayout from '@/app/reset-password/layout';
+import HomeLayout from '@/app/home/layout';
+
+// Pages
+import LoginPage from '@/app/login/page';
+import RegisterPage from '@/app/register/page';
+import ResetPasswordPage from '@/app/reset-password/page';
+import WizardPage from '@/app/wizard/page';
+import SpaceCallbackPage from '@/app/auth/space/callback/page';
+import HomePage from '@/app/home/page';
+import MonitoringPage from '@/app/home/monitoring/page';
+import BotsPage from '@/app/home/bots/page';
+import PipelinesPage from '@/app/home/pipelines/page';
+import PluginsPage from '@/app/home/plugins/page';
+import MarketPage from '@/app/home/market/page';
+import MCPPage from '@/app/home/mcp/page';
+import KnowledgePage from '@/app/home/knowledge/page';
+
+const Loading = () => <div>Loading...</div>;
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Navigate to="/login" replace />,
+  },
+  {
+    path: '/login',
+    element: (
+      <LoginLayout>
+        <LoginPage />
+      </LoginLayout>
+    ),
+  },
+  {
+    path: '/register',
+    element: (
+      <RegisterLayout>
+        <RegisterPage />
+      </RegisterLayout>
+    ),
+  },
+  {
+    path: '/reset-password',
+    element: (
+      <ResetPasswordLayout>
+        <ResetPasswordPage />
+      </ResetPasswordLayout>
+    ),
+  },
+  {
+    path: '/wizard',
+    element: <WizardPage />,
+  },
+  {
+    path: '/auth/space/callback',
+    element: <SpaceCallbackPage />,
+  },
+  {
+    path: '/home',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <HomeLayout>
+          <HomePage />
+        </HomeLayout>
+      </Suspense>
+    ),
+  },
+  {
+    path: '/home/monitoring',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <HomeLayout>
+          <MonitoringPage />
+        </HomeLayout>
+      </Suspense>
+    ),
+  },
+  {
+    path: '/home/bots',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <HomeLayout>
+          <BotsPage />
+        </HomeLayout>
+      </Suspense>
+    ),
+  },
+  {
+    path: '/home/pipelines',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <HomeLayout>
+          <PipelinesPage />
+        </HomeLayout>
+      </Suspense>
+    ),
+  },
+  {
+    path: '/home/plugins',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <HomeLayout>
+          <PluginsPage />
+        </HomeLayout>
+      </Suspense>
+    ),
+  },
+  {
+    path: '/home/market',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <HomeLayout>
+          <MarketPage />
+        </HomeLayout>
+      </Suspense>
+    ),
+  },
+  {
+    path: '/home/mcp',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <HomeLayout>
+          <MCPPage />
+        </HomeLayout>
+      </Suspense>
+    ),
+  },
+  {
+    path: '/home/knowledge',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <HomeLayout>
+          <KnowledgePage />
+        </HomeLayout>
+      </Suspense>
+    ),
+  },
+]);