fix: migration to pnpm

(cherry picked from commit daf3d4839f3595ef0716b6f2452b6567c778c76d)

.github/PULL_REQUEST_TEMPLATE.md

@@ -99,7 +99,7 @@ Include any new environment variables, configuration changes, or migration steps
 - [ ] I have added tests to cover my changes
 - [ ] All new and existing tests pass
 - [ ] I have run `go fmt` and `go vet` (for Go code)
-- [ ] I have run `npm run lint` (for TypeScript/JavaScript code)
+- [ ] I have run `pnpm run lint` (for TypeScript/JavaScript code)
 
 #### Security
 - [ ] I have considered security implications

.github/workflows/ci.yml

@@ -36,50 +36,37 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-go-
 
+      # pnpm setup
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
       # Node.js setup and cache
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
           node-version: '23'
-          cache: 'npm'
-          cache-dependency-path: 'frontend/package-lock.json'
-
-      # Cache npm dependencies
-      - name: Get npm cache directory
-        id: npm-cache-dir
-        run: echo "dir=$(npm config get cache)" >> $GITHUB_OUTPUT
-
-      - name: Cache npm packages
-        uses: actions/cache@v5
-        id: npm-cache
-        with:
-          path: |
-            ${{ steps.npm-cache-dir.outputs.dir }}
-            frontend/node_modules
-          key: ${{ runner.os }}-npm-${{ hashFiles('frontend/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-npm-
+          cache: 'pnpm'
+          cache-dependency-path: 'frontend/pnpm-lock.yaml'
 
       # Frontend lint and test
       - name: Frontend - Install dependencies
-        if: steps.npm-cache.outputs.cache-hit != 'true'
         working-directory: frontend
-        run: npm ci
+        run: pnpm install --frozen-lockfile
         continue-on-error: true
 
       - name: Frontend - Prettier
         working-directory: frontend
-        run: npm run prettier
+        run: pnpm run prettier
         continue-on-error: true
 
       - name: Frontend - Lint
         working-directory: frontend
-        run: npm run lint
+        run: pnpm run lint
         continue-on-error: true
 
       - name: Frontend - Test
         working-directory: frontend
-        run: npm run test
+        run: pnpm run test
         continue-on-error: true
 
       # Backend lint and test

CLAUDE.md

@@ -39,16 +39,16 @@ swag init -g ../../pkg/server/router.go -o pkg/server/docs/ --parseDependency --
 ### Frontend (run from `frontend/`)
 
 ```bash
-npm ci                    # Install dependencies
-npm run dev               # Dev server on http://localhost:8000
-npm run build             # Production build
-npm run lint              # ESLint check
-npm run lint:fix          # ESLint auto-fix
-npm run prettier          # Prettier check
-npm run prettier:fix      # Prettier auto-format
-npm run test              # Vitest
-npm run test:coverage     # Coverage report
-npm run graphql:generate  # Regenerate GraphQL types from schema
+pnpm install              # Install dependencies
+pnpm run dev              # Dev server on http://localhost:8000
+pnpm run build            # Production build
+pnpm run lint             # ESLint check
+pnpm run lint:fix         # ESLint auto-fix
+pnpm run prettier         # Prettier check
+pnpm run prettier:fix     # Prettier auto-format
+pnpm run test             # Vitest
+pnpm run test:coverage    # Coverage report
+pnpm run graphql:generate # Regenerate GraphQL types from schema
 ```
 
 ### Docker (run from repo root)
@@ -139,7 +139,7 @@ State is managed primarily through Apollo Client (GraphQL) with real-time update
 
 ### Code Generation
 
-When modifying `backend/pkg/graph/schema.graphqls`, re-run the gqlgen command to regenerate resolver stubs. When modifying REST handler annotations, re-run swag to update Swagger docs. When modifying `frontend/src/graphql/*.graphql` query files, re-run `npm run graphql:generate` to update TypeScript types.
+When modifying `backend/pkg/graph/schema.graphqls`, re-run the gqlgen command to regenerate resolver stubs. When modifying REST handler annotations, re-run swag to update Swagger docs. When modifying `frontend/src/graphql/*.graphql` query files, re-run `pnpm run graphql:generate` to update TypeScript types.
 
 ### Utility Binaries
 

CONTRIBUTING.md

@@ -28,7 +28,7 @@ When adding new dependencies, ensure they use compatible licenses:
 1. Update dependencies:
    ```bash
    cd backend && go mod tidy
-   cd ../frontend && npm install
+   cd ../frontend && pnpm install
    ```
 
 2. Generate license reports:

Dockerfile

@@ -12,14 +12,15 @@ ENV NODE_OPTIONS="--max-old-space-size=4096"
 
 WORKDIR /app/ui
 
-# Install build essentials
+# Install build essentials and enable pnpm via corepack
 RUN apt-get update && apt-get install -y \
     ca-certificates \
     tzdata \
     gcc \
     g++ \
     make \
-    git
+    git \
+    && corepack enable && corepack prepare pnpm@latest --activate
 
 # GraphQL schema for code generation
 COPY ./backend/pkg/graph/schema.graphqls ../backend/pkg/graph/
@@ -27,18 +28,18 @@ COPY ./backend/pkg/graph/schema.graphqls ../backend/pkg/graph/
 # Application source code
 COPY frontend/ .
 
-# Install dependencies with package manager detection for SBOM
-RUN --mount=type=cache,target=/root/.npm \
-    npm ci --include=dev
+# Install dependencies
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store \
+    pnpm install --frozen-lockfile
 
 # Generate license report for frontend dependencies
-RUN npm install -g license-checker && \
+RUN pnpm add -g license-checker && \
     mkdir -p /licenses/frontend && \
     license-checker --production --json > /licenses/frontend/licenses.json && \
     license-checker --production --csv > /licenses/frontend/licenses.csv
 
 # Build frontend with optimizations and parallel processing
-RUN npm run build -- \
+RUN pnpm run build -- \
     --mode production \
     --minify esbuild \
     --outDir dist \

README.md

@@ -2423,23 +2423,23 @@ For running tests `cd backend && go test -v ./...`
 
 #### Frontend Setup
 
-Run once `cd frontend && npm install` to install needed packages.
+Run once `cd frontend && pnpm install` to install needed packages.
 
-For generating graphql files have to run `npm run graphql:generate` which using `graphql-codegen.ts` file.
+For generating graphql files have to run `pnpm run graphql:generate` which using `graphql-codegen.ts` file.
 
 Be sure that you have `graphql-codegen` installed globally:
 
 ```bash
-npm install -g graphql-codegen
+pnpm add -g graphql-codegen
 ```
 
 After that you can run:
-* `npm run prettier` to check if your code is formatted correctly
-* `npm run prettier:fix` to fix it
-* `npm run lint` to check if your code is linted correctly
-* `npm run lint:fix` to fix it
+* `pnpm run prettier` to check if your code is formatted correctly
+* `pnpm run prettier:fix` to fix it
+* `pnpm run lint` to check if your code is linted correctly
+* `pnpm run lint:fix` to fix it
 
-For generating SSL certificates you need to run `npm run ssl:generate` which using `generate-ssl.ts` file or it will be generated automatically when you run `npm run dev`.
+For generating SSL certificates you need to run `pnpm run ssl:generate` which using `generate-ssl.ts` file or it will be generated automatically when you run `pnpm run dev`.
 
 #### Backend Configuration
 
@@ -2473,9 +2473,9 @@ Run the command(s) in `backend` folder:
 #### Frontend
 
 Run the command(s) in `frontend` folder:
-- Run `npm install` to install the dependencies
-- Run `npm run dev` to run the web app
-- Run `npm run build` to build the web app
+- Run `pnpm install` to install the dependencies
+- Run `pnpm run dev` to run the web app
+- Run `pnpm run build` to build the web app
 
 Open your browser and visit the web app URL.
 

frontend/README.md

@@ -95,19 +95,19 @@ src/
 ### Prerequisites
 
 -   Node.js 18+
--   npm 8+
+-   pnpm 10+
 
 ### Installation
 
 1. Clone the repository
 2. Install dependencies:
-   npm install
+   pnpm install
 3. Start the development server:
-   npm run dev
+   pnpm run dev
 
 ### Building for Production
 
-npm run build
+pnpm run build
 
 ### Environment Variables
 

frontend/package.json

@@ -3,15 +3,15 @@
     "type": "module",
     "version": "0.2.0",
     "scripts": {
-        "build": "npx tsc && vite build",
+        "build": "tsc && vite build",
         "commit": "commit",
         "commitlint": "commitlint --edit",
         "dev": "vite",
         "graphql:generate": "graphql-codegen --config graphql-codegen.ts",
         "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
         "lint:fix": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix",
-        "prettier": "npx prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\"",
-        "prettier:fix": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\"",
+        "prettier": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\"",
+        "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\"",
         "ssl:generate": "tsx --eval 'import { generateCertificates } from \"./scripts/generate-ssl.ts\"; generateCertificates();'",
         "test": "vitest run",
         "test:coverage": "vitest run --coverage",
@@ -54,10 +54,14 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
+        "github-slugger": "^2.0.0",
         "graphql": "^16.11.0",
         "graphql-ws": "^6.0.5",
+        "highlight.js": "^11.11.1",
         "html2pdf.js": "^0.14.0",
         "js-cookie": "^3.0.5",
+        "lodash": "^4.18.1",
+        "lowlight": "^3.3.0",
         "lru-cache": "^11.1.0",
         "lucide-react": "^0.553.0",
         "marked": "^17.0.3",
@@ -86,6 +90,7 @@
         "@commitlint/cli": "^20.0.0",
         "@commitlint/config-conventional": "^20.0.0",
         "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "^9.39.4",
         "@graphql-codegen/cli": "^5.0.3",
         "@graphql-codegen/client-preset": "^4.5.1",
         "@graphql-codegen/near-operation-file-preset": "^5.0.0",
@@ -123,6 +128,14 @@
         "vite-tsconfig-paths": "^5.0.1",
         "vitest": "^4.0.0"
     },
+    "packageManager": "pnpm@10.32.1",
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@swc/core",
+            "esbuild",
+            "simple-git-hooks"
+        ]
+    },
     "eslintConfig": {
         "extends": [
             "plugin:storybook/recommended"

frontend/src/components/ui/button.tsx

@@ -35,8 +35,7 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-        VariantProps<typeof buttonVariants> {
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
 

frontend/src/components/ui/sheet.tsx

@@ -48,8 +48,7 @@ const sheetVariants = cva(
 );
 
 interface SheetContentProps
-    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-        VariantProps<typeof sheetVariants> {
+    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
     container?: HTMLElement | null;
     overlay?: boolean;
 }

frontend/src/features/flows/tasks/flow-subtask.tsx

@@ -42,9 +42,7 @@ const FlowSubtask = ({ searchValue = '', subtask }: FlowSubtaskProps) => {
     }, [searchValue, description, result]);
 
     const [prevSearchValue, setPrevSearchValue] = useState(searchValue);
-    const [prevHasMatch, setPrevHasMatch] = useState(
-        searchChecks.hasDescriptionMatch || searchChecks.hasResultMatch,
-    );
+    const [prevHasMatch, setPrevHasMatch] = useState(searchChecks.hasDescriptionMatch || searchChecks.hasResultMatch);
 
     const hasMatch = searchChecks.hasDescriptionMatch || searchChecks.hasResultMatch;
 

licenses/README.md

@@ -16,14 +16,14 @@ Run the generator script to create/update license reports (run from project root
 - `backend-dependencies.txt` - Complete list of Go modules
 - `backend-licenses.csv` - Detailed license information (CSV format)
 
-### Frontend (npm)
-- `frontend-dependencies.json` - Complete npm dependency tree (JSON)
+### Frontend (pnpm)
+- `frontend-dependencies.json` - Complete dependency tree (JSON)
 - `frontend-licenses.json` - Detailed license data (JSON)
 - `frontend-licenses.csv` - License data (CSV)
 
 **Note:** 
 - Backend reports require `go-licenses` tool: `go install github.com/google/go-licenses@latest`
-- Frontend reports require `npm ci` in the frontend directory first.
+- Frontend reports require `pnpm install` in the frontend directory first.
 
 ## License
 

scripts/generate-licenses.sh

@@ -31,18 +31,18 @@ fi
 
 cd ..
 
-# Frontend (npm)
+# Frontend (pnpm)
 echo "→ Frontend..."
 cd frontend
 if [ -d "node_modules" ]; then
-    npm ls --production --json > "../$LICENSES_DIR/frontend-dependencies.json" 2>/dev/null || true
+    pnpm ls --prod --json > "../$LICENSES_DIR/frontend-dependencies.json" 2>/dev/null || true
     
     if command -v license-checker &> /dev/null; then
         license-checker --production --json > "../$LICENSES_DIR/frontend-licenses.json" 2>/dev/null || true
         license-checker --production --csv > "../$LICENSES_DIR/frontend-licenses.csv" 2>/dev/null || true
     fi
 else
-    echo "  Run 'npm ci' in frontend/ for detailed reports"
+    echo "  Run 'pnpm install' in frontend/ for detailed reports"
 fi
 cd ..