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

* refactor(web): migrate from Next.js to Vite + React Router * fix: update build pipelines for Vite migration (out → dist) - Dockerfile: npm run build → npx vite build, web/out → web/dist - pyproject.toml: package-data web/out/** → web/dist/** - paths.py: support both web/dist (Vite) and web/out (legacy) with fallback * fix: remove .next from git tracking, add to .gitignore 1334 cached files from web/.next/ were accidentally committed. Added .next/ to both root and web/.gitignore. * fix: update build process to use Vite and correct output directory * fix: update pnpm-lock.yaml and eslint config for Vite migration * style: fix prettier formatting issues * fix: add eslint-plugin-react-hooks for Vite migration * fix: remove undefined eslint rule reference, downgrade react-hooks plugin to v5 * fix(web): clean up remaining Next.js artifacts in Vite migration - Add vite-env.d.ts for import.meta.env and asset type declarations - Remove dead layout.tsx (providers already in main.tsx) - Fix useSearchParams destructuring to [searchParams] tuple (11 locations) - Replace process.env.NEXT_PUBLIC_* with import.meta.env.VITE_* - Fix langbotIcon.src to langbotIcon (Vite returns URL string) - Fix Link href to Link to for react-router-dom - Fix navigate({ scroll: false }) to { preventScrollReset: true } - Fix [router] dependency arrays to [navigate] - Remove Next.js plugin from tsconfig, set rsc: false in components.json - Replace next lint with eslint in lint-staged * feat: add tools API endpoint and tools-selector form type Backend: - Add GET /api/v1/tools — list all available tools (plugin + MCP) - Add GET /api/v1/tools/<tool_name> — get specific tool details Frontend: - Add TOOLS_SELECTOR form type for plugin config forms - Multi-select dialog with tool name and description - Add PluginTool entity type and API client methods * Revert "feat: add tools API endpoint and tools-selector form type" This reverts commit 3c637fc563.
2026-06-02 03:55:55 +00:00 · 2026-04-03 17:09:17 +08:00
parent c7efa4dd7f
commit 2317392ee5
121 changed files with 2797 additions and 8038 deletions
--- a/web/src/app/auth/space/callback/page.tsx
+++ b/web/src/app/auth/space/callback/page.tsx
@@ -1,7 +1,5 @@
-'use client';
-
 import { useEffect, useState, useCallback, Suspense } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -23,8 +21,8 @@ import { LoadingSpinner } from '@/components/ui/loading-spinner';
 import langbotIcon from '@/app/assets/langbot-logo.webp';

 function SpaceOAuthCallbackContent() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
  const { t } = useTranslation();

  const [status, setStatus] = useState<
@@ -51,7 +49,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');
@@ -64,7 +62,7 @@ function SpaceOAuthCallbackContent() {
        }
      }
    },
-    [router, t],
+    [navigate, t],
  );

  const [bindState, setBindState] = useState<string | null>(null);
@@ -81,7 +79,7 @@ function SpaceOAuthCallbackContent() {
        setStatus('success');
        toast.success(t('account.bindSpaceSuccess'));
        setTimeout(() => {
-          router.push('/home');
+          navigate('/home');
        }, 1000);
      } catch (err) {
        setStatus('error');
@@ -96,7 +94,7 @@ function SpaceOAuthCallbackContent() {
        setIsProcessing(false);
      }
    },
-    [router, t],
+    [navigate, t],
  );

  useEffect(() => {
@@ -146,7 +144,7 @@ function SpaceOAuthCallbackContent() {
  };

  const handleCancelBind = () => {
-    router.push('/home');
+    navigate('/home');
  };

  return (
@@ -154,7 +152,7 @@ function SpaceOAuthCallbackContent() {
      <Card className="w-[400px] shadow-lg dark:shadow-white/10">
        <CardHeader className="text-center">
          <img
-            src={langbotIcon.src}
+            src={langbotIcon}
            alt="LangBot"
            className="w-16 h-16 mb-4 mx-auto"
          />
@@ -217,7 +215,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')}
--- a/web/src/app/global.css
+++ b/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 *));

--- a/web/src/app/home/bots/BotDetailContent.tsx
+++ b/web/src/app/home/bots/BotDetailContent.tsx
@@ -1,7 +1,5 @@
-'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 +32,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 +103,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() {
--- a/web/src/app/home/bots/components/bot-log/view/BotLogCard.tsx
+++ b/web/src/app/home/bots/components/bot-log/view/BotLogCard.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 import { BotLog } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
 import { httpClient } from '@/app/infra/http/HttpClient';
--- a/web/src/app/home/bots/components/bot-log/view/BotLogListComponent.tsx
+++ b/web/src/app/home/bots/components/bot-log/view/BotLogListComponent.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { BotLogManager } from '@/app/home/bots/components/bot-log/BotLogManager';
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { BotLog } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
@@ -15,7 +13,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 +30,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 +229,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>
--- a/web/src/app/home/bots/components/bot-session/BotSessionMonitor.tsx
+++ b/web/src/app/home/bots/components/bot-session/BotSessionMonitor.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, {
  useState,
  useEffect,
--- a/web/src/app/home/bots/page.tsx
+++ b/web/src/app/home/bots/page.tsx
@@ -1,12 +1,10 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import BotDetailContent from './BotDetailContent';

 export default function BotConfigPage() {
  const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
  const detailId = searchParams.get('id');

  if (detailId) {
--- a/web/src/app/home/components/account-settings-dialog/AccountSettingsDialog.tsx
+++ b/web/src/app/home/components/account-settings-dialog/AccountSettingsDialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
--- a/web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx
+++ b/web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx
@@ -1,11 +1,9 @@
-'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, useLocation, useSearchParams } from 'react-router-dom';
 import {
  Dialog,
  DialogContent,
@@ -67,9 +65,10 @@ export default function ApiIntegrationDialog({
  onOpenChange,
 }: ApiIntegrationDialogProps) {
  const { t } = useTranslation();
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const [searchParams] = useSearchParams();
  const [activeTab, setActiveTab] = useState('apikeys');
  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
  const [webhooks, setWebhooks] = useState<Webhook[]>([]);
@@ -94,7 +93,9 @@ 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()}`, {
+        preventScrollReset: true,
+      });
    }
  }, [open]);

@@ -108,7 +109,7 @@ export default function ApiIntegrationDialog({
      const newUrl = params.toString()
        ? `${pathname}?${params.toString()}`
        : pathname;
-      router.replace(newUrl, { scroll: false });
+      navigate(newUrl, { preventScrollReset: true });
    }
    onOpenChange(newOpen);
  };
--- a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+++ b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
@@ -1,8 +1,6 @@
-'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, useLocation, useSearchParams } 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 +27,7 @@ import {
  Github,
  Zap,
 } from 'lucide-react';
-import { useTheme } from 'next-themes';
+import { useTheme } from '@/components/providers/theme-provider';

 import {
  DropdownMenu,
@@ -244,9 +242,10 @@ function NavItems({
  sectionOpenState: Record<string, boolean>;
  onSectionToggle: (id: string, open: boolean) => void;
 }) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const [searchParams] = useSearchParams();
  const sidebarData = useSidebarData();
  const { setPendingPluginInstallAction } = sidebarData;
  const { state: sidebarState, isMobile } = useSidebar();
@@ -413,7 +412,7 @@ function NavItems({
                          'bg-accent text-accent-foreground font-medium',
                      )}
                      onClick={() => {
-                        router.push(itemRoute);
+                        navigate(itemRoute);
                        setPopoverOpen((prev) => ({
                          ...prev,
                          [config.id]: false,
@@ -471,7 +470,7 @@ function NavItems({
                            )}
                            onClick={(e) => {
                              e.preventDefault();
-                              router.push(itemRoute);
+                              navigate(itemRoute);
                            }}
                          >
                            {item.emoji ? (
@@ -623,7 +622,7 @@ function NavItems({
                              <DropdownMenuItem
                                onClick={(e) => {
                                  e.stopPropagation();
-                                  router.push('/home/market');
+                                  navigate('/home/market');
                                  setPopoverOpen((prev) => ({
                                    ...prev,
                                    [config.id]: false,
@@ -638,7 +637,7 @@ function NavItems({
                              onClick={(e) => {
                                e.stopPropagation();
                                setPendingPluginInstallAction('local');
-                                router.push('/home/plugins');
+                                navigate('/home/plugins');
                                setPopoverOpen((prev) => ({
                                  ...prev,
                                  [config.id]: false,
@@ -652,7 +651,7 @@ function NavItems({
                              onClick={(e) => {
                                e.stopPropagation();
                                setPendingPluginInstallAction('github');
-                                router.push('/home/plugins');
+                                navigate('/home/plugins');
                                setPopoverOpen((prev) => ({
                                  ...prev,
                                  [config.id]: false,
@@ -669,7 +668,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 +730,7 @@ function NavItems({
                            <DropdownMenuItem
                              onClick={(e) => {
                                e.stopPropagation();
-                                router.push('/home/market');
+                                navigate('/home/market');
                              }}
                            >
                              <Store className="size-4" />
@@ -742,7 +741,7 @@ function NavItems({
                            onClick={(e) => {
                              e.stopPropagation();
                              setPendingPluginInstallAction('local');
-                              router.push('/home/plugins');
+                              navigate('/home/plugins');
                            }}
                          >
                            <Upload className="size-4" />
@@ -752,7 +751,7 @@ function NavItems({
                            onClick={(e) => {
                              e.stopPropagation();
                              setPendingPluginInstallAction('github');
-                              router.push('/home/plugins');
+                              navigate('/home/plugins');
                            }}
                          >
                            <Github className="size-4" />
@@ -766,7 +765,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,9 +1028,10 @@ export default function HomeSidebar({
 }: {
  onSelectedChangeAction: (sidebarChild: SidebarChildVO) => void;
 }) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const [searchParams] = useSearchParams();
  const { isMobile } = useSidebar();

  useEffect(() => {
@@ -1071,14 +1071,16 @@ 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()}`, {
+        preventScrollReset: true,
+      });
    } 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, { preventScrollReset: true });
    }
  }

@@ -1087,14 +1089,16 @@ 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()}`, {
+        preventScrollReset: true,
+      });
    } 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, { preventScrollReset: true });
    }
  }

@@ -1165,7 +1169,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() {
@@ -1226,7 +1230,7 @@ export default function HomeSidebar({
                tooltip="LangBot"
              >
                <img
-                  src={langbotIcon.src}
+                  src={langbotIcon}
                  alt="LangBot"
                  className="size-8 rounded-lg"
                />
@@ -1406,7 +1410,7 @@ export default function HomeSidebar({
                    <DropdownMenuItem
                      onClick={() => {
                        setUserMenuOpen(false);
-                        router.push('/wizard');
+                        navigate('/wizard');
                      }}
                    >
                      <Zap className="text-blue-500" />
--- a/web/src/app/home/components/home-sidebar/SidebarDataContext.tsx
+++ b/web/src/app/home/components/home-sidebar/SidebarDataContext.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, {
  createContext,
  useContext,
--- a/web/src/app/home/components/models-dialog/ModelsDialog.tsx
+++ b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState, useEffect } from 'react';
 import { Plus, Boxes } from 'lucide-react';
 import { httpClient, systemInfo } from '@/app/infra/http/HttpClient';
--- a/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
+++ b/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState, useEffect } from 'react';
 import { Plus, MessageSquareText, Cpu, Eye, Wrench, Check } from 'lucide-react';
 import { Button } from '@/components/ui/button';
--- a/web/src/app/home/components/models-dialog/components/ExtraArgsEditor.tsx
+++ b/web/src/app/home/components/models-dialog/components/ExtraArgsEditor.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Plus, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
--- a/web/src/app/home/components/models-dialog/components/ModelItem.tsx
+++ b/web/src/app/home/components/models-dialog/components/ModelItem.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState, useEffect } from 'react';
 import { Trash2, Eye, Wrench, Check } from 'lucide-react';
 import { Button } from '@/components/ui/button';
--- a/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
+++ b/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 import {
  Plus,
@@ -135,7 +133,7 @@ export default function ProviderCard({
              {isLangBotModels ? (
                <div className="w-9 h-9 rounded-lg overflow-hidden flex-shrink-0">
                  <img
-                    src={langbotIcon.src}
+                    src={langbotIcon}
                    alt="LangBot"
                    className="w-full h-full object-cover"
                  />
--- a/web/src/app/home/components/new-version-dialog/NewVersionDialog.tsx
+++ b/web/src/app/home/components/new-version-dialog/NewVersionDialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
--- a/web/src/app/home/components/password-change-dialog/PasswordChangeDialog.tsx
+++ b/web/src/app/home/components/password-change-dialog/PasswordChangeDialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
--- a/web/src/app/home/components/survey/SurveyWidget.tsx
+++ b/web/src/app/home/components/survey/SurveyWidget.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState, useEffect, useCallback } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import type {
--- a/web/src/app/home/knowledge/KBDetailContent.tsx
+++ b/web/src/app/home/knowledge/KBDetailContent.tsx
@@ -1,7 +1,5 @@
-'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 +30,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 +82,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() {
--- a/web/src/app/home/knowledge/components/kb-docs/documents/columns.tsx
+++ b/web/src/app/home/knowledge/components/kb-docs/documents/columns.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { ColumnDef } from '@tanstack/react-table';
 import { MoreHorizontal } from 'lucide-react';
 import { Button } from '@/components/ui/button';
--- a/web/src/app/home/knowledge/components/kb-docs/documents/data-table.tsx
+++ b/web/src/app/home/knowledge/components/kb-docs/documents/data-table.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
  ColumnDef,
  flexRender,
--- a/web/src/app/home/knowledge/components/kb-form/KBForm.tsx
+++ b/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';
@@ -304,7 +304,7 @@ export default function KBForm({
          {t('knowledge.noEnginesAvailable')}
        </p>
        <Link
-          href="/home/market?category=KnowledgeEngine"
+          to="/home/market?category=KnowledgeEngine"
          className="text-sm text-primary hover:underline"
        >
          {t('knowledge.installEngineHint')}
--- a/web/src/app/home/knowledge/components/kb-migration-dialog/KBMigrationDialog.tsx
+++ b/web/src/app/home/knowledge/components/kb-migration-dialog/KBMigrationDialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 import {
  Dialog,
--- a/web/src/app/home/knowledge/components/kb-retrieve/KBRetrieveGeneric.tsx
+++ b/web/src/app/home/knowledge/components/kb-retrieve/KBRetrieveGeneric.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
--- a/web/src/app/home/knowledge/page.tsx
+++ b/web/src/app/home/knowledge/page.tsx
@@ -1,6 +1,4 @@
-'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';
@@ -10,7 +8,7 @@ import KBDetailContent from './KBDetailContent';

 export default function KnowledgePage() {
  const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
  const detailId = searchParams.get('id');
  const { refreshKnowledgeBases } = useSidebarData();

--- a/web/src/app/home/layout.tsx
+++ b/web/src/app/home/layout.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import HomeSidebar from '@/app/home/components/home-sidebar/HomeSidebar';
 import SurveyWidget from '@/app/home/components/survey/SurveyWidget';
 import React, {
@@ -21,8 +19,8 @@ import {
  initializeUserInfo,
  initializeSystemInfo,
 } from '@/app/infra/http';
-import { usePathname, useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { useNavigate, useLocation } 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 +57,7 @@ export default function HomeLayout({
 }: Readonly<{
  children: React.ReactNode;
 }>) {
-  const router = useRouter();
+  const navigate = useNavigate();

  // Initialize user info if not already initialized
  useEffect(() => {
@@ -75,14 +73,14 @@ 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
      }
    };
    checkWizard();
-  }, [router]);
+  }, [navigate]);

  return (
    <SidebarDataProvider>
@@ -101,7 +99,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 +138,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" />
--- a/web/src/app/home/market/page.tsx
+++ b/web/src/app/home/market/page.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import MarketPage from '@/app/home/plugins/components/plugin-market/PluginMarketComponent';
 import {
  Dialog,
--- a/web/src/app/home/mcp/MCPDetailContent.tsx
+++ b/web/src/app/home/mcp/MCPDetailContent.tsx
@@ -1,7 +1,5 @@
-'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 +28,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 +94,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() {
--- a/web/src/app/home/mcp/components/mcp-form/MCPForm.tsx
+++ b/web/src/app/home/mcp/components/mcp-form/MCPForm.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, {
  useState,
  useEffect,
--- a/web/src/app/home/mcp/page.tsx
+++ b/web/src/app/home/mcp/page.tsx
@@ -1,12 +1,10 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import MCPDetailContent from './MCPDetailContent';

 export default function MCPPage() {
  const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
  const detailId = searchParams.get('id');

  if (detailId) {
--- a/web/src/app/home/monitoring/components/ExportDropdown.tsx
+++ b/web/src/app/home/monitoring/components/ExportDropdown.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
--- a/web/src/app/home/monitoring/components/FeedbackCard.tsx
+++ b/web/src/app/home/monitoring/components/FeedbackCard.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
--- a/web/src/app/home/monitoring/components/FeedbackList.tsx
+++ b/web/src/app/home/monitoring/components/FeedbackList.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
--- a/web/src/app/home/monitoring/components/MessageContentRenderer.tsx
+++ b/web/src/app/home/monitoring/components/MessageContentRenderer.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState } from 'react';
 import {
  MessageChainComponent,
--- a/web/src/app/home/monitoring/components/MessageDetailsCard.tsx
+++ b/web/src/app/home/monitoring/components/MessageDetailsCard.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MessageDetails } from '../types/monitoring';
--- a/web/src/app/home/monitoring/components/filters/MonitoringFilters.tsx
+++ b/web/src/app/home/monitoring/components/filters/MonitoringFilters.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
--- a/web/src/app/home/monitoring/components/overview-cards/MetricCard.tsx
+++ b/web/src/app/home/monitoring/components/overview-cards/MetricCard.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

--- a/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx
+++ b/web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import MetricCard from './MetricCard';
--- a/web/src/app/home/monitoring/components/overview-cards/TrafficChart.tsx
+++ b/web/src/app/home/monitoring/components/overview-cards/TrafficChart.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
--- a/web/src/app/home/monitoring/hooks/useMonitoringFilters.ts
+++ b/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';

@@ -7,7 +7,7 @@ import { getPresetDateRange } from '../utils/dateUtils';
 * Custom hook for managing monitoring filters
 */
 export function useMonitoringFilters() {
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();

  // Initialize filters from URL params
  const [selectedBots, setSelectedBots] = useState<string[]>(() => {
--- a/web/src/app/home/monitoring/page.tsx
+++ b/web/src/app/home/monitoring/page.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { Suspense, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
--- a/web/src/app/home/pipelines/PipelineDetailContent.tsx
+++ b/web/src/app/home/pipelines/PipelineDetailContent.tsx
@@ -1,7 +1,5 @@
-'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 +11,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 +36,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 +71,7 @@ export default function PipelineDetailContent({ id }: { id: string }) {

  function handleDeletePipeline() {
    refreshPipelines();
-    router.push('/home/pipelines');
+    navigate('/home/pipelines');
  }

  // ==================== Edit Mode ====================
@@ -129,7 +127,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 +150,7 @@ export default function PipelineDetailContent({ id }: { id: string }) {
          <PipelineMonitoringTab
            pipelineId={id}
            onNavigateToMonitoring={() => {
-              router.push('/home/monitoring');
+              navigate('/home/monitoring');
            }}
          />
        </TabsContent>
--- a/web/src/app/home/pipelines/components/monitoring-tab/PipelineMonitoringTab.tsx
+++ b/web/src/app/home/pipelines/components/monitoring-tab/PipelineMonitoringTab.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
--- a/web/src/app/home/pipelines/components/pipeline-extensions/PipelineExtension.tsx
+++ b/web/src/app/home/pipelines/components/pipeline-extensions/PipelineExtension.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { backendClient } from '@/app/infra/http';
--- a/web/src/app/home/pipelines/page.tsx
+++ b/web/src/app/home/pipelines/page.tsx
@@ -1,12 +1,10 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import PipelineDetailContent from './PipelineDetailContent';

 export default function PipelineConfigPage() {
  const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
  const detailId = searchParams.get('id');

  if (detailId) {
--- a/web/src/app/home/plugins/PluginDetailContent.tsx
+++ b/web/src/app/home/plugins/PluginDetailContent.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect } from 'react';
 import PluginForm from '@/app/home/plugins/components/plugin-installed/plugin-form/PluginForm';
 import PluginReadme from '@/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme';
--- a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx
+++ b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import {
  Dialog,
--- a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskContext.tsx
+++ b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskContext.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, {
  createContext,
  useContext,
--- a/web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskQueue.tsx
+++ b/web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskQueue.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Progress } from '@/components/ui/progress';
--- a/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx
@@ -1,7 +1,5 @@
-'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';
@@ -33,11 +31,10 @@ enum PluginOperationType {
  UPDATE = 'UPDATE',
 }

-// eslint-disable-next-line react/display-name
 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 +160,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) {
--- a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
@@ -1,7 +1,5 @@
-'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,
@@ -47,7 +45,7 @@ function MarketPageContent({
  installPlugin: (plugin: PluginV4) => void;
 }) {
  const { t } = useTranslation();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();

  const validCategories = [
    'Tool',
--- a/web/src/app/home/plugins/components/plugin-market/RecommendationLists.tsx
+++ b/web/src/app/home/plugins/components/plugin-market/RecommendationLists.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { ChevronLeft, ChevronRight, Star } from 'lucide-react';
 import { Button } from '@/components/ui/button';
--- a/web/src/app/home/plugins/components/plugin-market/TagsFilter.tsx
+++ b/web/src/app/home/plugins/components/plugin-market/TagsFilter.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useTranslation } from 'react-i18next';
 import {
  Select,
--- a/web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx
+++ b/web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useState, useRef } from 'react';
 import MCPCardComponent from '@/app/home/plugins/mcp-server/mcp-card/MCPCardComponent';
 import { MCPCardVO } from '@/app/home/plugins/mcp-server/MCPCardVO';
--- a/web/src/app/home/plugins/mcp-server/mcp-form/MCPDeleteConfirmDialog.tsx
+++ b/web/src/app/home/plugins/mcp-server/mcp-form/MCPDeleteConfirmDialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
--- a/web/src/app/home/plugins/mcp-server/mcp-form/MCPFormDialog.tsx
+++ b/web/src/app/home/plugins/mcp-server/mcp-form/MCPFormDialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Resolver, useForm } from 'react-hook-form';
--- a/web/src/app/home/plugins/page.tsx
+++ b/web/src/app/home/plugins/page.tsx
@@ -1,4 +1,3 @@
-'use client';
 import PluginInstalledComponent, {
  PluginInstalledComponentRef,
 } from '@/app/home/plugins/components/plugin-installed/PluginInstalledComponent';
@@ -45,7 +44,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, useSearchParams } from 'react-router-dom';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -84,7 +83,7 @@ interface GithubAsset {
 }

 export default function PluginConfigPage() {
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
  const detailId = searchParams.get('id');

  // Show plugin detail view when ?id= query param is present
@@ -97,7 +96,7 @@ export default function PluginConfigPage() {

 function PluginListView() {
  const { t } = useTranslation();
-  const router = useRouter();
+  const navigate = useNavigate();
  const {
    refreshPlugins,
    pendingPluginInstallAction,
@@ -672,7 +671,7 @@ function PluginListView() {
            {systemInfo.enable_marketplace && (
              <DropdownMenuItem
                onClick={() => {
-                  router.push('/home/market');
+                  navigate('/home/market');
                }}
              >
                <StoreIcon className="w-4 h-4" />
--- a/web/src/app/infra/http/index.ts
+++ b/web/src/app/infra/http/index.ts
@@ -31,8 +31,8 @@ export let userInfo: {
 * 获取基础 URL
 */
 const getBaseURL = (): string => {
-  if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_API_BASE_URL) {
-    return process.env.NEXT_PUBLIC_API_BASE_URL;
+  if (typeof window !== 'undefined' && import.meta.env.VITE_API_BASE_URL) {
+    return import.meta.env.VITE_API_BASE_URL;
  }
  return '/';
 };
--- a/web/src/app/infra/websocket/WebSocketClient.ts
+++ b/web/src/app/infra/websocket/WebSocketClient.ts
@@ -78,10 +78,10 @@ export class WebSocketClient {

        // 构建WebSocket URL
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        // extract host from process.env.NEXT_PUBLIC_API_BASE_URL
-        // 如果环境变量未定义,使用当前页面的 host (适配生产环境)
+        // extract host from import.meta.env.VITE_API_BASE_URL
+        // If env var is undefined, use current page host (for production)
        const host =
-          process.env.NEXT_PUBLIC_API_BASE_URL?.split('://')[1] ||
+          import.meta.env.VITE_API_BASE_URL?.split('://')[1] ||
          window.location.host;
        const url = `${protocol}//${host}/api/v1/pipelines/${this.pipelineId}/ws/connect?session_type=${this.sessionType}`;

--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,31 +0,0 @@
-import './global.css';
-import 'react-photo-view/dist/react-photo-view.css';
-import type { Metadata } from 'next';
-import { Toaster } from '@/components/ui/sonner';
-import I18nProvider from '@/i18n/I18nProvider';
-import { ThemeProvider } from '@/components/providers/theme-provider';
-
-export const metadata: Metadata = {
-  title: 'LangBot',
-  description:
-    'Production-grade platform for building agentic IM bots, integrated with Telegram, Slack, Discord, WeChat, QQ, etc.',
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="zh" suppressHydrationWarning>
-      <body className={``}>
-        <ThemeProvider>
-          <I18nProvider>
-            {children}
-            <Toaster />
-          </I18nProvider>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}
--- a/web/src/app/login/layout.tsx
+++ b/web/src/app/login/layout.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';

 export default function LoginLayout({
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -22,12 +21,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 +39,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 +65,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 +96,7 @@ export default function Login() {
      .then((res) => {
        if (res.token) {
          localStorage.setItem('token', res.token);
-          router.push('/home');
+          navigate('/home');
        }
      })
      .catch(() => {});
@@ -114,7 +113,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(() => {
@@ -154,7 +153,7 @@ export default function Login() {
              <LanguageSelector />
            </div>
            <img
-              src={langbotIcon.src}
+              src={langbotIcon}
              alt="LangBot"
              className="w-16 h-16 mb-4 mx-auto"
            />
@@ -205,7 +204,7 @@ export default function Login() {
            <LanguageSelector />
          </div>
          <img
-            src={langbotIcon.src}
+            src={langbotIcon}
            alt="LangBot"
            className="w-16 h-16 mb-4 mx-auto"
          />
@@ -313,7 +312,7 @@ export default function Login() {
                      <div className="flex justify-between">
                        <FormLabel>{t('common.password')}</FormLabel>
                        <Link
-                          href="/reset-password"
+                          to="/reset-password"
                          className="text-sm text-blue-500"
                        >
                          {t('common.forgotPassword')}
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,12 +1,10 @@
-'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>;
 }
--- a/web/src/app/register/layout.tsx
+++ b/web/src/app/register/layout.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';

 export default function RegisterLayout({
--- a/web/src/app/register/page.tsx
+++ b/web/src/app/register/page.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -22,7 +21,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 +41,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 +62,7 @@ export default function Register() {
      .checkIfInited()
      .then((res) => {
        if (res.initialized) {
-          router.push('/login');
+          navigate('/login');
        }
      })
      .catch(() => {});
@@ -78,7 +77,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);
@@ -114,7 +113,7 @@ export default function Register() {
            <LanguageSelector />
          </div>
          <img
-            src={langbotIcon.src}
+            src={langbotIcon}
            alt="LangBot"
            className="w-16 h-16 mb-4 mx-auto"
          />
--- a/web/src/app/reset-password/layout.tsx
+++ b/web/src/app/reset-password/layout.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';

 export default function ResetPasswordLayout({
--- a/web/src/app/reset-password/page.tsx
+++ b/web/src/app/reset-password/page.tsx
@@ -1,4 +1,3 @@
-'use client';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -28,11 +27,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 +44,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 +71,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'));
@@ -88,7 +87,7 @@ export default function ResetPassword() {
        <CardHeader>
          <div className="flex justify-between items-center mb-6">
            <Link
-              href="/login"
+              to="/login"
              className="flex items-center text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"
            >
              <ArrowLeft className="h-4 w-4 mr-1" />
--- a/web/src/app/wizard/page.tsx
+++ b/web/src/app/wizard/page.tsx
@@ -1,7 +1,5 @@
-'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 +79,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,8 +517,8 @@ export default function WizardPage() {
    }
    setIsSkipping(false);
    setShowSkipConfirm(false);
-    router.push('/home');
-  }, [router, t]);
+    navigate('/home');
+  }, [navigate, t]);

  // ---- Render ----

@@ -1169,7 +1167,7 @@ function StepAIEngine({

 function StepDone() {
  const { t } = useTranslation();
-  const router = useRouter();
+  const navigate = useNavigate();

  const [particles] = useState(() =>
    Array.from({ length: 30 }, (_, i) => ({
@@ -1213,8 +1211,8 @@ function StepDone() {
      return;
    }
    setIsCompleting(false);
-    router.push('/home/bots');
-  }, [router, t]);
+    navigate('/home/bots');
+  }, [navigate, t]);

  return (
    <div className="relative flex flex-col items-center justify-center h-full min-h-[400px]">
@@ -1244,7 +1242,7 @@ function StepDone() {
        {t('wizard.done.backToWorkbench')}
      </Button>

-      <style jsx>{`
+      <style>{`
        @keyframes wizardConfetti {
          0% {
            transform: translateY(100vh) rotate(0deg);