feat(pdf): rename acquisition-library to pdf-library and update package name to @mintel/pdf

- Fixed IndustrialCard export in SharedUI.
- Successfully built all extensions including acquisition-library.
- Verified sitemap and briefing module updates.

.changeset/init-mail-package.md

@@ -1,5 +0,0 @@
----
-"@mintel/mail": minor
----
-
-Initial release of the branded email system package.

.changeset/resilient-build-scripts.md

@@ -0,0 +1,7 @@
+---
+"@mintel/monorepo": patch
+"acquisition-manager": patch
+"feedback-commander": patch
+---
+
+fix: make directus extension build scripts more resilient

.dockerignore

@@ -1,7 +1,7 @@
 node_modules
 .next
 .git
-.npmrc
+# .npmrc is allowed as it contains the registry template
 dist
 build
 out

.env

@@ -0,0 +1,36 @@
+# Project
+IMAGE_TAG=latest
+PROJECT_NAME=at-mintel
+PROJECT_COLOR=#82ed20
+GITEA_TOKEN=ccce002e30fe16a31a6c9d5a414740af2f72a582
+
+# Authentication
+GATEKEEPER_PASSWORD=mintel
+AUTH_COOKIE_NAME=mintel_gatekeeper_session
+
+# Host Config (Local)
+TRAEFIK_HOST=at-mintel.localhost
+DIRECTUS_HOST=cms.localhost
+
+# Next.js
+NEXT_PUBLIC_BASE_URL=http://at-mintel.localhost
+
+# Directus
+DIRECTUS_URL=http://cms.localhost
+DIRECTUS_KEY=F9IIfahEjPq6NZhKyRLw516D8GotuFj79EGK7pGfIWg=
+DIRECTUS_SECRET=OZfxMu8lBxzaEnFGRKreNBoJpRiRu58U+HsVg2yWk4o=
+CORS_ENABLED=true
+CORS_ORIGIN=true
+LOG_LEVEL=debug
+DIRECTUS_ADMIN_EMAIL=mmintel@mintel.me
+DIRECTUS_ADMIN_PASSWORD=Tim300493.
+DIRECTUS_DB_NAME=directus
+DIRECTUS_DB_USER=directus
+DIRECTUS_DB_PASSWORD=mintel-db-pass
+
+# Sentry / Glitchtip
+SENTRY_DSN=
+
+# Analytics (Umami)
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=
+NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://analytics.infra.mintel.me/script.js

.env.example

@@ -1,4 +1,5 @@
 # Project
+IMAGE_TAG=v1.7.12
 PROJECT_NAME=sample-website
 PROJECT_COLOR=#82ed20
 

.eslintignore

@@ -0,0 +1,2 @@
+**/index.js
+**/dist/**

.gitea/workflows/maintenance.yml

@@ -0,0 +1,44 @@
+name: 🏥 Server Maintenance
+
+on:
+  schedule:
+    - cron: '0 3 * * *' # Every day at 3:00 AM
+  workflow_dispatch: # Allow manual trigger
+
+jobs:
+  maintenance:
+    name: 🧹 Prune & Clean
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: 🚀 Execute Maintenance via SSH
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -H ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts 2>/dev/null
+
+          # Run the prune script on the host
+          # We transfer the script and execute it to ensure it matches the repo version
+          scp packages/infra/scripts/prune-registry.sh root@${{ secrets.SSH_HOST }}:/tmp/prune-registry.sh
+          ssh root@${{ secrets.SSH_HOST }} "bash /tmp/prune-registry.sh && rm /tmp/prune-registry.sh"
+
+      - name: 🔔 Notification - Success
+        if: success()
+        run: |
+          curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
+            -F "title=🏥 Maintenance Complete" \
+            -F "message=Server-Wartung erfolgreich ausgeführt.\nRegistry & Docker Ressourcen bereinigt." \
+            -F "priority=2" || true
+
+      - name: 🔔 Notification - Failure
+        if: failure()
+        run: |
+          curl -s -k -X POST "${{ secrets.GOTIFY_URL }}/message?token=${{ secrets.GOTIFY_TOKEN }}" \
+            -F "title=❌ Maintenance FAILED" \
+            -F "message=Die automatische Server-Wartung ist fehlgeschlagen!\nBitte Logs prüfen." \
+            -F "priority=8" || true

.gitea/workflows/pipeline.yml

@@ -2,6 +2,8 @@ name: Monorepo Pipeline
 
 on:
   push:
+    branches:
+      - '**'
     tags:
       - 'v*'
 
@@ -10,43 +12,124 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  qa:
-    name: 🧪 Quality Assurance
+  prioritize:
+    name: ⚡ Prioritize Release
     runs-on: docker
     container:
       image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: 🛑 Cancel Redundant Runs
+        env:
+          GITEA_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REPO: ${{ github.repository }}
+          RUN_ID: ${{ github.run_id }}
+          REF: ${{ github.ref }}
+          REF_NAME: ${{ github.ref_name }}
+          EVENT: ${{ github.event_name }}
+        run: |
+          echo "🔎 Debug: Event=$EVENT, Ref=$REF, RefName=$REF_NAME, RunId=$RUN_ID"
+          
+          case "$REF" in
+            refs/tags/v*)
+              echo "🚀 Release detected ($REF_NAME). Cancelling non-tag runs..."
+              
+              # Fetch all runs
+              RUNS=$(curl -s -H "Authorization: token $GITEA_TOKEN" "https://git.infra.mintel.me/api/v1/repos/$REPO/actions/runs")
+              
+              # Identify runs to cancel: in_progress/queued, NOT this run, and NOT a tag run
+              echo "$RUNS" | jq -c '.workflow_runs[] | select(.status == "in_progress" or .status == "queued") | select(.id | tostring != "'$RUN_ID'")' | while read -r run; do
+                ID=$(echo "$run" | jq -r '.id')
+                RUN_REF=$(echo "$run" | jq -r '.ref')
+                TITLE=$(echo "$run" | jq -r '.display_title')
+                
+                case "$RUN_REF" in
+                  refs/tags/v*)
+                    echo "⏭️ Skipping parallel release run $ID ($TITLE) on $RUN_REF"
+                    ;;
+                  *)
+                    echo "🛑 Cancelling redundant branch run $ID ($TITLE) on $RUN_REF..."
+                    curl -X POST -s -H "Authorization: token $GITEA_TOKEN" "https://git.infra.mintel.me/api/v1/repos/$REPO/actions/runs/$ID/cancel"
+                    ;;
+                esac
+              done
+              ;;
+            *)
+              echo "ℹ️ Regular push. No prioritization needed."
+              ;;
+          esac
+
+  lint:
+    name: 🧹 Lint
+    needs: prioritize
+    if: always() && !cancelled() && (needs.prioritize.result == 'success' || needs.prioritize.result == 'skipped')
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node_version: 20
-          cache: 'pnpm'
-
+      - name: Enable pnpm
+        run: corepack enable && corepack prepare pnpm@10.2.0 --activate
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
+        run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts --no-color
       - name: Lint
         run: pnpm lint
 
+  test:
+    name: 🧪 Test
+    needs: prioritize
+    if: always() && !cancelled() && (needs.prioritize.result == 'success' || needs.prioritize.result == 'skipped')
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node_version: 20
+      - name: Enable pnpm
+        run: corepack enable && corepack prepare pnpm@10.2.0 --activate
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts --no-color
       - name: Test
         run: pnpm test
 
+  build:
+    name: 🏗️ Build
+    needs: prioritize
+    if: always() && !cancelled() && (needs.prioritize.result == 'success' || needs.prioritize.result == 'skipped')
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    env:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node_version: 20
+      - name: Enable pnpm
+        run: corepack enable && corepack prepare pnpm@10.2.0 --activate
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts --no-color
       - name: Build
         run: pnpm build
 
   release:
     name: 🚀 Release
-    needs: qa
+    needs: [lint, test, build]
     if: startsWith(github.ref, 'refs/tags/v')
     runs-on: docker
     container:
@@ -59,30 +142,24 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node_version: 20
-          cache: 'pnpm'
-
+      - name: Enable pnpm
+        run: corepack enable && corepack prepare pnpm@10.2.0 --activate
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
+        run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts --no-color
+      - name: 🏷️ Sync Versions (if Tagged)
+        run: pnpm sync-versions
       - name: 🏷️ Release Packages (Tag-Driven)
         run: |
           echo "🏷️ Tag detected [${{ github.ref_name }}], performing sync release..."
-          pnpm sync-versions
           pnpm release:tag
 
   build-images:
     name: 🐳 Build ${{ matrix.name }}
-    needs: qa
+    needs: [lint, test, build]
     if: startsWith(github.ref, 'refs/tags/v')
     runs-on: docker
     container:

.husky/pre-push

@@ -0,0 +1,16 @@
+
+# Check if we are pushing a tag
+while read local_ref local_sha remote_ref remote_sha
+do
+  if [[ "$remote_ref" == refs/tags/v* ]]; then
+    TAG=${remote_ref#refs/tags/}
+    echo "🏷️ Tag detected: $TAG, syncing versions..."
+    pnpm sync-versions "$TAG"
+    
+    # Stage the changed files (excluding ignored files like .env)
+    git add package.json packages/*/package.json apps/*/package.json .env.example
+    
+    echo "⚠️ package.json and .env files updated to match tag $TAG."
+    echo "⚠️ Note: You might need to push again if these changes were not already in your commit/tag."
+  fi
+done

.npmrc

@@ -2,3 +2,6 @@
 registry=https://npm.infra.mintel.me/
 //npm.infra.mintel.me/:_authToken=${NPM_TOKEN}
 always-auth=true
+
+public-hoist-pattern[]=*
+shamefully-hoist=true

Dockerfile.template

@@ -0,0 +1,56 @@
+# Stage 1: Builder
+FROM registry.infra.mintel.me/mintel/nextjs:latest AS builder
+WORKDIR /app
+
+# Clean the workspace in case the base image is dirty
+RUN rm -rf ./*
+
+# Arguments for build-time configuration
+ARG NEXT_PUBLIC_BASE_URL
+ARG NEXT_PUBLIC_TARGET
+ARG DIRECTUS_URL
+ARG NPM_TOKEN
+
+# Environment variables for Next.js build
+ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
+ENV NEXT_PUBLIC_TARGET=$NEXT_PUBLIC_TARGET
+ENV DIRECTUS_URL=$DIRECTUS_URL
+ENV SKIP_RUNTIME_ENV_VALIDATION=true
+ENV CI=true
+
+# Enable pnpm
+RUN corepack enable
+
+# Copy lockfile and manifest for dependency installation caching
+COPY pnpm-lock.yaml package.json .npmrc* ./
+
+# Install dependencies with cache mount
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
+    --mount=type=secret,id=NPM_TOKEN \
+    export NPM_TOKEN=$(cat /run/secrets/NPM_TOKEN 2>/dev/null || echo $NPM_TOKEN) && \
+    pnpm install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Build application
+RUN pnpm build
+
+# Stage 2: Runner
+FROM registry.infra.mintel.me/mintel/runtime:latest AS runner
+WORKDIR /app
+
+ENV HOSTNAME="0.0.0.0"
+ENV PORT=3000
+ENV NODE_ENV=production
+
+# Copy standalone output and static files
+# Adjust paths if using a monorepo structure (e.g., /app/apps/web/public)
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+
+USER nextjs
+
+CMD ["node", "server.js"]

apps/sample-website/eslint.config.mjs

@@ -1,3 +0,0 @@
-import { nextConfig } from "@mintel/eslint-config/next";
-
-export default nextConfig;

apps/sample-website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-website",
-  "version": "0.1.1",
+  "version": "1.7.12",
   "private": true,
   "type": "module",
   "scripts": {
@@ -8,15 +8,9 @@
     "dev:local": "mintel dev --local",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint src/",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
-    "cms:bootstrap": "mintel directus bootstrap",
-    "cms:push:testing": "mintel directus sync push testing",
-    "cms:pull:testing": "mintel directus sync pull testing",
-    "cms:push:staging": "mintel directus sync push staging",
-    "cms:pull:staging": "mintel directus sync pull staging",
-    "cms:push:prod": "mintel directus sync push production",
     "cms:pull:prod": "mintel directus sync pull production",
     "pagespeed:test": "mintel pagespeed"
   },
@@ -24,8 +18,8 @@
     "@mintel/next-utils": "workspace:*",
     "@mintel/observability": "workspace:*",
     "@mintel/next-observability": "workspace:*",
-    "@sentry/nextjs": "^8.55.0",
-    "next": "15.1.6",
+    "@sentry/nextjs": "10.38.0",
+    "next": "16.1.6",
     "next-intl": "^4.8.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

directus/extensions/acquisition-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "acquisition-manager",
+  "description": "Custom High-Fidelity Acquisition Management for Directus",
+  "icon": "account_balance_wallet",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Acquisition Manager"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

directus/extensions/acquisition/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "acquisition",
+  "version": "1.7.12",
+  "type": "module",
+  "directus:extension": {
+    "type": "endpoint",
+    "path": "dist/index.js",
+    "source": "src/index.ts",
+    "host": "^11.0.0"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "dev": "node build.mjs --watch"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "@mintel/acquisition": "workspace:*",
+    "@mintel/mail": "workspace:*",
+    "esbuild": "^0.25.0",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "jquery": "^3.7.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  }
+}

directus/extensions/customer-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "customer-manager",
+  "description": "Custom High-Fidelity Customer & Company Management for Directus",
+  "icon": "supervisor_account",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Customer Manager"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

directus/extensions/feedback-commander/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "feedback-commander",
+  "description": "Custom High-Fidelity Feedback Management Extension for Directus",
+  "icon": "view_kanban",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Feedback Commander"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

directus/extensions/people-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "people-manager",
+  "description": "Custom High-Fidelity People Management for Directus",
+  "icon": "person",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "People Manager"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

directus/schema/snapshot.yaml

@@ -0,0 +1,19 @@
+version: 1
+directus: 11.15.1
+vendor: postgres
+collections: []
+fields: []
+systemFields:
+  - collection: directus_activity
+    field: timestamp
+    schema:
+      is_indexed: true
+  - collection: directus_revisions
+    field: activity
+    schema:
+      is_indexed: true
+  - collection: directus_revisions
+    field: parent
+    schema:
+      is_indexed: true
+relations: []

directus/uploads/directus-health-file

@@ -0,0 +1 @@
+Qy-qP

docker-compose.yml

@@ -1,17 +1,18 @@
 services:
   app:
     build:
-      context: .
+      context: ./apps/sample-website
       dockerfile: Dockerfile
       args:
         NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL:-http://localhost:3000}
         NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${NEXT_PUBLIC_UMAMI_WEBSITE_ID}
         NEXT_PUBLIC_UMAMI_SCRIPT_URL: ${NEXT_PUBLIC_UMAMI_SCRIPT_URL}
         NEXT_PUBLIC_TARGET: ${TARGET:-development}
-      DIRECTUS_URL: ${DIRECTUS_URL:-http://directus:8055}
     restart: always
     networks:
       - infra
+    environment:
+      - DIRECTUS_URL=${DIRECTUS_URL:-http://directus:8055}
     env_file:
       - .env
     ports:
@@ -22,7 +23,13 @@ services:
       - "traefik.http.services.sample-website.loadbalancer.server.port=3000"
 
   directus:
-    image: registry.infra.mintel.me/mintel/directus:latest
+    image: registry.infra.mintel.me/mintel/directus:${IMAGE_TAG:-latest}
+    healthcheck:
+      test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:8055/server/health" ]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 5s
     restart: always
     networks:
       - infra
@@ -34,7 +41,7 @@ services:
       ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL:-admin@mintel.me}
       ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD:-mintel-admin}
       DB_CLIENT: 'pg'
-      DB_HOST: 'directus-db'
+      DB_HOST: 'at-mintel-directus-db'
       DB_PORT: '5432'
       DB_DATABASE: ${DIRECTUS_DB_NAME:-directus}
       DB_USER: ${DIRECTUS_DB_USER:-directus}
@@ -46,12 +53,13 @@ services:
     volumes:
       - ./directus/uploads:/directus/uploads
       - ./directus/extensions:/directus/extensions
+      - ./directus/schema:/directus/schema
     labels:
       - "traefik.enable=true"
       - "traefik.http.routers.sample-website-directus.rule=Host(`${DIRECTUS_HOST:-cms.sample-website.localhost}`)"
       - "traefik.http.services.sample-website-directus.loadbalancer.server.port=8055"
 
-  directus-db:
+  at-mintel-directus-db:
     image: postgres:15-alpine
     restart: always
     networks:

eslint.config.js

@@ -1,3 +1,26 @@
+import baseConfig from "@mintel/eslint-config";
 import { nextConfig } from "@mintel/eslint-config/next";
 
-export default nextConfig;
+export default [
+  {
+    ignores: [
+      "packages/cms-infra/extensions/**",
+      "packages/customer-manager/index.js",
+      "**/*.db",
+      "**/build/**",
+      "**/data/**",
+      "**/reference/**",
+      "**/dist/**",
+      "**/.next/**",
+    ],
+  },
+  ...baseConfig,
+  ...nextConfig.map((config) => ({
+    ...config,
+    files: [
+      "apps/sample-website/**/*.{ts,tsx}",
+      "packages/gatekeeper/**/*.{ts,tsx}",
+      "../klz-2026/**/*.{ts,tsx}",
+    ],
+  })),
+];

package.json

