fix(FR-2903): use import.meta.glob to avoid esbuild glob scan on src/plugins

Author: nowgnuesLee

AGENTS.md

@@ -10,8 +10,8 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ### Build and Production
 
-- `pnpm run build` - Full production build (cleans `build/web/`, copies resources, builds React via Craco with Workbox service worker generation, builds workspace packages)
-- `pnpm run build:react-only` - Build only React app via Craco
+- `pnpm run build` - Full production build (cleans `build/web/`, copies resources, builds React via Vite with `vite-plugin-pwa` service worker generation, builds workspace packages)
+- `pnpm run build:react-only` - Build only React app via Vite
 - `pnpm run relay` - Compile GraphQL queries with Relay compiler
 
 ### Quality Control
@@ -23,8 +23,8 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ### Testing
 
-- `pnpm run test` - Run Jest tests (root: `scripts/`, `src/`)
-- `pnpm run test` (in `/react` directory) - Run React-specific Jest tests
+- `pnpm run test` - Run Vitest tests (root: `scripts/`, `src/`)
+- `pnpm run test` (in `/react` directory) - Run React-specific Vitest tests (`pnpm run vitest:watch` for watch mode)
 - E2E tests (`/e2e/`) use Playwright; require full Backend.AI cluster running first
 
 ### Electron App
