Vue migration

.github/workflows/frontend.yml

@@ -22,35 +22,56 @@ defaults:
   run:
     working-directory: frontend
 
-# TODO: add a lint job once ESLint migration replaces the (already-removed in
-# @angular-devkit/build-angular v20) `tslint` builder that `yarn lint` calls.
-
 jobs:
-  test:
+  check:
     runs-on: ubuntu-latest
     timeout-minutes: 20
-    container:
-      image: mcr.microsoft.com/playwright:v1.58.1-noble
+    permissions:
+      contents: read
     steps:
       - uses: actions/checkout@v5
+        with:
+          persist-credentials: false
+      - uses: pnpm/action-setup@v4
+        with:
+          package_json_file: frontend/package.json
       - uses: actions/setup-node@v4
         with:
           node-version: '24'
-          cache: 'yarn'
-          cache-dependency-path: frontend/yarn.lock
-      - run: yarn install --immutable
-      - name: Run unit tests
-        run: yarn test:ci
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - run: pnpm install --frozen-lockfile
+      - name: Lint
+        run: pnpm lint
+      - name: Typecheck
+        run: pnpm typecheck
+      - name: Unit tests
+        run: pnpm test:ci
+      - name: Build (self-hosted)
+        run: pnpm build
+      - name: Build (SaaS)
+        run: pnpm build:saas
+      - name: Build Storybook
+        run: pnpm build-storybook
 
   license:
     runs-on: ubuntu-latest
     timeout-minutes: 10
+    permissions:
+      contents: read
     steps:
       - uses: actions/checkout@v5
+        with:
+          persist-credentials: false
+      - uses: pnpm/action-setup@v4
+        with:
+          package_json_file: frontend/package.json
       - uses: actions/setup-node@v4
         with:
           node-version: '24'
-          cache: 'yarn'
-          cache-dependency-path: frontend/yarn.lock
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - run: pnpm install --frozen-lockfile
+      # OFL-1.1: the Geist and Space Grotesk fonts (@fontsource-variable/*).
       - name: license checker
-        run: 'npx --yes license-checker --onlyAllow="MIT;ISC;Python-2.0;Apache-2.0;BSD;MPL;CC;Custom: http://github.com/dscape/statsd-parser;" --excludePrivatePackages'
+        run: 'npx --yes license-checker --onlyAllow="MIT;ISC;Python-2.0;Apache-2.0;BSD;MPL;CC;OFL-1.1;Custom: http://github.com/dscape/statsd-parser;" --excludePrivatePackages'

.github/workflows/storybook.yml

@@ -20,13 +20,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          package_json_file: frontend/package.json
       - uses: actions/setup-node@v4
         with:
           node-version: '24'
-          cache: yarn
-          cache-dependency-path: frontend/yarn.lock
-      - run: cd frontend && yarn install --frozen-lockfile
-      - run: cd frontend && yarn storybook:build
+          cache: pnpm
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - run: cd frontend && pnpm install --frozen-lockfile
+      - run: cd frontend && pnpm build-storybook
       - uses: actions/upload-pages-artifact@v3
         with:
           path: frontend/storybook-static

.gitignore

@@ -6,9 +6,12 @@
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
+/frontend/dist
+/frontend/coverage
 
 # dependencies
 /node_modules
+/frontend/node_modules
 .yarn/
 
 # yarn berry cache (not tracked at repo root)

AGENTS.md