@@ -5,11 +5,17 @@
   "scripts": {
     "build": "pnpm -r build",
     "dev": "pnpm -r dev",
-    "lint": "pnpm -r lint",
+    "lint": "pnpm -r --filter='./packages/**' --filter='./apps/**' lint",
     "test": "pnpm -r test",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "sync-versions": "tsx scripts/sync-versions.ts",
+    "sync-versions": "tsx scripts/sync-versions.ts --",
+    "cms:push:infra": "./scripts/sync-directus.sh push infra",
+    "cms:pull:infra": "./scripts/sync-directus.sh pull infra",
+    "cms:schema:snapshot": "./scripts/cms-snapshot.sh",
+    "cms:schema:apply": "./scripts/cms-apply.sh local",
+    "cms:schema:apply:infra": "./scripts/cms-apply.sh infra",
+    "dev:infra": "docker-compose up -d directus directus-db",
     "release": "pnpm build && changeset publish",
     "release:tag": "pnpm build && pnpm -r publish --no-git-checks --access public",
     "prepare": "husky"
@@ -27,7 +33,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.2",
-    "eslint-plugin-next": "^0.0.0",
+    "@next/eslint-plugin-next": "16.1.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "happy-dom": "^20.4.0",
@@ -39,5 +45,18 @@
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.54.0",
     "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "import-in-the-middle": "^3.0.0",
+    "pino": "^10.3.1",
+    "pino-pretty": "^13.1.3",
+    "require-in-the-middle": "^8.0.1"
+  },
+  "version": "1.7.12",
+  "pnpm": {
+    "overrides": {
+      "next": "16.1.6",
+      "@sentry/nextjs": "10.38.0"
+    }
   }
 }

packages/acquisition-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "acquisition-manager",
+  "description": "Custom High-Fidelity Acquisition Management for Directus",
+  "icon": "account_balance_wallet",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Acquisition Manager"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

packages/acquisition-manager/src/index.ts

@@ -0,0 +1,19 @@
+import { defineModule } from "@directus/extensions-sdk";
+import ModuleComponent from "./module.vue";
+
+export default defineModule({
+    id: "acquisition-manager",
+    name: "Acquisition",
+    icon: "auto_awesome",
+    routes: [
+        {
+            path: "",
+            component: ModuleComponent,
+        },
+        {
+            path: ":id",
+            component: ModuleComponent,
+            props: true
+        }
+    ],
+});

packages/acquisition-manager/src/module.vue

@@ -0,0 +1,403 @@
+<template>
+	<private-view title="Acquisition Manager">
+		<template #navigation>
+			<v-list nav>
+				<v-list-item @click="showAddLead = true" clickable>
+					<v-list-item-icon><v-icon name="add" color="var(--theme--primary)" /></v-list-item-icon>
+					<v-list-item-content>
+						<v-text-overflow text="Neuen Lead anlegen" />
+					</v-list-item-content>
+				</v-list-item>
+
+				<v-divider />
+
+				<v-list-item
+					v-for="lead in leads"
+					:key="lead.id"
+					:active="selectedLeadId === lead.id"
+					class="lead-item"
+					clickable
+					@click="selectLead(lead.id)"
+				>
+					<v-list-item-icon>
+						<v-icon :name="getStatusIcon(lead.status)" :color="getStatusColor(lead.status)" />
+					</v-list-item-icon>
+					<v-list-item-content>
+						<v-text-overflow :text="lead.company_name" />
+					</v-list-item-content>
+				</v-list-item>
+			</v-list>
+		</template>
+
+		<template #title-outer:after>
+			<v-notice v-if="notice" :type="notice.type" @close="notice = null" dismissible>
+				{{ notice.message }}
+			</v-notice>
+		</template>
+
+		<div class="content-wrapper">
+			<v-notice type="success" style="margin-bottom: 16px;">
+				DEBUG: Module Version 1.1.0 - Native Build - {{ new Date().toISOString() }}
+			</v-notice>
+
+			<div v-if="!selectedLead" class="empty-state">
+				<v-info title="Lead auswählen" icon="auto_awesome" center>
+					Wähle einen Lead in der Navigation aus oder
+					<v-button x-small @click="showAddLead = true">registriere einen neuen Lead</v-button>.
+				</v-info>
+			</div>
+
+			<template v-else>
+				<header class="header">
+					<div class="header-left">
+						<h1 class="title">{{ selectedLead.company_name }}</h1>
+						<p class="subtitle">
+							<v-icon name="language" x-small />
+							<a :href="selectedLead.website_url" target="_blank" class="url-link">
+								{{ selectedLead.website_url.replace(/^https?:\/\//, '') }}
+							</a>
+							&middot; Status: {{ selectedLead.status.toUpperCase() }}
+						</p>
+					</div>
+					<div class="header-right">
+						<v-button 
+							v-if="selectedLead.status === 'new'" 
+							secondary 
+							:loading="loadingAudit" 
+							@click="runAudit"
+						>
+							<v-icon name="settings_suggest" left />
+							Audit starten
+						</v-button>
+
+						<template v-if="selectedLead.status === 'audit_ready'">
+							<v-button secondary :loading="loadingEmail" @click="sendAuditEmail">
+								<v-icon name="mail" left />
+								Audit E-Mail
+							</v-button>
+							<v-button :loading="loadingPdf" @click="generatePdf">
+								<v-icon name="picture_as_pdf" left />
+								PDF Erstellen
+							</v-button>
+						</template>
+
+						<v-button v-if="selectedLead.audit_pdf_path" secondary icon v-tooltip.bottom="'PDF öffnen'" @click="openPdf">
+							<v-icon name="open_in_new" />
+						</v-button>
+						
+						<v-button 
+							v-if="selectedLead.audit_pdf_path" 
+							primary
+							:loading="loadingEmail"
+							@click="sendEstimateEmail"
+						>
+							<v-icon name="send" left />
+							Angebot senden
+						</v-button>
+					</div>
+				</header>
+
+				<div class="sections">
+					<div class="main-info">
+						<div class="form-grid">
+							<div class="field">
+								<span class="label">Kontaktperson</span>
+								<div v-if="selectedLead.contact_person" class="value person-link" @click="goToPerson(selectedLead.contact_person)">
+									{{ getPersonName(selectedLead.contact_person) }}
+								</div>
+								<div v-else class="value text-subdued">Keine Person verknüpft</div>
+							</div>
+							<div class="field">
+								<span class="label">E-Mail (Legacy)</span>
+								<div class="value">{{ selectedLead.contact_email || '—' }}</div>
+							</div>
+							<div class="field full">
+								<span class="label">Briefing / Fokus</span>
+								<div class="value text-block">{{ selectedLead.briefing || 'Kein Briefing hinterlegt.' }}</div>
+							</div>
+						</div>
+					</div>
+
+					<v-divider />
+
+					<div v-if="selectedLead.ai_state" class="ai-observations">
+						<h3 class="section-title">AI Observations & Estimation</h3>
+						
+						<div class="metrics">
+							<v-info label="Projekt-Modus" :value="selectedLead.ai_state.projectType || 'Unbekannt'" />
+							<v-info label="Seitenanzahl" :value="selectedLead.ai_state.sitemap?.length || '0'" />
+						</div>
+
+						<v-table
+							v-if="selectedLead.ai_state.sitemap"
+							:headers="[ { text: 'Seite', value: 'title' }, { text: 'URL', value: 'url' } ]"
+							:items="selectedLead.ai_state.sitemap"
+							class="observation-table"
+						>
+							<template #[`item.title`]="{ item }">
+								<span class="page-title">{{ item.title }}</span>
+							</template>
+							<template #[`item.url`]="{ item }">
+								<span class="page-url">{{ item.url }}</span>
+							</template>
+						</v-table>
+					</div>
+				</div>
+			</template>
+		</div>
+
+		<!-- Drawer: New Lead -->
+		<v-drawer
+			v-model="showAddLead"
+			title="Neuen Lead registrieren"
+			icon="person_add"
+			@cancel="showAddLead = false"
+		>
+			<div class="drawer-content">
+				<div class="form-section">
+					<div class="field">
+						<span class="label">Firma</span>
+						<v-input v-model="newLead.company_name" placeholder="z.B. Schmidt GmbH" autofocus />
+					</div>
+					<div class="field">
+						<span class="label">Website URL</span>
+						<v-input v-model="newLead.website_url" placeholder="https://..." />
+					</div>
+					<div class="field">
+						<span class="label">Ansprechpartner</span>
+						<v-input v-model="newLead.contact_name" placeholder="Vorname Nachname" />
+					</div>
+					<div class="field">
+						<span class="label">E-Mail Adresse</span>
+						<v-input v-model="newLead.contact_email" placeholder="email@beispiel.de" type="email" />
+					</div>
+					<div class="field">
+						<span class="label">Briefing / Fokus</span>
+						<v-textarea v-model="newLead.briefing" placeholder="Besonderheiten für das Audit..." />
+					</div>
+					<div class="field">
+						<span class="label">Kontaktperson (Optional)</span>
+						<v-select
+							v-model="newLead.contact_person"
+							:items="peopleOptions"
+							placeholder="Person auswählen..."
+						/>
+					</div>
+				</div>
+
+				<div class="drawer-actions">
+					<v-button primary block :loading="savingLead" @click="saveLead">Lead speichern</v-button>
+				</div>
+			</div>
+		</v-drawer>
+	</private-view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useApi } from '@directus/extensions-sdk';
+
+const api = useApi();
+const leads = ref<any[]>([]);
+const selectedLeadId = ref<string | null>(null);
+const loadingAudit = ref(false);
+const loadingPdf = ref(false);
+const loadingEmail = ref(false);
+const showAddLead = ref(false);
+const savingLead = ref(false);
+const notice = ref<{ type: string; message: string } | null>(null);
+
+const newLead = ref({
+	company_name: '',
+	website_url: '',
+	contact_name: '',
+	contact_email: '',
+	contact_person: null,
+	briefing: '',
+	status: 'new'
+});
+
+const people = ref<any[]>([]);
+
+const peopleOptions = computed(() => 
+	people.value.map(p => ({
+		text: `${p.first_name} ${p.last_name}`,
+		value: p.id
+	}))
+);
+
+function getPersonName(id: string) {
+	const person = people.value.find(p => p.id === id);
+	return person ? `${person.first_name} ${person.last_name}` : id;
+}
+
+function goToPerson(id: string) {
+	// Logic to navigate to people manager or open details
+	notice.value = { type: 'info', message: `Navigiere zu Person: ${id}` };
+}
+
+const selectedLead = computed(() => leads.value.find(l => l.id === selectedLeadId.value));
+
+onMounted(fetchLeads);
+
+async function fetchLeads() {
+	const [leadsResp, peopleResp] = await Promise.all([
+		api.get('/items/leads', { params: { sort: '-date_created' } }),
+		api.get('/items/people', { params: { sort: 'last_name' } })
+	]);
+	leads.value = leadsResp.data.data;
+	people.value = peopleResp.data.data;
+	if (!selectedLeadId.value && leads.value.length > 0) {
+		selectedLeadId.value = leads.value[0].id;
+	}
+}
+
+function selectLead(id: string) {
+	selectedLeadId.value = id;
+}
+
+async function runAudit() {
+	if (!selectedLeadId.value) return;
+	loadingAudit.value = true;
+	try {
+		await api.post(`/acquisition/audit/${selectedLeadId.value}`);
+		notice.value = { type: 'success', message: 'Audit erfolgreich gestartet!' };
+		await fetchLeads();
+	} catch (e: any) {
+		notice.value = { type: 'danger', message: `Fehler beim Audit: ${e.message}` };
+	} finally {
+		loadingAudit.value = false;
+	}
+}
+
+async function sendAuditEmail() {
+	if (!selectedLeadId.value) return;
+	loadingEmail.value = true;
+	try {
+		await api.post(`/acquisition/audit-email/${selectedLeadId.value}`);
+		notice.value = { type: 'success', message: 'Audit E-Mail versendet!' };
+		await fetchLeads();
+	} catch (e: any) {
+		notice.value = { type: 'danger', message: `Fehler beim Versenden: ${e.message}` };
+	} finally {
+		loadingEmail.value = false;
+	}
+}
+
+async function generatePdf() {
+	if (!selectedLeadId.value) return;
+	loadingPdf.value = true;
+	try {
+		await api.post(`/acquisition/estimate/${selectedLeadId.value}`);
+		notice.value = { type: 'success', message: 'Angebot (PDF) wurde generiert!' };
+		await fetchLeads();
+	} catch (e: any) {
+		notice.value = { type: 'danger', message: `Fehler bei PDF Generierung: ${e.message}` };
+	} finally {
+		loadingPdf.value = false;
+	}
+}
+
+async function sendEstimateEmail() {
+	if (!selectedLeadId.value) return;
+	loadingEmail.value = true;
+	try {
+		await api.post(`/acquisition/estimate-email/${selectedLeadId.value}`);
+		notice.value = { type: 'success', message: 'Angebot erfolgreich versendet!' };
+		await fetchLeads();
+	} catch (e: any) {
+		notice.value = { type: 'danger', message: `Fehler beim Versenden: ${e.message}` };
+	} finally {
+		loadingEmail.value = false;
+	}
+}
+
+function openPdf() {
+	if (!selectedLead.value?.audit_pdf_path) return;
+	window.open(`${window.location.origin}/assets/${selectedLead.value.audit_pdf_path}`, '_blank');
+}
+
+async function saveLead() {
+	if (!newLead.value.company_name) return;
+	savingLead.value = true;
+	try {
+		const payload = {
+			id: crypto.randomUUID(),
+			...newLead.value
+		};
+		await api.post('/items/leads', payload);
+		notice.value = { type: 'success', message: 'Lead erfolgreich registriert!' };
+		showAddLead.value = false;
+		await fetchLeads();
+		selectedLeadId.value = payload.id;
+		newLead.value = { 
+			company_name: '', 
+			website_url: '', 
+			contact_name: '', 
+			contact_email: '', 
+			contact_person: null,
+			briefing: '', 
+			status: 'new' 
+		};
+	} catch (e: any) {
+		notice.value = { type: 'danger', message: `Fehler beim Speichern: ${e.message}` };
+	} finally {
+		savingLead.value = false;
+	}
+}
+
+function getStatusIcon(status: string) {
+	switch(status) {
+		case 'new': return 'fiber_new';
+		case 'auditing': return 'hourglass_empty';
+		case 'audit_ready': return 'check_circle';
+		case 'contacted': return 'mail_outline';
+		default: return 'help_outline';
+	}
+}
+
+function getStatusColor(status: string) {
+	switch(status) {
+		case 'new': return 'var(--theme--primary)';
+		case 'auditing': return 'var(--theme--warning)';
+		case 'audit_ready': return 'var(--theme--success)';
+		case 'contacted': return 'var(--theme--secondary)';
+		default: return 'var(--theme--foreground-subdued)';
+	}
+}
+</script>
+
+<style scoped>
+.content-wrapper { padding: 32px; height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
+.lead-item { cursor: pointer; }
+.header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; }
+.header-right { display: flex; gap: 12px; }
+.title { font-size: 24px; font-weight: 800; margin-bottom: 4px; color: var(--theme--foreground); }
+.subtitle { color: var(--theme--foreground-subdued); font-size: 14px; display: flex; align-items: center; gap: 8px; }
+.url-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
+.url-link:hover { border-bottom-color: currentColor; }
+.empty-state { height: 100%; display: flex; align-items: center; justify-content: center; }
+
+.sections { display: flex; flex-direction: column; gap: 32px; }
+
+.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+.field { display: flex; flex-direction: column; gap: 8px; }
+.field.full { grid-column: span 2; }
+.label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--theme--foreground-subdued); letter-spacing: 0.5px; }
+.value { font-size: 15px; color: var(--theme--foreground); }
+.text-block { line-height: 1.6; white-space: pre-wrap; background: var(--theme--background-subdued); padding: 16px; border-radius: 8px; }
+
+.ai-observations { display: flex; flex-direction: column; gap: 16px; }
+.section-title { font-size: 16px; font-weight: 700; color: var(--theme--foreground); margin-bottom: 8px; }
+.metrics { display: flex; gap: 32px; margin-bottom: 16px; }
+
+.observation-table { border: 1px solid var(--theme--border); border-radius: 8px; overflow: hidden; }
+.page-title { font-weight: 600; }
+.page-url { font-family: var(--family-monospace); font-size: 12px; color: var(--theme--foreground-subdued); }
+
+.drawer-content { padding: 24px; display: flex; flex-direction: column; gap: 32px; }
+.form-section { display: flex; flex-direction: column; gap: 20px; }
+.drawer-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
+
+:deep(.v-list-item) { cursor: pointer !important; }
+</style>

packages/acquisition/build.mjs