@@ -41,30 +41,31 @@ This is a **React web application** using React 19 + Ant Design 6 + Relay 20 (Gr
 
 ### Key Technologies
 
-- **React Build**: Webpack via @craco/craco (Create React App with customizations)
+- **React Build**: Vite 6 (`@vitejs/plugin-react`) with `vite-plugin-pwa`, `vite-plugin-svgr`, `vite-plugin-node-polyfills`
 - **Component Library Build**: Vite (`packages/backend.ai-ui/`)
-- **Service Worker**: workbox-webpack-plugin (GenerateSW, integrated into Craco/Webpack build)
+- **Service Worker**: `vite-plugin-pwa` (Workbox under the hood), integrated into the Vite build
 - **Package Manager**: pnpm with workspace monorepo
 - **Styling**: Ant Design + antd-style
 - **State Management**: Jotai (global UI state), Relay (server/GraphQL state)
 - **GraphQL**: Relay compiler with projects for both `react/` and `packages/backend.ai-ui/`
 - **React Compiler**: babel-plugin-react-compiler in annotation mode (`'use memo'` directive)
-- **Testing**: Jest for unit tests, Playwright for E2E tests
+- **Testing**: Vitest for unit tests (jsdom env), Playwright for E2E tests
 - **Linting**: ESLint 9 (flat config) + Prettier, pre-commit hooks via Husky + lint-staged
 - **Electron**: Desktop app wrapper with built-in websocket proxy
 - **Storybook**: @storybook/react-vite for `backend.ai-ui` component library
 
 ### Project Structure
 
 ```
-react/                  # Main React application (Webpack/Craco)
+react/                  # Main React application (Vite)
   src/                  # Application source code
     components/         # React UI components
     pages/              # Page-level components
     hooks/              # Custom React hooks
     helper/             # Utility functions
     __generated__/      # Relay compiler output
-  craco.config.cjs      # Webpack customization via Craco
+  vite.config.ts        # Vite + plugins (PWA / svgr / node-polyfills) configuration
+  vitest.config.ts      # Vitest configuration (unit tests)
 packages/               # Monorepo workspace packages
   backend.ai-ui/        # Shared React component library (Vite build)
   backend.ai-webui-docs/# User manual documentation
@@ -87,15 +88,15 @@ Production build (`pnpm run build`) runs these steps sequentially:
 1. Clean and create `build/web/` output directory
 2. Copy `index.html`, `resources/`, `manifest/`, config files
 3. `pnpm run -r --stream build` builds all workspace packages:
-   - React app (Craco/Webpack) → `react/build/` → copied to `build/web/`
-   - Service worker (`sw.js`) generated by workbox-webpack-plugin during React build
+   - React app (Vite) → `react/build/` → copied to `build/web/`
+   - Service worker (`sw.js`) generated by `vite-plugin-pwa` during the React build
    - backend.ai-ui (Vite) → `packages/backend.ai-ui/dist/`
 
 ### Development Workflow
 
 1. **Dev Server**: Run `pnpm run dev` (TypeScript watch + Relay watch + React dev server under [Portless](https://github.com/vercel-labs/portless)). Portless is a `devDependency`, no global install needed; `dev.mjs` auto-starts the daemon on port 1355 (HTTPS by default).
 2. **URL**: For branches matching `FR-XXXX` the dev URL is `https://fr-XXXX.localhost:1355`; otherwise Portless derives a branch-based subdomain (printed on startup). See `DEV_ENVIRONMENT.md` for theme color and troubleshooting.
-3. **Testing**: Jest unit tests + Playwright E2E tests
+3. **Testing**: Vitest unit tests + Playwright E2E tests
 4. **Linting**: ESLint 9 (flat config) + Prettier with pre-commit hooks via Husky
 
 # Additional Workflow Description
@@ -134,7 +135,8 @@ Production build (`pnpm run build`) runs these steps sequentially:
 - **react-relay** 20, **relay-runtime** 20 - GraphQL client
 - **jotai** - Atomic state management
 - **i18next**, **react-i18next** - Internationalization
-- **@craco/craco** - CRA webpack customization
+- **vite** 6 + **@vitejs/plugin-react** - React app bundler and dev server
+- **vitest** 4 - Unit test runner (jsdom env)
 - **electron** 35 - Desktop app framework
 
 ### GraphQL/Relay Setup

e2e/plugin/backend-ai-homepage-link.js

@@ -0,0 +1,48 @@
+/* global document, MutationObserver */
+/**
+ * E2E fixture for the login-screen homepage-link plugin.
+ *
+ * Served via `page.route` in `login-plugin.spec.ts`. Pure side-effect ES
+ * module — IIFE that finds the login form in DOM and appends a "Visit
+ * backend.ai" link. No exports.
+ */
+(function () {
+  'use strict';
+
+  const LINK_CLASS = 'bai-homepage-link';
+  const HREF = 'https://www.backend.ai/';
+  const LABEL = 'Visit backend.ai';
+
+  function inject() {
+    const form =
+      document.querySelector('.ant-modal-content form') ||
+      document.querySelector('.ant-modal-body form') ||
+      document.querySelector('form.ant-form') ||
+      document.querySelector('form');
+    if (!form) return false;
+    if (form.querySelector('.' + LINK_CLASS)) return true;
+
+    const wrapper = document.createElement('div');
+    wrapper.className = LINK_CLASS;
+    wrapper.style.textAlign = 'center';
+    wrapper.style.marginTop = '8px';
+    wrapper.style.fontSize = '13px';
+
+    const link = document.createElement('a');
+    link.href = HREF;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    link.textContent = LABEL;
+
+    wrapper.appendChild(link);
+    form.appendChild(wrapper);
+    return true;
+  }
+
+  if (inject()) return;
+
+  const observer = new MutationObserver(() => {
+    if (inject()) observer.disconnect();
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+})();

e2e/plugin/login-plugin.spec.ts

@@ -0,0 +1,62 @@
+// E2E tests for the login-screen plugin slot (`config.plugin.login`).
+//
+// Login plugins follow the same runtime-fetch model as page plugins:
+// `LoginView.tsx` imports `/dist/plugins/<name>.js` (or
+// `${apiEndpoint}/dist/plugins/<name>.js` in Electron) at runtime, so
+// `page.route` can fulfill the request with fixture content — the same
+// pattern as the existing page-plugin tests in this directory.
+import { webuiEndpoint, modifyConfigToml } from '../utils/test-util';
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+const PLUGIN_NAME = 'backend-ai-homepage-link';
+const HOMEPAGE_LINK_PLUGIN_JS = fs.readFileSync(
+  path.join(__dirname, `${PLUGIN_NAME}.js`),
+  'utf-8',
+);
+
+test.describe(
+  'Login Plugin',
+  { tag: ['@plugin', '@functional', '@regression'] },
+  () => {
+    test('homepage-link plugin injects an external link into the login form', async ({
+      page,
+      request,
+    }) => {
+      await modifyConfigToml(page, request, {
+        plugin: { login: PLUGIN_NAME },
+      });
+
+      await page.route(`**/dist/plugins/${PLUGIN_NAME}.js`, async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/javascript',
+          body: HOMEPAGE_LINK_PLUGIN_JS,
+        });
+      });
+
+      await page.goto(webuiEndpoint);
+
+      const link = page.locator('.bai-homepage-link a');
+      await expect(link).toBeVisible();
+      await expect(link).toHaveAttribute('href', 'https://www.backend.ai/');
+      await expect(link).toHaveAttribute('target', '_blank');
+      await expect(link).toHaveText(/Visit backend\.ai/i);
+    });
+
+    test('no link appears when the plugin slot is unset', async ({
+      page,
+      request,
+    }) => {
+      await modifyConfigToml(page, request, {
+        plugin: { login: '' },
+      });
+
+      await page.goto(webuiEndpoint);
+
+      await page.locator('form').first().waitFor({ state: 'visible' });
+      await expect(page.locator('.bai-homepage-link')).toHaveCount(0);
+    });
+  },
+);