@@ -7,7 +7,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 RocketAdmin is a database administration panel that allows users to manage database connections, tables, and data. It consists of multiple components in a monorepo structure:
 
 - **backend/** - NestJS API server (TypeScript, ES modules)
-- **frontend/** - Angular 19 web application (standalone components)
+- **frontend/** - Vue 3 web application (Vite, Pinia, vue-router)
 - **rocketadmin-agent/** - NestJS agent for connecting to databases behind firewalls
 - **autoadmin-ws-server/** - WebSocket server for agent communication
 - **shared-code/** - Shared data access layer and utilities used by backend and agent
@@ -30,11 +30,13 @@ pnpm test-saas          # Run SaaS-specific tests
 
 ```bash
 cd frontend
-yarn start              # Start Angular dev server
-yarn build              # Production build
-yarn test:ci            # Run tests headlessly (CI mode)
-yarn test --browsers=ChromeHeadlessCustom --no-watch --no-progress  # Headless tests
-yarn lint               # TSLint (deprecated, needs ESLint migration)
+pnpm install            # Installed on its own, not as a workspace member
+pnpm dev                # Start Vite dev server (proxies /api)
+pnpm build              # Production build (pnpm build:saas for SaaS)
+pnpm lint               # biome + eslint-plugin-vue
+pnpm typecheck          # vue-tsc
+pnpm test:ci            # Vitest (unit and component tests)
+pnpm test:e2e           # Playwright against a mocked API
 ```
 
 ### Running Backend Tests with Docker
@@ -84,7 +86,7 @@ pnpm migration:revert   # Revert last migration
 
 - Uses pnpm workspaces with packages: `backend`, `rocketadmin-agent`, `shared-code`
 - `shared-code` is imported as `@rocketadmin/shared-code` workspace dependency
-- Frontend is a separate Angular project (not a workspace member)
+- Frontend is a separate pnpm project with its own lockfile (not a workspace member)
 
 ### Backend (NestJS)
 
@@ -102,15 +104,16 @@ pnpm migration:revert   # Revert last migration
   - `saas-tests/` - SaaS-specific feature tests
   - `complex-table-tests/` - Complex table operation tests
 
-### Frontend (Angular 19)
+### Frontend (Vue 3)
 
-See `frontend/CLAUDE.md` for detailed frontend architecture.
+See `frontend/CLAUDE.md` for detailed frontend architecture and conventions.
 
 Key points:
-- Standalone components (no NgModules)
-- BehaviorSubject-based state management (no NgRx)
-- Multi-environment builds (development, production, saas, saas-production)
-- Jasmine/Karma testing with ChromeHeadless
+- `<script setup lang="ts">` components, Composition API, composables for shared logic
+- Pinia setup stores; TanStack Vue Query for cached server data
+- UI primitives in `src/components/ui/` (SiteNova design system); colours only via `--color-*` variables, BEM class names
+- Multi-environment builds via Vite modes (development, production, saas, saas-production)
+- Vitest + @vue/test-utils for unit tests, Playwright for e2e
 
 ### Shared Code
 

CLAUDE.md

@@ -7,7 +7,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 RocketAdmin is a database administration panel that allows users to manage database connections, tables, and data. It consists of multiple components in a monorepo structure:
 
 - **backend/** - NestJS API server (TypeScript, ES modules)
-- **frontend/** - Angular 19 web application (standalone components)
+- **frontend/** - Vue 3 web application (Vite, Pinia, vue-router)
 - **rocketadmin-agent/** - NestJS agent for connecting to databases behind firewalls
 - **autoadmin-ws-server/** - WebSocket server for agent communication
 - **shared-code/** - Shared data access layer and utilities used by backend and agent
@@ -30,11 +30,13 @@ pnpm test-saas          # Run SaaS-specific tests
 
 ```bash
 cd frontend
-yarn start              # Start Angular dev server
-yarn build              # Production build
-yarn test:ci            # Run tests headlessly (CI mode)
-yarn test --browsers=ChromeHeadlessCustom --no-watch --no-progress  # Headless tests
-yarn lint               # TSLint (deprecated, needs ESLint migration)
+pnpm install            # Installed on its own, not as a workspace member
+pnpm dev                # Start Vite dev server (proxies /api)
+pnpm build              # Production build (pnpm build:saas for SaaS)
+pnpm lint               # biome + eslint-plugin-vue
+pnpm typecheck          # vue-tsc
+pnpm test:ci            # Vitest (unit and component tests)
+pnpm test:e2e           # Playwright against a mocked API
 ```
 
 ### Running Backend Tests with Docker
@@ -84,7 +86,7 @@ pnpm migration:revert   # Revert last migration
 
 - Uses pnpm workspaces with packages: `backend`, `rocketadmin-agent`, `shared-code`
 - `shared-code` is imported as `@rocketadmin/shared-code` workspace dependency
-- Frontend is a separate Angular project (not a workspace member)
+- Frontend is a separate pnpm project with its own lockfile (not a workspace member)
 
 ### Backend (NestJS)
 
@@ -102,15 +104,16 @@ pnpm migration:revert   # Revert last migration
   - `saas-tests/` - SaaS-specific feature tests
   - `complex-table-tests/` - Complex table operation tests
 
-### Frontend (Angular 19)
+### Frontend (Vue 3)
 
-See `frontend/CLAUDE.md` for detailed frontend architecture.
+See `frontend/CLAUDE.md` for detailed frontend architecture and conventions.
 
 Key points:
-- Standalone components (no NgModules)
-- BehaviorSubject-based state management (no NgRx)
-- Multi-environment builds (development, production, saas, saas-production)
-- Jasmine/Karma testing with ChromeHeadless
+- `<script setup lang="ts">` components, Composition API, composables for shared logic
+- Pinia setup stores; TanStack Vue Query for cached server data
+- UI primitives in `src/components/ui/` (SiteNova design system); colours only via `--color-*` variables, BEM class names
+- Multi-environment builds via Vite modes (development, production, saas, saas-production)
+- Vitest + @vue/test-utils for unit tests, Playwright for e2e
 
 ### Shared Code
 

Dockerfile

@@ -2,27 +2,23 @@ FROM node:24.22.1-slim AS front_builder
 ARG VERSION
 ARG SAAS
 SHELL ["/bin/bash", "-c"]
+RUN npm install -g pnpm@10.33.0
 WORKDIR /app/frontend
-COPY frontend/package.json frontend/yarn.lock frontend/.yarnrc.yml frontend/angular.json frontend/browserslist frontend/tsconfig.app.json frontend/tsconfig.json /app/frontend/
-COPY frontend/.yarn /app/frontend/.yarn
-RUN apt-get update && apt-get install -y \
-    git \
-    && rm -rf /var/lib/apt/lists/*
-RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --immutable --network-timeout 1000000 --silent
+COPY frontend/package.json frontend/pnpm-lock.yaml frontend/pnpm-workspace.yaml /app/frontend/
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store pnpm install --frozen-lockfile
+COPY frontend/.env frontend/.env.production frontend/.env.saas-production frontend/index.html frontend/index.saas.html frontend/vite.config.ts frontend/tsconfig.json frontend/tsconfig.app.json frontend/tsconfig.node.json /app/frontend/
 COPY frontend/scripts /app/frontend/scripts
+COPY frontend/public /app/frontend/public
 COPY frontend/src /app/frontend/src
 
-# Update version if VERSION build arg is provided
+# Update version if VERSION build arg is provided (the build scripts write src/version.ts)
 RUN if [[ -n $VERSION ]]; then \
-    cd frontend; \
     echo "Updating package.json version to $VERSION" && \
-    npm version $VERSION --no-git-tag-version && \
-    yarn update-version; \
+    npm version $VERSION --no-git-tag-version; \
     fi
 
-RUN if [[ -n $SAAS ]]; then API_ROOT=/api yarn build --configuration=saas-production; \
-    else API_ROOT=/api yarn build --configuration=production; fi
-RUN ls /app/frontend/dist/rocketadmin/browser
+RUN if [[ -n $SAAS ]]; then pnpm build:saas; else pnpm build; fi
+RUN ls /app/frontend/dist
 
 FROM node:24.22.1-slim
 
@@ -43,7 +39,7 @@ COPY rocketadmin-agent /app/rocketadmin-agent
 RUN --mount=type=cache,target=/root/.local/share/pnpm/store pnpm install --frozen-lockfile
 RUN cd shared-code && ../node_modules/.bin/tsc
 RUN cd backend && ../node_modules/.bin/tsc && pnpm exec nest build
-COPY --from=front_builder /app/frontend/dist/rocketadmin/browser /var/www/html
+COPY --from=front_builder /app/frontend/dist /var/www/html
 COPY frontend/nginx/default.conf /etc/nginx/sites-enabled/default
 RUN mkdir -p /app/backend/node_modules/.cache && chown -R appuser:appuser /app/backend/node_modules/.cache
 # c8 report dir for `just test-coverage` (the test compose runs this image as appuser)