@@ -0,0 +1,49 @@
+import { build } from 'esbuild';
+import { resolve, dirname } from 'path';
+import { mkdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const entryPoint = resolve(__dirname, 'src/index.ts');
+const outfile = resolve(__dirname, 'dist/index.js');
+
+try {
+    mkdirSync(dirname(outfile), { recursive: true });
+} catch (e) { }
+
+console.log(`Building from ${entryPoint} to ${outfile}...`);
+
+build({
+    entryPoints: [entryPoint],
+    bundle: true,
+    platform: 'node',
+    target: 'node18',
+    outfile: outfile,
+    jsx: 'automatic',
+    loader: {
+        '.tsx': 'tsx',
+        '.ts': 'ts',
+        '.js': 'js',
+    },
+    external: ["@react-pdf/renderer", "react", "react-dom", "jsdom", "jsdom/*", "jquery", "jquery/*", "canvas", "fs", "path", "os", "http", "https", "zlib", "stream", "util", "url", "net", "tls", "crypto"],
+    plugins: [{
+        name: 'mock-canvas',
+        setup(build) {
+            build.onResolve({ filter: /^canvas/ }, args => ({ path: args.path, namespace: 'mock-canvas' }));
+            build.onLoad({ filter: /.*/, namespace: 'mock-canvas' }, () => ({ contents: 'export default {};', loader: 'js' }));
+        }
+    }, {
+        name: 'mock-jsdom',
+        setup(build) {
+            build.onResolve({ filter: /^jsdom/ }, args => ({ path: args.path, namespace: 'mock-jsdom' }));
+            build.onLoad({ filter: /.*/, namespace: 'mock-jsdom' }, () => ({ contents: 'export default {};', loader: 'js' }));
+        }
+    }]
+}).then(() => {
+    console.log("Build succeeded!");
+}).catch((e) => {
+    console.error("Build failed:", e);
+    process.exit(1);
+});

packages/acquisition/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "acquisition",
+  "version": "1.7.12",
+  "type": "module",
+  "directus:extension": {
+    "type": "endpoint",
+    "path": "dist/index.js",
+    "source": "src/index.ts",
+    "host": "^11.0.0"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "dev": "node build.mjs --watch"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "@mintel/acquisition": "workspace:*",
+    "@mintel/mail": "workspace:*",
+    "esbuild": "^0.25.0",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "jquery": "^3.7.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  }
+}

packages/acquisition/src/index.ts

@@ -0,0 +1,171 @@
+import { defineEndpoint } from "@directus/extensions-sdk";
+import { AcquisitionService, PdfEngine } from "@mintel/acquisition";
+import { render, SiteAuditTemplate, ProjectEstimateTemplate } from "@mintel/mail";
+import { createElement } from "react";
+import * as path from "path";
+import * as fs from "fs";
+
+export default defineEndpoint((router, { services, env }) => {
+    const { ItemsService, MailService } = services;
+
+    router.get("/ping", (req, res) => res.send("pong"));
+
+    router.post("/audit/:id", async (req: any, res: any) => {
+        const { id } = req.params;
+        const leadsService = new ItemsService("leads", { schema: req.schema, accountability: req.accountability });
+
+        try {
+            const lead = await leadsService.readOne(id);
+            if (!lead) return res.status(404).send({ error: "Lead not found" });
+
+            await leadsService.updateOne(id, { status: "auditing" });
+
+            const acqService = new AcquisitionService(env.OPENROUTER_API_KEY);
+            const result = await acqService.runFullSequence(lead.website_url, lead.briefing, lead.comments);
+
+            await leadsService.updateOne(id, {
+                status: "audit_ready",
+                ai_state: result.state,
+                audit_context: JSON.stringify(result.usage),
+            });
+
+            res.send({ success: true, result });
+        } catch (error: any) {
+            console.error("Audit failed:", error);
+            await leadsService.updateOne(id, { status: "new", comments: `Audit failed: ${error.message}` });
+            res.status(500).send({ error: error.message });
+        }
+    });
+
+    router.post("/audit-email/:id", async (req: any, res: any) => {
+        const { id } = req.params;
+        const leadsService = new ItemsService("leads", { schema: req.schema, accountability: req.accountability });
+        const peopleService = new ItemsService("people", { schema: req.schema, accountability: req.accountability });
+        const mailService = new MailService({ schema: req.schema, accountability: req.accountability });
+
+        try {
+            const lead = await leadsService.readOne(id);
+            if (!lead || !lead.ai_state) return res.status(400).send({ error: "Lead or Audit not ready" });
+
+            let recipientEmail = lead.contact_email;
+            let companyName = lead.company_name;
+
+            if (lead.contact_person) {
+                const person = await peopleService.readOne(lead.contact_person);
+                if (person && person.email) {
+                    recipientEmail = person.email;
+                    companyName = person.company || lead.company_name;
+                }
+            }
+
+            if (!recipientEmail) return res.status(400).send({ error: "No recipient email found" });
+
+            const auditHighlights = [
+                `Projekt-Typ: ${lead.ai_state.projectType === "website" ? "Website" : "Web App"}`,
+                ...(lead.ai_state.sitemap || []).slice(0, 3).map((item: any) => `Potenzial in: ${item.category}`),
+            ];
+
+            const html = await render(createElement(SiteAuditTemplate, {
+                companyName: companyName,
+                websiteUrl: lead.website_url,
+                auditHighlights
+            }));
+
+            await mailService.send({
+                to: recipientEmail,
+                subject: `Analyse Ihrer Webpräsenz: ${companyName}`,
+                html
+            });
+
+            await leadsService.updateOne(id, {
+                status: "contacted",
+                last_contacted_at: new Date().toISOString(),
+            });
+
+            res.send({ success: true });
+        } catch (error: any) {
+            console.error("Audit Email failed:", error);
+            res.status(500).send({ error: error.message });
+        }
+    });
+
+    router.post("/estimate/:id", async (req: any, res: any) => {
+        const { id } = req.params;
+        const leadsService = new ItemsService("leads", { schema: req.schema, accountability: req.accountability });
+
+        try {
+            const lead = await leadsService.readOne(id);
+            if (!lead || !lead.ai_state) return res.status(400).send({ error: "Lead or AI state not found" });
+
+            const pdfEngine = new PdfEngine();
+            const filename = `estimate_${id}_${Date.now()}.pdf`;
+            const storageRoot = env.STORAGE_LOCAL_ROOT || "./storage";
+            const outputPath = path.join(storageRoot, filename);
+
+            await pdfEngine.generateEstimatePdf(lead.ai_state, outputPath);
+
+            await leadsService.updateOne(id, {
+                audit_pdf_path: filename,
+            });
+
+            res.send({ success: true, filename });
+        } catch (error: any) {
+            console.error("PDF Generation failed:", error);
+            res.status(500).send({ error: error.message });
+        }
+    });
+
+    router.post("/estimate-email/:id", async (req: any, res: any) => {
+        const { id } = req.params;
+        const leadsService = new ItemsService("leads", { schema: req.schema, accountability: req.accountability });
+        const peopleService = new ItemsService("people", { schema: req.schema, accountability: req.accountability });
+        const mailService = new MailService({ schema: req.schema, accountability: req.accountability });
+
+        try {
+            const lead = await leadsService.readOne(id);
+            if (!lead || !lead.audit_pdf_path) return res.status(400).send({ error: "PDF not generated" });
+
+            let recipientEmail = lead.contact_email;
+            let companyName = lead.company_name;
+
+            if (lead.contact_person) {
+                const person = await peopleService.readOne(lead.contact_person);
+                if (person && person.email) {
+                    recipientEmail = person.email;
+                    companyName = person.company || lead.company_name;
+                }
+            }
+
+            if (!recipientEmail) return res.status(400).send({ error: "No recipient email found" });
+
+            const html = await render(createElement(ProjectEstimateTemplate, {
+                companyName: companyName,
+            }));
+
+            const storageRoot = env.STORAGE_LOCAL_ROOT || "./storage";
+            const attachmentPath = path.join(storageRoot, lead.audit_pdf_path);
+
+            await mailService.send({
+                to: recipientEmail,
+                subject: `Ihre Projekt-Schätzung: ${companyName}`,
+                html,
+                attachments: [
+                    {
+                        filename: `Angebot_${companyName}.pdf`,
+                        content: fs.readFileSync(attachmentPath)
+                    }
+                ]
+            });
+
+            await leadsService.updateOne(id, {
+                status: "contacted",
+                last_contacted_at: new Date().toISOString(),
+            });
+
+            res.send({ success: true });
+        } catch (error: any) {
+            console.error("Estimate Email failed:", error);
+            res.status(500).send({ error: error.message });
+        }
+    });
+});

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintel/cli",
-  "version": "1.0.1",
+  "version": "1.7.12",
   "publishConfig": {
     "access": "public",
     "registry": "https://npm.infra.mintel.me"
@@ -28,4 +28,4 @@
     "@types/prompts": "^2.4.4",
     "@mintel/tsconfig": "workspace:*"
   }
-}
+}

packages/cli/src/index.ts

@@ -25,24 +25,25 @@ program
       console.log(chalk.cyan("Running Next.js locally..."));
       execSync("next dev", { stdio: "inherit" });
     } else {
-      console.log(chalk.cyan("Starting Docker stack (App, Directus, DB)..."));
-      // Ensure network exists
       try {
-        execSync("docker network create infra", { stdio: "ignore" });
-      } catch (e) {}
+        console.log(chalk.cyan("Starting Docker stack (App, Directus, DB)..."));
+        // Ensure network exists
+      } catch (_e) {
+        // Network already exists or docker is not running
+      }
+    }
 
