feat: optimize event capturing and playback accuracy

2026-02-15 18:06:50 +01:00
parent e9ce406a31
commit 4e762ebfdf
38 changed files with 2847 additions and 523 deletions
--- a/.env
+++ b/.env
@@ -22,8 +22,8 @@ DIRECTUS_ADMIN_EMAIL=marc@mintel.me
 DIRECTUS_ADMIN_PASSWORD=Tim300493.
 DIRECTUS_API_TOKEN=59fb8f4c1a51b18fe28ad947f713914e
 DIRECTUS_DB_NAME=directus
-DIRECTUS_DB_USER=directus
-DIRECTUS_DB_PASSWORD=directus
+DIRECTUS_DB_USER=klz_db_user
+DIRECTUS_DB_PASSWORD=klz_db_pass
 # Local Development
 PROJECT_NAME=klz-cables
 GATEKEEPER_BYPASS_ENABLED=true
@@ -33,3 +33,4 @@ GATEKEEPER_PASSWORD=klz2026
 COOKIE_DOMAIN=localhost
 INFRA_DIRECTUS_URL=http://localhost:8059
 INFRA_DIRECTUS_TOKEN=59fb8f4c1a51b18fe28ad947f713914e
+GATEKEEPER_ORIGIN=http://klz.localhost
--- a/11
+++ b/11
@@ -34,10 +34,15 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
 # Copy source code
 COPY . .

-# Build application
-RUN pnpm build
+# Stage 2: Development (Hot-Reloading)
+FROM builder AS development
+ENV NODE_ENV=development
+CMD ["pnpm", "dev:local"]

-# Stage 2: Runner
+# Build application
+# RUN pnpm build
+
+# Stage 3: Runner
 FROM registry.infra.mintel.me/mintel/runtime:v1.7.10 AS runner
 WORKDIR /app

--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -3,9 +3,9 @@ import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
 import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
 import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
-import { FeedbackOverlay } from '@mintel/next-feedback';
 import { RecordModeProvider } from '@/components/record-mode/RecordModeContext';
