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.

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,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 

web/src/components/ui/avatar.tsx

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

web/src/components/ui/checkbox.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';

web/src/components/ui/collapsible.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
 function Collapsible({

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

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';

web/src/components/ui/dialog.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';

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

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';

web/src/components/ui/form.tsx

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

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

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

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

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

web/src/components/ui/label.tsx

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

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

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

web/src/components/ui/popover.tsx

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

web/src/components/ui/progress.tsx

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

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

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

web/src/components/ui/select.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';

web/src/components/ui/separator.tsx

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

web/src/components/ui/sheet.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';

web/src/components/ui/sidebar.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, VariantProps } from 'class-variance-authority';

web/src/components/ui/sonner.tsx

@@ -1,6 +1,4 @@
-'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,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 

web/src/components/ui/table.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';

web/src/components/ui/tabs.tsx

@@ -1,5 +1,3 @@
-'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,6 @@
-'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,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { type VariantProps } from 'class-variance-authority';

web/src/components/ui/toggle.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { cva, type VariantProps } from 'class-variance-authority';

web/src/components/ui/tooltip.tsx

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