react/src/components/LoginView.tsx

@@ -180,7 +180,12 @@ const LoginView: React.FC<{
     }
   }, [isConfigLoaded, atomLoginConfig]);
 
-  // Load login plugin when config is ready
+  // Load login plugin when config is ready.
+  // Mirrors `PluginLoader.tsx`'s URL resolution so login plugins follow
+  // the same deployment model as page plugins: the file is served by the
+  // backend WebServer (or a Vite/static host that mounts `/dist/plugins/`).
+  // No build-time bundling — plugins can be deployed independently of the
+  // WebUI bundle.
   useEffect(() => {
     if (!isConfigLoaded || !loginPlugin) return;
 
@@ -189,17 +194,19 @@ const LoginView: React.FC<{
     const sanitizedPlugin = loginPlugin.replace(/[^a-zA-Z0-9_-]/g, '');
     if (!sanitizedPlugin || sanitizedPlugin !== loginPlugin) return;
 
-    // Build the plugin path at runtime, in a variable, so neither Vite nor
-    // esbuild's optimizeDeps scanner can statically analyze the specifier.
-    // A template-literal with a static prefix (e.g. `../../../src/plugins/…`)
-    // is treated by esbuild as a glob and fails to resolve in dev because
-    // `webui-ai/src/plugins/` only exists in production builds. `@vite-ignore`
-    // alone is not enough — esbuild's scanner does not honor that comment.
-    const pluginUrl = `../../../src/plugins/${sanitizedPlugin}`;
+    const isElectronEnv = (globalThis as Record<string, unknown>).isElectron;
+    const pluginUrl =
+      isElectronEnv && apiEndpoint
+        ? `${apiEndpoint}/dist/plugins/${sanitizedPlugin}.js`
+        : `/dist/plugins/${sanitizedPlugin}.js`;
+
+    // `@vite-ignore` opts out of Vite's static analysis. The URL is an
+    // absolute path (no relative `..` traversal), so esbuild's
+    // optimizeDeps scanner does not treat it as a module specifier.
     import(/* @vite-ignore */ pluginUrl).catch(() => {
       setLoginError({ message: t('error.LoginFailed') });
     });
-  }, [isConfigLoaded, loginPlugin, t]);
+  }, [isConfigLoaded, loginPlugin, apiEndpoint, t]);
 
   // Keep configRef in sync
   useEffect(() => {