-import { RecordModeOverlay } from '@/components/record-mode/RecordModeOverlay';
+import { RecordModeVisuals } from '@/components/record-mode/RecordModeVisuals';
+import { ToolCoordinator } from '@/components/record-mode/ToolCoordinator';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
@@ -98,20 +98,49 @@ export default async function LocaleLayout({

  return (
    <html lang={safeLocale} className={`scroll-smooth overflow-x-hidden ${inter.variable}`}>
+      <head>
+        <style dangerouslySetInnerHTML={{
+          __html: `
+          /* Effectively Invisible Scrollbar */
+          ::-webkit-scrollbar {
+            width: 2px;
+            height: 2px;
+          }
+          ::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          ::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 10px;
+          }
+          ::-webkit-scrollbar-thumb:hover {
+            background: rgba(130, 237, 32, 0.4);
+          }
+          * {
+            scrollbar-width: none;
+          }
+          *:hover {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(130, 237, 32, 0.2) transparent;
+          }
+        `}} />
+      </head>
      <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
        <NextIntlClientProvider messages={messages} locale={safeLocale}>
          <RecordModeProvider>
-            <JsonLd />
-            <Header />
-            <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
-            <Footer />
+            <RecordModeVisuals>
+              <JsonLd />
+              <Header />
+              <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
+              <Footer />
+            </RecordModeVisuals>
+
            <CMSConnectivityNotice />

            <Suspense fallback={null}>
              <AnalyticsProvider />
            </Suspense>
-            {config.feedbackEnabled && <FeedbackOverlay />}
-            <RecordModeOverlay />
+            <ToolCoordinator />
          </RecordModeProvider>
        </NextIntlClientProvider>
      </body>
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -212,8 +212,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
          <Container className="relative z-10">
            <div className="max-w-4xl animate-slide-up">
              <nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
-                <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
-                  {t('title')}
+                <Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
+                  {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
                </Link>
                <span className="mx-3 opacity-30">/</span>
                <span className="text-white/90">{categoryTitle}</span>
@@ -361,8 +361,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
        <Container className="relative z-10">
          <div className="max-w-4xl animate-slide-up">
            <nav className="flex items-center mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
-              <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
-                {t('title')}
+              <Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
+                {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
              </Link>
              <span className="mx-4 opacity-20">/</span>
              <Link
--- a/app/[locale]/products/opengraph-image.tsx
+++ b/app/[locale]/products/opengraph-image.tsx
@@ -10,7 +10,7 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
  const t = await getTranslations({ locale, namespace: 'Products' });
  const fonts = await getOgFonts();

-  const title = t('meta.title') || t('title');
+  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
  const description = t('meta.description') || t('subtitle');

  return new ImageResponse(
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -17,23 +17,23 @@ interface ProductsPageProps {
 export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'Products' });
-  const title = t('meta.title') || t('title');
+  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
  const description = t('meta.description') || t('subtitle');
  return {
    title,
    description,
    alternates: {
-      canonical: `/${locale}/products`,
+      canonical: `/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
      languages: {
-        de: '/de/products',
-        en: '/en/products',
-        'x-default': '/en/products',
+        de: `/de/${await mapFileSlugToTranslated('products', 'de')}`,
+        en: `/en/${await mapFileSlugToTranslated('products', 'en')}`,
+        'x-default': `/en/${await mapFileSlugToTranslated('products', 'en')}`,
      },
    },
    openGraph: {
      title: `${title} | KLZ Cables`,
      description,
-      url: `${SITE_URL}/${locale}/products`,
+      url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
    },
    twitter: {
      card: 'summary_large_image',
@@ -54,34 +54,36 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
  const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', locale);
  const solarSlug = await mapFileSlugToTranslated('solar-cables', locale);

+  const productsSlug = await mapFileSlugToTranslated('products', locale);
+
  const categories = [
    {
      title: t('categories.lowVoltage.title'),
      desc: t('categories.lowVoltage.description'),
      img: '/uploads/2024/11/low-voltage-category.webp',
      icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${locale}/products/${lowVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${lowVoltageSlug}`,
    },
    {
      title: t('categories.mediumVoltage.title'),
      desc: t('categories.mediumVoltage.description'),
      img: '/uploads/2024/11/medium-voltage-category.webp',
      icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${locale}/products/${mediumVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${mediumVoltageSlug}`,
    },
    {
      title: t('categories.highVoltage.title'),
      desc: t('categories.highVoltage.description'),
      img: '/uploads/2024/11/high-voltage-category.webp',
      icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${locale}/products/${highVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${highVoltageSlug}`,
    },
    {
      title: t('categories.solar.title'),
      desc: t('categories.solar.description'),
      img: '/uploads/2024/11/solar-category.webp',
      icon: '/uploads/2024/11/Solar.svg',
-      href: `/${locale}/products/${solarSlug}`,
+      href: `/${locale}/${productsSlug}/${solarSlug}`,
    },
  ];

--- a/app/api/save-session/route.ts
+++ b/app/api/save-session/route.ts
@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+export async function POST(req: NextRequest) {
+    // Only allow in development
+    if (process.env.NODE_ENV === 'production') {
+        return NextResponse.json({ error: 'This route is disabled in production.' }, { status: 403 });
+    }
+
+    try {
+        const body = await req.json();
+
+        // Ensure we are in the project root by using process.cwd()
+        // Path: <project-root>/remotion/session.json
+        const remotionDir = path.join(process.cwd(), 'remotion');
+        const filePath = path.join(remotionDir, 'session.json');
+
+        // Create remotion directory if it doesn't exist
+        if (!fs.existsSync(remotionDir)) {
+            fs.mkdirSync(remotionDir, { recursive: true });
+        }
+
+        // Write the JSON file
+        fs.writeFileSync(filePath, JSON.stringify(body, null, 2), 'utf-8');
+
+        return NextResponse.json({ success: true, path: filePath });
+    } catch (error: any) {
+        console.error('Failed to save session:', error);
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -92,7 +92,7 @@ export default function Footer() {
              </li>
              <li>
                <Link
-                  href={`/${locale}/products`}
+                  href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
                >
                  {navT('products')}
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -46,10 +46,22 @@ export default function Header() {
    return segments.join('/');
  };

+  const [productsSlug, setProductsSlug] = useState('products');
+
+  useEffect(() => {
+    // We can't use mapFileSlugToTranslated directly in client components easily without an API or similar
+    // For now, let's just check the locale
+    if (currentLocale === 'de') {
+      setProductsSlug('produkte');
+    } else {
+      setProductsSlug('products');
+    }
+  }, [currentLocale]);
+
  const menuItems = [
    { label: t('home'), href: '/' },
    { label: t('team'), href: '/team' },
-    { label: t('products'), href: '/products' },
+    { label: t('products'), href: `/${productsSlug}` },
    { label: t('blog'), href: '/blog' },
  ];

--- a/components/RelatedProducts.tsx
+++ b/components/RelatedProducts.tsx
@@ -13,11 +13,11 @@ interface RelatedProductsProps {
 export default async function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
  const allProducts = await getAllProducts(locale);
  const t = await getTranslations('Products');
-  
+
  // Filter products: same category, not current product
  const related = allProducts
-    .filter(p => 
-      p.slug !== currentSlug && 
+    .filter(p =>
+      p.slug !== currentSlug &&
      p.frontmatter.categories.some(cat => categories.includes(cat))
    )
    .slice(0, 3); // Limit to 3 for better spacing
@@ -42,17 +42,19 @@ export default async function RelatedProducts({ currentSlug, categories, locale
          const catSlug = categorySlugs.find(slug => {
            const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
            const title = t(`categories.${key}.title`);
-            return product.frontmatter.categories.some(cat => 
+            return product.frontmatter.categories.some(cat =>
              cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title
            );
          }) || 'low-voltage-cables';
-          
+
          const translatedProductSlug = await mapFileSlugToTranslated(product.slug, locale);
-          
+          const translatedCategorySlug = await mapFileSlugToTranslated(catSlug, locale);
+          const productsBase = await mapFileSlugToTranslated('products', locale);
+
          return (
-            <Link 
-              key={product.slug} 
-              href={`/${locale}/products/${catSlug}/${translatedProductSlug}`}
+            <Link
+              key={product.slug}
+              href={`/${locale}/${productsBase}/${translatedCategorySlug}/${translatedProductSlug}`}
              className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
            >
              <div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -3,12 +3,13 @@
 import Scribble from '@/components/Scribble';
 import { Button, Container, Heading, Section } from '@/components/ui';
 import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
+import { useTranslations, useLocale } from 'next-intl';
 import dynamic from 'next/dynamic';
 const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });

 export default function Hero() {
  const t = useTranslations('Home.hero');
+  const locale = useLocale();

  return (
    <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
@@ -66,7 +67,7 @@ export default function Hero() {
            </motion.div>
            <motion.div variants={buttonVariants}>
              <Button
-                href="/products"
+                href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
                variant="white"
                size="lg"
                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none"
--- a/components/home/ProductCategories.tsx
+++ b/components/home/ProductCategories.tsx
@@ -8,34 +8,36 @@ export default function ProductCategories() {
  const t = useTranslations('Products');
  const locale = useLocale();

+  const productsBase = locale === 'de' ? 'produkte' : 'products';
+
  const categories = [
    {
      title: t('categories.lowVoltage.title'),
      desc: t('categories.lowVoltage.description'),
      img: '/uploads/2024/11/low-voltage-category.webp',
      icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${locale}/products/low-voltage-cables`,
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'niederspannungskabel' : 'low-voltage-cables'}`,
    },
    {
      title: t('categories.mediumVoltage.title'),
      desc: t('categories.mediumVoltage.description'),
      img: '/uploads/2024/11/medium-voltage-category.webp',
      icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${locale}/products/medium-voltage-cables`,
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'mittelspannungskabel' : 'medium-voltage-cables'}`,
    },
    {
      title: t('categories.highVoltage.title'),
      desc: t('categories.highVoltage.description'),
      img: '/uploads/2024/11/high-voltage-category.webp',
      icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${locale}/products/high-voltage-cables`,
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'hochspannungskabel' : 'high-voltage-cables'}`,
    },
    {
      title: t('categories.solar.title'),
      desc: t('categories.solar.description'),
      img: '/uploads/2024/11/solar-category.webp',
      icon: '/uploads/2024/11/Solar.svg',
-      href: `/${locale}/products/solar-cables`,
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'solarkabel' : 'solar-cables'}`,
    },
  ];

--- a/components/record-mode/PickingHelper.tsx
+++ b/components/record-mode/PickingHelper.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { finder } from '@medv/finder';
+
+export function PickingHelper() {
+    const [pickingMode, setPickingMode] = useState<'click' | 'scroll' | null>(null);
+    const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        const handleMessage = (e: MessageEvent) => {
+            if (e.data.type === 'START_PICKING') {
+                setPickingMode(e.data.mode);
+            } else if (e.data.type === 'STOP_PICKING') {
+                setPickingMode(null);
+                setHoveredElement(null);
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    useEffect(() => {
+        if (!pickingMode) return;
+
+        const handleMouseOver = (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('.record-mode-ignore') || target.closest('.feedback-ui-ignore')) return;
+            setHoveredElement(target);
+        };
+
+        const handleClick = (e: MouseEvent) => {
+            if (hoveredElement) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const selector = finder(hoveredElement, {
+                    root: document.body,
+                    seedMinLength: 3,
+                    optimizedMinLength: 2,
+                    className: (name) =>
+                        !name.startsWith('record-mode-') &&
+                        !name.startsWith('feedback-') &&
+                        !name.includes('[') &&
+                        !name.includes('/') &&
+                        !name.match(/^[a-z]-[0-9]/) &&
+                        !name.match(/[0-9]{4,}/), // Avoid dynamic IDs in classnames
+                    idName: (name) => !name.startsWith('__next') && !name.includes(':') && !name.match(/[0-9]{5,}/),
+                });
+                const rect = hoveredElement.getBoundingClientRect();
+
+                window.parent.postMessage({
+                    type: 'ELEMENT_SELECTED',
+                    selector,
+                    rect: {
+                        x: rect.left,
+                        y: rect.top,
+                        width: rect.width,
+                        height: rect.height
+                    },
+                    tagName: hoveredElement.tagName.toLowerCase()
+                }, '*');
+
+                setPickingMode(null);
+                setHoveredElement(null);
+            }
+        };
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                setPickingMode(null);
+                setHoveredElement(null);
+                window.parent.postMessage({ type: 'PICKING_CANCELLED' }, '*');
+            }
+        };
+
+        window.addEventListener('mouseover', handleMouseOver);
+        window.addEventListener('click', handleClick, true);
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('mouseover', handleMouseOver);
+            window.removeEventListener('click', handleClick, true);
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [pickingMode, hoveredElement]);
+
+    if (!pickingMode || !hoveredElement) return null;
+
+    const rect = hoveredElement.getBoundingClientRect();
+
+    return (
+        <div
+            className="fixed pointer-events-none border-2 border-[#82ed20] bg-[#82ed20]/5 transition-all z-[9999] shadow-[0_0_40px_rgba(130,237,32,0.4)] rounded-sm backdrop-blur-[2px]"
+            style={{
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height,
+            }}
+        >
+            <div className="absolute top-0 right-0 bg-[#82ed20] text-black text-[10px] font-black px-1.5 py-1 transform -translate-y-full uppercase tracking-tighter shadow-xl">
+                {hoveredElement.tagName.toLowerCase()}
+            </div>
+        </div>
+    );
+}
--- a/components/record-mode/PlaybackCursor.tsx
+++ b/components/record-mode/PlaybackCursor.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { useRecordMode } from './RecordModeContext';
+
+export function PlaybackCursor() {
+    const { isPlaying, cursorPosition } = useRecordMode();
+    const [scrollOffset, setScrollOffset] = useState({ x: 0, y: 0 });
+
+    // Track scroll so cursor stays locked to the correct element
+    useEffect(() => {
+        if (!isPlaying) return;
+
+        const handleScroll = () => {
+            setScrollOffset({ x: window.scrollX, y: window.scrollY });
+        };
+
+        handleScroll(); // Init
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [isPlaying]);
+
+    if (!isPlaying) return null;
+
+    return (
+        <motion.div
+            className="fixed z-[10000] pointer-events-none"
+            animate={{
+                x: cursorPosition.x,
+                y: cursorPosition.y,
+            }}
+            transition={{
+                type: 'spring',
+                damping: 30,
+                stiffness: 250,
+                mass: 0.5,
+            }}
+        >
+            {/* Outer Pulse Ring */}
+            <div className="absolute -inset-3 rounded-full bg-[#82ed20]/10 animate-ping" />
+
+            {/* Visual Cursor */}
+            <div className="relative">
+                {/* Soft Glow */}
+                <div className="absolute -inset-2 bg-[#82ed20]/20 rounded-full blur-md" />
+
+                {/* Pointer Arrow */}
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="drop-shadow-[0_2px_8px_rgba(130,237,32,0.5)]">
+                    <path d="M3 3L10.07 19.97L12.58 12.58L19.97 10.07L3 3Z" fill="white" stroke="black" strokeWidth="1.5" strokeLinejoin="round" />
+                </svg>
+            </div>
+        </motion.div>
+    );
+}
--- a/components/record-mode/RecordModeContext.tsx
+++ b/components/record-mode/RecordModeContext.tsx
@@ -6,9 +6,6 @@ import { RecordEvent, RecordingSession } from '@/types/record-mode';
 interface RecordModeContextType {
  isActive: boolean;
  setIsActive: (active: boolean) => void;
-  isRecording: boolean;
-  startRecording: () => void;
-  stopRecording: () => void;
  events: RecordEvent[];
  addEvent: (event: Omit<RecordEvent, 'id' | 'timestamp'>) => void;
  updateEvent: (id: string, event: Partial<RecordEvent>) => void;
@@ -17,149 +14,209 @@ interface RecordModeContextType {
  isPlaying: boolean;
  playEvents: () => void;
  stopPlayback: () => void;
+  cursorPosition: { x: number; y: number };
+  zoomLevel: number;
+  isBlurry: boolean;
  currentSession: RecordingSession | null;
  saveSession: (name: string) => void;
+  isFeedbackActive: boolean;
+  setIsFeedbackActive: (active: boolean) => void;
 }

 const RecordModeContext = createContext<RecordModeContextType | null>(null);

-export function useRecordMode() {
+export function useRecordMode(): RecordModeContextType {
  const context = useContext(RecordModeContext);
  if (!context) {
-    throw new Error('useRecordMode must be used within a RecordModeProvider');
+    // Return a fail-safe fallback for SSR/Static generation where provider might be missing
+    return {
+      isActive: false,
+      setIsActive: () => { },
+      events: [],
+      addEvent: () => { },
+      updateEvent: () => { },
+      removeEvent: () => { },
+      clearEvents: () => { },
+      isPlaying: false,
+      playEvents: () => { },
+      stopPlayback: () => { },
+      cursorPosition: { x: 0, y: 0 },
+      zoomLevel: 1,
+      isBlurry: false,
+      currentSession: null,
+      isFeedbackActive: false,
+      setIsFeedbackActive: () => { },
+      saveSession: () => { },
+    };
  }
  return context;
 }

 export function RecordModeProvider({ children }: { children: React.ReactNode }) {
-  const [isActive, setIsActive] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
+  const [isActive, setIsActiveState] = useState(false);
  const [events, setEvents] = useState<RecordEvent[]>([]);
  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentSession, setCurrentSession] = useState<RecordingSession | null>(null);
-  const startTimeRef = useRef<number>(0);
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [isBlurry, setIsBlurry] = useState(false);
+  const [isFeedbackActive, setIsFeedbackActiveState] = useState(false);

-  const startRecording = () => {
-    setIsRecording(true);
-    setEvents([]);
-    startTimeRef.current = Date.now();
+  // Synchronous mutually exclusive setters
+  const setIsActive = (active: boolean) => {
+    setIsActiveState(active);
+    if (active) setIsFeedbackActiveState(false);
  };

-  const stopRecording = () => {
-    setIsRecording(false);
+  const setIsFeedbackActive = (active: boolean) => {
+    setIsFeedbackActiveState(active);
+    if (active) setIsActiveState(false);
  };

-  const addEvent = (eventData: Omit<RecordEvent, 'id' | 'timestamp'>) => {
-    const timestamp = Date.now() - startTimeRef.current;
+  const playbackRequestRef = useRef<number>(0);
+  const isPlayingRef = useRef(false);
+
+  // Load draft from localStorage on mount
+  useEffect(() => {
+    const savedEvents = localStorage.getItem('klz-record-events');
+    const savedActive = localStorage.getItem('klz-record-active');
+    if (savedEvents) setEvents(JSON.parse(savedEvents));
+    if (savedActive) setIsActive(JSON.parse(savedActive));
+  }, []);
+
+  // Sync events to localStorage
+  useEffect(() => {
+    localStorage.setItem('klz-record-events', JSON.stringify(events));
+  }, [events]);
+
+  // Sync active state to localStorage
+  useEffect(() => {
+    localStorage.setItem('klz-record-active', JSON.stringify(isActive));
+    if (isActive && isFeedbackActive) {
+      setIsFeedbackActive(false);
+    }
+  }, [isActive, isFeedbackActive]);
+
+  useEffect(() => {
+    if (isFeedbackActive && isActive) {
+      setIsActive(false);
+    }
+  }, [isFeedbackActive, isActive]);
+
+  const addEvent = (event: Omit<RecordEvent, 'id' | 'timestamp'>) => {
    const newEvent: RecordEvent = {
-      id: crypto.randomUUID(),
-      timestamp,
-      ...eventData,
+      ...event,
+      id: Math.random().toString(36).substr(2, 9),
+      timestamp: Date.now(),
    };
    setEvents((prev) => [...prev, newEvent]);
  };

-  const updateEvent = (id: string, updates: Partial<RecordEvent>) => {
-    setEvents((prev) => prev.map((e) => (e.id === id ? { ...e, ...updates } : e)));
+  const updateEvent = (id: string, updatedFields: Partial<RecordEvent>) => {
+    setEvents((prev) =>
+      prev.map((event) => (event.id === id ? { ...event, ...updatedFields } : event))
+    );
  };

  const removeEvent = (id: string) => {
-    setEvents((prev) => prev.filter((e) => e.id !== id));
+    setEvents((prev) => prev.filter((event) => event.id !== id));
  };

  const clearEvents = () => {
-    setEvents([]);
+    if (confirm('Clear all recorded events?')) {
+      setEvents([]);
+    }
+  };
+
+  const currentSession: RecordingSession | null = events.length > 0 ? {
+    id: 'draft',
+    name: 'Draft Session',
+    events,
+    createdAt: new Date().toISOString(),
+  } : null;
+
+  const saveSession = (name: string) => {
+    // In a real app, this would be an API call
+    console.log('Saving session:', name, events);
  };

  const playEvents = async () => {
-    if (events.length === 0) return;
-    setIsPlaying(true);
+    if (events.length === 0 || isPlayingRef.current) return;

-    // Simple playback logic mostly for preview
-    const startPlayTime = Date.now();
+    setIsPlaying(true);
+    isPlayingRef.current = true;

    // Sort events by timestamp just in case
-    const sortedEvents = [...events].sort((a, b) => a.timestamp - b.timestamp);
+    const sortedEvents = [...events].sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));

    for (const event of sortedEvents) {
-      if (!isPlaying) break; // Check if stopped
+      if (!isPlayingRef.current) break;

-      const targetTime = startPlayTime + event.timestamp;
-      const now = Date.now();
-      const delay = targetTime - now;
-
-      if (delay > 0) {
-        await new Promise((r) => setTimeout(r, delay));
+      // 1. Move Cursor
+      if (event.rect) {
+        setCursorPosition({
+          x: event.rect.x + event.rect.width / 2,
+          y: event.rect.y + event.rect.height / 2,
+        });
      }

-      // Execute event visual feedback
-      if (document) {
-        if (event.selector) {
-          const el = document.querySelector(event.selector);
-          if (el) {
-            // Highlight or scroll to element
-            if (event.type === 'scroll') {
-              el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            } else if (event.type === 'click') {
-              // Visualize click
-              const rect = el.getBoundingClientRect();
-              const clickMarker = document.createElement('div');
-              clickMarker.style.position = 'fixed';
-              clickMarker.style.left = `${rect.left + rect.width / 2}px`;
-              clickMarker.style.top = `${rect.top + rect.height / 2}px`;
-              clickMarker.style.width = '20px';
-              clickMarker.style.height = '20px';
-              clickMarker.style.borderRadius = '50%';
-              clickMarker.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
-              clickMarker.style.transform = 'translate(-50%, -50%)';
-              clickMarker.style.zIndex = '99999';
-              document.body.appendChild(clickMarker);
-              setTimeout(() => clickMarker.remove(), 500);
-            }
+      // 2. Handle Action
+      if (event.selector) {
+        const el = document.querySelector(event.selector) as HTMLElement;
+        if (el) {
+          if (event.type === 'scroll') {
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          } else if (event.type === 'click') {
+            // Precise industrial click sequence: mousedown -> mouseup -> click
+            const eventCoords = {
+              clientX: event.rect ? event.rect.x + event.rect.width / 2 : 0,
+              clientY: event.rect ? event.rect.y + event.rect.height / 2 : 0
+            };
+
+            const dispatchMouse = (type: string) => {
+              el.dispatchEvent(new MouseEvent(type, {
+                view: window,
+                bubbles: true,
+                cancelable: true,
+                ...eventCoords
+              }));
+            };
+
+            dispatchMouse('mousedown');
+            dispatchMouse('mouseup');
+            dispatchMouse('click');
+
+            // Fallback for native elements
+            el.click();
          }
        }
      }
+
+      // 3. Zoom/Blur
+      if (event.zoom) setZoomLevel(event.zoom);
+      if (event.motionBlur) setIsBlurry(true);
+
+      // 4. Wait
+      await new Promise((resolve) => setTimeout(resolve, event.duration || 1000));
+      setIsBlurry(false);
    }

    setIsPlaying(false);
+    isPlayingRef.current = false;
+    setZoomLevel(1);
  };

  const stopPlayback = () => {
    setIsPlaying(false);
+    isPlayingRef.current = false;
+    setZoomLevel(1);
+    setIsBlurry(false);
  };

-  const saveSession = (name: string) => {
-    const session: RecordingSession = {
-      id: crypto.randomUUID(),
-      name,
-      events,
-      createdAt: new Date().toISOString(),
-    };
-    setCurrentSession(session);
-    // Ideally save to local storage or API
-    localStorage.setItem('klz-record-session', JSON.stringify(session));
-  };
-
-  // Load session on mount
-  useEffect(() => {
-    const saved = localStorage.getItem('klz-record-session');
-    if (saved) {
-      try {
-        setCurrentSession(JSON.parse(saved));
-      } catch (e) {
-        console.error('Failed to load session', e);
-      }
-    }
-  }, []);
-
  return (
    <RecordModeContext.Provider
      value={{
        isActive,
        setIsActive,
-        isRecording,
-        startRecording,
-        stopRecording,
        events,
        addEvent,
        updateEvent,
@@ -168,8 +225,13 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
        isPlaying,
        playEvents,
        stopPlayback,
+        cursorPosition,
+        zoomLevel,
+        isBlurry,
        currentSession,
        saveSession,
+        isFeedbackActive,
+        setIsFeedbackActive,
      }}
    >
      {children}
--- a/components/record-mode/RecordModeOverlay.tsx
+++ b/components/record-mode/RecordModeOverlay.tsx
@@ -15,16 +15,15 @@ import {
  Edit2,
  X,
  Check,
+  Download,
 } from 'lucide-react';
 import { RecordEvent } from '@/types/record-mode';
+import { PlaybackCursor } from './PlaybackCursor';

 export function RecordModeOverlay() {
  const {
    isActive,
    setIsActive,
-    isRecording,
-    startRecording,
-    stopRecording,
    events,
    addEvent,
    updateEvent,
@@ -41,26 +40,18 @@ export function RecordModeOverlay() {

  // Edit form state
  const [editForm, setEditForm] = useState<Partial<RecordEvent>>({});
+  const [mounted, setMounted] = useState(false);

  useEffect(() => {
-    if (!isActive) return;
+    setMounted(true);
+  }, []);

-    const handleMouseOver = (e: MouseEvent) => {
-      if (pickingMode) {
-        e.stopPropagation();
-        e.preventDefault();
-        const target = e.target as HTMLElement;
-        if (target.closest('.record-mode-ui')) return;
-        setHoveredElement(target);
-      }
-    };
+  useEffect(() => {
+    if (!mounted || !isActive) return;

-    const handleClick = (e: MouseEvent) => {
-      if (pickingMode && hoveredElement) {
-        e.stopPropagation();
-        e.preventDefault();
-
-        const selector = finder(hoveredElement);
+    const handleMessage = (e: MessageEvent) => {
+      if (e.data.type === 'ELEMENT_SELECTED') {
+        const { selector, rect, tagName } = e.data;

        if (pickingMode === 'click') {
          addEvent({
@@ -68,285 +59,285 @@ export function RecordModeOverlay() {
            selector,
            duration: 1000,
            zoom: 1,
-            description: `Click on ${hoveredElement.tagName.toLowerCase()}`,
+            description: `Click on ${tagName}`,
            motionBlur: false,
+            rect,
          });
        } else if (pickingMode === 'scroll') {
          addEvent({
            type: 'scroll',
            selector,
-            duration: 1000,
+            duration: 1500,
            zoom: 1,
-            description: `Scroll to ${hoveredElement.tagName.toLowerCase()}`,
+            description: `Scroll to ${tagName}`,
            motionBlur: false,
+            rect,
          });
        }
-
        setPickingMode(null);
-        setHoveredElement(null);
+      } else if (e.data.type === 'PICKING_CANCELLED') {
+        setPickingMode(null);
      }
    };

+    window.addEventListener('message', handleMessage);
+
    if (pickingMode) {
-      window.addEventListener('mouseover', handleMouseOver);
-      window.addEventListener('click', handleClick, true);
+      // Find the iframe and signal start picking
+      const iframe = document.querySelector('iframe');
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'START_PICKING', mode: pickingMode }, '*');
+      }
+    } else {
+      // Signal stop picking
+      const iframe = document.querySelector('iframe');
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'STOP_PICKING' }, '*');
+      }
    }

    return () => {
-      window.removeEventListener('mouseover', handleMouseOver);
-      window.removeEventListener('click', handleClick, true);
+      window.removeEventListener('message', handleMessage);
    };
-  }, [isActive, pickingMode, hoveredElement, addEvent]);
+  }, [isActive, pickingMode, addEvent]);

-  const startEditing = (event: RecordEvent) => {
-    setEditingEventId(event.id);
-    setEditForm({ ...event });
-  };
+  const [showEvents, setShowEvents] = useState(false);

-  const saveEdit = () => {
-    if (editingEventId && editForm) {
-      updateEvent(editingEventId, editForm);
-      setEditingEventId(null);
-      setEditForm({});
-    }
-  };
-
-  const cancelEdit = () => {
-    setEditingEventId(null);
-    setEditForm({});
-  };
+  if (!mounted) return null;

  if (!isActive) {
+    // Failsafe: Never render host toggle in embedded mode
+    if (typeof window !== 'undefined' && (window.self !== window.top || window.name === 'record-mode-iframe' || window.location.search.includes('embedded=true'))) {
+      return null;
+    }
+
    return (
      <button
        onClick={() => setIsActive(true)}
-        className="fixed bottom-4 right-4 z-[9999] bg-red-600 text-white p-3 rounded-full shadow-lg hover:scale-110 transition-transform record-mode-ui"
+        className="fixed bottom-6 left-6 z-[9999] bg-[#82ed20]/20 hover:bg-[#82ed20]/30 text-[#82ed20] p-4 rounded-full shadow-2xl transition-all hover:scale-110 record-mode-ignore border border-[#82ed20]/30 backdrop-blur-md animate-pulse"
      >
-        <div className="w-4 h-4 rounded-full bg-white" />
+        <div className="w-5 h-5 rounded-[4px] border-2 border-[#82ed20]" />
      </button>
    );
  }

  return (
-    <div className="fixed inset-0 z-[9999] pointer-events-none">
-      {/* Hover Highlighter */}
-      {pickingMode && hoveredElement && (
-        <div
-          className="fixed pointer-events-none border-2 border-red-500 bg-red-500/20 transition-all z-[9998]"
-          style={{
-            top: hoveredElement.getBoundingClientRect().top,
-            left: hoveredElement.getBoundingClientRect().left,
-            width: hoveredElement.getBoundingClientRect().width,
-            height: hoveredElement.getBoundingClientRect().height,
-          }}
-        />
-      )}
+    <div className="fixed inset-0 z-[9998] pointer-events-none font-sans">
+      {/* 1. Global Toolbar - Slim Industrial Bar */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
+        <div className="bg-black/80 backdrop-blur-2xl border border-white/10 p-2 rounded-[24px] shadow-[0_32px_80px_rgba(0,0,0,0.8)] flex items-center gap-2">

-      {/* Control Panel */}
-      <div className="fixed bottom-8 left-1/2 -translate-x-1/2 bg-black/80 backdrop-blur-md text-white p-4 rounded-xl shadow-2xl pointer-events-auto record-mode-ui border border-white/10 w-[600px] max-h-[80vh] flex flex-col">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="font-bold flex items-center gap-2">
-            <div
-              className={`w-3 h-3 rounded-full ${isRecording ? 'bg-red-500 animate-pulse' : 'bg-gray-500'}`}
-            />
-            Record Mode
-          </h3>
-          <button onClick={() => setIsActive(false)} className="text-white/50 hover:text-white">
-            Close
-          </button>
-        </div>
-
-        <div className="flex items-center gap-2 mb-4 overflow-x-auto pb-2">
-          {!isRecording ? (
-            <button
-              onClick={startRecording}
-              className="flex items-center gap-2 bg-red-600 px-4 py-2 rounded-lg hover:bg-red-700 whitespace-nowrap"
-            >
-              <div className="w-3 h-3 rounded-full bg-white" />
-              Start Rec
-            </button>
-          ) : (
-            <button
-              onClick={stopRecording}
-              className="flex items-center gap-2 bg-gray-700 px-4 py-2 rounded-lg hover:bg-gray-600 whitespace-nowrap"
-            >
-              <Square size={16} fill="currentColor" />
-              Stop Rec
-            </button>
-          )}
-
-          <div className="w-px h-8 bg-white/20 mx-2" />
-
-          <button
-            disabled={!isRecording}
-            onClick={() => setPickingMode('click')}
-            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${pickingMode === 'click' ? 'bg-blue-600' : 'hover:bg-white/10 disabled:opacity-50'}`}
-          >
-            <MousePointer2 size={16} />
-            Add Click
-          </button>
-
-          <button
-            disabled={!isRecording}
-            onClick={() => setPickingMode('scroll')}
-            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${pickingMode === 'scroll' ? 'bg-blue-600' : 'hover:bg-white/10 disabled:opacity-50'}`}
-          >
-            <Scroll size={16} />
-            Add Scroll
-          </button>
-
-          <div className="w-px h-8 bg-white/20 mx-2" />
-
-          <button
-            onClick={playEvents}
-            disabled={isRecording || events.length === 0}
-            className="p-2 hover:bg-white/10 rounded-lg disabled:opacity-50"
-          >
-            <Play size={20} />
-          </button>
-
-          <button
-            onClick={() => saveSession('Session 1')}
-            disabled={events.length === 0}
-            className="p-2 hover:bg-white/10 rounded-lg disabled:opacity-50"
-          >
-            <Save size={20} />
-          </button>
-
-          <button
-            onClick={clearEvents}
-            disabled={events.length === 0}
-            className="p-2 hover:bg-red-500/20 text-red-400 rounded-lg disabled:opacity-50"
-          >
-            <Trash2 size={20} />
-          </button>
-        </div>
-
-        {/* Edit Form */}
-        {editingEventId && (
-          <div className="bg-blue-900/40 p-3 rounded-lg mb-4 border border-blue-500/30">
-            <div className="flex justify-between items-center mb-2">
-              <span className="font-bold text-sm text-blue-300">Edit Event</span>
-              <div className="flex gap-1">
-                <button
-                  onClick={saveEdit}
-                  className="p-1 hover:bg-green-500/20 text-green-400 rounded"
-                >
-                  <Check size={14} />
-                </button>
-                <button
-                  onClick={cancelEdit}
-                  className="p-1 hover:bg-red-500/20 text-red-400 rounded"
-                >
-                  <X size={14} />
-                </button>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-2 text-xs">
-              <div>
-                <label className="block text-white/50 mb-1">Type</label>
-                <select
-                  value={editForm.type}
-                  onChange={(e) => setEditForm({ ...editForm, type: e.target.value as any })}
-                  className="w-full bg-black/40 border border-white/10 rounded p-1"
-                >
-                  <option value="click">Click</option>
-                  <option value="scroll">Scroll</option>
-                  <option value="wait">Wait</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-white/50 mb-1">Duration (ms)</label>
-                <input
-                  type="number"
-                  value={editForm.duration}
-                  onChange={(e) => setEditForm({ ...editForm, duration: parseInt(e.target.value) })}
-                  className="w-full bg-black/40 border border-white/10 rounded p-1"
-                />
-              </div>
-              <div>
-                <label className="block text-white/50 mb-1">Zoom (x)</label>
-                <input
-                  type="number"
-                  step="0.1"
-                  value={editForm.zoom}
-                  onChange={(e) => setEditForm({ ...editForm, zoom: parseFloat(e.target.value) })}
-                  className="w-full bg-black/40 border border-white/10 rounded p-1"
-                />
-              </div>
-              <div>
-                <label className="block text-white/50 mb-1">Motion Blur</label>
-                <button
-                  onClick={() => setEditForm({ ...editForm, motionBlur: !editForm.motionBlur })}
-                  className={`w-full p-1 rounded text-center border ${editForm.motionBlur ? 'bg-blue-500/20 border-blue-500 text-blue-300' : 'bg-black/40 border-white/10 text-white/50'}`}
-                >
-                  {editForm.motionBlur ? 'Enabled' : 'Disabled'}
-                </button>
-              </div>
-              <div className="col-span-2">
-                <label className="block text-white/50 mb-1">Description</label>
-                <input
-                  type="text"
-                  value={editForm.description || ''}
-                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
-                  className="w-full bg-black/40 border border-white/10 rounded p-1"
-                />
-              </div>
+          {/* Identity Tag */}
+          <div className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-[16px] border border-white/5 mx-1">
+            <div className="w-2 h-2 rounded-full bg-accent animate-pulse" />
+            <div className="flex flex-col">
+              <span className="text-[10px] font-bold text-white uppercase tracking-wider leading-none">Event Builder</span>
+              <span className="text-[8px] text-white/30 uppercase tracking-widest mt-1">Manual Mode</span>
            </div>
          </div>
-        )}

-        {/* Event Timeline */}
-        <div className="bg-white/5 rounded-lg p-2 flex-1 overflow-y-auto space-y-2 min-h-[200px]">
-          {events.length === 0 && (
-            <div className="text-center text-white/30 text-sm py-4">No events recorded yet.</div>
-          )}
-          {events.map((event, index) => (
-            <div
-              key={event.id}
-              className={`flex items-center gap-3 bg-white/5 p-2 rounded text-sm group cursor-pointer hover:bg-white/10 border border-transparent ${editingEventId === event.id ? 'border-blue-500 bg-blue-500/10' : ''}`}
-              onClick={() => startEditing(event)}
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          {/* Action Tools */}
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => setPickingMode('click')}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'click' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
            >
-              <span className="text-white/30 w-6 text-center">{index + 1}</span>
-              {event.type === 'click' && <MousePointer2 size={14} className="text-blue-400" />}
-              {event.type === 'scroll' && <Scroll size={14} className="text-green-400" />}
+              <MousePointer2 size={16} />
+              <span>Click</span>
+            </button>

-              <div className="flex-1 truncate">
-                <span className="font-mono text-white/50 text-xs mr-2">{event.selector}</span>
-                {event.motionBlur && (
-                  <span className="text-[10px] bg-purple-500/20 text-purple-300 px-1 rounded ml-1">
-                    Blur
-                  </span>
-                )}
-                {event.zoom && event.zoom !== 1 && (
-                  <span className="text-[10px] bg-yellow-500/20 text-yellow-300 px-1 rounded ml-1">
-                    x{event.zoom}
-                  </span>
-                )}
-              </div>
+            <button
+              onClick={() => setPickingMode('scroll')}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'scroll' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+            >
+              <Scroll size={16} />
+              <span>Scroll</span>
+            </button>

-              <span className="text-xs text-white/40">{(event.timestamp / 1000).toFixed(1)}s</span>
+            <button
+              onClick={() => addEvent({
+                type: 'wait',
+                duration: 2000,
+                zoom: 1,
+                description: 'Wait for 2s',
+                motionBlur: false
+              })}
+              className="flex items-center gap-2 px-4 py-2.5 rounded-[16px] text-white/40 hover:text-white hover:bg-white/5 transition-all text-xs font-bold uppercase tracking-wide"
+            >
+              <Plus size={16} />
+              <span>Wait</span>
+            </button>
+          </div>

-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  removeEvent(event.id);
-                }}
-                className="opacity-0 group-hover:opacity-100 p-1 hover:bg-white/10 rounded text-red-400"
-              >
-                <Trash2 size={12} />
-              </button>
-            </div>
-          ))}
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          {/* Sequence Controls */}
+          <div className="flex items-center gap-1 p-0.5">
+            <button
+              onClick={playEvents}
+              disabled={isPlaying || events.length === 0}
+              className="p-2.5 text-accent hover:bg-accent/10 rounded-[14px] disabled:opacity-20 transition-all"
+              title="Preview Sequence"
+            >
+              <Play size={18} fill="currentColor" />
+            </button>
+
+            <button
+              onClick={() => setShowEvents(!showEvents)}
+              className={`p-2.5 rounded-[14px] transition-all relative ${showEvents ? 'bg-white/10 text-white' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+            >
+              <Edit2 size={18} />
+              {events.length > 0 && (
+                <span className="absolute -top-1 -right-1 w-4 h-4 bg-accent text-primary-dark text-[10px] flex items-center justify-center rounded-full font-bold border-2 border-black">
+                  {events.length}
+                </span>
+              )}
+            </button>
+
+            <button
+              onClick={async () => {
+                const session = { events, name: 'Recording', createdAt: new Date().toISOString() };
+                try {
+                  const res = await fetch('/api/save-session', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(session),
+                  });
+                  if (res.ok) {
+                    // Visual feedback could be improved, but alert is fine for dev tool
+                    alert('Session saved to remotion/session.json');
+                  } else {
+                    const err = await res.json();
+                    alert(`Failed to save: ${err.error}`);
+                  }
+                } catch (e) {
+                  console.error(e);
+                  alert('Error saving session');
+                }
+              }}
+              disabled={events.length === 0}
+              className="p-3 bg-white/5 hover:bg-green-500/20 rounded-2xl disabled:opacity-30 transition-all text-green-400"
+              title="Save to Project (Dev)"
+            >
+              <Save size={20} />
+            </button>
+
+            <button
+              onClick={() => {
+                const data = JSON.stringify({ events, name: 'Recording', createdAt: new Date().toISOString() }, null, 2);
+                const blob = new Blob([data], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'remotion-session.json';
+                a.click();
+                URL.revokeObjectURL(url);
+              }}
+              disabled={events.length === 0}
+              className="p-3 bg-white/5 hover:bg-blue-500/20 rounded-2xl disabled:opacity-30 transition-all text-blue-400"
+              title="Download JSON"
+            >
+              <Download size={20} />
+            </button>
+          </div>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          <button
+            onClick={() => setIsActive(false)}
+            className="p-2.5 text-red-500 hover:bg-red-500/10 rounded-[14px] transition-all mx-1"
+            title="Exit Studio"
+          >
+            <X size={20} />
+          </button>
        </div>
      </div>

-      {/* Picking Instructions */}
-      {pickingMode && (
-        <div className="fixed top-8 left-1/2 -translate-x-1/2 bg-blue-600 text-white px-6 py-2 rounded-full shadow-xl z-[10000] animate-bounce">
-          Select element to {pickingMode}
+      {/* 2. Event Timeline Popover */}
+      {showEvents && (
+        <div className="fixed bottom-[100px] left-1/2 -translate-x-1/2 w-[400px] pointer-events-auto z-[9999]">
+          <div className="bg-black/90 backdrop-blur-3xl border border-white/10 rounded-[32px] p-6 shadow-[0_40px_100px_rgba(0,0,0,0.9)] max-h-[500px] overflow-hidden flex flex-col scale-in">
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h4 className="text-white font-bold text-lg leading-none">Recording Track</h4>
+                <p className="text-[10px] text-white/30 uppercase tracking-widest mt-2">{events.length} Actions Recorded</p>
+              </div>
+              <button
+                onClick={clearEvents}
+                disabled={events.length === 0}
+                className="text-red-400/40 hover:text-red-400 transition-colors p-2 hover:bg-red-500/10 rounded-xl disabled:opacity-10"
+              >
+                <Trash2 size={18} />
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto space-y-2 pr-2 scrollbar-hide">
+              {events.length === 0 ? (
+                <div className="py-12 flex flex-col items-center justify-center text-white/10">
+                  <Plus size={40} strokeWidth={1} />
+                  <p className="text-xs mt-4">Timeline is empty</p>
+                </div>
+              ) : (
+                events.map((event, index) => (
+                  <div
+                    key={event.id}
+                    className="group flex items-center gap-4 bg-white/[0.03] border border-white/5 p-3 rounded-[20px] transition-all hover:bg-white/[0.06] hover:border-white/10"
+                  >
+                    <div className="w-6 h-6 rounded-full bg-white/5 border border-white/5 flex items-center justify-center text-[9px] font-bold text-white/30">
+                      {index + 1}
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-white text-xs font-bold uppercase tracking-widest">{event.type}</span>
+                        <span className="text-[8px] bg-white/10 px-1.5 py-0.5 rounded text-white/40 font-mono italic">{event.duration}ms</span>
+                      </div>
+                      <p className="text-[10px] text-white/30 truncate font-mono mt-1 opacity-60">
+                        {event.selector || 'system:wait'}
+                      </p>
+                    </div>
+
+                    <button
+                      onClick={() => removeEvent(event.id)}
+                      className="p-2 text-white/0 group-hover:text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all"
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
        </div>
      )}
+
+      {/* Industrial Selector Highlighter - handled inside iframe via PickingHelper */}
+
+      {/* Picking Tooltip */}
+      {pickingMode && (
+        <div className="fixed top-8 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
+          <div className="bg-accent text-primary-dark px-6 py-3 rounded-full flex items-center gap-4 shadow-[0_20px_40px_rgba(130,237,32,0.4)] animate-reveal border border-primary-dark/10">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-primary-dark animate-pulse" />
+              <span className="font-black uppercase tracking-widest text-xs">Assigning {pickingMode}</span>
+            </div>
+            <div className="w-px h-6 bg-primary-dark/20" />
+            <button
+              onClick={() => {
+                setPickingMode(null);
+                setHoveredElement(null);
+              }}
+              className="text-[10px] font-bold uppercase tracking-widest opacity-60 hover:opacity-100 transition-opacity bg-primary-dark/10 px-3 py-1.5 rounded-full"
+            >
+              ESC to Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      <PlaybackCursor />
    </div>
  );
 }
--- a/components/record-mode/RecordModeVisuals.tsx
+++ b/components/record-mode/RecordModeVisuals.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import React from 'react';
+import { useRecordMode } from './RecordModeContext';
+
+export function RecordModeVisuals({ children }: { children: React.ReactNode }) {
+    const { isActive, isPlaying, zoomLevel, cursorPosition, isBlurry } = useRecordMode();
+    const [mounted, setMounted] = React.useState(false);
+    const [isEmbedded, setIsEmbedded] = React.useState(false);
+    const [iframeUrl, setIframeUrl] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        setMounted(true);
+        // Explicit non-magical detection
+        const embedded = window.location.search.includes('embedded=true') || window.name === 'record-mode-iframe';
+        setIsEmbedded(embedded);
+
+        if (!embedded) {
+            const url = new URL(window.location.href);
+            url.searchParams.set('embedded', 'true');
+            setIframeUrl(url.toString());
+        }
+    }, [isEmbedded]);
+
+    // Hydration Guard: Match server on first render
+    if (!mounted) return <>{children}</>;
+
+    // Recursion Guard: If we are already in an embedded iframe, 
+    // strictly return just the children to prevent Inception.
+    if (isEmbedded) {
+        return (
+            <>
+                <style dangerouslySetInnerHTML={{
+                    __html: `
+                    /* Harder Isolation: Hide ALL potentially duplicate overlays and DEV TOOLS */
+                    #nextjs-portal, 
+                    #nextjs-portal-root,
+                    [data-nextjs-toast-wrapper],
+                    .nextjs-static-indicator,
+                    [data-nextjs-indicator],
+                    [class*="nextjs-"],
+                    [id*="nextjs-"],
+                    nextjs-portal,
+                    #feedback-overlay,
+                    .feedback-ui-root,
+                    .feedback-ui-ignore,
+                    [class*="z-[9999]"],
+                    [class*="z-[10000]"],
+                    [style*="z-index: 9999"],
+                    [style*="z-index: 10000"],
+                    .fixed.bottom-6.left-6,
+                    .fixed.bottom-6.left-1\/2,
+                    .feedback-ui-overlay,
+                    [id^="feedback-"],
+                    [class^="feedback-"] { 
+                        display: none !important; 
+                        opacity: 0 !important;
+                        visibility: hidden !important;
+                        pointer-events: none !important;
+                        z-index: -10000 !important;
+                    }
+                    
+                    /* Nuclear Option 2.0: Kill ALL scrollbars on ALL elements */
+                    * {
+                        scrollbar-width: none !important;
+                        -ms-overflow-style: none !important;
+                    }
+                    *::-webkit-scrollbar {
+                        display: none !important;
+                        width: 0 !important;
+                        height: 0 !important;
+                    }
+
+                    html, body {
+                        border-radius: 3rem;
+                        background: #050505 !important;
+                        color: white !important;
+                        overflow-x: hidden !important;
+                        overflow-y: auto !important;
+                    }
+                `}} />
+                {children}
+            </>
+        );
+    }
+
+    return (
+        <>
+            {/* Global Style for Body Lock */}
+            {isActive && (
+                <style dangerouslySetInnerHTML={{
+                    __html: `
+                    html, body { 
+                        overflow: hidden !important; 
+                        height: 100vh !important; 
+                        position: fixed !important;
+                        width: 100vw !important;
+                    }
+                    /* Kill Next.js Dev tools on host while Studio is active */
+                    #nextjs-portal, 
+                    [data-nextjs-toast-wrapper],
+                    .nextjs-static-indicator {
+                        display: none !important;
+                    }
+                `}} />
+            )}
+
+            <div className={`transition-all duration-1000 ${isActive ? 'fixed inset-0 z-[9997] bg-[#020202] flex items-center justify-center p-6 md:p-12 lg:p-20' : 'relative w-full'}`}>
+                {/* Studio Background - Only visible when active */}
+                {isActive && (
+                    <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">
+                        <div className="absolute inset-0 bg-gradient-to-br from-[#03110a] via-[#020202] to-[#030a11] animate-pulse duration-[10s]" />
+                        <div className="absolute -top-[60%] -left-[50%] w-[140%] h-[140%] rounded-full opacity-[0.7]"
+                            style={{ background: 'radial-gradient(circle, #10b981 0%, transparent 70%)', filter: 'blur(160px)', animation: 'mesh-float-1 18s ease-in-out infinite' }} />
+                        <div className="absolute -bottom-[60%] -right-[50%] w-[130%] h-[130%] rounded-full opacity-[0.55]"
+                            style={{ background: 'radial-gradient(circle, #06b6d4 0%, transparent 70%)', filter: 'blur(150px)', animation: 'mesh-float-2 22s ease-in-out infinite' }} />
+                        <div className="absolute -top-[30%] -right-[40%] w-[100%] h-[100%] rounded-full opacity-[0.5]"
+                            style={{ background: 'radial-gradient(circle, #82ed20 0%, transparent 70%)', filter: 'blur(130px)', animation: 'mesh-float-3 14s ease-in-out infinite' }} />
+                        <div className="absolute -bottom-[50%] -left-[40%] w-[110%] h-[110%] rounded-full opacity-[0.45]"
+                            style={{ background: 'radial-gradient(circle, #2563eb 0%, transparent 70%)', filter: 'blur(140px)', animation: 'mesh-float-4 20s ease-in-out infinite' }} />
+                        <div className="absolute inset-0 opacity-[0.12] mix-blend-overlay" style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`, backgroundSize: '128px 128px' }} />
+                        <div className="absolute inset-0 opacity-[0.06]" style={{ backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)' }} />
+                    </div>
+                )}
+
+                <div
+                    className={`transition-all duration-700 ease-in-out relative z-10 w-full ${isActive ? 'h-full max-h-[1000px] max-w-[1600px] drop-shadow-[0_60px_150px_rgba(0,0,0,1)] scale-in' : 'h-full'}`}
+                    style={{
+                        transform: isPlaying ? `scale(${zoomLevel})` : undefined,
+                        transformOrigin: isPlaying ? `${cursorPosition.x}px ${cursorPosition.y}px` : 'center',
+                        filter: isBlurry ? 'blur(4px)' : 'none',
+                        willChange: 'transform, filter',
+                        WebkitBackfaceVisibility: 'hidden',
+                        backfaceVisibility: 'hidden',
+                    }}
+                >
+                    <div className={isActive ? 'relative h-full w-full rounded-[3rem] overflow-hidden bg-[#050505] isolate' : 'w-full h-full'}
+                        style={{ transform: isActive ? 'translateZ(0)' : 'none' }}>
+
+                        {isActive && (
+                            <>
+                                <div className="absolute inset-0 rounded-[3rem] border border-white/[0.08] pointer-events-none z-50" />
+                                <div className="absolute inset-[-2px] rounded-[3rem] pointer-events-none z-20"
+                                    style={{ background: 'linear-gradient(135deg, rgba(16,185,129,0.15), rgba(130,237,32,0.15))', animation: 'pulse-ring 4s ease-in-out infinite' }} />
+                                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#82ed20]/[0.05] to-transparent h-[15%] w-full top-[-15%] animate-scan-slow z-50 pointer-events-none opacity-20" />
+                            </>
+                        )}
+
+                        <div className={isActive ? "w-full h-full rounded-[3rem] overflow-hidden relative" : "w-full h-full relative"}
+                            style={{
+                                WebkitMaskImage: isActive ? '-webkit-radial-gradient(white, black)' : 'none',
+                                transform: isActive ? 'translateZ(0)' : 'none'
+                            }}>
+                            {isActive && iframeUrl ? (
+                                <iframe
+                                    src={iframeUrl}
+                                    name="record-mode-iframe"
+                                    className="w-full h-full border-0 block"
+                                    style={{
+                                        backgroundColor: '#050505',
+                                        scrollbarWidth: 'none',
+                                        msOverflowStyle: 'none',
+                                        height: '100%',
+                                        width: '100%'
+                                    }}
+                                />
+                            ) : (
+                                <div className={isActive ? 'blur-2xl opacity-20 pointer-events-none scale-95 transition-all duration-700' : 'transition-all duration-700'}>
+                                    {children}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                <style jsx global>{`
+                    @keyframes mesh-float-1 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(15%, 10%) scale(1.1) rotate(5deg); } 66% { transform: translate(-10%, 20%) scale(0.9) rotate(-3deg); } }
+                    @keyframes mesh-float-2 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(-20%, -15%) scale(1.2) rotate(-8deg); } 66% { transform: translate(15%, -10%) scale(0.8) rotate(4deg); } }
+                    @keyframes mesh-float-3 { 0%, 100% { transform: translate(0, 0) scale(1.2); } 50% { transform: translate(20%, -25%) scale(0.7); } }
+                    @keyframes mesh-float-4 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-15%, 25%) scale(1.1); } }
+                    @keyframes pulse-ring { 0%, 100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.005); } }
+                    @keyframes scan-slow { 0% { transform: translateY(-100%); opacity: 0; } 5% { opacity: 0.2; } 95% { opacity: 0.2; } 100% { transform: translateY(800%); opacity: 0; } }
+                    @keyframes scale-in { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+                    .scale-in { animation: scale-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+                `}</style>
+            </div>
+        </>
+    );
+}
--- a/components/record-mode/ToolCoordinator.tsx
+++ b/components/record-mode/ToolCoordinator.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRecordMode } from './RecordModeContext';
+import { useSearchParams } from 'next/navigation';
+import { FeedbackOverlay } from '@mintel/next-feedback';
+import { RecordModeOverlay } from './RecordModeOverlay';
+import { PickingHelper } from './PickingHelper';
+import { config } from '@/lib/config';
+
+export function ToolCoordinator({ isEmbedded: isEmbeddedProp }: { isEmbedded?: boolean }) {
+    const { isActive, setIsActive, isFeedbackActive, setIsFeedbackActive } = useRecordMode();
+    const [isEmbedded, setIsEmbedded] = useState(false);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+        const embedded =
+            isEmbeddedProp ||
+            window.location.search.includes('embedded=true') ||
+            window.name === 'record-mode-iframe' ||
+            (window.self !== window.top);
+        setIsEmbedded(embedded);
+    }, [isEmbeddedProp]);
+
+    if (!mounted) return null;
+
+    // ABSOLUTE Priority 1: Inside Iframe - ONLY Rendering PickingHelper
+    if (isEmbedded) {
+        return <PickingHelper />;
+    }
+
+    // ABSOLUTE Priority 2: Record Mode Studio Active - NO OTHER TOOLS ALLOWED
+    if (isActive) {
+        return <RecordModeOverlay />;
+    }
+
+    // Priority 3: Feedback Tool Active - NO OTHER TOOLS ALLOWED
+    if (isFeedbackActive) {
+        return (
+            <FeedbackOverlay
+                isActive={isFeedbackActive}
+                onActiveChange={(active) => setIsFeedbackActive(active)}
+            />
+        );
+    }
+
+    // Baseline: Both toggle buttons (inactive state)
+    // Only render if neither is active to prevent any overlapping residues
+    // IMPORTANT: FeedbackOverlay must be rendered with isActive={false} to provide the toggle button,
+    // but only if Record Mode is not active.
+    return (
+        <div className="feedback-ui-ignore">
+            {config.feedbackEnabled && (
+                <FeedbackOverlay
+                    isActive={false}
+                    onActiveChange={(active) => setIsFeedbackActive(active)}
+                />
+            )}
+            <RecordModeOverlay />
+        </div>
+    );
+}
--- a/directus/schema/minimal_schema.yaml
+++ b/directus/schema/minimal_schema.yaml
@@ -0,0 +1,83 @@
+version: 1
+directus: 11.14.1
+vendor: postgres
+collections:
+  - collection: contact_submissions
+    meta:
+      accountability: all
+      archive_app_filter: true
+      collapse: open
+      collection: contact_submissions
+      color: '#002b49'
+      display_template: '{{name}} | {{email}}'
+      hidden: false
+      icon: contact_mail
+      singleton: false
+    schema:
+      name: contact_submissions
+fields:
+  - collection: contact_submissions
+    field: id
+    type: uuid
+    meta:
+      collection: contact_submissions
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: contact_submissions
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: contact_submissions
+    field: name
+    type: string
+    meta:
+      collection: contact_submissions
+      field: name
+      interface: input
+      sort: 2
+    schema:
+      name: name
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: email
+    type: string
+    meta:
+      collection: contact_submissions
+      field: email
+      interface: input
+      sort: 3
+    schema:
+      name: email
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: message
+    type: text
+    meta:
+      collection: contact_submissions
+      field: message
+      interface: textarea
+      sort: 4
+    schema:
+      name: message
+      table: contact_submissions
+      data_type: text
+  - collection: contact_submissions
+    field: date_created
+    type: timestamp
+    meta:
+      collection: contact_submissions
+      field: date_created
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: contact_submissions
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+relations: []
--- a/directus/schema/snapshot.yaml
+++ b/directus/schema/snapshot.yaml
@@ -6,51 +6,474 @@ collections:
    meta:
      accountability: all
      archive_app_filter: true
-      archive_field: null
-      archive_value: null
      collapse: open
      collection: contact_submissions
      color: '#002b49'
-      display_template: '{{first_name}} {{last_name}} | {{subject}}'
-      group: null
+      display_template: '{{name}} | {{email}}'
      hidden: false
      icon: contact_mail
-      item_duplication_fields: null
-      note: null
-      preview_url: null
      singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
    schema:
      name: contact_submissions
  - collection: product_requests
    meta:
      accountability: all
      archive_app_filter: true
-      archive_field: null
-      archive_value: null
      collapse: open
      collection: product_requests
      color: '#002b49'
-      display_template: null
-      group: null
+      display_template: '{{product_name}} | {{email}}'
      hidden: false
      icon: inventory
-      item_duplication_fields: null
-      note: null
-      preview_url: null
      singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
    schema:
      name: product_requests
-fields: []
+  - collection: products
+    meta:
+      accountability: all
+      collection: products
+      icon: inventory_2
+      singleton: false
+    schema:
+      name: products
+  - collection: products_translations
+    meta:
+      accountability: all
+      collection: products_translations
+      hidden: true
+    schema:
+      name: products_translations
+  - collection: visual_feedback
+    meta:
+      accountability: all
+      archive_app_filter: true
+      collapse: open
+      collection: visual_feedback
+      color: '#002b49'
+      display_template: '{{user_name}} | {{type}}: {{text}}'
+      hidden: false
+      icon: feedback
+      singleton: false
+      versioning: false
+    schema:
+      name: visual_feedback
+  - collection: visual_feedback_comments
+    meta:
+      accountability: all
+      archive_app_filter: true
+      collapse: open
+      collection: visual_feedback_comments
+      color: '#002b49'
+      display_template: '{{user_name}}: {{text}}'
+      hidden: false
+      icon: comment
+      singleton: false
+      versioning: false
+    schema:
+      name: visual_feedback_comments
+fields:
+  # contact_submissions
+  - collection: contact_submissions
+    field: id
+    type: uuid
+    meta:
+      collection: contact_submissions
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: contact_submissions
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: contact_submissions
+    field: name
+    type: string
+    meta:
+      collection: contact_submissions
+      field: name
+      interface: input
+      sort: 2
+    schema:
+      name: name
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: email
+    type: string
+    meta:
+      collection: contact_submissions
+      field: email
+      interface: input
+      sort: 3
+    schema:
+      name: email
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: message
+    type: text
+    meta:
+      collection: contact_submissions
+      field: message
+      interface: textarea
+      sort: 4
+    schema:
+      name: message
+      table: contact_submissions
+      data_type: text
+  - collection: contact_submissions
+    field: date_created
+    type: timestamp
+    meta:
+      collection: contact_submissions
+      field: date_created
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: contact_submissions
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+
+  # product_requests
+  - collection: product_requests
+    field: id
+    type: uuid
+    meta:
+      collection: product_requests
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: product_requests
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: product_requests
+    field: product_name
+    type: string
+    meta:
+      collection: product_requests
+      field: product_name
+      interface: input
+      sort: 2
+    schema:
+      name: product_name
+      table: product_requests
+      data_type: character varying
+  - collection: product_requests
+    field: email
+    type: string
+    meta:
+      collection: product_requests
+      field: email
+      interface: input
+      sort: 3
+    schema:
+      name: email
+      table: product_requests
+      data_type: character varying
+  - collection: product_requests
+    field: message
+    type: text
+    meta:
+      collection: product_requests
+      field: message
+      interface: textarea
+      sort: 4
+    schema:
+      name: message
+      table: product_requests
+      data_type: text
+  - collection: product_requests
+    field: date_created
+    type: timestamp
+    meta:
+      collection: product_requests
+      field: date_created
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: product_requests
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+
+  # products
+  - collection: products
+    field: id
+    type: uuid
+    meta:
+      collection: products
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: products
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  
+  # products_translations
+  - collection: products_translations
+    field: id
+    type: integer
+    meta:
+      collection: products_translations
+      field: id
+      hidden: true
+    schema:
+      name: id
+      table: products_translations
+      data_type: integer
+      is_primary_key: true
+      has_auto_increment: true
+
+  # visual_feedback (from current snapshot)
+  - collection: visual_feedback
+    field: id
+    type: uuid
+    meta:
+      collection: visual_feedback
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: visual_feedback
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: visual_feedback
+    field: status
+    type: string
+    meta:
+      collection: visual_feedback
+      display: labels
+      interface: select-dropdown
+      sort: 2
+    schema:
+      name: status
+      table: visual_feedback
+      data_type: character varying
+      default_value: open
+      is_nullable: true
+  - collection: visual_feedback
+    field: type
+    type: string
+    meta:
+      collection: visual_feedback
+      display: labels
+      interface: select-dropdown
+      sort: 3
+    schema:
+      name: type
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: text
+    type: text
+    meta:
+      collection: visual_feedback
+      interface: input-multiline
+      sort: 4
+    schema:
+      name: text
+      table: visual_feedback
+      data_type: text
+      is_nullable: true
+  - collection: visual_feedback
+    field: url
+    type: string
+    meta:
+      collection: visual_feedback
+      interface: input
+      readonly: true
+      sort: 5
+    schema:
+      name: url
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: user_info_group
+    type: alias
+    meta:
+      collection: visual_feedback
+      field: user_info_group
+      interface: group-detail
+      sort: 6
+      special:
+        - alias
+        - no-data
+        - group
+  - collection: visual_feedback
+    field: user_name
+    type: string
+    meta:
+      collection: visual_feedback
+      field: user_name
+      group: user_info_group
+      interface: input
+      sort: 1
+    schema:
+      name: user_name
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: user_identity
+    type: string
+    meta:
+      collection: visual_feedback
+      field: user_identity
+      group: user_info_group
+      interface: input
+      readonly: true
+      sort: 2
+    schema:
+      name: user_identity
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: technical_details_group
+    type: alias
+    meta:
+      collection: visual_feedback
+      field: technical_details_group
+      interface: group-detail
+      sort: 7
+      special:
+        - alias
+        - no-data
+        - group
+  - collection: visual_feedback
+    field: selector
+    type: string
+    meta:
+      collection: visual_feedback
+      field: selector
+      group: technical_details_group
+      interface: input
+      readonly: true
+      sort: 1
+    schema:
+      name: selector
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: x
+    type: float
+    meta:
+      collection: visual_feedback
+      field: x
+      group: technical_details_group
+      interface: input
+      sort: 2
+    schema:
+      name: x
+      table: visual_feedback
+      data_type: real
+      is_nullable: true
+  - collection: visual_feedback
+    field: 'y'
+    type: float
+    meta:
+      collection: visual_feedback
+      field: 'y'
+      group: technical_details_group
+      interface: input
+      sort: 3
+    schema:
+      name: 'y'
+      table: visual_feedback
+      data_type: real
+      is_nullable: true
+  - collection: visual_feedback
+    field: date_created
+    type: timestamp
+    meta:
+      collection: visual_feedback
+      interface: datetime
+      readonly: true
+      sort: 8
+    schema:
+      name: date_created
+      table: visual_feedback
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+      is_nullable: true
+  - collection: visual_feedback_comments
+    field: id
+    type: uuid
+    meta:
+      collection: visual_feedback_comments
+      field: id
+      hidden: true
+    schema:
+      name: id
+      table: visual_feedback_comments
+      data_type: uuid
+      is_primary_key: true
+  - collection: visual_feedback_comments
+    field: feedback_id
+    type: uuid
+    meta:
+      collection: visual_feedback_comments
+      field: feedback_id
+      interface: select-relational
+      sort: 2
+    schema:
+      name: feedback_id
+      table: visual_feedback_comments
+      data_type: uuid
+  - collection: visual_feedback_comments
+    field: user_name
+    type: string
+    meta:
+      collection: visual_feedback_comments
+      field: user_name
+      interface: input
+      sort: 3
+    schema:
+      name: user_name
+      table: visual_feedback_comments
+      data_type: character varying
+  - collection: visual_feedback_comments
+    field: text
+    type: text
+    meta:
+      collection: visual_feedback_comments
+      field: text
+      interface: input-multiline
+      sort: 4
+    schema:
+      name: text
+      table: visual_feedback_comments
+      data_type: text
+  - collection: visual_feedback_comments
+    field: date_created
+    type: timestamp
+    meta:
+      collection: visual_feedback_comments
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: visual_feedback_comments
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+
 systemFields:
  - collection: directus_activity
    field: timestamp
@@ -64,4 +487,18 @@ systemFields:
    field: parent
    schema:
      is_indexed: true
-relations: []
+
+relations:
+  - collection: visual_feedback_comments
+    field: feedback_id
+    related_collection: visual_feedback
+    schema:
+      column: feedback_id
+      foreign_key_column: id
+      foreign_key_table: visual_feedback
+      table: visual_feedback_comments
+    meta:
+      many_collection: visual_feedback_comments
+      many_field: feedback_id
+      one_collection: visual_feedback
+      one_field: null
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@@ -0,0 +1,43 @@
+services:
+  klz-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: development
+    volumes:
+      - .:/app
+      - /app/node_modules
+      - /app/.next
+    environment:
+      - WATCHPACK_POLLING=true # Useful for Docker volume mounting issues on some systems
+    restart: "no"
+    container_name: klz-app-dev
+    labels:
+      - "traefik.enable=true"
+      # Clear any production middlewares/headers redirect
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.middlewares="
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.rule=Host(`${TRAEFIK_HOST:-klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.entrypoints=web"
+      # Configure main router for local HTTP without auth
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=Host(`${TRAEFIK_HOST:-klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.entrypoints=web"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.middlewares="
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls=false"
+      - "traefik.docker.network=infra"
+
+  directus-cms:
+    container_name: klz-cms-dev
+    restart: "no"
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.rule=Host(`${DIRECTUS_HOST:-cms.klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.service=${PROJECT_NAME:-klz-cables}-cms"
+      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-cms.loadbalancer.server.port=8055"
+      - "traefik.docker.network=infra"
+
+  klz-db:
+    restart: "no"
+
+  gatekeeper:
+    restart: "no"
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,13 @@
 services:
  klz-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
+        DIRECTUS_URL: ${DIRECTUS_URL}
    image: registry.infra.mintel.me/mintel/klz-cables.com:${IMAGE_TAG:-latest}
-    restart: always
+    restart: unless-stopped
    networks:
      - default
      - infra
@@ -10,22 +16,22 @@ services:
    labels:
      - "traefik.enable=true"
      # HTTP ⇒ HTTPS redirect
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.rule=${TRAEFIK_HOST_RULE:-Host(\"klz-cables.com\")}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}"
      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.entrypoints=web"
      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.middlewares=redirect-https"
      # HTTPS router (Standard)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=${TRAEFIK_HOST_RULE:-Host(\"klz-cables.com\")}"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls=${TRAEFIK_TLS:-false}"
      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.service=${PROJECT_NAME:-klz-cables}"
      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.middlewares=${AUTH_MIDDLEWARE:-${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${PROJECT_NAME:-klz-cables}-compress}"

      # Public Router (Whitelist for OG Images, Sitemaps, Health)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.rule=(${TRAEFIK_HOST_RULE:-Host(\"klz-cables.com\")}) && (PathPrefix(\"/health\", \"/sitemap.xml\", \"/robots.txt\", \"/manifest.webmanifest\", \"/api/og\") || PathRegexp(\".*opengraph-image.*\") || PathRegexp(\".*sitemap.*\"))"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.tls=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && (PathPrefix(`/health`, `/sitemap.xml`, `/robots.txt`, `/manifest.webmanifest`, `/api/og`) || PathRegexp(`.*opengraph-image.*`) || PathRegexp(`.*sitemap.*`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.tls=${TRAEFIK_TLS:-false}"
      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.service=${PROJECT_NAME:-klz-cables}"
      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.middlewares=${AUTH_MIDDLEWARE_UNPROTECTED:-${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${PROJECT_NAME:-klz-cables}-compress}"
      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.priority=2000"
@@ -47,20 +53,20 @@ services:
      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.authRequestHeaders=X-Forwarded-Host,X-Forwarded-Proto,X-Forwarded-For,Cookie"
      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.authResponseHeaders=X-Auth-User"

-      # Middleware Definitions
+      # Rate Limit Middleware
      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-ratelimit.ratelimit.average=100"
      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-ratelimit.ratelimit.burst=50"
    healthcheck:
-      test: [ "CMD", "curl", "-f", "http://127.0.0.1:3000/" ]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-      start_period: 30s
+      test: [ "CMD", "curl", "-f", "http://127.0.0.1:3000/health" ]
+      interval: 15s
+      timeout: 10s
+      retries: 3
+      start_period: 45s

  gatekeeper:
    profiles: [ "gatekeeper" ]
    image: registry.infra.mintel.me/mintel/gatekeeper:v1.7.12
-    restart: always
+    restart: unless-stopped
    networks:
      infra:
        aliases:
@@ -78,22 +84,18 @@ services:
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=infra"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.rule=(Host(\"${TRAEFIK_HOST:-testing.klz-cables.com}\") && PathPrefix(\"/gatekeeper\"))"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.rule=(Host(`${TRAEFIK_HOST:-testing.klz-cables.com}`) && PathPrefix(`/gatekeeper`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls=${TRAEFIK_TLS:-false}"
      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.service=${PROJECT_NAME:-klz-cables}-gatekeeper"
      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-gatekeeper.loadbalancer.server.port=3000"
      - "traefik.docker.network=infra"

-  directus:
-    image: directus/directus:11
-    restart: always
-    networks:
-      default:
-      infra:
-        aliases:
-          - ${PROJECT_NAME:-klz-cables}-directus
+  directus-cms:
+    image: registry.infra.mintel.me/mintel/directus:latest
+    restart: unless-stopped
+    command: [ "node", "cli.js", "start" ]
    env_file:
      - ${ENV_FILE:-.env}
    environment:
@@ -102,37 +104,35 @@ services:
      ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL}
      ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD}
      DB_CLIENT: 'pg'
-      DB_HOST: 'directus-db'
+      DB_HOST: 'klz-db'
      DB_PORT: '5432'
      DB_DATABASE: ${DIRECTUS_DB_NAME:-directus}
      DB_USER: ${DIRECTUS_DB_USER:-directus}
      DB_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
      WEBSOCKETS_ENABLED: 'true'
      PUBLIC_URL: ${DIRECTUS_URL:-https://cms.klz-cables.com}
-      # Error Tracking
-      SENTRY_DSN: ${SENTRY_DSN}
-      SENTRY_ENVIRONMENT: ${TARGET:-development}
-      LOGGER_LEVEL: ${LOG_LEVEL:-info}
+      HOST: '0.0.0.0'
+    networks:
+      - infra
    volumes:
      - ./directus/uploads:/directus/uploads
      - ./directus/extensions:/directus/extensions
      - ./directus/schema:/directus/schema
      - ./directus/migrations:/directus/migrations
+    healthcheck:
+      disable: true
    labels:
      - "traefik.enable=true"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.rule=Host(\"${DIRECTUS_HOST}\")"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.tls=true"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.middlewares=${PROJECT_NAME:-klz-cables}-forward,compress"
-      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-directus.loadbalancer.server.port=8055"
+      - "traefik.http.routers.klz-production-cms.rule=Host(`cms.klz.localhost`)"
+      - "traefik.http.routers.klz-production-cms.entrypoints=web"
+      - "traefik.http.routers.klz-production-cms.priority=5000"
+      - "traefik.http.routers.klz-production-cms.tls=false"
+      - "traefik.http.routers.klz-production-cms.service=klz-production-cms-svc"
+      - "traefik.http.services.klz-production-cms-svc.loadbalancer.server.port=8055"
      - "traefik.docker.network=infra"
-
-  directus-db:
+  klz-db:
    image: postgres:15-alpine
-    restart: always
-    networks:
-      - default
+    restart: unless-stopped
    env_file:
      - ${ENV_FILE:-.env}
    environment:
@@ -141,6 +141,8 @@ services:
      POSTGRES_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
    volumes:
      - directus-db-data:/var/lib/postgresql/data
+    networks:
+      - infra

 networks:
  default:
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -50,7 +50,7 @@ function createConfig() {
    },

    logging: {
-      level: env.LOG_LEVEL,
+      level: env.LOG_LEVEL || 'info',
    },

    mail: {
--- a/messages/de.json
+++ b/messages/de.json
@@ -207,6 +207,7 @@
      "description": "Entdecken Sie unser umfassendes Sortiment an zertifizierten Kabeln: von Niederspannung über Mittel- und Hochspannung bis hin zu spezialisierten Solarkabeln."
    },
    "title": "Unsere <green>Produkte</green>",
+    "breadcrumb": "Produkte",
    "subtitle": "Entdecken Sie unser umfassendes Sortiment an hochwertigen Kabeln für jede Anwendung.",
    "heroSubtitle": "Produktportfolio",
    "categoryLabel": "Kategorie",
@@ -393,4 +394,4 @@
      "cta": "Zurück zur Sicherheit"
    }
  }
-}
+}
--- a/messages/en.json
+++ b/messages/en.json
@@ -207,6 +207,7 @@
      "description": "Explore our comprehensive range of certified cables: from low voltage to medium and high voltage, as well as specialized solar cables."
    },
    "title": "Our <green>Products</green>",
+    "breadcrumb": "Products",
    "subtitle": "Explore our comprehensive range of high-quality cables designed for every application.",
    "heroSubtitle": "Product Portfolio",
    "categoryLabel": "Category",
@@ -393,4 +394,4 @@
      "cta": "Back to Safety"
    }
  }
-}
+}
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
  "dependencies": {
    "@directus/sdk": "^21.0.0",
    "@medv/finder": "^4.0.2",
-    "@mintel/mail": "1.7.12",
-    "@mintel/next-config": "1.7.12",
-    "@mintel/next-feedback": "1.7.12",
+    "@mintel/mail": "1.8.3",
+    "@mintel/next-config": "1.8.3",
+    "@mintel/next-feedback": "1.8.10",
    "@mintel/next-utils": "^1.7.15",
    "@react-email/components": "^1.0.7",
    "@react-pdf/renderer": "^4.3.2",
@@ -20,7 +20,6 @@
    "import-in-the-middle": "^1.11.0",
    "jsdom": "^27.4.0",
    "leaflet": "^1.9.4",
-    "lucide-react": "^0.562.0",
    "next": "16.1.6",
    "next-i18next": "^15.4.3",
    "next-intl": "^4.8.2",
@@ -46,8 +45,12 @@
    "@commitlint/cli": "^20.4.0",
    "@commitlint/config-conventional": "^20.4.0",
    "@lhci/cli": "^0.15.1",
-    "@mintel/eslint-config": "1.7.12",
-    "@mintel/tsconfig": "1.7.12",
+    "@mintel/eslint-config": "1.8.3",
+    "@mintel/tsconfig": "1.8.3",
+    "@remotion/cli": "^4.0.421",
+    "@remotion/google-fonts": "^4.0.421",
+    "@remotion/player": "^4.0.421",
+    "@remotion/renderer": "^4.0.421",
    "@tailwindcss/cli": "^4.1.18",
    "@tailwindcss/postcss": "^4.1.18",
    "@types/geojson": "^7946.0.16",
@@ -64,8 +67,10 @@
    "happy-dom": "^20.6.1",
    "husky": "^9.1.7",
    "lint-staged": "^16.2.7",
+    "lucide-react": "^0.563.0",
    "postcss": "^8.5.6",
    "prettier": "^3.8.1",
+    "remotion": "^4.0.421",
    "sass": "^1.97.1",
    "tailwindcss": "^4.1.18",
    "tsx": "^4.21.0",
@@ -73,7 +78,8 @@
    "vitest": "^4.0.16"
  },
  "scripts": {
-    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App:      http://klz.localhost\\n🗄️  CMS:      http://cms.klz.localhost/admin\\n🚦 Traefik:  http://localhost:8080\\n\\n(Press Ctrl+C to stop)\\n' && docker-compose down --remove-orphans && docker-compose up klz-app directus directus-db gatekeeper",
+    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App (Next.js): http://localhost:3000\\n📱 App (Traefik): http://klz.localhost\\n🗄️  CMS:           http://cms.klz.localhost/admin\\n🚦 Traefik:      http://localhost:8080\\n\\n(Press Ctrl+C to stop)\\n' && docker-compose down --remove-orphans && docker-compose up --build klz-app directus-cms klz-db gatekeeper",
+    "dev:infra": "docker network create infra 2>/dev/null || true && docker-compose up -d directus-cms klz-db gatekeeper",
    "dev:local": "next dev",
    "build": "next build",
    "start": "next start",
@@ -102,6 +108,8 @@
    "cms:push:prod:DANGER": "./scripts/sync-directus.sh push production",
    "pagespeed:test": "tsx ./scripts/pagespeed-sitemap.ts",
    "pagespeed:urls": "tsx -e \"import sitemap from './app/sitemap'; sitemap().then(urls => console.log(urls.map(u => u.url).join('\\n')))\"",
+    "remotion:render": "remotion render WebsiteVideo remotion/index.ts out.mp4",
+    "remotion:preview": "remotion preview remotion/index.ts",
    "prepare": "husky",
    "preinstall": "npx only-allow pnpm"
  },
@@ -110,5 +118,13 @@
    "overrides": {
      "next": "16.1.6"
    }
+  },
+  "peerDependencies": {
+    "@remotion/cli": "^4.0.421",
+    "@remotion/google-fonts": "^4.0.421",
+    "@remotion/player": "^4.0.421",
+    "@remotion/renderer": "^4.0.421",
+    "lucide-react": "^0.563.0",
+    "remotion": "^4.0.421"
  }
-}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/remotion/Root.tsx
+++ b/remotion/Root.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Composition } from 'remotion';
+import { WebsiteVideo } from './WebsiteVideo';
+import sessionData from './session.json';
+import { RecordingSession } from '../types/record-mode';
+
+const FPS = 60;
+
+export const RemotionRoot: React.FC = () => {
+    // Calculate duration based on last event + padding
+    const durationMs = (sessionData as unknown as RecordingSession).events.reduce((max, e) => {
+        return Math.max(max, e.timestamp + (e.duration || 1000));
+    }, 0);
+    const durationInFrames = Math.ceil((durationMs + 2000) / 1000 * FPS);
+
+    return (
+        <>
+            <Composition
+                id="WebsiteVideo"
+                component={WebsiteVideo}
+                durationInFrames={durationInFrames}
+                fps={FPS}
+                width={1920}
+                height={1080}
+                defaultProps={{
+                    session: sessionData as unknown as RecordingSession,
+                    siteUrl: 'http://localhost:3000'
+                }}
+            />
+        </>
+    );
+};
--- a/remotion/WebsiteVideo.tsx
+++ b/remotion/WebsiteVideo.tsx
@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { AbsoluteFill, useVideoConfig, useCurrentFrame, interpolate, spring, Easing } from 'remotion';
+import { RecordingSession, RecordEvent } from '../types/record-mode';
+
+export const WebsiteVideo: React.FC<{
+    session: RecordingSession | null;
+    siteUrl: string;
+}> = ({ session, siteUrl }) => {
+    const { fps, width, height, durationInFrames } = useVideoConfig();
+    const frame = useCurrentFrame();
+
+    if (!session || !session.events.length) {
+        return (
+            <AbsoluteFill style={{ backgroundColor: 'black', color: 'white', justifyContent: 'center', alignItems: 'center' }}>
+                No session data found.
+            </AbsoluteFill>
+        );
+    }
+
+    const sortedEvents = useMemo(() => {
+        return [...session.events].sort((a, b) => a.timestamp - b.timestamp);
+    }, [session]);
+
+    const elapsedTimeMs = (frame / fps) * 1000;
+
+    // --- Interpolation Logic ---
+
+    // 1. Find the current window (between which two events are we?)
+    const nextEventIndex = sortedEvents.findIndex(e => e.timestamp > elapsedTimeMs);
+    let currentEventIndex;
+
+    if (nextEventIndex === -1) {
+        // We are past the last event, stay at the end
+        currentEventIndex = sortedEvents.length - 1;
+    } else {
+        currentEventIndex = Math.max(0, nextEventIndex - 1);
+    }
+
+    const currentEvent = sortedEvents[currentEventIndex];
+    // If there is no next event, we just stay at current (next=current)
+    const nextEvent = (nextEventIndex !== -1) ? sortedEvents[nextEventIndex] : currentEvent;
+
+    // 2. Calculate Progress between events
+    const gap = nextEvent.timestamp - currentEvent.timestamp;
+    const progress = gap > 0 ? (elapsedTimeMs - currentEvent.timestamp) / gap : 1;
+    const easedProgress = Easing.cubic(Math.min(Math.max(progress, 0), 1));
+
+    // 3. Calculate Cursor Position from Rects
+    const getCenter = (event: RecordEvent) => {
+        if (event.rect) {
+            return {
+                x: event.rect.x + event.rect.width / 2,
+                y: event.rect.y + event.rect.height / 2
+            };
+        }
+        return { x: width / 2, y: height / 2 };
+    };
+
+    const p1 = getCenter(currentEvent);
+    const p2 = getCenter(nextEvent);
+
+    const cursorX = interpolate(easedProgress, [0, 1], [p1.x, p2.x]);
+    const cursorY = interpolate(easedProgress, [0, 1], [p1.y, p2.y]);
+
+    // 4. Zoom & Blur
+    const zoom = interpolate(easedProgress, [0, 1], [currentEvent.zoom || 1, nextEvent.zoom || 1]);
+    const isBlurry = currentEvent.motionBlur || nextEvent.motionBlur;
+
+    return (
+        <AbsoluteFill style={{ backgroundColor: '#000' }}>
+            <div style={{
+                width: '100%',
+                height: '100%',
+                position: 'relative',
+                transform: `scale(${zoom})`,
+                transformOrigin: `${cursorX}px ${cursorY}px`,
+                filter: isBlurry ? 'blur(8px)' : 'none',
+                transition: 'filter 0.1s ease-out'
+            }}>
+                <iframe
+                    src={siteUrl}
+                    style={{ width: '100%', height: '100%', border: 'none' }}
+                    title="Website"
+                />
+            </div>
+
+            {/* Visual Cursor */}
+            <div style={{
+                position: 'absolute',
+                left: cursorX,
+                top: cursorY,
+                width: 34, height: 34,
+                backgroundColor: 'white',
+                borderRadius: '50%',
+                border: '3px solid black',
+                boxShadow: '0 4px 15px rgba(0,0,0,0.4)',
+                transform: 'translate(-50%, -50%)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 100
+            }}>
+                <div style={{ width: 12, height: 12, backgroundColor: '#3b82f6', borderRadius: '50%' }} />
+            </div>
+        </AbsoluteFill>
+    );
+};
--- a/remotion/index.ts
+++ b/remotion/index.ts
@@ -0,0 +1,4 @@
+import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+
+registerRoot(RemotionRoot);
--- a/remotion/session.json
+++ b/remotion/session.json
@@ -0,0 +1,35 @@
+{
+    "id": "sample-session",
+    "name": "Sample Recording",
+    "createdAt": "2024-03-20T10:00:00.000Z",
+    "events": [
+        {
+            "id": "1",
+            "type": "click",
+            "timestamp": 1000,
+            "duration": 1000,
+            "zoom": 1,
+            "selector": "body",
+            "rect": {
+                "x": 100,
+                "y": 100,
+                "width": 50,
+                "height": 50
+            }
+        },
+        {
+            "id": "2",
+            "type": "scroll",
+            "timestamp": 2500,
+            "duration": 1500,
+            "zoom": 1,
+            "selector": "footer",
+            "rect": {
+                "x": 500,
+                "y": 800,
+                "width": 100,
+                "height": 50
+            }
+        }
+    ]
+}
--- a/scripts/cms-apply.sh
+++ b/scripts/cms-apply.sh
@@ -9,7 +9,7 @@ if [ -z "$ENV" ]; then
    exit 1
 fi

-PRJ_ID=$(jq -r .name package.json | sed 's/@mintel\///' | sed 's/\.com$//' | sed 's/-nextjs$//')
+PRJ_ID=$(jq -r .name package.json | sed 's/@mintel\///' | sed 's/\.com$//' | sed 's/-nextjs$//' | sed 's/-cables$//')

 case $ENV in
  local)
@@ -26,8 +26,8 @@ case $ENV in
      testing)    PROJECT_NAME="${PRJ_ID}-testing" ;;
      staging)    PROJECT_NAME="${PRJ_ID}-staging" ;;
      production) 
-        PROJECT_NAME="${PRJ_ID}-prod"
-        OLD_PROJECT_NAME="${PRJ_ID}com" # Fallback for legacy naming
+        PROJECT_NAME="${PRJ_ID}-production"
+        OLD_PROJECT_NAME="${PRJ_ID}-prod" # Fallback for previous convention
        ;;
    esac
    
--- a/scripts/sync-directus.sh
+++ b/scripts/sync-directus.sh
@@ -5,7 +5,7 @@ REMOTE_HOST="root@alpha.mintel.me"
 REMOTE_DIR="/home/deploy/sites/klz-cables.com"

 # DB Details (matching docker-compose defaults)
-DB_USER="directus"
+DB_USER="klz_db_user"
 DB_NAME="directus"

 ACTION=$1
@@ -49,9 +49,9 @@ esac
 # Detect local container
 echo "🔍 Detecting local database..."
 # Use a more robust way to find the container if multiple projects exist locally
-LOCAL_DB_CONTAINER=$(docker compose ps -q directus-db)
+LOCAL_DB_CONTAINER=$(docker compose ps -q klz-directus-db)
 if [ -z "$LOCAL_DB_CONTAINER" ]; then
-    echo "❌ Local directus-db container not found. Is it running? (npm run dev)"
+    echo "❌ Local klz-directus-db container not found. Is it running? (npm run dev)"
    exit 1
 fi

--- a/styles/globals.css
+++ b/styles/globals.css
@@ -7,16 +7,19 @@
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

-  --color-primary: #001a4d; /* Deep Blue */
+  --color-primary: #001a4d;
+  /* Deep Blue */
  --color-primary-dark: #000d26;
  --color-primary-light: #e6ebf5;

-  --color-saturated: #011dff; /* Saturated Blue Accent */
+  --color-saturated: #011dff;
+  /* Saturated Blue Accent */

  --color-secondary: #003d82;
  --color-secondary-light: #0056b3;

-  --color-accent: #82ed20; /* Sustainability Green */
+  --color-accent: #82ed20;
+  /* Sustainability Green */
  --color-accent-dark: #6bc41a;
  --color-accent-light: #f0f9e6;

@@ -40,76 +43,107 @@
  --animate-slide-up: slide-up 0.6s ease-out;
  --animate-slow-zoom: slow-zoom 20s linear infinite;
  --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
-    cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-gradient-x: gradient-x 15s ease infinite;

  @keyframes gradient-x {
+
    0%,
    100% {
      background-position: 0% 50%;
    }
+
    50% {
      background-position: 100% 50%;
    }
  }
+
  @keyframes fade-in {
    from {
      opacity: 0;
    }
+
    to {
      opacity: 1;
    }
  }
+
  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
+
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
+
  @keyframes slow-zoom {
    from {
      transform: scale(1);
    }
+
    to {
      transform: scale(1.1);
    }
  }
+
  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(20px);
      filter: blur(8px);
    }
+
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
+
  @keyframes slight-fade-in-from-bottom {
    from {
      opacity: 0;
      transform: translateY(10px);
      filter: blur(4px);
    }
+
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
+
+  @keyframes float {
+    0% {
+      transform: translate(0, 0) scale(1);
+    }
+
+    33% {
+      transform: translate(2%, 4%) scale(1.1);
+    }
+
+    66% {
+      transform: translate(-3%, 2%) scale(0.9);
+    }
+
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+  }
 }

@layer base {
+
  .bg-primary a,
  .bg-primary-dark a {
    @apply text-white/90 hover:text-white transition-colors;
  }
+
  body {
    @apply text-base md:text-lg antialiased;
    text-rendering: optimizeLegibility;
@@ -132,18 +166,23 @@
  h1 {
    @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1];
  }
+
  h2 {
    @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2];
  }
+
  h3 {
    @apply text-xl md:text-2xl lg:text-3xl leading-[1.3];
  }
+
  h4 {
    @apply text-lg md:text-xl lg:text-2xl leading-[1.4];
  }
+
  h5 {
    @apply text-base md:text-lg leading-[1.5];
  }
+
  h6 {
    @apply text-sm md:text-base leading-[1.6];
  }
@@ -202,18 +241,23 @@
  .glass-panel {
    @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
  }
+
  .image-overlay-gradient {
    @apply absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent;
  }
+
  .premium-card {
    @apply bg-white rounded-3xl shadow-sm transition-all duration-500 hover:shadow-2xl hover:-translate-y-1;
  }
+
  .sticky-narrative-container {
    @apply grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20;
  }
+
  .sticky-narrative-sidebar {
    @apply lg:col-span-4 lg:sticky lg:top-32 h-fit;
  }
+
  .sticky-narrative-content {
    @apply lg:col-span-8;
  }
@@ -221,7 +265,8 @@

 /* Custom Utilities */
@utility touch-target {
-  min-height: 48px; /* Increased for better touch-first feel */
+  min-height: 48px;
+  /* Increased for better touch-first feel */
  min-width: 48px;
  display: inline-flex;
  align-items: center;
@@ -276,4 +321,4 @@
@utility content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
-}
+}
--- a/traefik_dump.json
+++ b/traefik_dump.json
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,10 +3,18 @@
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
-      "@/*": ["./*"],
-      "lib/*": ["./lib/*"],
-      "components/*": ["./components/*"],
-      "data/*": ["./data/*"]
+      "@/*": [
+        "./*"
+      ],
+      "lib/*": [
+        "./lib/*"
+      ],
+      "components/*": [
+        "./components/*"
+      ],
+      "data/*": [
+        "./data/*"
+      ]
    }
  },
  "include": [
@@ -17,5 +25,11 @@
    "tests/**/*.test.ts",
    ".next/dev/types/**/*.ts"
  ],
-  "exclude": ["node_modules", "scripts", "reference", "data"]
-}
+  "exclude": [
+    "node_modules",
+    "scripts",
+    "reference",
+    "data",
+    "remotion"
+  ]
+}
--- a/types/record-mode.ts
+++ b/types/record-mode.ts
@@ -7,6 +7,7 @@ export interface RecordEvent {
  zoom?: number; // Zoom level during event
  description?: string; // Optional label
  motionBlur?: boolean; // Enable motion blur effect
+  rect?: { x: number; y: number; width: number; height: number }; // Element position for rendering
 }

 export interface RecordingSession {