chore: release clean base image 1.7.10

.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.example

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

.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:
@@ -130,6 +207,6 @@ jobs:
           tags: |
             registry.infra.mintel.me/mintel/${{ matrix.image }}:${{ github.ref_name }}
             registry.infra.mintel.me/mintel/${{ matrix.image }}:latest
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          cache-from: type=registry,ref=registry.infra.mintel.me/mintel/${{ matrix.image }}:buildcache
+          cache-to: type=registry,ref=registry.infra.mintel.me/mintel/${{ matrix.image }}:buildcache,mode=max
 

.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.9",
   "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/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: []

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,7 @@ 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}
     restart: always
     networks:
       - infra
@@ -46,6 +47,7 @@ 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}`)"

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.10",
+  "pnpm": {
+    "overrides": {
+      "next": "16.1.6",
+      "@sentry/nextjs": "10.38.0"
+    }
   }
 }

packages/acquisition-manager/index.js

@@ -0,0 +1 @@
+import{defineModule as e}from"@directus/extensions-sdk";import{defineComponent as t,resolveComponent as n,openBlock as a,createBlock as i,withCtx as r,createElementVNode as o}from"vue";var s=t({__name:"module",setup:e=>(e,t)=>{const s=n("private-view");return a(),i(s,{title:"Acquisition Manager"},{default:r(()=>[...t[0]||(t[0]=[o("div",{class:"acquisition-manager"},[o("h1",null,"Acquisition Manager"),o("p",null,"Modern Industrial Acquisition Management Interface")],-1)])]),_:1})}}),u=[],c=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",i=!0===t.singleTag,r="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(i){var o=u.indexOf(r);-1===o&&(o=u.push(r)-1,c[o]={}),n=c[o]&&c[o][a]?c[o][a]:c[o][a]=s()}else n=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function s(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),i=0;i<n.length;i++)e.setAttribute(n[i],t.attributes[n[i]]);var o="prepend"===a?"afterbegin":"beforeend";return r.insertAdjacentElement(o,e),e}}("\n.acquisition-manager[data-v-19f4e937] {\n\tpadding: 20px;\n}\n",{});var d=e({id:"acquisition-manager",name:"Acquisition Manager",icon:"account_balance_wallet",routes:[{path:"",component:((e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n})(s,[["__scopeId","data-v-19f4e937"],["__file","module.vue"]])}]});export{d as default};

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.9",
+  "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,14 @@
+import { defineModule } from '@directus/extensions-sdk';
+import ModuleComponent from './module.vue';
+
+export default defineModule({
+    id: 'acquisition-manager',
+    name: 'Acquisition Manager',
+    icon: 'account_balance_wallet',
+    routes: [
+        {
+            path: '',
+            component: ModuleComponent,
+        },
+    ],
+});

packages/acquisition-manager/src/module.vue

@@ -0,0 +1,18 @@
+<template>
+	<private-view title="Acquisition Manager">
+		<div class="acquisition-manager">
+			<h1>Acquisition Manager</h1>
+			<p>Modern Industrial Acquisition Management Interface</p>
+		</div>
+	</private-view>
+</template>
+
+<script setup lang="ts">
+// Logic will be added here
+</script>
+
+<style scoped>
+.acquisition-manager {
+	padding: 20px;
+}
+</style>

packages/acquisition/build.js

@@ -0,0 +1,44 @@
+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, '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,
+    format: 'esm',
+    external: [],
+    plugins: [{
+        name: 'mock-jquery',
+        setup(build) {
+            build.onResolve({ filter: /^jquery$/ }, args => ({ path: args.path, namespace: 'mock-jquery' }));
+            build.onLoad({ filter: /.*/, namespace: 'mock-jquery' }, () => ({ contents: 'export default {};', loader: 'js' }));
+        }
+    }, {
+        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' }));
+        }
+    }]
+}).then(() => {
+    console.log("Build succeeded!");
+}).catch((e) => {
+    console.error("Build failed:", e);
+    process.exit(1);
+});

packages/acquisition/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "acquisition",
+  "version": "1.7.9",
+  "type": "module",
+  "directus:extension": {
+    "type": "endpoint",
+    "path": "index.js",
+    "source": "src/index.ts",
+    "host": "^11.0.0"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "dev": "node build.js --watch"
+  },
+  "devDependencies": {
+    "@directus/extensions-sdk": "11.0.2",
+    "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,5 @@
+import { defineEndpoint } from '@directus/extensions-sdk';
+
+export default defineEndpoint((router) => {
+    router.get('/ping', (req, res) => res.send('pong'));
+});

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintel/cli",
-  "version": "1.0.1",
+  "version": "1.7.9",
   "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/index.js

@@ -0,0 +1 @@
+import{defineModule as e}from"@directus/extensions-sdk";import{defineComponent as t,resolveComponent as n,openBlock as a,createBlock as i,withCtx as r,createElementVNode as o}from"vue";var s=t({__name:"module",setup:e=>(e,t)=>{const s=n("private-view");return a(),i(s,{title:"Acquisition Manager"},{default:r(()=>[...t[0]||(t[0]=[o("div",{class:"acquisition-manager"},[o("h1",null,"Acquisition Manager"),o("p",null,"Modern Industrial Acquisition Management Interface")],-1)])]),_:1})}}),u=[],c=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",i=!0===t.singleTag,r="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(i){var o=u.indexOf(r);-1===o&&(o=u.push(r)-1,c[o]={}),n=c[o]&&c[o][a]?c[o][a]:c[o][a]=s()}else n=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function s(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),i=0;i<n.length;i++)e.setAttribute(n[i],t.attributes[n[i]]);var o="prepend"===a?"afterbegin":"beforeend";return r.insertAdjacentElement(o,e),e}}("\n.acquisition-manager[data-v-19f4e937] {\n\tpadding: 20px;\n}\n",{});var d=e({id:"acquisition-manager",name:"Acquisition Manager",icon:"account_balance_wallet",routes:[{path:"",component:((e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n})(s,[["__scopeId","data-v-19f4e937"],["__file","module.vue"]])}]});export{d as default};

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.0.0",
+  "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/acquisition/package.json

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

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.3",
+  "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.3",
+  "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/index.js

@@ -0,0 +1 @@
+import{defineModule as e}from"@directus/extensions-sdk";import{defineComponent as t,resolveComponent as n,openBlock as a,createBlock as r,withCtx as o,createElementVNode as p}from"vue";var s=t({__name:"module",setup:e=>(e,t)=>{const s=n("private-view");return a(),r(s,{title:"People Manager"},{default:o(()=>[...t[0]||(t[0]=[p("div",{class:"people-manager"},[p("h1",null,"People Manager"),p("p",null,"Modern Industrial People Management Interface")],-1)])]),_:1})}}),d=[],i=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,o="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var p=d.indexOf(o);-1===p&&(p=d.push(o)-1,i[p]={}),n=i[p]&&i[p][a]?i[p][a]:i[p][a]=s()}else n=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function s(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var p="prepend"===a?"afterbegin":"beforeend";return o.insertAdjacentElement(p,e),e}}("\n.people-manager[data-v-da2952f8] {\n\tpadding: 20px;\n}\n",{});var u=e({id:"people-manager",name:"People Manager",icon:"person",routes:[{path:"",component:((e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n})(s,[["__scopeId","data-v-da2952f8"],["__file","module.vue"]])}]});export{u as default};

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.0.0",
+    "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.9",
+  "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.9",
+  "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.9",
   "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.9",
+  "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.9",
   "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

@@ -44,7 +44,7 @@ export async function GET(req: NextRequest) {
 
       return response;
     }
-  } catch (e) {
+  } catch (_e) {
     // URL parsing failed, proceed with normal logic
   }
 
@@ -61,7 +61,7 @@ export async function GET(req: NextRequest) {
           isAuthenticated = true;
           identity = payload.identity;
         }
-      } catch (e) {
+      } catch (_e) {
         // Fallback or old format
       }
     }

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

@@ -29,6 +29,7 @@ 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 (
@@ -43,8 +44,44 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
     else if (!email && password === expectedCode) {
       userIdentity = "Guest";
     }
-    // 3. Check Directus if email is provided
-    if (email && password && process.env.DIRECTUS_URL) {
+    // 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);
+      }
+    }
+
+    // 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) {
@@ -76,6 +120,7 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
       // Store identity in the cookie (simplified for now, ideally signed)
       const sessionValue = JSON.stringify({
         identity: userIdentity,
+        company: userCompany,
         timestamp: Date.now(),
       });
 

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.9",
   "publishConfig": {
     "access": "public",
     "registry": "https://npm.infra.mintel.me"

packages/infra/docker/Dockerfile.gatekeeper

@@ -3,6 +3,7 @@ FROM node:20-alpine AS builder
 RUN apk add --no-cache libc6-compat curl
 WORKDIR /app
 RUN corepack enable pnpm
+ENV CI=true
 
 # Copy manifest files specifically for better layer caching
 COPY pnpm-lock.yaml pnpm-workspace.yaml package.json .npmrc ./
@@ -18,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 \
@@ -31,7 +31,8 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
 COPY . .
 
 # Build Gatekeeper and its dependencies
-RUN pnpm --filter @mintel/gatekeeper... build
+RUN --mount=type=cache,target=/app/packages/gatekeeper/.next/cache \
+    pnpm --filter @mintel/gatekeeper... build
 RUN mkdir -p packages/gatekeeper/public
 
 # Step 2: Runner stage

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.9",
   "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"
@@ -49,7 +44,7 @@ done
 
 # 2. Run Garbage Collection
 echo "♻️ Running Registry Garbage Collection..."
-docker exec registry-registry-1 bin/registry garbage-collect /etc/docker/registry/config.yml
+docker exec registry-registry-1 bin/registry garbage-collect /etc/docker/registry/config.yml --delete-untagged
 
 # 3. Prune Host Docker resources (Shorter window: 24h)
 echo "🧹 Pruning Host Docker resources..."

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.9",
   "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/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/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.9",
   "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.9",
+  "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.9",
   "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.9",
   "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());
 }
 
 /**

packages/next-utils/src/env.ts

@@ -4,10 +4,17 @@ export const mintelEnvSchema = {
   NODE_ENV: z
     .enum(["development", "production", "test"])
     .default("development"),
-  NEXT_PUBLIC_BASE_URL: z.string().url(),
+  NEXT_PUBLIC_BASE_URL: z.string().url().optional(),
+  NEXT_PUBLIC_TARGET: z
+    .enum(["development", "testing", "staging", "production"])
+    .optional(),
+  TARGET: z
+    .enum(["development", "testing", "staging", "production"])
+    .optional(),
 
   // Analytics (Proxy Pattern)
   UMAMI_WEBSITE_ID: z.string().optional(),
+  NEXT_PUBLIC_UMAMI_WEBSITE_ID: z.string().optional(),
   UMAMI_API_ENDPOINT: z
     .string()
     .url()
@@ -23,6 +30,8 @@ export const mintelEnvSchema = {
   LOG_LEVEL: z
     .enum(["trace", "debug", "info", "warn", "error", "fatal"])
     .default("info"),
+
+  // Mail
   MAIL_HOST: z.string().optional(),
   MAIL_PORT: z.coerce.number().default(587),
   MAIL_USERNAME: z.string().optional(),
@@ -32,17 +41,60 @@ export const mintelEnvSchema = {
     (val) => (typeof val === "string" ? val.split(",").filter(Boolean) : val),
     z.array(z.string()).default([]),
   ),
+
+  // Directus
+  DIRECTUS_URL: z.string().url().default("http://localhost:8055"),
+  DIRECTUS_ADMIN_EMAIL: z.string().optional(),
+  DIRECTUS_ADMIN_PASSWORD: z.string().optional(),
+  DIRECTUS_API_TOKEN: z.string().optional(),
+  INTERNAL_DIRECTUS_URL: z.string().url().optional(),
 };
 
-export function validateMintelEnv(schemaExtension = {}) {
-  const fullSchema = z.object({
-    ...mintelEnvSchema,
-    ...schemaExtension,
+/**
+ * Standard Mintel refinements for environment variables.
+ * Enforces mandatory requirements for non-development environments.
+ */
+export const withMintelRefinements = <T extends z.ZodTypeAny>(schema: T) => {
+  return schema.superRefine((data: any, ctx) => {
+    const skipValidation =
+      process.env.SKIP_ENV_VALIDATION === "true" ||
+      process.env.SKIP_RUNTIME_ENV_VALIDATION === "true";
+
+    if (skipValidation) return;
+
+    const target = data.TARGET || data.NEXT_PUBLIC_TARGET || "development";
+
+    // Strict validation for non-development environments
+    if (target !== "development") {
+      if (!data.MAIL_HOST) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "MAIL_HOST is required in non-development environments",
+          path: ["MAIL_HOST"],
+        });
+      }
+    }
   });
+};
+
+export type MintelEnv<T extends z.ZodRawShape = Record<string, never>> =
+  z.infer<
+    ReturnType<
+      typeof withMintelRefinements<z.ZodObject<typeof mintelEnvSchema & T>>
+    >
+  >;
+
+export function validateMintelEnv<
+  T extends z.ZodRawShape = Record<string, never>,
+>(schemaExtension: T = {} as T): MintelEnv<T> {
+  const fullSchema = withMintelRefinements(
+    z.object(mintelEnvSchema).extend(schemaExtension),
+  );
 
   const isBuildTime =
     process.env.NEXT_PHASE === "phase-production-build" ||
-    process.env.SKIP_ENV_VALIDATION === "true";
+    process.env.SKIP_ENV_VALIDATION === "true" ||
+    process.env.SKIP_RUNTIME_ENV_VALIDATION === "true";
 
   const result = fullSchema.safeParse(process.env);
 
@@ -51,7 +103,7 @@ export function validateMintelEnv(schemaExtension = {}) {
       console.warn(
         "⚠️ Some environment variables are missing during build, but skipping strict validation.",
       );
-      // Return partial data to allow build to continue
+      // Return process.env casted to the full schema type to unblock builds
       return process.env as unknown as z.infer<typeof fullSchema>;
     }
 
@@ -62,5 +114,5 @@ export function validateMintelEnv(schemaExtension = {}) {
     throw new Error("Invalid environment variables");
   }
 
-  return result.data;
+  return result.data as MintelEnv<T>;
 }

packages/observability/package.json

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

packages/observability/src/analytics/noop.ts

@@ -5,11 +5,11 @@ import type { AnalyticsService, AnalyticsEventProperties } from "./service";
  * Used when analytics are disabled or for local development.
  */
 export class NoopAnalyticsService implements AnalyticsService {
-  track(eventName: string, props?: AnalyticsEventProperties): void {
+  track(_eventName: string, _props?: AnalyticsEventProperties): void {
     // Do nothing
   }
 
-  trackPageview(url?: string): void {
+  trackPageview(_url?: string): void {
     // Do nothing
   }
 }

packages/people-manager/index.js

@@ -0,0 +1 @@
+import{defineModule as e}from"@directus/extensions-sdk";import{defineComponent as t,resolveComponent as n,openBlock as a,createBlock as r,withCtx as o,createElementVNode as p}from"vue";var s=t({__name:"module",setup:e=>(e,t)=>{const s=n("private-view");return a(),r(s,{title:"People Manager"},{default:o(()=>[...t[0]||(t[0]=[p("div",{class:"people-manager"},[p("h1",null,"People Manager"),p("p",null,"Modern Industrial People Management Interface")],-1)])]),_:1})}}),d=[],i=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,o="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var p=d.indexOf(o);-1===p&&(p=d.push(o)-1,i[p]={}),n=i[p]&&i[p][a]?i[p][a]:i[p][a]=s()}else n=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function s(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var p="prepend"===a?"afterbegin":"beforeend";return o.insertAdjacentElement(p,e),e}}("\n.people-manager[data-v-da2952f8] {\n\tpadding: 20px;\n}\n",{});var u=e({id:"people-manager",name:"People Manager",icon:"person",routes:[{path:"",component:((e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n})(s,[["__scopeId","data-v-da2952f8"],["__file","module.vue"]])}]});export{u as default};

packages/people-manager/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "people-manager",
+  "description": "Custom High-Fidelity People Management for Directus",
+  "icon": "person",
+  "version": "1.7.9",
+  "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/people-manager/src/index.ts

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

packages/people-manager/src/module.vue

@@ -0,0 +1,18 @@
+<template>
+	<private-view title="People Manager">
+		<div class="people-manager">
+			<h1>People Manager</h1>
+			<p>Modern Industrial People Management Interface</p>
+		</div>
+	</private-view>
+</template>
+
+<script setup lang="ts">
+// Logic will be added here
+</script>
+
+<style scoped>
+.people-manager {
+	padding: 20px;
+}
+</style>

packages/tsconfig/package.json

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

scripts/cms-apply.sh

@@ -0,0 +1,71 @@
+#!/bin/bash
+
+# Configuration
+PROJECT="infra-cms"
+LOCAL_SCHEMA_PATH="./packages/cms-infra/schema/snapshot.yaml"
+REMOTE_HOST="root@infra.mintel.me"
+REMOTE_DIR="/opt/infra/directus"
+
+ENV=$1
+
+if [ -z "$ENV" ]; then
+    echo "Usage: ./scripts/cms-apply.sh [local|infra]"
+    exit 1
+fi
+
+case $ENV in
+  local)
+    PROJECT="infra-cms"
+    CMD_PREFIX="docker-compose -f packages/cms-infra/docker-compose.yml"
+    
+    LOCAL_CONTAINER=$($CMD_PREFIX ps -q $PROJECT)
+    if [ -z "$LOCAL_CONTAINER" ]; then
+        echo "❌ Local $PROJECT container not found. Is it running?"
+        exit 1
+    fi
+
+    echo "🚀 Applying schema to LOCAL $PROJECT..."
+    docker exec "$LOCAL_CONTAINER" npx directus schema apply -y /directus/schema/snapshot.yaml
+    ;;
+  infra)
+    # 'infra' is the remote production server for at-mintel
+    PROJECT="directus" # Remote project name
+    
+    echo "🔍 Detecting remote container..."
+    REMOTE_CONTAINER=$(ssh "$REMOTE_HOST" "docker ps --filter label=com.docker.compose.project=$PROJECT --filter label=com.docker.compose.service=directus -q")
+    
+    if [ -z "$REMOTE_CONTAINER" ]; then
+        # Fallback to older name if labels fail
+        REMOTE_CONTAINER=$(ssh "$REMOTE_HOST" "docker ps -f name=directus-directus-1 -q")
+    fi
+
+    if [ -z "$REMOTE_CONTAINER" ]; then
+        echo "❌ Remote container for $ENV not found."
+        exit 1
+    fi
+
+    echo "📦 Syncing extensions to REMOTE $ENV..."
+    # Ensure remote directory exists
+    ssh "$REMOTE_HOST" "mkdir -p $REMOTE_DIR/extensions"
+    rsync -avz --delete ./packages/cms-infra/extensions/ "$REMOTE_HOST:$REMOTE_DIR/extensions/"
+    
+    echo "📤 Injecting snapshot directly into container $REMOTE_CONTAINER..."
+    # Inject file via stdin to avoid needing a host-side mount or scp path matching
+    ssh "$REMOTE_HOST" "docker exec -i $REMOTE_CONTAINER sh -c 'cat > /tmp/snapshot.yaml'" < "$LOCAL_SCHEMA_PATH"
+    
+    echo "🚀 Applying schema to REMOTE $ENV..."
+    ssh "$REMOTE_HOST" "docker exec $REMOTE_CONTAINER npx directus schema apply -y /tmp/snapshot.yaml"
+    
+    echo "🔄 Restarting remote Directus to clear cache..."
+    ssh "$REMOTE_HOST" "cd $REMOTE_DIR && docker compose restart directus"
+    
+    # Cleanup
+    ssh "$REMOTE_HOST" "docker exec $REMOTE_CONTAINER rm /tmp/snapshot.yaml"
+    ;;
+  *)
+    echo "❌ Invalid environment: $ENV. Supported: local, infra."
+    exit 1
+    ;;
+esac
+
+echo "✨ Schema apply complete!"

scripts/cms-snapshot.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+# Configuration
+PROJECT="infra-cms"
+SCHEMA_PATH="./packages/cms-infra/schema/snapshot.yaml"
+CMD_PREFIX="docker-compose -f packages/cms-infra/docker-compose.yml"
+
+# Detect local container
+LOCAL_CONTAINER=$($CMD_PREFIX ps -q $PROJECT)
+
+if [ -z "$LOCAL_CONTAINER" ]; then
+    echo "❌ Local $PROJECT container not found. Is it running?"
+    exit 1
+fi
+
+echo "📸 Creating schema snapshot for local $PROJECT..."
+# Note: we save it to the mounted volume path inside the container
+docker exec "$LOCAL_CONTAINER" npx directus schema snapshot -y /directus/schema/snapshot.yaml
+
+echo "🛠️ Repairing snapshot for Postgres compatibility..."
+python3 ./scripts/fix_snapshot_v3.py
+
+echo "✅ Snapshot saved and repaired at $SCHEMA_PATH"

scripts/fix_snapshot_v3.py

@@ -0,0 +1,96 @@
+import sys
+import os
+
+path = '/Users/marcmintel/Projects/at-mintel/packages/cms-infra/schema/snapshot.yaml'
+if not os.path.exists(path):
+    print(f"File not found: {path}")
+    sys.exit(1)
+
+with open(path, 'r') as f:
+    lines = f.readlines()
+
+new_lines = []
+current_collection = None
+current_field = None
+in_schema = False
+
+fix_fields = {'id', 'company', 'user_created', 'user_updated', 'screenshot', 'logo', 'feedback_id'}
+uuid_fields = {'id', 'company', 'user_created', 'user_updated'}
+
+# For multi-pass logic
+snapshot_has_feedback_id = False
+
+for line in lines:
+    stripped = line.strip()
+    
+    if stripped.startswith('- collection:'):
+        current_collection = stripped.split(':')[-1].strip()
+        in_schema = False
+    elif stripped.startswith('field:'):
+        current_field = stripped.split(':')[-1].strip()
+        if current_collection == 'visual_feedback_comments' and current_field == 'feedback_id':
+             snapshot_has_feedback_id = True
+    elif stripped == 'schema:':
+        in_schema = True
+    elif stripped == 'meta:' or stripped.startswith('- collection:') or (not line.startswith(' ') and line.strip() and not line.startswith('-')):
+        in_schema = False
+        
+    # Top-level field type
+    if not in_schema and stripped.startswith('type:') and current_field in uuid_fields:
+        line = line.replace('type: string', 'type: uuid')
+    
+    # Schema data type
+    if in_schema and current_field in fix_fields:
+        if 'data_type: char' in line or 'data_type: varchar' in line:
+            line = line.replace('data_type: char', 'data_type: uuid').replace('data_type: varchar', 'data_type: uuid')
+        if 'max_length:' in line:
+            line = '      max_length: null\n'
+            
+    new_lines.append(line)
+
+# Handle Missing feedback_id Injection
+if not snapshot_has_feedback_id:
+    # We find systemFields and inject before it
+    injected = False
+    final_lines = []
+    feedback_id_block = """  - collection: visual_feedback_comments
+    field: feedback_id
+    type: integer
+    meta:
+      collection: visual_feedback_comments
+      field: feedback_id
+      interface: select-dropdown-m2o
+      required: true
+      sort: 4
+      width: full
+    schema:
+      name: feedback_id
+      table: visual_feedback_comments
+      data_type: integer
+      is_nullable: false
+      is_indexed: true
+      foreign_key_table: visual_feedback
+      foreign_key_column: id
+"""
+    for line in new_lines:
+        if 'systemFields:' in line and not injected:
+            final_lines.append(feedback_id_block)
+            injected = True
+        final_lines.append(line)
+    new_lines = final_lines
+
+# Second pass for primary key nullability
+final_lines = []
+for i in range(len(new_lines)):
+    line = new_lines[i]
+    if 'is_primary_key: true' in line:
+        # Search backwards and forwards
+        for j in range(max(0, i-10), min(len(new_lines), i+10)):
+            if 'is_nullable: true' in new_lines[j]:
+                new_lines[j] = new_lines[j].replace('is_nullable: true', 'is_nullable: false')
+    final_lines.append(line)
+
+with open(path, 'w') as f:
+    f.writelines(new_lines)
+
+print("SUCCESS: Full normalization and field injection complete.")

scripts/sync-directus.sh

@@ -0,0 +1,123 @@
+#!/bin/bash
+
+# Configuration
+REMOTE_HOST="root@infra.mintel.me"
+REMOTE_DIR="/opt/infra/directus"
+
+# DB Details (matching docker-compose defaults)
+DB_USER="directus"
+DB_NAME="directus"
+
+ACTION=$1
+ENV=$2
+
+# Help
+if [ -z "$ACTION" ] || [ -z "$ENV" ]; then
+    echo "Usage: ./scripts/sync-directus.sh [push|pull] [infra|testing|staging|production]"
+    echo ""
+    echo "Commands:"
+    echo "  push   Sync LOCAL data -> REMOTE"
+    echo "  pull   Sync REMOTE data -> LOCAL"
+    echo ""
+    echo "Environments:"
+    echo "  infra (infra.mintel.me)"
+    exit 1
+fi
+
+# Map Environment
+case $ENV in
+  infra)
+    PROJECT_NAME="directus"
+    ;;
+  *)
+    echo "❌ Invalid environment: $ENV. Only 'infra' is currently configured for monorepo sync."
+    exit 1
+    ;;
+esac
+
+# Detect local containers
+echo "🔍 Detecting local database..."
+LOCAL_DB_CONTAINER=$(docker compose ps -q directus-db)
+if [ -z "$LOCAL_DB_CONTAINER" ]; then
+    echo "❌ Local directus-db container not found. Is it running? (npm run dev)"
+    exit 1
+fi
+
+if [ "$ACTION" == "push" ]; then
+    echo "🚀 Pushing Local Data to $ENV..."
+    
+    # 1. DB Dump
+    echo "📦 Dumping local database..."
+    docker exec "$LOCAL_DB_CONTAINER" pg_dump -U "$DB_USER" --clean --if-exists --no-owner --no-privileges "$DB_NAME" > dump.sql
+    
+    # 2. Upload Dump
+    echo "📤 Uploading dump to remote server..."
+    scp dump.sql "$REMOTE_HOST:$REMOTE_DIR/dump.sql"
+    
+    # 3. Restore on Remote
+    echo "🔄 Restoring dump on $ENV..."
+    REMOTE_DB_CONTAINER=$(ssh "$REMOTE_HOST" "cd $REMOTE_DIR && docker compose -p $PROJECT_NAME ps -q directus-postgres")
+
+    if [ -z "$REMOTE_DB_CONTAINER" ]; then
+        echo "❌ Remote $ENV-db container not found!"
+        exit 1
+    fi
+
+    # Wipe remote DB clean before restore to avoid constraint errors
+    echo "🧹 Wiping remote database schema..."
+    ssh "$REMOTE_HOST" "docker exec $REMOTE_DB_CONTAINER psql -U $DB_USER $DB_NAME -c 'DROP SCHEMA public CASCADE; CREATE SCHEMA public;'"
+    
+    echo "⚡ Restoring database..."
+    ssh "$REMOTE_HOST" "docker exec -i $REMOTE_DB_CONTAINER psql -U $DB_USER $DB_NAME < $REMOTE_DIR/dump.sql"
+    
+    # 4. Sync Uploads
+    echo "📁 Syncing uploads (Local -> $ENV)..."
+    rsync -avz --progress ./directus/uploads/ "$REMOTE_HOST:$REMOTE_DIR/uploads/"
+    
+    # Clean up
+    rm dump.sql
+    ssh "$REMOTE_HOST" "rm $REMOTE_DIR/dump.sql"
+    
+    # 5. Restart Directus to trigger migrations and refresh schema cache
+    echo "🔄 Restarting remote Directus to apply migrations..."
+    ssh "$REMOTE_HOST" "cd $REMOTE_DIR && docker compose -p $PROJECT_NAME restart directus"
+    
+    echo "✨ Push to $ENV complete!"
+
+elif [ "$ACTION" == "pull" ]; then
+    echo "📥 Pulling $ENV Data to Local..."
+    
+    # 1. DB Dump on Remote
+    echo "📦 Dumping remote database ($ENV)..."
+    REMOTE_DB_CONTAINER=$(ssh "$REMOTE_HOST" "cd $REMOTE_DIR && docker compose -p $PROJECT_NAME ps -q directus-postgres")
+
+    if [ -z "$REMOTE_DB_CONTAINER" ]; then
+        echo "❌ Remote $ENV-db container not found!"
+        exit 1
+    fi
+    ssh "$REMOTE_HOST" "docker exec $REMOTE_DB_CONTAINER pg_dump -U $DB_USER --clean --if-exists --no-owner --no-privileges $DB_NAME > $REMOTE_DIR/dump.sql"
+    
+    # 2. Download Dump
+    echo "📥 Downloading dump..."
+    scp "$REMOTE_HOST:$REMOTE_DIR/dump.sql" dump.sql
+    
+    # Wipe local DB clean before restore to avoid constraint errors
+    echo "🧹 Wiping local database schema..."
+    docker exec "$LOCAL_DB_CONTAINER" psql -U "$DB_USER" "$DB_NAME" -c 'DROP SCHEMA public CASCADE; CREATE SCHEMA public;'
+    
+    echo "⚡ Restoring database locally..."
+    docker exec -i "$LOCAL_DB_CONTAINER" psql -U "$DB_USER" "$DB_NAME" < dump.sql
+    
+    # 4. Sync Uploads
+    echo "📁 Syncing uploads ($ENV -> Local)..."
+    rsync -avz --progress "$REMOTE_HOST:$REMOTE_DIR/uploads/" ./directus/uploads/
+    
+    # Clean up
+    rm dump.sql
+    ssh "$REMOTE_HOST" "rm $REMOTE_DIR/dump.sql"
+    
+    echo "✨ Pull to Local complete!"
+else
+    echo "Invalid action: $ACTION. Use push or pull."
+    exit 1
+fi

scripts/sync-extensions.sh

@@ -0,0 +1,69 @@
+#!/bin/bash
+
+# Configuration
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
+EXTENSIONS_ROOT="$REPO_ROOT/packages"
+TARGET_DIR="$REPO_ROOT/packages/cms-infra/extensions"
+
+# List of extensions to sync - including modules and endpoints
+EXTENSIONS=(
+  "acquisition"
+  "acquisition-manager"
+  "customer-manager"
+  "feedback-commander"
+  "people-manager"
+)
+
+echo "🚀 Starting extension sync..."
+
+# Ensure target directory exists
+mkdir -p "$TARGET_DIR"
+
+for EXT in "${EXTENSIONS[@]}"; do
+  EXT_PATH="$EXTENSIONS_ROOT/$EXT"
+  
+  if [ -d "$EXT_PATH" ]; then
+    echo "📦 Building $EXT..."
+    
+    # Build the extension
+    # We use --if-present to avoid errors if build script is missing
+    (cd "$EXT_PATH" && pnpm build)
+    
+    # Create target directory for this extension
+    # Directus expects extensions to be in subdirectories matching their name
+    mkdir -p "$TARGET_DIR/$EXT"
+    
+    echo "🚚 Syncing $EXT to $TARGET_DIR/$EXT..."
+    
+    # Clean target first to avoid ghost files
+    rm -rf "${TARGET_DIR:?}/$EXT"/*
+    
+    # Copy build artifacts and package metadata
+    # Some extensions have index.js in root after build, some use dist/
+    # We check for index.js and package.json
+    if [ -f "$EXT_PATH/index.js" ]; then
+        cp "$EXT_PATH/index.js" "$TARGET_DIR/$EXT/"
+    fi
+    
+    if [ -f "$EXT_PATH/package.json" ]; then
+        cp "$EXT_PATH/package.json" "$TARGET_DIR/$EXT/"
+    fi
+
+    if [ -d "$EXT_PATH/dist" ]; then
+        cp -r "$EXT_PATH/dist" "$TARGET_DIR/$EXT/"
+    fi
+    
+    # Sync node_modules if they exist (sometimes needed if not everything is bundled)
+    if [ -d "$EXT_PATH/node_modules" ]; then
+       echo "📚 Syncing node_modules for $EXT..."
+       rsync -a --delete "$EXT_PATH/node_modules/" "$TARGET_DIR/$EXT/node_modules/"
+    fi
+
+    echo "✅ $EXT synced."
+  else
+    echo "❌ Extension source not found: $EXT_PATH"
+  fi
+done
+
+echo "✨ Extension sync complete!"