-      console.log(
-        chalk.yellow(`
+    console.log(
+      chalk.yellow(`
 📱 App:      http://localhost:3000
 🗄️  CMS:      http://localhost:8055/admin
 🚦 Traefik:  http://localhost:8080
 `),
-      );
-      execSync(
-        "docker-compose down --remove-orphans && docker-compose up app directus directus-db",
-        { stdio: "inherit" },
-      );
-    }
+    );
+    execSync(
+      "docker-compose down --remove-orphans && docker-compose up app directus directus-db",
+      { stdio: "inherit" },
+    );
   });
 
 const directus = program
@@ -60,6 +61,115 @@ directus
     });
   });
 
+directus
+  .command("bootstrap-feedback")
+  .description("Setup Directus collections and flows for Feedback")
+  .action(async () => {
+    const { execSync } = await import("child_process");
+    console.log(chalk.blue("📧 Bootstrapping Visual Feedback System..."));
+    // Use the logic from setup-feedback-hardened.ts
+    const bootstrapScript = `
+import { createDirectus, rest, authentication, createCollection, createDashboard, createPanel, createItems, createPermission, readPolicies, readRoles, readUsers } from '@directus/sdk';
+
+async function setup() {
+    const url = process.env.DIRECTUS_URL || 'http://localhost:8055';
+    const email = process.env.DIRECTUS_ADMIN_EMAIL;
+    const password = process.env.DIRECTUS_ADMIN_PASSWORD;
+
+    if (!email || !password) {
+        console.error('❌ DIRECTUS_ADMIN_EMAIL or DIRECTUS_ADMIN_PASSWORD not set');
+        process.exit(1);
+    }
+
+    const client = createDirectus(url).with(authentication('json')).with(rest());
+
+    try {
+        console.log('🔑 Authenticating...');
+        await client.login(email, password);
+
+        const roles = await client.request(readRoles());
+        const adminRole = roles.find(r => r.name === 'Administrator');
+        const policies = await client.request(readPolicies());
+        const adminPolicy = policies.find(p => p.name === 'Administrator');
+
+        console.log('🏗️ Creating Collection "visual_feedback"...');
+        try {
+            await client.request(createCollection({
+                collection: 'visual_feedback',
+                meta: { icon: 'feedback', display_template: '{{user_name}}: {{text}}' },
+                fields: [
+                    { field: 'id', type: 'uuid', schema: { is_primary_key: true } },
+                    { field: 'status', type: 'string', schema: { default_value: 'open' }, meta: { interface: 'select-dropdown' } },
+                    { field: 'url', type: 'string' },
+                    { field: 'selector', type: 'string' },
+                    { field: 'x', type: 'float' },
+                    { field: 'y', type: 'float' },
+                    { field: 'type', type: 'string' },
+                    { field: 'text', type: 'text' },
+                    { field: 'user_name', type: 'string' },
+                    { field: 'user_identity', type: 'string' },
+                    { field: 'screenshot', type: 'uuid', meta: { interface: 'file' } },
+                    { field: 'date_created', type: 'timestamp', schema: { default_value: 'NOW()' } }
+                ]
+            } as any));
+        } catch (_e) { console.log('  (Collection might already exist)'); }
+
+        try {
+            await client.request(createCollection({
+                collection: 'visual_feedback_comments',
+                meta: { icon: 'comment' },
+                fields: [
+                    { field: 'id', type: 'integer', schema: { is_primary_key: true, has_auto_increment: true } },
+                    { field: 'feedback_id', type: 'uuid', meta: { interface: 'select-dropdown' } },
+                    { field: 'user_name', type: 'string' },
+                    { field: 'text', type: 'text' },
+                    { field: 'date_created', type: 'timestamp', schema: { default_value: 'NOW()' } }
+                ]
+            } as any));
+        } catch (e) { }
+
+        if (adminPolicy) {
+            console.log('🔐 Granting ALL permissions to Administrator Policy...');
+            for (const coll of ['visual_feedback', 'visual_feedback_comments']) {
+              for (const action of ['create', 'read', 'update', 'delete']) {
+                try {
+                    await client.request(createPermission({
+                        collection: coll,
+                        action,
+                        fields: ['*'],
+                        policy: adminPolicy.id
+                    } as any));
+                } catch (_e) { }
+              }
+            }
+        }
+
+        console.log('📊 Creating Dashboard...');
+        try {
+          const dash = await client.request(createDashboard({ name: 'Visual Feedback', icon: 'feedback', color: '#6366f1' }));
+          await client.request(createPanel({
+              dashboard: dash.id,
+              name: 'Total Feedbacks',
+              type: 'metric',
+              width: 12, height: 6, position_x: 1, position_y: 1,
+              options: { collection: 'visual_feedback', function: 'count', field: 'id' }
+          } as any));
+        } catch (e) { }
+
+        console.log('✨ FEEDBACK BOOTSTRAP DONE.');
+    } catch (e) { console.error('❌ FAILURE:', e); }
+}
+setup();
+    `;
+    const tempFile = path.join(process.cwd(), "temp-bootstrap-feedback.ts");
+    await fs.writeFile(tempFile, bootstrapScript);
+    try {
+      execSync("npx tsx --env-file=.env " + tempFile, { stdio: "inherit" });
+    } finally {
+      await fs.remove(tempFile);
+    }
+  });
+
 directus
   .command("sync <action> <env>")
   .description("Sync Directus data (push/pull) for a specific environment")
@@ -121,7 +231,7 @@ program
           "pagespeed:test": "mintel pagespeed",
         },
         dependencies: {
-          next: "15.1.6",
+          next: "16.1.6",
           react: "^19.0.0",
           "react-dom": "^19.0.0",
           "@mintel/next-utils": "workspace:*",

packages/cms-infra/docker-compose.yml

@@ -0,0 +1,39 @@
+services:
+  infra-cms:
+    image: directus/directus:11
+    ports:
+      - "8059:8055"
+    networks:
+      - default
+      - infra
+    environment:
+      KEY: "infra-cms-key"
+      SECRET: "infra-cms-secret"
+      ADMIN_EMAIL: "marc@mintel.me"
+      ADMIN_PASSWORD: "Tim300493."
+      DB_CLIENT: "sqlite3"
+      DB_FILENAME: "/directus/database/data.db"
+      WEBSOCKETS_ENABLED: "true"
+      EMAIL_TRANSPORT: "smtp"
+      EMAIL_SMTP_HOST: "smtp.eu.mailgun.org"
+      EMAIL_SMTP_PORT: "587"
+      EMAIL_SMTP_USER: "postmaster@mg.mintel.me"
+      EMAIL_SMTP_PASSWORD: "4592fcb94599ee1a45b4ac2386fd0a64-102c75d8-ca2870e6"
+      EMAIL_SMTP_SECURE: "false"
+      EMAIL_FROM: "postmaster@mg.mintel.me"
+    volumes:
+      - ./database:/directus/database
+      - ./uploads:/directus/uploads
+      - ./schema:/directus/schema
+      - ./extensions:/directus/extensions
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.infra-cms.rule=Host(`cms.localhost`)"
+      - "traefik.http.services.infra-cms.loadbalancer.server.port=8055"
+      - "traefik.docker.network=infra"
+
+networks:
+  default:
+    name: mintel-infra-cms-internal
+  infra:
+    external: true

packages/cms-infra/extensions/acquisition-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "acquisition-manager",
+  "description": "Custom High-Fidelity Acquisition Management for Directus",
+  "icon": "account_balance_wallet",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Acquisition Manager"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

packages/cms-infra/extensions/customer-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "customer-manager",
+  "description": "Custom High-Fidelity Customer & Company Management for Directus",
+  "icon": "supervisor_account",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Customer Manager"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

packages/cms-infra/extensions/feedback-commander/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "feedback-commander",
+  "description": "Custom High-Fidelity Feedback Management Extension for Directus",
+  "icon": "view_kanban",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Feedback Commander"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

packages/cms-infra/extensions/people-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "people-manager",
+  "description": "Custom High-Fidelity People Management for Directus",
+  "icon": "person",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "People Manager"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

packages/cms-infra/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@mintel/cms-infra",
+  "version": "1.7.12",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "up": "npm run build:extensions && docker compose up -d",
+    "down": "docker compose down",
+    "logs": "docker compose logs -f",
+    "build:extensions": "../../scripts/sync-extensions.sh"
+  }
+}

packages/cms-infra/uploads/directus-health-file

@@ -0,0 +1 @@
+xmKX5

packages/customer-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "customer-manager",
+  "description": "Custom High-Fidelity Customer & Company Management for Directus",
+  "icon": "supervisor_account",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Customer Manager"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

packages/customer-manager/src/index.ts

@@ -0,0 +1,14 @@
+import { defineModule } from '@directus/extensions-sdk';
+import ModuleComponent from './module.vue';
+
+export default defineModule({
+    id: 'customer-manager',
+    name: 'Customer Manager',
+    icon: 'supervisor_account',
+    routes: [
+        {
+            path: '',
+            component: ModuleComponent,
+        },
+    ],
+});

packages/customer-manager/src/module.vue

@@ -0,0 +1,377 @@
+<template>
+	<private-view title="Customer Manager">
+		<template #navigation>
+			<v-list nav>
+				<v-list-item @click="openCreateCompany" clickable>
+					<v-list-item-icon><v-icon name="add" color="var(--theme--primary)" /></v-list-item-icon>
+					<v-list-item-content>
+						<v-text-overflow text="Neue Firma anlegen" />
+					</v-list-item-content>
+				</v-list-item>
+
+				<v-divider />
+
+				<v-list-item
+					v-for="company in companies"
+					:key="company.id"
+					:active="selectedCompany?.id === company.id"
+					class="company-item"
+					clickable
+					@click="selectCompany(company)"
+				>
+					<v-list-item-icon><v-icon name="business" /></v-list-item-icon>
+					<v-list-item-content>
+						<v-text-overflow :text="company.name" />
+					</v-list-item-content>
+				</v-list-item>
+			</v-list>
+		</template>
+
+		<template #title-outer:after>
+			<v-notice v-if="notice" :type="notice.type" @close="notice = null" dismissible>
+				{{ notice.message }}
+			</v-notice>
+		</template>
+
+		<div class="content-wrapper">
+			<div v-if="!selectedCompany" class="empty-state">
+				<v-info title="Firmen auswählen" icon="business" center>
+					Wähle eine Firma in der Navigation aus oder
+					<v-button x-small @click="openCreateCompany">erstelle eine neue Firma</v-button>.
+				</v-info>
+			</div>
+
+			<template v-else>
+				<header class="header">
+					<div class="header-left">
+						<h1 class="title">{{ selectedCompany.name }}</h1>
+						<p class="subtitle">{{ employees.length }} Kunden-Mitarbeiter</p>
+					</div>
+					<div class="header-right">
+						<v-button secondary rounded icon v-tooltip.bottom="'Firma bearbeiten'" @click="openEditCompany">
+							<v-icon name="edit" />
+						</v-button>
+						<v-button primary @click="openCreateEmployee">
+							Mitarbeiter hinzufügen
+						</v-button>
+					</div>
+				</header>
+
+				<v-table
+					:headers="tableHeaders"
+					:items="employees"
+					:loading="loading"
+					class="clickable-table"
+					fixed-header
+					@click:row="onRowClick"
+				>
+					<template #[`item.name`]="{ item }">
+						<div class="user-cell">
+							<v-avatar :name="item.first_name" x-small />
+							<span class="user-name">{{ item.first_name }} {{ item.last_name }}</span>
+						</div>
+					</template>
+
+					<template #[`item.last_invited`]="{ item }">
+						<span v-if="item.last_invited" class="status-date">
+							{{ formatDate(item.last_invited) }}
+						</span>
+						<v-chip v-else x-small>Noch nie</v-chip>
+					</template>
+				</v-table>
+			</template>
+		</div>
+
+		<!-- Drawer: Company Form -->
+		<v-drawer
+			v-model="drawerCompanyActive"
+			:title="isEditingCompany ? 'Firma bearbeiten' : 'Neue Firma anlegen'"
+			icon="business"
+			@cancel="drawerCompanyActive = false"
+		>
+			<div v-if="drawerCompanyActive" class="drawer-content">
+                <div class="form-section">
+                    <div class="field">
+                        <span class="label">Firmenname</span>
+                        <v-input v-model="companyForm.name" placeholder="z.B. KLZ Cables" autofocus />
+                    </div>
+                </div>
+				
+				<div class="drawer-actions">
+					<v-button primary block :loading="saving" @click="saveCompany">Speichern</v-button>
+				</div>
+			</div>
+		</v-drawer>
+
+		<!-- Drawer: Employee Form -->
+		<v-drawer
+			v-model="drawerEmployeeActive"
+			:title="isEditingEmployee ? 'Mitarbeiter bearbeiten' : 'Neuen Mitarbeiter anlegen'"
+			icon="person"
+			@cancel="drawerEmployeeActive = false"
+		>
+			<div v-if="drawerEmployeeActive" class="drawer-content">
+                <div class="form-section">
+                    <div class="field">
+                        <span class="label">Vorname</span>
+                        <v-input v-model="employeeForm.first_name" placeholder="Vorname" autofocus />
+                    </div>
+
+                    <div class="field">
+                        <span class="label">Nachname</span>
+                        <v-input v-model="employeeForm.last_name" placeholder="Nachname" />
+                    </div>
+
+                    <div class="field">
+                        <span class="label">E-Mail</span>
+                        <v-input v-model="employeeForm.email" placeholder="E-Mail Adresse" type="email" />
+                    </div>
+
+                    <v-divider v-if="isEditingEmployee" />
+
+                    <div v-if="isEditingEmployee" class="field">
+                        <span class="label">Temporäres Passwort</span>
+                        <v-input v-model="employeeForm.temporary_password" readonly class="password-input" />
+                        <p class="field-note">Wird beim Senden der Zugangsdaten automatisch generiert.</p>
+                    </div>
+                </div>
+
+				<div class="drawer-actions">
+					<v-button primary block :loading="saving" @click="saveEmployee">Daten speichern</v-button>
+					
+					<template v-if="isEditingEmployee">
+						<v-divider />
+						<v-button
+							v-tooltip.bottom="'Generiert PW, speichert es und sendet E-Mail'"
+							secondary
+							block
+							:loading="invitingId === employeeForm.id"
+							@click="inviteUser(employeeForm)"
+						>
+							<v-icon name="send" left /> Zugangsdaten senden
+						</v-button>
+					</template>
+				</div>
+			</div>
+		</v-drawer>
+	</private-view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+import { useApi } from '@directus/extensions-sdk';
+
+const api = useApi();
+
+const companies = ref<any[]>([]);
+const selectedCompany = ref<any>(null);
+const employees = ref<any[]>([]);
+const loading = ref(false);
+const saving = ref(false);
+const invitingId = ref<string | null>(null);
+const notice = ref<{ type: string; message: string } | null>(null);
+
+// Forms State
+const drawerCompanyActive = ref(false);
+const isEditingCompany = ref(false);
+const companyForm = ref({ id: '', name: '' });
+
+const drawerEmployeeActive = ref(false);
+const isEditingEmployee = ref(false);
+const employeeForm = ref({ 
+    id: '', 
+    first_name: '', 
+    last_name: '', 
+    email: '', 
+    temporary_password: '' 
+});
+
+const tableHeaders = [
+	{ text: 'Name', value: 'name', sortable: true },
+	{ text: 'E-Mail', value: 'email', sortable: true },
+	{ text: 'Zuletzt eingeladen', value: 'last_invited', sortable: true }
+];
+
+async function fetchCompanies() {
+	const res = await api.get('/items/companies', {
+		params: {
+			fields: ['id', 'name'],
+			sort: 'name',
+		},
+	});
+	companies.value = res.data.data;
+}
+
+async function selectCompany(company: any) {
+	selectedCompany.value = company;
+	loading.value = true;
+	try {
+		const res = await api.get('/items/client_users', {
+			params: {
+				filter: { company: { _eq: company.id } },
+				fields: ['*'],
+				sort: 'first_name',
+			},
+		});
+		employees.value = res.data.data;
+	} finally {
+		loading.value = false;
+	}
+}
+
+// Company Actions
+function openCreateCompany() {
+	isEditingCompany.value = false;
+	companyForm.value = { id: '', name: '' };
+	drawerCompanyActive.value = true;
+}
+
+async function openEditCompany() {
+	if (!selectedCompany.value) return;
+    companyForm.value = { 
+        id: selectedCompany.value.id, 
+        name: selectedCompany.value.name 
+    };
+	isEditingCompany.value = true;
+    await nextTick();
+	drawerCompanyActive.value = true;
+}
+
+async function saveCompany() {
+	if (!companyForm.value.name) return;
+	saving.value = true;
+	try {
+		if (isEditingCompany.value) {
+			await api.patch(`/items/companies/${companyForm.value.id}`, { name: companyForm.value.name });
+			notice.value = { type: 'success', message: 'Firma aktualisiert!' };
+		} else {
+			await api.post('/items/companies', { name: companyForm.value.name });
+			notice.value = { type: 'success', message: 'Firma angelegt!' };
+		}
+		drawerCompanyActive.value = false;
+		await fetchCompanies();
+		if (selectedCompany.value?.id === companyForm.value.id) {
+			selectedCompany.value.name = companyForm.value.name;
+		}
+	} catch (e: any) {
+		notice.value = { type: 'danger', message: e.message };
+	} finally {
+		saving.value = false;
+	}
+}
+
+// Employee Actions
+function openCreateEmployee() {
+	isEditingEmployee.value = false;
+	employeeForm.value = { id: '', first_name: '', last_name: '', email: '', temporary_password: '' };
+	drawerEmployeeActive.value = true;
+}
+
+async function openEditEmployee(item: any) {
+    employeeForm.value = {
+        id: item.id || '',
+        first_name: item.first_name || '',
+        last_name: item.last_name || '',
+        email: item.email || '',
+        temporary_password: item.temporary_password || ''
+    };
+	isEditingEmployee.value = true;
+    await nextTick();
+	drawerEmployeeActive.value = true;
+}
+
+async function saveEmployee() {
+	if (!employeeForm.value.email || !selectedCompany.value) return;
+	saving.value = true;
+	try {
+		if (isEditingEmployee.value) {
+			await api.patch(`/items/client_users/${employeeForm.value.id}`, {
+				first_name: employeeForm.value.first_name,
+				last_name: employeeForm.value.last_name,
+				email: employeeForm.value.email
+			});
+			notice.value = { type: 'success', message: 'Mitarbeiter aktualisiert!' };
+		} else {
+			await api.post('/items/client_users', {
+				first_name: employeeForm.value.first_name,
+				last_name: employeeForm.value.last_name,
+				email: employeeForm.value.email,
+				company: selectedCompany.value.id
+			});
+			notice.value = { type: 'success', message: 'Mitarbeiter angelegt!' };
+		}
+		drawerEmployeeActive.value = false;
+		await selectCompany(selectedCompany.value);
+	} catch (e: any) {
+		notice.value = { type: 'danger', message: e.message };
+	} finally {
+		saving.value = false;
+	}
+}
+
+async function inviteUser(user: any) {
+	invitingId.value = user.id;
+	try {
+		await api.post(`/flows/trigger/33443f6b-cec7-4668-9607-f33ea674d501`, [user.id]);
+		notice.value = { type: 'success', message: `Zugangsdaten für ${user.first_name} versendet. 📧` };
+		await selectCompany(selectedCompany.value);
+		if (drawerEmployeeActive.value && employeeForm.value.id === user.id) {
+			const updated = employees.value.find(e => e.id === user.id);
+			if (updated) {
+                employeeForm.value.temporary_password = updated.temporary_password;
+            }
+		}
+	} catch (e: any) {
+		notice.value = { type: 'danger', message: `Fehler: ${e.message}` };
+	} finally {
+		invitingId.value = null;
+	}
+}
+
+function onRowClick(event: any) {
+	const item = event?.item || event;
+	if (item && item.id) {
+		openEditEmployee(item);
+	}
+}
+
+function formatDate(dateStr: string) {
+	return new Date(dateStr).toLocaleString('de-DE', {
+		day: '2-digit', month: '2-digit', year: 'numeric',
+		hour: '2-digit', minute: '2-digit'
+	});
+}
+
+onMounted(() => {
+	fetchCompanies();
+});
+</script>
+
+<style scoped>
+.content-wrapper { padding: 32px; height: 100%; display: flex; flex-direction: column; }
+.company-item { cursor: pointer; }
+.header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; }
+.header-right { display: flex; gap: 12px; }
+.title { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
+.subtitle { color: var(--theme--foreground-subdued); font-size: 14px; }
+.empty-state { height: 100%; display: flex; align-items: center; justify-content: center; }
+.user-cell { display: flex; align-items: center; gap: 12px; }
+.user-name { font-weight: 600; }
+.status-date { font-size: 12px; color: var(--theme--foreground-subdued); }
+.drawer-content { padding: 24px; display: flex; flex-direction: column; gap: 32px; }
+.form-section { display: flex; flex-direction: column; gap: 20px; }
+.field { display: flex; flex-direction: column; gap: 8px; }
+.label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--theme--foreground-subdued); letter-spacing: 0.5px; }
+.field-note { font-size: 11px; color: var(--theme--foreground-subdued); margin-top: 4px; }
+.drawer-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
+.password-input :deep(textarea) {
+	font-family: var(--family-monospace);
+	font-weight: 800;
+	color: var(--theme--primary) !important;
+	background: var(--theme--background-subdued) !important;
+}
+
+.clickable-table :deep(tbody tr) { cursor: pointer; transition: background-color 0.2s ease; }
+.clickable-table :deep(tbody tr:hover) { background-color: var(--theme--background-subdued) !important; }
+:deep(.v-list-item) { cursor: pointer !important; }
+</style>

packages/eslint-config/index.js

@@ -3,13 +3,21 @@ import tseslint from "typescript-eslint";
 
 export default tseslint.config(
   {
-    ignores: ["**/dist/**", "**/node_modules/**", "**/.next/**"],
+    ignores: ["**/dist/**", "**/node_modules/**", "**/.next/**", "**/build/**"],
   },
   js.configs.recommended,
   ...tseslint.configs.recommended,
   {
     rules: {
-      "no-unused-vars": "warn",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
       "no-console": "off",
       "@typescript-eslint/no-explicit-any": "off",
     },

packages/eslint-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintel/eslint-config",
-  "version": "1.0.1",
+  "version": "1.7.12",
   "publishConfig": {
     "access": "public",
     "registry": "https://npm.infra.mintel.me"
@@ -20,8 +20,8 @@
   "dependencies": {
     "@eslint/eslintrc": "^3.0.0",
     "@eslint/js": "^9.39.2",
-    "@next/eslint-plugin-next": "15.1.6",
-    "eslint-config-next": "15.1.6",
+    "@next/eslint-plugin-next": "16.1.6",
+    "eslint-config-next": "16.1.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "typescript-eslint": "^8.54.0"

packages/feedback-commander/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "feedback-commander",
+  "description": "Custom High-Fidelity Feedback Management Extension for Directus",
+  "icon": "view_kanban",
+  "version": "1.7.12",
+  "type": "module",
+  "keywords": [
+    "directus",
+    "directus-extension",
+    "directus-extension-module"
+  ],
+  "files": [
+    "dist"
+  ],
+  "directus:extension": {
+    "type": "module",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "*",
+    "name": "Feedback Commander"
+  },
+  "scripts": {
+    "build": "directus-extension build && (cp -f dist/index.js index.js 2>/dev/null || true)",
+    "dev": "directus-extension build -w"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "vue": "^3.4.0"
+  }
+}

packages/feedback-commander/src/index.ts

@@ -0,0 +1,14 @@
+import { defineModule } from '@directus/extensions-sdk';
+import ModuleComponent from './module.vue';
+
+export default defineModule({
+    id: 'feedback-commander',
+    name: 'Feedback Commander',
+    icon: 'view_kanban',
+    routes: [
+        {
+            path: '',
+            component: ModuleComponent,
+        },
+    ],
+});

packages/feedback-commander/src/module.vue

@@ -0,0 +1,723 @@
+<template>
+	<private-view title="Feedback Commander">
+		<template #headline>
+			<v-breadcrumb :items="[{ name: 'Feedback', to: '/feedback-commander' }]" />
+		</template>
+
+		<template #title-outer:after>
+			<v-chip v-if="loading" label color="blue" small>Loading...</v-chip>
+			<v-chip v-else-if="fetchError" label color="red" small>Fetch Error</v-chip>
+			<v-chip v-else label color="green" small>{{ items.length }} Items</v-chip>
+		</template>
+
+		<template #navigation>
+			<div class="sidebar-header">
+				<v-text-overflow text="Websites" class="header-text" />
+			</div>
+			<v-list nav>
+				<v-list-item 
+					:active="currentProject === 'all'"
+					@click="currentProject = 'all'"
+					clickable
+				>
+					<v-list-item-icon><v-icon name="language" /></v-list-item-icon>
+					<v-list-item-content><v-text-overflow text="All Projects" /></v-list-item-content>
+				</v-list-item>
+
+				<v-list-item 
+					v-for="project in projects" 
+					:key="project"
+					:active="currentProject === project"
+					@click="currentProject = project"
+					clickable
+				>
+					<v-list-item-icon><v-icon name="public" color="var(--primary)" /></v-list-item-icon>
+					<v-list-item-content><v-text-overflow :text="project || 'Unknown'" /></v-list-item-content>
+				</v-list-item>
+			</v-list>
+		</template>
+
+		<div class="feedback-container">
+			<div v-if="!items.length && !loading && !fetchError" class="empty-state">
+				<v-info icon="inbox" title="Clean Inbox" center>
+					All feedback has been processed. Great job!
+				</v-info>
+			</div>
+
+			<div v-if="fetchError" class="empty-state">
+				<v-info icon="error" title="Fetch Failed" :description="fetchError" center />
+				<v-button @click="fetchData" secondary small>Retry</v-button>
+			</div>
+
+			<div class="operational-layout" v-else-if="items.length">
+				<!-- Detailed Triage Lane -->
+				<aside class="triage-lane">
+					<div class="lane-header">
+						<v-select 
+							v-model="currentStatusFilter" 
+							:items="statusOptions" 
+							small 
+							placeholder="Status Filter"
+						/>
+					</div>
+					<div class="lane-content scrollbar">
+						<TransitionGroup name="list">
+							<div 
+								v-for="item in filteredItems" 
+								:key="item.id" 
+								class="feedback-card"
+								:class="{ active: selectedItem?.id === item.id }"
+								@click="selectItem(item)"
+							>
+								<div class="card-status-bar" :style="{ background: getStatusColor(item.status || 'open') }"></div>
+								<div class="card-body">
+									<header class="card-header">
+										<span class="card-user">{{ item.user_name }}</span>
+										<span class="card-date">{{ formatDate(item.date_created || item.id) }}</span>
+									</header>
+									<div class="card-text">{{ item.text }}</div>
+									<footer class="card-footer">
+										<div class="meta-tags">
+											<v-chip x-small outline>{{ item.project }}</v-chip>
+											<v-icon :name="item.type === 'bug' ? 'bug_report' : 'lightbulb'" :color="item.type === 'bug' ? '#E91E63' : '#FFC107'" small />
+										</div>
+										<v-icon v-if="selectedItem?.id === item.id" name="chevron_right" small />
+									</footer>
+								</div>
+							</div>
+						</TransitionGroup>
+					</div>
+				</aside>
+
+				<!-- Elaborated Master-Detail Desk -->
+				<main class="processing-desk scrollbar">
+					<Transition name="fade" mode="out-in">
+						<div v-if="selectedItem" :key="selectedItem.id" class="desk-content">
+							<header class="desk-header">
+								<div class="headline-group">
+									<div class="status-indicator">
+										<div class="status-dot" :style="{ background: getStatusColor(selectedItem.status || 'open') }"></div>
+										<span class="status-text">{{ capitalize(selectedItem.status || 'open') }}</span>
+									</div>
+									<h2>{{ selectedItem.user_name }}'s Submission</h2>
+								</div>
+								<div class="header-actions">
+									<v-button primary @click="openDeepLink(selectedItem)">
+										<v-icon name="open_in_new" left /> Open & Highlight
+									</v-button>
+									<v-select 
+										v-model="selectedItem.status" 
+										:items="statuses" 
+										inline
+										@update:model-value="updateStatus"
+									/>
+								</div>
+							</header>
+
+							<div class="desk-grid">
+								<!-- Message Container -->
+								<div class="main-column">
+									<v-card class="content-card">
+										<v-card-title>
+											<v-icon name="format_quote" left />
+											Feedback Content
+										</v-card-title>
+										<v-card-text class="feedback-body">
+											<div v-if="selectedItem.screenshot" class="visual-proof">
+												<label class="proof-label"><v-icon name="photo" x-small /> Element Snapshot</label>
+												<img :src="getAssetUrl(selectedItem.screenshot)" class="screenshot-img" />
+											</div>
+											<div class="main-text">{{ selectedItem.text }}</div>
+										</v-card-text>
+									</v-card>
+
+									<section class="reply-section">
+										<div class="section-divider">
+											<v-divider />
+											<span class="divider-label">Internal Communication</span>
+											<v-divider />
+										</div>
+
+										<div class="thread">
+											<TransitionGroup name="thread-list">
+												<div v-for="reply in comments" :key="reply.id" class="reply-bubble">
+													<header class="reply-header">
+														<span class="reply-user">{{ reply.user_name }}</span>
+														<span class="reply-date">{{ formatDate(reply.date_created || reply.id) }}</span>
+													</header>
+													<div class="reply-text">{{ reply.text }}</div>
+												</div>
+											</TransitionGroup>
+											<div v-if="!comments.length" class="empty-state-mini">
+												<v-icon name="auto_awesome" small /> No replies yet. Start the thread.
+											</div>
+										</div>
+
+										<div class="composer">
+											<v-textarea v-model="replyText" placeholder="Compose internal response..." auto-grow />
+											<div class="composer-actions">
+												<v-button secondary :loading="sending" @click="sendReply">Post Reply</v-button>
+											</div>
+										</div>
+									</section>
+								</div>
+
+								<!-- Technical Sidebar -->
+								<aside class="meta-column">
+									<v-card class="meta-card">
+										<v-card-title>Context</v-card-title>
+										<v-card-text class="meta-list">
+											<div class="meta-item">
+												<label><v-icon name="public" x-small /> Website</label>
+												<strong>{{ selectedItem.project }}</strong>
+											</div>
+											<div class="meta-item">
+												<label><v-icon name="link" x-small /> Source Path</label>
+												<span class="truncate-path" :title="selectedItem.url">{{ formatUrl(selectedItem.url) }}</span>
+												<v-button icon small @click="openExternal(selectedItem.url)"><v-icon name="launch" /></v-button>
+											</div>
+											<v-divider />
+											<div class="meta-item">
+												<label><v-icon name="layers" x-small /> Element Trace</label>
+												<code class="trace-code">{{ selectedItem.selector || 'Body' }}</code>
+											</div>
+											<div class="meta-item">
+												<label><v-icon name="location_searching" x-small /> Precise Mark</label>
+												<span class="coords">X: {{ Math.round(selectedItem.x) }}px / Y: {{ Math.round(selectedItem.y) }}px</span>
+											</div>
+											<div class="meta-item">
+												<label><v-icon name="fingerprint" x-small /> Reference ID</label>
+												<code class="id-code">{{ selectedItem.id }}</code>
+											</div>
+										</v-card-text>
+									</v-card>
+
+									<div class="help-box">
+										<v-icon name="help_outline" x-small />
+										<span>Click "Open & Highlight" to jump directly to this element on the live site.</span>
+									</div>
+								</aside>
+							</div>
+						</div>
+						<div v-else class="no-selection-desk">
+							<v-info icon="touch_app" title="Select Feedback" center>
+								Choose an entry from the triage list to view details and process.
+							</v-info>
+						</div>
+					</Transition>
+				</main>
+			</div>
+		</div>
+	</private-view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useApi } from '@directus/extensions-sdk';
+
+const api = useApi();
+const items = ref([]);
+const comments = ref([]);
+const loading = ref(true);
+const fetchError = ref(null);
+const sending = ref(false);
+const selectedItem = ref(null);
+const currentProject = ref('all');
+const currentStatusFilter = ref('open');
+const replyText = ref('');
+
+const statuses = [
+	{ text: 'Open', value: 'open', icon: 'warning', color: '#E91E63' },
+	{ text: 'In Progress', value: 'in_progress', icon: 'play_arrow', color: '#2196F3' },
+	{ text: 'Resolved', value: 'resolved', icon: 'check_circle', color: '#4CAF50' }
+];
+
+const statusOptions = [
+	{ text: 'All Statuses', value: 'all' },
+	...statuses
+];
+
+const projects = computed(() => {
+	const projSet = new Set(items.value.map(i => i.project).filter(Boolean));
+	return Array.from(projSet).sort();
+});
+
+const filteredItems = computed(() => {
+	return items.value.filter(item => {
+		const matchProject = currentProject.value === 'all' || item.project === currentProject.value;
+		const status = item.status || 'open';
+		const matchStatus = currentStatusFilter.value === 'all' || status === currentStatusFilter.value;
+		return matchProject && matchStatus;
+	});
+});
+
+async function fetchData() {
+	loading.value = true;
+	fetchError.value = null;
+	try {
+		const response = await api.get('/items/visual_feedback', {
+			params: {
+				sort: '-date_created,-id',
+				limit: 300
+			}
+		});
+		items.value = response.data.data;
+	} catch (e: any) {
+		fetchError.value = e.message;
+	} finally {
+		loading.value = false;
+	}
+}
+
+async function selectItem(item) {
+	selectedItem.value = null; 
+	setTimeout(async () => {
+		selectedItem.value = item;
+		comments.value = [];
+		try {
+			const response = await api.get('/items/visual_feedback_comments', {
+				params: {
+					filter: { feedback_id: { _eq: item.id } },
+					sort: '-date_created,-id'
+				}
+			});
+			comments.value = response.data.data;
+		} catch (e) {
+			console.error(e);
+		}
+	}, 10);
+}
+
+async function updateStatus(val) {
+	if (!selectedItem.value) return;
+	try {
+		await api.patch(`/items/visual_feedback/${selectedItem.value.id}`, {
+			status: val
+		});
+		fetchData();
+	} catch (e) {
+		console.error(e);
+	}
+}
+
+async function sendReply() {
+	if (!replyText.value.trim() || !selectedItem.value) return;
+	sending.value = true;
+	try {
+		const response = await api.post('/items/visual_feedback_comments', {
+			feedback_id: selectedItem.value.id,
+			user_name: 'Operator',
+			text: replyText.value
+		});
+		comments.value.unshift(response.data.data);
+		replyText.value = '';
+	} catch (e) {
+		console.error(e);
+	} finally {
+		sending.value = false;
+	}
+}
+
+function formatDate(dateStr) {
+	if (!dateStr || typeof dateStr === 'number') return 'Legacy';
+	return new Date(dateStr).toLocaleDateString() + ' ' + new Date(dateStr).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+function formatUrl(url) {
+	if (!url) return '';
+	return url.replace(/^https?:\/\//, '');
+}
+
+function capitalize(s) {
+	return s.charAt(0).toUpperCase() + s.slice(1).replace('_', ' ');
+}
+
+function getDeepLinkUrl(item) {
+	if (!item || !item.url) return '';
+	try {
+		const url = new URL(item.url);
+		url.searchParams.set('fb_id', item.id);
+		return url.toString();
+	} catch (e) {
+		return item.url + '?fb_id=' + item.id;
+	}
+}
+
+function openDeepLink(item) {
+	const url = getDeepLinkUrl(item);
+	if (url) window.open(url, '_blank');
+}
+
+function openExternal(url) {
+	if (url) window.open(url, '_blank');
+}
+
+function getAssetUrl(id) {
+	if (!id) return '';
+	return `/assets/${id}`;
+}
+
+function getStatusColor(status) {
+	const s = statuses.find(st => st.value === status);
+	return s ? s.color : 'var(--foreground-subdued)';
+}
+
+onMounted(() => {
+	fetchData();
+});
+</script>
+
+<style scoped>
+.feedback-container {
+	height: calc(100vh - 64px);
+	display: flex;
+	flex-direction: column;
+	background: var(--background-subdued);
+}
+
+.operational-layout {
+	display: flex;
+	height: 100%;
+}
+
+/* Triage Lane Polish */
+.triage-lane {
+	width: 360px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background: var(--background-normal);
+	border-right: 1px solid var(--border-normal);
+	box-shadow: 2px 0 8px rgba(0,0,0,0.02);
+}
+
+.lane-header {
+	padding: 16px;
+	background: var(--background-normal);
+	border-bottom: 1px solid var(--border-normal);
+}
+
+.lane-content {
+	flex: 1;
+	overflow-y: auto;
+	padding: 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.feedback-card {
+	background: var(--background-normal);
+	border: 1px solid var(--border-subdued);
+	border-radius: 8px;
+	display: flex;
+	overflow: hidden;
+	cursor: pointer;
+	transition: all var(--transition);
+}
+
+.feedback-card:hover {
+	border-color: var(--border-normal);
+	background: var(--background-subdued);
+	transform: translateY(-1px);
+	box-shadow: 0 4px 8px rgba(0,0,0,0.04);
+}
+
+.feedback-card.active {
+	border-color: var(--primary);
+	background: var(--background-accent);
+	box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
+}
+
+.card-status-bar {
+	width: 4px;
+}
+
+.card-body {
+	flex: 1;
+	padding: 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.card-header {
+	display: flex;
+	justify-content: space-between;
+	font-size: 11px;
+}
+
+.card-user { font-weight: bold; color: var(--foreground-normal); }
+.card-date { color: var(--foreground-subdued); }
+
+.card-text {
+	font-size: 13px;
+	line-height: 1.5;
+	color: var(--foreground-normal);
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.card-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.meta-tags {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+/* Processing Desk Refinement */
+.processing-desk {
+	flex: 1;
+	height: 100%;
+	overflow-y: auto;
+	padding: 32px;
+}
+
+.desk-content {
+	max-width: 1100px;
+	margin: 0 auto;
+}
+
+.desk-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-end;
+	margin-bottom: 32px;
+	border-bottom: 2px solid var(--border-normal);
+	padding-bottom: 20px;
+}
+
+.headline-group {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.status-indicator {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 12px;
+	font-weight: bold;
+	text-transform: uppercase;
+	color: var(--foreground-subdued);
+}
+
+.status-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+}
+
+.status-text { letter-spacing: 0.5px; }
+
+.header-actions {
+	display: flex;
+	gap: 16px;
+	align-items: center;
+}
+
+.desk-grid {
+	display: grid;
+	grid-template-columns: 1fr 300px;
+	gap: 24px;
+	align-items: start;
+}
+
+.content-card {
+	border-radius: 12px;
+	overflow: hidden;
+}
+
+.feedback-body {
+	font-size: 18px;
+	line-height: 1.6;
+	padding: 24px;
+	color: var(--foreground-normal);
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.visual-proof {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.proof-label {
+	font-size: 10px;
+	text-transform: uppercase;
+	font-weight: 800;
+	color: var(--foreground-subdued);
+	letter-spacing: 0.5px;
+}
+
+.screenshot-img {
+	width: 100%;
+	border-radius: 8px;
+	border: 1px solid var(--border-normal);
+	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+	background: var(--background-subdued);
+}
+
+.main-text {
+	white-space: pre-wrap;
+}
+
+.reply-section {
+	margin-top: 40px;
+}
+
+.section-divider {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	margin-bottom: 24px;
+}
+
+.divider-label {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 800;
+	color: var(--foreground-subdued);
+	white-space: nowrap;
+	letter-spacing: 1px;
+}
+
+.thread {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin-bottom: 32px;
+}
+
+.reply-bubble {
+	padding: 16px;
+	border-radius: 12px;
+	background: var(--background-normal);
+	border: 1px solid var(--border-subdued);
+}
+
+.reply-header {
+	display: flex;
+	justify-content: space-between;
+	font-size: 11px;
+	margin-bottom: 8px;
+}
+
+.reply-user { font-weight: 800; color: var(--primary); }
+.reply-date { color: var(--foreground-subdued); }
+
+.reply-text { font-size: 14px; line-height: 1.5; }
+
+.composer {
+	background: var(--background-normal);
+	border: 1px solid var(--border-normal);
+	border-radius: 12px;
+	padding: 16px;
+}
+
+.composer-actions {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 12px;
+}
+
+.meta-card {
+	border-radius: 12px;
+}
+
+.meta-list {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px;
+}
+
+.meta-item {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	font-size: 13px;
+}
+
+.meta-item label {
+	font-size: 10px;
+	text-transform: uppercase;
+	font-weight: bold;
+	color: var(--foreground-subdued);
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.truncate-path {
+	color: var(--primary);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.trace-code, .id-code {
+	background: var(--background-subdued);
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-size: 11px;
+	word-break: break-all;
+}
+
+.coords { font-weight: bold; font-family: var(--family-monospace); }
+
+.help-box {
+	margin-top: 20px;
+	padding: 16px;
+	background: rgba(var(--primary-rgb), 0.05);
+	border-radius: 12px;
+	font-size: 12px;
+	color: var(--primary);
+	display: flex;
+	gap: 8px;
+	line-height: 1.4;
+}
+
+.no-selection-desk {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.empty-state-mini {
+	text-align: center;
+	padding: 24px;
+	font-size: 12px;
+	color: var(--foreground-subdued);
+	background: var(--background-subdued);
+	border-radius: 12px;
+	border: 1px dashed var(--border-normal);
+}
+
+/* Animations */
+.list-enter-active, .list-leave-active { transition: all 0.3s ease; }
+.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(-20px); }
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
+.fade-enter-from { opacity: 0; transform: translateY(10px); }
+.fade-leave-to { opacity: 0; transform: translateY(-10px); }
+
+.thread-list-enter-active { transition: all 0.4s ease; transform-origin: top; }
+.thread-list-enter-from { opacity: 0; transform: scaleY(0.9); }
+
+.scrollbar::-webkit-scrollbar { width: 6px; }
+.scrollbar::-webkit-scrollbar-track { background: transparent; }
+.scrollbar::-webkit-scrollbar-thumb { background: var(--border-subdued); border-radius: 3px; }
+.scrollbar::-webkit-scrollbar-thumb:hover { background: var(--border-normal); }
+</style>

packages/gatekeeper/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@mintel/gatekeeper",
-  "version": "1.0.0",
+  "version": "1.7.12",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint src/",
     "test": "vitest run"
   },
   "dependencies": {
     "@mintel/next-utils": "workspace:*",
     "clsx": "^2.1.1",
     "lucide-react": "^0.474.0",
-    "next": "15.1.6",
+    "next": "16.1.6",
     "next-intl": "^4.8.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

packages/gatekeeper/postcss.config.cjs

@@ -1,3 +1,4 @@
+/* global module */
 module.exports = {
     plugins: {
         tailwindcss: {},

packages/gatekeeper/src/app/api/verify/route.ts

@@ -11,6 +11,8 @@ export async function GET(req: NextRequest) {
 
   // 1. URL Parameter Bypass (for automated tests/staging)
   const originalUrl = req.headers.get("x-forwarded-uri") || "/";
+
+  console.log(`[Verify] Check: ${originalUrl} | Cookie: ${session ? "Found" : "Missing"}`);
   const host =
     req.headers.get("x-forwarded-host") || req.headers.get("host") || "";
   const proto = req.headers.get("x-forwarded-proto") || "https";
@@ -44,7 +46,7 @@ export async function GET(req: NextRequest) {
 
       return response;
     }
-  } catch (e) {
+  } catch (_e) {
     // URL parsing failed, proceed with normal logic
   }
 
@@ -54,15 +56,17 @@ export async function GET(req: NextRequest) {
   if (session?.value) {
     if (session.value === password) {
       isAuthenticated = true;
+      console.log(`[Verify] Legacy password match`);
     } else {
       try {
         const payload = JSON.parse(session.value);
         if (payload.identity) {
           isAuthenticated = true;
           identity = payload.identity;
+          console.log(`[Verify] Identity verified: ${identity}`);
         }
-      } catch (e) {
-        // Fallback or old format
+      } catch (_e) {
+        console.log(`[Verify] JSON Parse failed for cookie: ${session.value.substring(0, 10)}...`);
       }
     }
   }

packages/gatekeeper/src/app/api/whoami/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { cookies } from "next/headers";
 
-export async function GET(req: NextRequest) {
+export async function GET(_req: NextRequest) {
   const cookieStore = await cookies();
   const authCookieName =
     process.env.AUTH_COOKIE_NAME || "mintel_gatekeeper_session";
@@ -12,15 +12,18 @@ export async function GET(req: NextRequest) {
   }
 
   let identity = "Guest";
+  let company = null;
   try {
     const payload = JSON.parse(session.value);
     identity = payload.identity || "Guest";
-  } catch (e) {
+    company = payload.company || null;
+  } catch (_e) {
     // Old format probably just the password
   }
 
   return NextResponse.json({
     authenticated: true,
     identity: identity,
+    company: company,
   });
 }

packages/gatekeeper/src/app/login/page.tsx

@@ -17,8 +17,8 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
   async function login(formData: FormData) {
     "use server";
 
-    const email = formData.get("email") as string;
-    const password = formData.get("password") as string;
+    const email = (formData.get("email") as string || "").trim();
+    const password = (formData.get("password") as string || "").trim();
 
     const expectedCode = process.env.GATEKEEPER_PASSWORD || "mintel";
     const adminEmail = process.env.DIRECTUS_ADMIN_EMAIL;
@@ -29,22 +29,59 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
     const cookieDomain = process.env.COOKIE_DOMAIN;
 
     let userIdentity = "";
+    let userCompany: any = null;
 
-    // 1. Check Global Admin (from ENV)
-    if (
+    // 1. Check Generic Code (Guest) - High Priority to prevent autofill traps
+    if (password === expectedCode) {
+      userIdentity = "Guest";
+    }
+    // 2. Check Global Admin (from ENV)
+    else if (
       adminEmail &&
       adminPassword &&
-      email === adminEmail &&
-      password === adminPassword
+      email === adminEmail.trim() &&
+      password === adminPassword.trim()
     ) {
       userIdentity = "Admin";
     }
-    // 2. Check Generic Code (Guest)
-    else if (!email && password === expectedCode) {
-      userIdentity = "Guest";
+    // 3. Check Lightweight Client Users (dedicated collection)
+    if (email && password && process.env.INFRA_DIRECTUS_URL) {
+      try {
+        const clientUsersRes = await fetch(
+          `${process.env.INFRA_DIRECTUS_URL}/items/client_users?filter[email][_eq]=${encodeURIComponent(
+            email,
+          )}&fields=*,company.*`,
+          {
+            headers: {
+              Authorization: `Bearer ${process.env.INFRA_DIRECTUS_TOKEN}`,
+            },
+          },
+        );
+
+        if (clientUsersRes.ok) {
+          const { data: users } = await clientUsersRes.json();
+          const clientUser = users[0];
+
+          // ⚠️ NOTE: Plain text check for demo/dev, should use argon2 in production
+          if (
+            clientUser &&
+            (clientUser.password === password ||
+              clientUser.temporary_password === password)
+          ) {
+            userIdentity = clientUser.first_name || clientUser.email;
+            userCompany = {
+              id: clientUser.company?.id,
+              name: clientUser.company?.name,
+            };
+          }
+        }
+      } catch (e) {
+        console.error("Client User Auth Error:", e);
+      }
     }
-    // 3. Check Directus if email is provided
-    if (email && password && process.env.DIRECTUS_URL) {
+
+    // 4. Fallback to Directus Staff Auth if still not identified
+    if (!userIdentity && email && password && process.env.DIRECTUS_URL) {
       try {
         const loginRes = await fetch(`${process.env.DIRECTUS_URL}/auth/login`, {
           method: "POST",
@@ -56,14 +93,21 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
           const { data } = await loginRes.json();
           const accessToken = data.access_token;
 
-          // Fetch user info to get a nice display name
-          const userRes = await fetch(`${process.env.DIRECTUS_URL}/users/me`, {
-            headers: { Authorization: `Bearer ${accessToken}` },
-          });
+          // Fetch user info with company depth
+          const userRes = await fetch(
+            `${process.env.DIRECTUS_URL}/users/me?fields=*,company.*`,
+            {
+              headers: { Authorization: `Bearer ${accessToken}` },
+            },
+          );
 
           if (userRes.ok) {
             const { data: user } = await userRes.json();
             userIdentity = user.first_name || user.email;
+            userCompany = {
+              id: user.company?.id,
+              name: user.company?.name,
+            };
           }
         }
       } catch (e) {
@@ -72,15 +116,19 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
     }
 
     if (userIdentity) {
+      console.log(`[Login] Success: ${userIdentity} | Redirect: ${targetRedirect}`);
       const cookieStore = await cookies();
       // Store identity in the cookie (simplified for now, ideally signed)
       const sessionValue = JSON.stringify({
         identity: userIdentity,
+        company: userCompany,
         timestamp: Date.now(),
       });
 
       const isDev = process.env.NODE_ENV === "development";
 
+      console.log(`[Login] Setting Cookie: ${authCookieName} | Domain: ${cookieDomain || "Default"}`);
+
       cookieStore.set(authCookieName, sessionValue, {
         httpOnly: true,
         secure: !isDev,
@@ -91,6 +139,7 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
       });
       redirect(targetRedirect);
     } else {
+      console.log(`[Login] Failed for inputs. Redirecting back with error.`);
       redirect(`/login?error=1&redirect=${encodeURIComponent(targetRedirect)}`);
     }
   }

packages/gatekeeper/tailwind.config.cjs

@@ -1,3 +1,4 @@
+/* global module, require */
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: [
@@ -55,5 +56,6 @@ module.exports = {
             },
         },
     },
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     plugins: [require("@tailwindcss/typography")],
 };

packages/husky-config/lint-staged.js

@@ -1,4 +1,5 @@
-import path from "path";
+/* global process */
+import path from "node:path";
 
 const buildLintCommand = (filenames) => {
   const isNext =
@@ -11,7 +12,7 @@ const buildLintCommand = (filenames) => {
       .join(" --file ")}`;
   }
 
-  return "eslint --fix";
+  return "eslint --fix --no-warn-ignored";
 };
 
 const config = {

packages/husky-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintel/husky-config",
-  "version": "1.0.0",
+  "version": "1.7.12",
   "publishConfig": {
     "access": "public",
     "registry": "https://npm.infra.mintel.me"

packages/infra/docker/Dockerfile.gatekeeper

@@ -19,7 +19,6 @@ COPY packages/cli/package.json ./packages/cli/package.json
 COPY packages/observability/package.json ./packages/observability/package.json
 COPY packages/next-observability/package.json ./packages/next-observability/package.json
 COPY packages/husky-config/package.json ./packages/husky-config/package.json
-COPY packages/ui/package.json ./packages/ui/package.json
 
 # Use a secret for NPM_TOKEN and a cache mount for the pnpm store
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \

packages/infra/docker/Dockerfile.nextjs

@@ -1,19 +1,13 @@
-# Step 1: Builder image
-FROM node:20-alpine AS builder
+# Step 1: Base image for Next.js builds
+FROM node:20-alpine
 RUN apk add --no-cache libc6-compat curl
+
+# Enable pnpm
+RUN corepack enable pnpm && \
+    corepack prepare pnpm@10.2.0 --activate
+
 WORKDIR /app
-RUN corepack enable pnpm
 
-# Step 2: Install dependencies
-# We copy everything first because we have a .dockerignore
-# and we need the workspace structure for pnpm to work correctly
-COPY . .
-
-# Use a secret for NPM_TOKEN to authenticate with private registry
-RUN --mount=type=cache,target=/root/.local/share/pnpm/store/v3 \
-    --mount=type=secret,id=NPM_TOKEN \
-    export NPM_TOKEN=$(cat /run/secrets/NPM_TOKEN) && \
-    pnpm i --frozen-lockfile
-
-# Step 3: Build shared packages
-RUN pnpm --filter "./packages/*" -r build
+# Final environment
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1

packages/infra/docker/Dockerfile.runtime

@@ -1,19 +1,22 @@
-FROM node:20-alpine
+FROM node:20-alpine AS runner
+RUN apk add --no-cache libc6-compat curl
 
-# Install essential production utilities
-RUN apk add --no-cache curl libc6-compat
+WORKDIR /app
 
-# Set standard production environment
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
 
-WORKDIR /app
-
 # Create non-root user for security
 RUN addgroup --system --gid 1001 nodejs && \
     adduser --system --uid 1001 nextjs
 
-# Expose the default Next.js port
+# Set correct permissions
+RUN chown -R nextjs:nodejs /app
+
+USER nextjs
+
 EXPOSE 3000
+
+CMD ["node", "server.js"]

packages/infra/docker/docker-compose.template.yml

@@ -53,7 +53,7 @@ services:
       - "traefik.http.services.${PROJECT_NAME}-gatekeeper.loadbalancer.server.port=3000"
 
   directus:
-    image: registry.infra.mintel.me/mintel/directus:latest
+    image: registry.infra.mintel.me/mintel/directus:${IMAGE_TAG:-latest}
     restart: always
     networks:
       - infra

packages/infra/gitea/deploy-action.yml

@@ -275,6 +275,10 @@ jobs:
             docker system prune -f --filter "until=24h"
           EOF
 
+      - name: 🧹 Post-Deploy Cleanup (Runner)
+        if: always()
+        run: docker builder prune -f --filter "until=1h"
+
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 5: Notifications
   # ──────────────────────────────────────────────────────────────────────────────

packages/infra/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintel/infra",
-  "version": "1.0.1",
+  "version": "1.7.12",
   "publishConfig": {
     "access": "public",
     "registry": "https://npm.infra.mintel.me"

packages/infra/scripts/prune-registry.sh

@@ -2,7 +2,7 @@
 set -e
 
 # Configuration
-REGISTRY_DATA="/opt/infra/registry/data/docker/registry/v2"
+REGISTRY_DATA="/mnt/HC_Volume_104575103/registry-data/docker/registry/v2"
 KEEP_TAGS=3
 
 echo "🏥 Starting Aggressive Registry & Docker Maintenance..."
@@ -15,31 +15,26 @@ for repo_dir in "$REGISTRY_DATA/repositories/mintel/"*; do
     if [ -d "$tags_dir" ]; then
         echo "🔍 Processing repository: mintel/$repo_name"
         
-        # Prune main-* tags
-        echo "  📦 Pruning main tags..."
-        main_tags=$(ls -dt "$tags_dir"/main-* 2>/dev/null || true)
-        count=0
-        for tag_path in $main_tags; do
-            ((++count))
-            if [ $count -gt $KEEP_TAGS ]; then
-                echo "    🗑️ Deleting old main tag: $(basename "$tag_path")"
-                rm -rf "$tag_path"
-            fi
+        # Prune various tag patterns
+        PATTERNS=("main-*" "testing-*" "branch-*" "v*" "rc*" "[0-9a-f]*")
+        
+        for pattern in "${PATTERNS[@]}"; do
+            echo "  📦 Pruning $pattern tags..."
+            tags=$(ls -dt "$tags_dir"/${pattern} 2>/dev/null || true)
+            count=0
+            for tag_path in $tags; do
+                tag_name=$(basename "$tag_path")
+                if [[ "$tag_name" == "latest" ]]; then continue; fi
+                
+                ((++count))
+                if [ $count -gt $KEEP_TAGS ]; then
+                    echo "    🗑️ Deleting old tag: $tag_name"
+                    rm -rf "$tag_path"
+                fi
+            done
         done
 
-        # Prune version tags (v* and rc*)
-        echo "  🏷️ Pruning version tags..."
-        version_tags=$(ls -dt "$tags_dir"/v1* 2>/dev/null || true)
-        count=0
-        for tag_path in $version_tags; do
-            ((++count))
-            if [ $count -gt $KEEP_TAGS ]; then
-                echo "    🗑️ Deleting old version tag: $(basename "$tag_path")"
-                rm -rf "$tag_path"
-            fi
-        done
-
-        # Always prune buildcache (as it rebuilds quickly)
+        # Always prune buildcache
         if [ -d "$tags_dir/buildcache" ]; then
             echo "  🧹 Deleting buildcache tag"
             rm -rf "$tags_dir/buildcache"
@@ -48,8 +43,15 @@ for repo_dir in "$REGISTRY_DATA/repositories/mintel/"*; do
 done
 
 # 2. Run Garbage Collection
-echo "♻️ Running Registry Garbage Collection..."
-docker exec registry-registry-1 bin/registry garbage-collect /etc/docker/registry/config.yml
+echo "♻️ Detecting Registry Container..."
+REGISTRY_CONTAINER=$(docker ps --format "{{.Names}}" | grep registry | head -1 || true)
+
+if [ -n "$REGISTRY_CONTAINER" ]; then
+    echo "♻️ Running Registry Garbage Collection on $REGISTRY_CONTAINER..."
+    docker exec "$REGISTRY_CONTAINER" bin/registry garbage-collect /etc/docker/registry/config.yml --delete-untagged
+else
+    echo "⚠️ Registry container not found. Skipping GC."
+fi
 
 # 3. Prune Host Docker resources (Shorter window: 24h)
 echo "🧹 Pruning Host Docker resources..."

packages/infra/scripts/wait-for-upstream.sh

@@ -0,0 +1,93 @@
+#!/bin/bash
+set -e
+
+# wait-for-upstream.sh
+# Usage: ./wait-for-upstream.sh <org/repo> <version_tag> [poll_interval_sec]
+
+REPO=$1
+TAG=$2
+INTERVAL=${3:-30}
+MAX_RETRIES=40 # ~20 minutes default
+
+if [[ -z "$REPO" || -z "$TAG" ]]; then
+  echo "❌ Error: REPO and TAG are required."
+  echo "Usage: $0 <org/repo> <version_tag>"
+  exit 1
+fi
+
+if [[ -z "$GITEA_TOKEN" ]]; then
+  echo "❌ Error: GITEA_TOKEN is not set."
+  exit 1
+fi
+
+GITEA_API="https://git.infra.mintel.me/api/v1"
+
+echo "🔎 Searching for upstream release $TAG in $REPO..."
+
+# 1. Get the SHA of the tag to be more precise
+TAG_INFO=$(curl -s -H "Authorization: token $GITEA_TOKEN" "$GITEA_API/repos/$REPO/tags/$TAG")
+TARGET_SHA=$(echo "$TAG_INFO" | jq -r '.commit.sha // empty')
+
+if [[ -z "$TARGET_SHA" || "$TARGET_SHA" == "null" ]]; then
+  echo "⚠️ Warning: Tag $TAG not found yet. Upstream might be lagging."
+  echo "   Waiting 15s for tag to appear..."
+  sleep 15
+  TAG_INFO=$(curl -s -H "Authorization: token $GITEA_TOKEN" "$GITEA_API/repos/$REPO/tags/$TAG")
+  TARGET_SHA=$(echo "$TAG_INFO" | jq -r '.commit.sha // empty')
+  
+  if [[ -z "$TARGET_SHA" || "$TARGET_SHA" == "null" ]]; then
+    echo "❌ Error: Tag $TAG does not exist in $REPO."
+    exit 1
+  fi
+fi
+
+echo "✅ Target SHA for $TAG is $TARGET_SHA"
+
+# 2. Find the run for the specific SHA
+# We list recent runs and filter by head_sha
+RUN_QUERY=$(curl -s -H "Authorization: token $GITEA_TOKEN" "$GITEA_API/repos/$REPO/actions/runs?limit=30")
+RUN_ID=$(echo "$RUN_QUERY" | jq -r ".workflow_runs[] | select(.head_sha == \"$TARGET_SHA\") | .id" | head -n 1)
+
+if [[ -z "$RUN_ID" || "$RUN_ID" == "null" ]]; then
+  echo "ℹ️ No recent action run found for SHA $TARGET_SHA yet."
+  echo "   Checking if we should wait or if it was already successful..."
+  
+  # Fallback: wait a bit more for new tags
+  echo "⏳ waiting for run to appear..."
+  sleep 20
+  RUN_QUERY=$(curl -s -H "Authorization: token $GITEA_TOKEN" "$GITEA_API/repos/$REPO/actions/runs?limit=30")
+  RUN_ID=$(echo "$RUN_QUERY" | jq -r ".workflow_runs[] | select(.head_sha == \"$TARGET_SHA\") | .id" | head -n 1)
+  
+  if [[ -z "$RUN_ID" || "$RUN_ID" == "null" ]]; then
+     echo "✅ No run found but Tag exists. Assuming manual release or already completed. Proceeding."
+     exit 0
+  fi
+fi
+
+echo "⏳ Waiting for upstream run $RUN_ID status..."
+
+RETRY_COUNT=0
+while [ $RETRY_COUNT -lt $MAX_RETRIES ]; do
+  STATUS_QUERY=$(curl -s -H "Authorization: token $GITEA_TOKEN" "$GITEA_API/repos/$REPO/actions/runs/$RUN_ID")
+  STATUS=$(echo "$STATUS_QUERY" | jq -r '.status')
+  CONCLUSION=$(echo "$STATUS_QUERY" | jq -r '.conclusion')
+
+  echo "   - Current Status: $STATUS (Conclusion: $CONCLUSION)"
+
+  if [[ "$STATUS" == "success" || "$CONCLUSION" == "success" ]]; then
+    echo "✅ Upstream release $TAG is READY."
+    exit 0
+  fi
+
+  if [[ "$STATUS" == "failure" || "$CONCLUSION" == "failure" || "$CONCLUSION" == "cancelled" ]]; then
+    echo "❌ Error: Upstream release $TAG FAILED or was CANCELLED."
+    exit 1
+  fi
+
+  echo "   - Still working... waiting $INTERVAL seconds (Attempt $((RETRY_COUNT+1))/$MAX_RETRIES)"
+  sleep $INTERVAL
+  RETRY_COUNT=$((RETRY_COUNT+1))
+done
+
+echo "❌ Error: Timeout waiting for upstream release $TAG."
+exit 1

packages/mail/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @mintel/mail
+
+## 1.7.0
+
+### Minor Changes
+
+- 96ec2c7: Initial release of the branded email system package.

packages/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintel/mail",
-  "version": "1.2.0",
+  "version": "1.7.12",
   "private": false,
   "publishConfig": {
     "access": "public",
@@ -38,6 +38,7 @@
     "@mintel/tsconfig": "workspace:*",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "prettier": "^3.8.1",
     "tsup": "^8.3.5",
     "typescript": "^5.0.0",
     "vitest": "^3.0.4"

packages/mail/src/index.ts

@@ -22,3 +22,6 @@ export * from "./layouts/ClientLayout";
 // Export Templates
 export * from "./templates/ContactFormNotification";
 export * from "./templates/ConfirmationMessage";
+export * from "./templates/FollowUpTemplate";
+export * from "./templates/ProjectEstimateTemplate";
+export * from "./templates/SiteAuditTemplate";

packages/mail/src/layouts/BaseLayout.tsx

@@ -14,11 +14,7 @@ export interface BaseLayoutProps {
   brandColor?: string;
 }
 
-export const BaseLayout = ({
-  preview,
-  children,
-  brandColor = "#82ed20",
-}: BaseLayoutProps) => {
+export const BaseLayout = ({ preview, children }: BaseLayoutProps) => {
   return (
     <Html>
       <Head />

packages/mail/src/layouts/MintelLayout.tsx

@@ -10,7 +10,7 @@ export interface MintelLayoutProps {
 
 export const MintelLayout = ({ preview, children }: MintelLayoutProps) => {
   return (
-    <BaseLayout preview={preview} brandColor="#82ed20">
+    <BaseLayout preview={preview}>
       <Section style={header}>
         <MintelLogo />
       </Section>

packages/mail/src/templates/FollowUpTemplate.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { Heading, Text, Button } from "@react-email/components";
+import { MintelLayout } from "../layouts/MintelLayout";
+
+export interface FollowUpTemplateProps {
+    companyName: string;
+}
+
+export const FollowUpTemplate = ({
+    companyName,
+}: FollowUpTemplateProps) => {
+    const preview = `Kurzes Follow-up: ${companyName}`;
+
+    return (
+        <MintelLayout preview={preview}>
+            <Heading style={h1}>Kurzes Follow-up</Heading>
+            <Text style={intro}>
+                Hallo noch einmal,<br /><br />
+                ich wollte mich nur kurz erkundigen, ob Sie bereits Zeit hatten,
+                einen Blick auf das Audit Ihrer Website zu werfen, das ich Ihnen
+                vor ein paar Tagen gesendet habe.
+            </Text>
+
+            <Text style={bodyText}>
+                Vielleicht passt es ja diese Woche für ein kurzes, unverbindliches
+                Telefonat, um die Punkte gemeinsam durchzugehen?
+            </Text>
+
+            <Button
+                style={button}
+                href="https://calendly.com/mintel-me/intro"
+            >
+                Treffen vereinbaren
+            </Button>
+
+            <Text style={footerText}>
+                Beste Grüße,<br />
+                <strong>Marc Mintel</strong>
+            </Text>
+        </MintelLayout>
+    );
+};
+
+export default FollowUpTemplate;
+
+const h1 = {
+    fontSize: "28px",
+    fontWeight: "900",
+    margin: "0 0 24px",
+    color: "#ffffff",
+    letterSpacing: "-0.04em",
+};
+
+const intro = {
+    fontSize: "16px",
+    lineHeight: "24px",
+    color: "#cccccc",
+    margin: "0 0 24px",
+};
+
+const bodyText = {
+    fontSize: "16px",
+    lineHeight: "24px",
+    color: "#888888",
+    margin: "0 0 32px",
+};
+
+const button = {
+    backgroundColor: "#333333",
+    borderRadius: "0",
+    color: "#ffffff",
+    fontSize: "13px",
+    fontWeight: "bold",
+    textDecoration: "none",
+    textAlign: "center" as const,
+    display: "inline-block",
+    padding: "12px 24px",
+    textTransform: "uppercase" as const,
+    letterSpacing: "0.1em",
+    border: "1px solid #444444",
+};
+
+const footerText = {
+    fontSize: "14px",
+    color: "#666666",
+    lineHeight: "20px",
+    marginTop: "48px",
+};

packages/mail/src/templates/ProjectEstimateTemplate.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { Heading, Text, Section } from "@react-email/components";
+import { MintelLayout } from "../layouts/MintelLayout";
+
+export interface ProjectEstimateTemplateProps {
+    companyName: string;
+}
+
+export const ProjectEstimateTemplate = ({
+    companyName,
+}: ProjectEstimateTemplateProps) => {
+    const preview = `Ihre personalisierte Projekt-Schätzung: ${companyName}`;
+
+    return (
+        <MintelLayout preview={preview}>
+            <Heading style={h1}>Ihre Projekt-Schätzung</Heading>
+            <Text style={intro}>
+                Hallo {companyName},<br /><br />
+                vielen Dank für unser Gespräch. Wie versprochen sende ich Ihnen hiermit
+                die detaillierte Schätzung für Ihre neue digitale Webpräsenz.
+            </Text>
+
+            <Section style={infoBox}>
+                <Text style={infoText}>
+                    Im Anhang finden Sie das PDF-Dokument mit allen Positionen,
+                    Umfängen und dem strategischen Ausblick.
+                </Text>
+            </Section>
+
+            <Text style={bodyText}>
+                Ich freue mich auf Ihr Feedback und stehe für Rückfragen jederzeit
+                zur Verfügung.
+            </Text>
+
+            <Text style={footerText}>
+                Beste Grüße,<br />
+                <strong>Marc Mintel</strong>
+            </Text>
+        </MintelLayout>
+    );
+};
+
+export default ProjectEstimateTemplate;
+
+const h1 = {
+    fontSize: "28px",
+    fontWeight: "900",
+    margin: "0 0 24px",
+    color: "#ffffff",
+    letterSpacing: "-0.04em",
+};
+
+const intro = {
+    fontSize: "16px",
+    lineHeight: "24px",
+    color: "#cccccc",
+    margin: "0 0 24px",
+};
+
+const infoBox = {
+    backgroundColor: "#0f172a",
+    padding: "24px",
+    borderLeft: "4px solid #ffffff",
+    marginBottom: "32px",
+};
+
+const infoText = {
+    fontSize: "15px",
+    color: "#ffffff",
+    margin: "0",
+    lineHeight: "1.5",
+};
+
+const bodyText = {
+    fontSize: "16px",
+    lineHeight: "24px",
+    color: "#888888",
+    margin: "0 0 32px",
+};
+
+const footerText = {
+    fontSize: "14px",
+    color: "#666666",
+    lineHeight: "20px",
+    marginTop: "48px",
+};

packages/mail/src/templates/SiteAuditTemplate.tsx

@@ -0,0 +1,146 @@
+import * as React from "react";
+import { Heading, Section, Text, Button, Link } from "@react-email/components";
+import { MintelLayout } from "../layouts/MintelLayout";
+
+export interface SiteAuditTemplateProps {
+    companyName: string;
+    auditHighlights: string[];
+    websiteUrl: string;
+}
+
+export const SiteAuditTemplate = ({
+    companyName,
+    auditHighlights,
+    websiteUrl,
+}: SiteAuditTemplateProps) => {
+    const preview = `Analyse Ihrer Webpräsenz: ${companyName}`;
+
+    return (
+        <MintelLayout preview={preview}>
+            <Heading style={h1}>Analyse Ihrer Webpräsenz</Heading>
+            <Text style={intro}>
+                Hallo {companyName},<br /><br />
+                ich habe mir Ihre aktuelle Website ({websiteUrl}) im Detail angeschaut und
+                einige technische sowie strategische Potenziale identifiziert.
+            </Text>
+
+            <Section style={auditContainer}>
+                <Heading as="h2" style={h2}>Audit Highlights</Heading>
+                {auditHighlights.map((highlight, i) => (
+                    <div key={i} style={highlightRow}>
+                        <div style={bullet} />
+                        <Text style={highlightText}>{highlight}</Text>
+                    </div>
+                ))}
+            </Section>
+
+            <Text style={bodyText}>
+                In der heutigen digitalen Landschaft ist eine performante und strategisch
+                ausgerichtete Website kein Luxus mehr, sondern das Fundament für
+                nachhaltiges Wachstum.
+            </Text>
+
+            <Section style={ctaSection}>
+                <Button
+                    style={button}
+                    href={`mailto:marc@mintel.me?subject=Feedback zum Audit: ${companyName}`}
+                >
+                    Audit gemeinsam besprechen
+                </Button>
+            </Section>
+
+            <Text style={footerText}>
+                Beste Grüße,<br />
+                <strong>Marc Mintel</strong><br />
+                Digitaler Architekt
+            </Text>
+        </MintelLayout>
+    );
+};
+
+export default SiteAuditTemplate;
+
+const h1 = {
+    fontSize: "28px",
+    fontWeight: "900",
+    margin: "0 0 24px",
+    color: "#ffffff",
+    letterSpacing: "-0.04em",
+};
+
+const h2 = {
+    fontSize: "14px",
+    fontWeight: "900",
+    textTransform: "uppercase" as const,
+    color: "#444444",
+    margin: "0 0 16px",
+    letterSpacing: "0.1em",
+};
+
+const intro = {
+    fontSize: "16px",
+    lineHeight: "24px",
+    color: "#cccccc",
+    margin: "0 0 32px",
+};
+
+const auditContainer = {
+    backgroundColor: "#151515",
+    padding: "32px",
+    borderRadius: "8px",
+    marginBottom: "32px",
+    border: "1px solid #222222",
+};
+
+const highlightRow = {
+    display: "flex" as const,
+    alignItems: "flex-start" as const,
+    marginBottom: "12px",
+};
+
+const bullet = {
+    width: "6px",
+    height: "6px",
+    backgroundColor: "#4CAF50",
+    marginTop: "8px",
+    marginRight: "12px",
+    flexShrink: 0,
+};
+
+const highlightText = {
+    fontSize: "15px",
+    color: "#ffffff",
+    margin: "0",
+};
+
+const bodyText = {
+    fontSize: "16px",
+    lineHeight: "24px",
+    color: "#888888",
+    margin: "0 0 32px",
+};
+
+const ctaSection = {
+    textAlign: "center" as const,
+    marginBottom: "48px",
+};
+
+const button = {
+    backgroundColor: "#ffffff",
+    borderRadius: "0",
+    color: "#000000",
+    fontSize: "14px",
+    fontWeight: "bold",
+    textDecoration: "none",
+    textAlign: "center" as const,
+    display: "inline-block",
+    padding: "16px 32px",
+    textTransform: "uppercase" as const,
+    letterSpacing: "0.1em",
+};
+
+const footerText = {
+    fontSize: "14px",
+    color: "#666666",
+    lineHeight: "20px",
+};

packages/mail/vitest.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vitest/config";
+import path from "path";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    alias: {
+      "prettier/plugins/html": path.resolve(
+        process.cwd(),
+        "../../node_modules/prettier/plugins/html.js",
+      ),
+      "prettier/parser-html": path.resolve(
+        process.cwd(),
+        "../../node_modules/prettier/plugins/html.js",
+      ),
+    },
+    server: {
+      deps: {
+        inline: [/@react-email/],
+      },
+    },
+  },
+});

packages/next-config/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @mintel/next-config
 
+## 1.6.1
+
+### Patch Changes
+
+- Add `turbopack: {}` to support Next.js 16 default Turbopack behavior when a webpack config is present.
+
+## 1.6.1
+
+### Patch Changes
+
+- Add `turbopack: {}` to support Next.js 16 default Turbopack behavior when a webpack config is present.
+
 ## 1.0.1
 
 ### Patch Changes

packages/next-config/index.js

@@ -1,3 +1,4 @@
+/* global process, URL */
 import createNextIntlPlugin from "next-intl/plugin";
 import { withSentryConfig } from "@sentry/nextjs";
 import fs from "node:fs";
@@ -6,6 +7,7 @@ import path from "node:path";
 /** @type {import('next').NextConfig} */
 export const baseNextConfig = {
   output: "standalone",
+  turbopack: {},
   images: {
     dangerouslyAllowSVG: true,
     contentDispositionType: "attachment",

packages/next-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintel/next-config",
-  "version": "1.0.1",
+  "version": "1.7.12",
   "publishConfig": {
     "access": "public",
     "registry": "https://npm.infra.mintel.me"
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "next-intl": "^4.8.2",
-    "@sentry/nextjs": "^8.0.0"
+    "@sentry/nextjs": "^10.38.0",
+    "next": "16.1.6"
   }
 }

packages/next-feedback/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@mintel/next-feedback",
+  "version": "1.7.12",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://npm.infra.mintel.me"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./FeedbackOverlay": {
+      "types": "./dist/components/FeedbackOverlay.d.ts",
+      "import": "./dist/components/FeedbackOverlay.mjs",
+      "require": "./dist/components/FeedbackOverlay.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/"
+  },
+  "dependencies": {
+    "@directus/sdk": "^21.0.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.5.4",
+    "html2canvas": "^1.4.1",
+    "lucide-react": "^0.441.0",
+    "next": "16.1.6",
+    "tailwind-merge": "^2.5.2"
+  },
+  "devDependencies": {
+    "@mintel/eslint-config": "workspace:*",
+    "@mintel/tsconfig": "workspace:*",
+    "@types/node": "^20.17.16",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

packages/next-feedback/src/components/FeedbackOverlay.tsx

@@ -0,0 +1,621 @@
+"use client";
+
+import React, { useState, useEffect, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { MessageSquare, X, Check, Plus, List, Send, User } from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import html2canvas from "html2canvas";
+
+function cn(...inputs: any[]) {
+  return twMerge(clsx(inputs));
+}
+
+interface FeedbackComment {
+  id: string;
+  userName: string;
+  text: string;
+  createdAt: string;
+}
+
+interface Feedback {
+  id: string;
+  x: number;
+  y: number;
+  selector: string;
+  text: string;
+  type: "design" | "content";
+  elementRect: DOMRect | null;
+  userName: string;
+  comments: FeedbackComment[];
+}
+
+export function FeedbackOverlay() {
+  const [isActive, setIsActive] = useState(false);
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
+    null,
+  );
+  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
+    null,
+  );
+  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
+  const [currentComment, setCurrentComment] = useState("");
+  const [currentType, setCurrentType] = useState<"design" | "content">(
+    "design",
+  );
+  const [showList, setShowList] = useState(false);
+  const [currentUser, setCurrentUser] = useState<{
+    identity: string;
+    isDevFallback?: boolean;
+  } | null>(null);
+  const [newCommentTexts, setNewCommentTexts] = useState<{
+    [feedbackId: string]: string;
+  }>({});
+  const [isCapturing, setIsCapturing] = useState(false);
+
+  // 1. Fetch Identity and Existing Feedback
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const urlParams = new URLSearchParams(window.location.search);
+        const bypass = urlParams.get("gatekeeper_bypass");
+        const apiUrl = bypass
+          ? `/api/whoami?gatekeeper_bypass=${bypass}`
+          : "/api/whoami";
+
+        const res = await fetch(apiUrl);
+        if (res.ok) {
+          const data = await res.json();
+          setCurrentUser(data);
+        } else {
+          setCurrentUser({ identity: "Guest" });
+        }
+      } catch (_e) {
+        setCurrentUser({ identity: "Guest" });
+      }
+    };
+
+    const fetchFeedback = async () => {
+      try {
+        const res = await fetch("/api/feedback");
+        if (res.ok) {
+          const data = await res.json();
+          const mapped = data.map((fb: any) => ({
+            id: fb.id,
+            x: fb.x,
+            y: fb.y,
+            selector: fb.selector,
+            text: fb.text,
+            type: fb.type,
+            userName: fb.user_name,
+            comments: (fb.comments || []).map((c: any) => ({
+              id: c.id,
+              userName: c.user_name,
+              text: c.text,
+              createdAt: c.date_created,
+            })),
+          }));
+          setFeedbacks(mapped);
+        }
+      } catch (e) {
+        console.error("Failed to fetch feedbacks", e);
+      }
+    };
+
+    checkAuth();
+    fetchFeedback();
+  }, []);
+
+  const getSelector = (el: HTMLElement): string => {
+    if (el.id) return `#${el.id}`;
+    const path = [];
+    let curr: HTMLElement | null = el;
+    while (curr && curr.parentElement) {
+      const index = Array.from(curr.parentElement.children).indexOf(curr) + 1;
+      path.unshift(`${curr.tagName.toLowerCase()}:nth-child(${index})`);
+      curr = curr.parentElement;
+    }
+    return path.join(" > ");
+  };
+
+  useEffect(() => {
+    if (!isActive) {
+      setHoveredElement(null);
+      return;
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (selectedElement) return;
+
+      const target = e.target as HTMLElement;
+      if (target.closest(".feedback-ui-ignore")) {
+        setHoveredElement(null);
+        return;
+      }
+      setHoveredElement(target);
+    };
+
+    const handleClick = (e: MouseEvent) => {
+      if (selectedElement) return;
+
+      const target = e.target as HTMLElement;
+      if (target.closest(".feedback-ui-ignore")) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      setSelectedElement(target);
+      setHoveredElement(null);
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("click", handleClick, true);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("click", handleClick, true);
+    };
+  }, [isActive, selectedElement]);
+
+  const captureScreenshot = async (): Promise<string | null> => {
+    try {
+      setIsCapturing(true);
+      const canvas = await html2canvas(document.body, {
+        useCORS: true,
+        scale: 1,
+        ignoreElements: (el) => el.classList.contains("feedback-ui-ignore"),
+      });
+      return canvas.toDataURL("image/png");
+    } catch (e) {
+      console.error("Screenshot failed", e);
+      return null;
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+
+  const saveFeedback = async () => {
+    if (!selectedElement || !currentComment) return;
+
+    const rect = selectedElement.getBoundingClientRect();
+    const screenshot = await captureScreenshot();
+
+    const feedbackData = {
+      url: window.location.href,
+      x: rect.left + rect.width / 2 + window.scrollX,
+      y: rect.top + rect.height / 2 + window.scrollY,
+      selector: getSelector(selectedElement),
+      text: currentComment,
+      type: currentType,
+      userName: currentUser?.identity || "Unknown",
+      userIdentity: currentUser?.identity === "Admin" ? "admin" : "user",
+      screenshot_base64: screenshot,
+    };
+
+    try {
+      const res = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(feedbackData),
+      });
+
+      if (res.ok) {
+        const savedFb = await res.json();
+        const newFeedback: Feedback = {
+          id: savedFb.id,
+          x: savedFb.x,
+          y: savedFb.y,
+          selector: savedFb.selector,
+          text: savedFb.text,
+          type: savedFb.type,
+          elementRect: rect,
+          userName: savedFb.user_name,
+          comments: [],
+        };
+        setFeedbacks([...feedbacks, newFeedback]);
+        setSelectedElement(null);
+        setCurrentComment("");
+      }
+    } catch (e) {
+      console.error("Failed to save feedback", e);
+    }
+  };
+
+  const addReply = async (feedbackId: string) => {
+    const text = newCommentTexts[feedbackId];
+    if (!text) return;
+
+    if (!currentUser?.identity || currentUser.identity === "Guest") {
+      alert("Nur angemeldete Benutzer können antworten.");
+      return;
+    }
+
+    try {
+      const res = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "reply",
+          feedbackId,
+          userName: currentUser?.identity || "Unknown",
+          text,
+        }),
+      });
+
+      if (res.ok) {
+        const savedReply = await res.json();
+        setFeedbacks(
+          feedbacks.map((f) => {
+            if (f.id === feedbackId) {
+              return {
+                ...f,
+                comments: [
+                  ...f.comments,
+                  {
+                    id: savedReply.id,
+                    userName: savedReply.user_name,
+                    text: savedReply.text,
+                    createdAt: savedReply.date_created,
+                  },
+                ],
+              };
+            }
+            return f;
+          }),
+        );
+        setNewCommentTexts({ ...newCommentTexts, [feedbackId]: "" });
+      }
+    } catch (e) {
+      console.error("Failed to save reply", e);
+    }
+  };
+
+  const hoveredRect = useMemo(
+    () => hoveredElement?.getBoundingClientRect(),
+    [hoveredElement],
+  );
+  const selectedRect = useMemo(
+    () => selectedElement?.getBoundingClientRect(),
+    [selectedElement],
+  );
+
+  return (
+    <div className="feedback-ui-ignore">
+      {/* 1. Global Toolbar */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[9999]">
+        <div className="bg-black/80 backdrop-blur-xl border border-white/10 p-2 rounded-2xl shadow-2xl flex items-center gap-2">
+          <div
+            className={cn(
+              "flex items-center gap-2 px-3 py-2 rounded-xl transition-all",
+              currentUser?.isDevFallback
+                ? "bg-orange-500/20 text-orange-400"
+                : "bg-white/5 text-white/40",
+            )}
+          >
+            <User size={14} />
+            <span className="text-[10px] font-bold uppercase tracking-wider">
+              {currentUser?.identity || "Loading..."}
+              {currentUser?.isDevFallback && " (Local Dev Bypass)"}
+            </span>
+          </div>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          <button
+            onClick={() => {
+              if (!currentUser?.identity || currentUser.identity === "Guest") {
+                alert("Bitte logge dich ein, um Feedback zu geben.");
+                return;
+              }
+              setIsActive(!isActive);
+            }}
+            disabled={
+              !currentUser?.identity || currentUser.identity === "Guest"
+            }
+            className={cn(
+              "flex items-center gap-2 px-4 py-2 rounded-xl transition-all font-medium disabled:opacity-30 disabled:cursor-not-allowed",
+              isActive
+                ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
+                : "text-white/70 hover:text-white hover:bg-white/10",
+            )}
+          >
+            {isActive ? <X size={18} /> : <MessageSquare size={18} />}
+            {isActive ? "Modus beenden" : "Feedback geben"}
+          </button>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          <button
+            onClick={() => setShowList(!showList)}
+            className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-xl relative"
+          >
+            <List size={20} />
+            {feedbacks.length > 0 && (
+              <span className="absolute -top-1 -right-1 w-5 h-5 bg-blue-500 text-[10px] flex items-center justify-center rounded-full text-white font-bold border-2 border-[#1a1a1a]">
+                {feedbacks.length}
+              </span>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* 2. Feedback Markers & Highlights */}
+      <AnimatePresence>
+        {isActive && (
+          <>
+            {/* Fixed Overlay for real-time highlights */}
+            <div className="fixed inset-0 pointer-events-none z-[9998]">
+              {hoveredRect && (
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="absolute border-2 border-blue-400 bg-blue-400/10 rounded-sm transition-all duration-200"
+                  style={{
+                    top: hoveredRect.top,
+                    left: hoveredRect.left,
+                    width: hoveredRect.width,
+                    height: hoveredRect.height,
+                  }}
+                />
+              )}
+
+              {selectedRect && (
+                <motion.div
+                  initial={{ scale: 0.9, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  className="absolute border-2 border-yellow-400 bg-yellow-400/20 rounded-sm"
+                  style={{
+                    top: selectedRect.top,
+                    left: selectedRect.left,
+                    width: selectedRect.width,
+                    height: selectedRect.height,
+                  }}
+                />
+              )}
+            </div>
+
+            {/* Absolute Overlay for persistent pins */}
+            <div className="absolute inset-0 pointer-events-none z-[9997]">
+              {feedbacks.map((fb) => (
+                <div
+                  key={fb.id}
+                  className="absolute"
+                  style={{ top: fb.y, left: fb.x }}
+                >
+                  <button
+                    onClick={() => {
+                      setShowList(true);
+                    }}
+                    className={cn(
+                      "w-6 h-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-lg flex items-center justify-center text-white cursor-pointer pointer-events-auto transition-transform hover:scale-110",
+                      fb.type === "design" ? "bg-purple-500" : "bg-orange-500",
+                    )}
+                  >
+                    <Plus size={14} className="rotate-45" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </AnimatePresence>
+
+      {/* 3. Feedback Modal */}
+      <AnimatePresence>
+        {selectedElement && (
+          <div className="fixed inset-0 flex items-center justify-center z-[10000] bg-black/40 backdrop-blur-sm">
+            <motion.div
+              initial={{ opacity: 0, y: 20, scale: 0.95 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 20, scale: 0.95 }}
+              className="bg-[#1c1c1e] border border-white/10 rounded-3xl p-6 w-[400px] shadow-2xl"
+            >
+              <div className="flex items-center justify-between mb-6">
+                <h3 className="text-white font-bold text-lg">Feedback geben</h3>
+                <button
+                  onClick={() => setSelectedElement(null)}
+                  className="text-white/40 hover:text-white"
+                >
+                  <X size={20} />
+                </button>
+              </div>
+
+              <div className="flex gap-2 mb-6">
+                {(["design", "content"] as const).map((type) => (
+                  <button
+                    key={type}
+                    onClick={() => setCurrentType(type)}
+                    className={cn(
+                      "flex-1 py-3 px-4 rounded-xl text-sm font-medium transition-all capitalize",
+                      currentType === type
+                        ? "bg-white text-black shadow-lg"
+                        : "bg-white/5 text-white/40 hover:bg-white/10",
+                    )}
+                  >
+                    {type === "design" ? "🎨 Design" : "✍️ Content"}
+                  </button>
+                ))}
+              </div>
+
+              <textarea
+                autoFocus
+                value={currentComment}
+                onChange={(e) => setCurrentComment(e.target.value)}
+                placeholder="Was möchtest du anmerken?"
+                className="w-full h-32 bg-white/5 border border-white/5 rounded-2xl p-4 text-white placeholder:text-white/20 focus:outline-none focus:border-blue-500/50 transition-colors resize-none mb-6"
+              />
+
+              <button
+                disabled={!currentComment || isCapturing}
+                onClick={saveFeedback}
+                className="w-full bg-blue-500 hover:bg-blue-400 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-500/20"
+              >
+                {isCapturing ? (
+                  "Erfasse Screenshot..."
+                ) : (
+                  <>
+                    <Check size={20} />
+                    Feedback speichern
+                  </>
+                )}
+              </button>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* 4. Feedback List Sidebar */}
+      <AnimatePresence>
+        {showList && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setShowList(false)}
+              className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[10001]"
+            />
+            <motion.div
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ type: "spring", damping: 25, stiffness: 200 }}
+              className="fixed top-0 right-0 h-full w-[400px] bg-[#1c1c1e] border-l border-white/10 z-[10002] shadow-2xl flex flex-col"
+            >
+              <div className="p-8 border-b border-white/10 flex items-center justify-between">
+                <div>
+                  <h2 className="text-2xl font-bold text-white mb-1">
+                    Feedback
+                  </h2>
+                  <p className="text-white/40 text-sm">
+                    {feedbacks.length} Anmerkungen live
+                  </p>
+                </div>
+                <button
+                  onClick={() => setShowList(false)}
+                  className="p-2 text-white/40 hover:text-white bg-white/5 rounded-xl transition-colors"
+                >
+                  <X size={20} />
+                </button>
+              </div>
+
+              <div className="flex-1 overflow-y-auto p-6 space-y-6">
+                {feedbacks.length === 0 ? (
+                  <div className="h-full flex flex-col items-center justify-center text-center px-8 opacity-40">
+                    <MessageSquare size={48} className="mb-4" />
+                    <p>
+                      Noch kein Feedback vorhanden. Aktiviere den Modus um
+                      Stellen auf der Seite zu markieren.
+                    </p>
+                  </div>
+                ) : (
+                  feedbacks.map((fb) => (
+                    <div
+                      key={fb.id}
+                      className="bg-white/5 border border-white/5 rounded-3xl overflow-hidden hover:border-white/20 transition-all flex flex-col"
+                    >
+                      <div className="p-5 border-b border-white/5 bg-white/[0.02]">
+                        <div className="flex items-center justify-between mb-4">
+                          <div className="flex items-center gap-2">
+                            <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
+                              <User size={14} />
+                            </div>
+                            <div>
+                              <p className="text-white text-[11px] font-bold uppercase tracking-wider">
+                                {fb.userName}
+                              </p>
+                              <p className="text-white/20 text-[9px] uppercase tracking-widest">
+                                Original Poster
+                              </p>
+                            </div>
+                          </div>
+                          <span
+                            className={cn(
+                              "px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-wider",
+                              fb.type === "design"
+                                ? "bg-purple-500/20 text-purple-400"
+                                : "bg-orange-500/20 text-orange-400",
+                            )}
+                          >
+                            {fb.type}
+                          </span>
+                        </div>
+                        <p className="text-white/80 whitespace-pre-wrap text-sm leading-relaxed">
+                          {fb.text}
+                        </p>
+                        <div className="mt-3 flex items-center gap-2">
+                          <div className="w-1 h-1 bg-white/10 rounded-full" />
+                          <span className="text-white/20 text-[9px] truncate tracking-wider italic">
+                            {fb.selector}
+                          </span>
+                        </div>
+                      </div>
+
+                      {fb.comments.length > 0 && (
+                        <div className="bg-black/20 p-5 space-y-4">
+                          {fb.comments.map((comment) => (
+                            <div key={comment.id} className="flex gap-3">
+                              <div className="w-6 h-6 rounded-full bg-white/10 flex items-center justify-center text-white/40 shrink-0">
+                                <User size={10} />
+                              </div>
+                              <div className="space-y-1">
+                                <div className="flex items-center gap-2">
+                                  <p className="text-[10px] font-bold text-white/60 uppercase">
+                                    {comment.userName}
+                                  </p>
+                                  <p className="text-[10px] text-white/20">
+                                    {new Date(
+                                      comment.createdAt,
+                                    ).toLocaleTimeString([], {
+                                      hour: "2-digit",
+                                      minute: "2-digit",
+                                    })}
+                                  </p>
+                                </div>
+                                <p className="text-white/80 text-xs leading-snug">
+                                  {comment.text}
+                                </p>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+
+                      <div className="p-4 bg-white/[0.01] mt-auto border-t border-white/5">
+                        <div className="relative">
+                          <input
+                            type="text"
+                            value={newCommentTexts[fb.id] || ""}
+                            onChange={(e) =>
+                              setNewCommentTexts({
+                                ...newCommentTexts,
+                                [fb.id]: e.target.value,
+                              })
+                            }
+                            placeholder="Antworten..."
+                            className="w-full bg-black/40 border border-white/5 rounded-2xl py-3 pl-4 pr-12 text-xs text-white placeholder:text-white/20 focus:outline-none focus:border-blue-500/50 transition-colors"
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") addReply(fb.id);
+                            }}
+                          />
+                          <button
+                            onClick={() => addReply(fb.id)}
+                            className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-blue-500 hover:text-blue-400 transition-colors disabled:opacity-30"
+                            disabled={!newCommentTexts[fb.id]}
+                          >
+                            <Send size={14} />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

packages/next-feedback/src/handlers/index.ts

@@ -0,0 +1,131 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  createDirectus,
+  rest,
+  staticToken,
+  createItem,
+  readItems,
+} from "@directus/sdk";
+
+export interface CMSConfig {
+  url: string;
+  token: string;
+}
+
+export function createCMSClient(config: CMSConfig) {
+  return createDirectus(config.url)
+    .with(staticToken(config.token))
+    .with(rest());
+}
+
+export async function handleFeedbackRequest(
+  req: NextRequest,
+  config: CMSConfig,
+) {
+  const client = createCMSClient(config);
+
+  if (req.method === "GET") {
+    try {
+      const items = await client.request(
+        readItems("visual_feedback", {
+          fields: ["*", { comments: ["*"] }],
+          sort: ["-date_created"],
+        }),
+      );
+      return NextResponse.json(items);
+    } catch (error: any) {
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+  }
+
+  if (req.method === "POST") {
+    try {
+      const body = await req.json();
+      const { action, screenshot_base64, ...data } = body;
+
+      if (action === "reply") {
+        const reply = await client.request(
+          createItem("visual_feedback_comments", {
+            feedback_id: data.feedbackId,
+            user_name: data.userName,
+            text: data.text,
+          }),
+        );
+        return NextResponse.json(reply);
+      }
+
+      let screenshotId = null;
+
+      if (screenshot_base64) {
+        try {
+          const base64Data = screenshot_base64.split(";base64,").pop();
+          const buffer = Buffer.from(base64Data, "base64");
+          const formData = new FormData();
+          const blob = new Blob([buffer], { type: "image/png" });
+          formData.append("file", blob, `feedback-${Date.now()}.png`);
+
+          const fileRes = await fetch(`${config.url}/files`, {
+            method: "POST",
+            headers: { Authorization: `Bearer ${config.token}` },
+            body: formData,
+          });
+
+          if (fileRes.ok) {
+            const fileData = await fileRes.json();
+            screenshotId = fileData.data.id;
+          }
+        } catch (e) {
+          console.error("Failed to upload screenshot:", e);
+        }
+      }
+
+      const feedback = await client.request(
+        createItem("visual_feedback", {
+          project: data.project || req.headers.get("host") || "unknown",
+          url: data.url,
+          selector: data.selector,
+          x: data.x,
+          y: data.y,
+          type: data.type,
+          text: data.text,
+          user_name: data.userName,
+          user_identity: data.userIdentity,
+          status: "open",
+          screenshot: screenshotId,
+          company: data.companyId,
+        }),
+      );
+
+      return NextResponse.json(feedback);
+    } catch (error: any) {
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+  }
+
+  return NextResponse.json({ error: "Method not allowed" }, { status: 405 });
+}
+
+export async function handleWhoAmIRequest(
+  req: NextRequest,
+  gatekeeperUrl: string,
+) {
+  try {
+    const bypass = req.nextUrl.searchParams.get("gatekeeper_bypass");
+    const targetUrl = bypass
+      ? `${gatekeeperUrl}/api/whoami?gatekeeper_bypass=${bypass}`
+      : `${gatekeeperUrl}/api/whoami`;
+
+    // Forward cookies
+    const cookieHeader = req.headers.get("cookie") || "";
+    const res = await fetch(targetUrl, {
+      headers: { Cookie: cookieHeader },
+    });
+
+    if (res.ok) {
+      return NextResponse.json(await res.json());
+    }
+    return NextResponse.json({ identity: "Guest" });
+  } catch (_e) {
+    return NextResponse.json({ identity: "Guest" });
+  }
+}

packages/next-feedback/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./handlers";
+export * from "./components/FeedbackOverlay";

packages/next-feedback/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@mintel/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

packages/next-feedback/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts", "src/components/FeedbackOverlay.tsx"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  banner: {
+    js: "'use client';",
+  },
+});

packages/next-observability/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintel/next-observability",
-  "version": "1.0.0",
+  "version": "1.7.12",
   "publishConfig": {
     "access": "public",
     "registry": "https://npm.infra.mintel.me"
@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "@mintel/observability": "workspace:*",
-    "@sentry/nextjs": "^8.55.0",
-    "next": "15.1.6"
+    "@sentry/nextjs": "^10.38.0",
+    "next": "16.1.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

packages/next-observability/src/handlers/index.ts

@@ -37,7 +37,7 @@ export function createUmamiProxyHandler(config: {
       }
 
       return NextResponse.json({ status: "ok" });
-    } catch (error) {
+    } catch (_error) {
       return NextResponse.json(
         { error: "Internal Server Error" },
         { status: 500 },
@@ -80,7 +80,7 @@ export function createSentryRelayHandler(config: { dsn?: string }) {
       }
 
       return NextResponse.json({ status: "ok" });
-    } catch (error) {
+    } catch (_error) {
       return NextResponse.json(
         { error: "Internal Server Error" },
         { status: 500 },

packages/next-utils/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@mintel/next-utils",
-  "version": "1.0.1",
+  "version": "1.7.12",
   "publishConfig": {
     "access": "public",
     "registry": "https://npm.infra.mintel.me"
   },
+  "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts",
-    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --watch --dts",
     "lint": "eslint src/",
     "test": "vitest run"
   },
   "dependencies": {
     "@directus/sdk": "^21.0.0",
-    "next": "15.1.6",
+    "next": "16.1.6",
     "next-intl": "^4.8.2",
     "zod": "^3.0.0"
   },

packages/next-utils/src/directus.ts

@@ -7,18 +7,43 @@ import {
   AuthenticationClient,
 } from "@directus/sdk";
 
-export type MintelDirectusClient = DirectusClient<any> &
-  RestClient<any> &
-  AuthenticationClient<any>;
+export type MintelDirectusClient<Schema extends object = any> =
+  DirectusClient<Schema> & RestClient<Schema> & AuthenticationClient<Schema>;
 
 /**
- * Creates a Directus client configured with Mintel standards
+ * Creates a Directus client configured with Mintel standards.
+ * Automatically handles internal vs. external URLs based on environment.
  */
-export function createMintelDirectusClient(url?: string): MintelDirectusClient {
-  const directusUrl =
-    url || process.env.DIRECTUS_URL || "http://localhost:8055";
+export function createMintelDirectusClient<Schema extends object = any>(
+  url?: string,
+): MintelDirectusClient<Schema> {
+  const isServer = typeof window === "undefined";
 
-  return createDirectus(directusUrl).with(rest()).with(authentication());
+  // 1. If an explicit URL is provided, use it.
+  if (url) {
+    return createDirectus<Schema>(url).with(rest()).with(authentication());
+  }
+
+  // 2. On server: Prioritize INTERNAL_DIRECTUS_URL, fallback to DIRECTUS_URL
+  if (isServer) {
+    const directusUrl =
+      process.env.INTERNAL_DIRECTUS_URL ||
+      process.env.DIRECTUS_URL ||
+      "http://localhost:8055";
+    return createDirectus<Schema>(directusUrl)
+      .with(rest())
+      .with(authentication());
+  }
+
+  // 3. In browser: Use a proxy path if we are on a different origin,
+  // or use the current origin if no DIRECTUS_URL is set.
+  const proxyPath = "/api/directus"; // Standard Mintel proxy path
+  const browserUrl =
+    typeof window !== "undefined"
+      ? `${window.location.origin}${proxyPath}`
+      : proxyPath;
+
+  return createDirectus<Schema>(browserUrl).with(rest()).with(authentication());
 }
 
 /**