angular-debug-recorder 1.0.0

package/fesm2022/angular-debug-recorder.mjs

@@ -0,0 +1,1631 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, EventEmitter, Output, Input, Component, inject, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@angular/common/http';
+
+class RecorderService {
+    constructor(zone) {
+        this.zone = zone;
+        this._isRecording = signal(false);
+        this._currentSession = signal(null);
+        this._sessions = signal([]);
+        this._isPaused = signal(false);
+        this.isRecording = computed(() => this._isRecording());
+        this.isPaused = computed(() => this._isPaused());
+        this.currentSession = computed(() => this._currentSession());
+        this.sessions = computed(() => this._sessions());
+        this.actionCount = computed(() => this._currentSession()?.actions.length ?? 0);
+        this.listeners = [];
+        this.lastScrollTime = 0;
+    }
+    startRecording(name, description) {
+        const session = {
+            id: this.generateId(),
+            name: name || `Session ${new Date().toLocaleTimeString()}`,
+            description,
+            startTime: Date.now(),
+            startUrl: window.location.href,
+            actions: [],
+            tags: [],
+        };
+        this._currentSession.set(session);
+        this._isRecording.set(true);
+        this._isPaused.set(false);
+        this.attachListeners();
+        this.recordNavigation('navigation', window.location.href);
+    }
+    stopRecording() {
+        const session = this._currentSession();
+        if (!session)
+            return null;
+        const completed = { ...session, endTime: Date.now() };
+        this._sessions.update(s => [...s, completed]);
+        this._currentSession.set(null);
+        this._isRecording.set(false);
+        this._isPaused.set(false);
+        this.detachListeners();
+        return completed;
+    }
+    pauseRecording() {
+        if (this._isRecording()) {
+            this._isPaused.set(!this._isPaused());
+        }
+    }
+    clearCurrentSession() {
+        this._currentSession.update(s => s ? { ...s, actions: [] } : null);
+    }
+    removeAction(actionId) {
+        this._currentSession.update(s => s ? { ...s, actions: s.actions.filter(a => a.id !== actionId) } : null);
+    }
+    addNote(actionId, note) {
+        this._currentSession.update(s => s ? {
+            ...s,
+            actions: s.actions.map(a => a.id === actionId ? { ...a, note } : a)
+        } : null);
+    }
+    deleteSession(sessionId) {
+        this._sessions.update(s => s.filter(x => x.id !== sessionId));
+    }
+    loadSession(session) {
+        this._currentSession.set(session);
+    }
+    // ─── Event Listeners ──────────────────────────────────────────────────────
+    attachListeners() {
+        const opts = { capture: true, passive: true };
+        const onClick = (e) => this.zone.run(() => this.handleClick(e));
+        const onDblClick = (e) => this.zone.run(() => this.handleDblClick(e));
+        const onInput = (e) => this.zone.run(() => this.handleInput(e));
+        const onChange = (e) => this.zone.run(() => this.handleChange(e));
+        const onSubmit = (e) => this.zone.run(() => this.handleSubmit(e));
+        const onKeydown = (e) => this.zone.run(() => this.handleKeydown(e));
+        const onScroll = (e) => this.zone.run(() => this.handleScroll(e));
+        document.addEventListener('click', onClick, opts);
+        document.addEventListener('dblclick', onDblClick, opts);
+        document.addEventListener('input', onInput, opts);
+        document.addEventListener('change', onChange, opts);
+        document.addEventListener('submit', onSubmit, opts);
+        document.addEventListener('keydown', onKeydown, opts);
+        document.addEventListener('scroll', onScroll, { capture: true, passive: true });
+        this.listeners = [
+            { type: 'click', fn: onClick },
+            { type: 'dblclick', fn: onDblClick },
+            { type: 'input', fn: onInput },
+            { type: 'change', fn: onChange },
+            { type: 'submit', fn: onSubmit },
+            { type: 'keydown', fn: onKeydown },
+            { type: 'scroll', fn: onScroll },
+        ];
+    }
+    detachListeners() {
+        this.listeners.forEach(({ type, fn }) => document.removeEventListener(type, fn, true));
+        this.listeners = [];
+        this.mutationObserver?.disconnect();
+    }
+    // ─── Handlers ─────────────────────────────────────────────────────────────
+    handleClick(e) {
+        if (!this.shouldRecord(e.target))
+            return;
+        const el = e.target;
+        const info = this.getElementInfo(el);
+        const selector = this.buildSelector(el);
+        this.addAction({
+            type: 'click',
+            selector,
+            selectorStrategy: this.getSelectorStrategy(el),
+            element: info,
+            description: `Click on ${this.describeElement(info)}`,
+        });
+    }
+    handleDblClick(e) {
+        if (!this.shouldRecord(e.target))
+            return;
+        const el = e.target;
+        const info = this.getElementInfo(el);
+        const selector = this.buildSelector(el);
+        this.addAction({
+            type: 'dblclick',
+            selector,
+            selectorStrategy: this.getSelectorStrategy(el),
+            element: info,
+            description: `Double-click on ${this.describeElement(info)}`,
+        });
+    }
+    handleInput(e) {
+        if (!this.shouldRecord(e.target))
+            return;
+        const el = e.target;
+        if (['checkbox', 'radio'].includes(el.type))
+            return; // handled by change
+        const info = this.getElementInfo(el);
+        const selector = this.buildSelector(el);
+        this.addAction({
+            type: 'input',
+            selector,
+            selectorStrategy: this.getSelectorStrategy(el),
+            element: info,
+            value: el.value,
+            description: `Type "${el.value}" in ${this.describeElement(info)}`,
+        });
+    }
+    handleChange(e) {
+        if (!this.shouldRecord(e.target))
+            return;
+        const el = e.target;
+        const info = this.getElementInfo(el);
+        const selector = this.buildSelector(el);
+        if (el.tagName === 'SELECT') {
+            this.addAction({
+                type: 'select',
+                selector,
+                selectorStrategy: this.getSelectorStrategy(el),
+                element: info,
+                value: el.value,
+                description: `Select "${el.value}" in ${this.describeElement(info)}`,
+            });
+        }
+        else if (el.type === 'checkbox') {
+            this.addAction({
+                type: 'click',
+                selector,
+                selectorStrategy: this.getSelectorStrategy(el),
+                element: info,
+                value: String(el.checked),
+                description: `${el.checked ? 'Check' : 'Uncheck'} ${this.describeElement(info)}`,
+            });
+        }
+    }
+    handleSubmit(e) {
+        if (!this.shouldRecord(e.target))
+            return;
+        const form = e.target;
+        const info = this.getElementInfo(form);
+        const selector = this.buildSelector(form);
+        this.addAction({
+            type: 'submit',
+            selector,
+            selectorStrategy: this.getSelectorStrategy(form),
+            element: info,
+            description: `Submit form ${info.id ? '#' + info.id : info.name ? info.name : ''}`.trim(),
+        });
+    }
+    handleScroll(e) {
+        if (!this.shouldRecord(e.target))
+            return;
+        const now = Date.now();
+        if (now - this.lastScrollTime < 1000)
+            return; // debounce 1s
+        this.lastScrollTime = now;
+        const el = e.target;
+        const isDoc = !el.tagName || el.tagName === 'HTML';
+        const scrollY = isDoc ? window.scrollY : el.scrollTop;
+        const scrollX = isDoc ? window.scrollX : el.scrollLeft;
+        const selector = el.tagName === 'HTML' || el.tagName === 'BODY'
+            ? 'window'
+            : this.buildSelector(el);
+        this.addAction({
+            type: 'scroll',
+            selector,
+            selectorStrategy: 'combined',
+            value: `${scrollX},${scrollY}`,
+            description: `Scroll to (${scrollX}, ${scrollY})`,
+        });
+    }
+    handleKeydown(e) {
+        const specialKeys = ['Enter', 'Escape', 'Tab', 'F5', 'F12'];
+        if (!specialKeys.includes(e.key))
+            return;
+        if (!this.shouldRecord(e.target))
+            return;
+        const el = e.target;
+        const selector = this.buildSelector(el);
+        this.addAction({
+            type: 'keypress',
+            selector,
+            selectorStrategy: this.getSelectorStrategy(el),
+            value: e.key,
+            description: `Press "${e.key}" on ${el.tagName.toLowerCase()}`,
+        });
+    }
+    recordNavigation(type, navUrl) {
+        const action = {
+            id: this.generateId(),
+            timestamp: Date.now(),
+            url: navUrl,
+            type,
+            selector: 'window',
+            selectorStrategy: 'combined',
+            description: `Navigate to ${navUrl}`,
+        };
+        this._currentSession.update(s => s ? { ...s, actions: [...s.actions, action] } : s);
+    }
+    // ─── Selector Building ────────────────────────────────────────────────────
+    buildSelector(el) {
+        // Priority: data-testid > data-cy > id > name > aria-label > combined
+        const testId = el.getAttribute('data-testid');
+        if (testId)
+            return `[data-testid="${testId}"]`;
+        const cy = el.getAttribute('data-cy');
+        if (cy)
+            return `[data-cy="${cy}"]`;
+        if (el.id && !el.id.includes(':'))
+            return `#${el.id}`;
+        const name = el.getAttribute('name');
+        if (name)
+            return `${el.tagName.toLowerCase()}[name="${name}"]`;
+        const ariaLabel = el.getAttribute('aria-label');
+        if (ariaLabel)
+            return `[aria-label="${ariaLabel}"]`;
+        // Class-based fallback
+        const relevantClasses = Array.from(el.classList)
+            .filter(c => !c.startsWith('ng-') && !c.startsWith('cdk-') && c.length > 0)
+            .slice(0, 3);
+        if (relevantClasses.length > 0) {
+            return `${el.tagName.toLowerCase()}.${relevantClasses.join('.')}`;
+        }
+        // Text content for buttons/links
+        if (['BUTTON', 'A'].includes(el.tagName)) {
+            const text = el.textContent?.trim().slice(0, 30);
+            if (text)
+                return `${el.tagName.toLowerCase()}:contains("${text}")`;
+        }
+        return el.tagName.toLowerCase();
+    }
+    getSelectorStrategy(el) {
+        if (el.getAttribute('data-testid'))
+            return 'data-testid';
+        if (el.getAttribute('data-cy'))
+            return 'data-cy';
+        if (el.id)
+            return 'id';
+        if (el.getAttribute('name'))
+            return 'name';
+        return 'class';
+    }
+    getElementInfo(el) {
+        return {
+            tagName: el.tagName.toLowerCase(),
+            id: el.id || undefined,
+            classes: Array.from(el.classList).filter(c => !c.startsWith('ng-')),
+            dataTestId: el.getAttribute('data-testid') || undefined,
+            dataCy: el.getAttribute('data-cy') || undefined,
+            name: el.getAttribute('name') || undefined,
+            type: el.getAttribute('type') || undefined,
+            placeholder: el.getAttribute('placeholder') || undefined,
+            text: el.textContent?.trim().slice(0, 50) || undefined,
+            href: el.href || undefined,
+            ariaLabel: el.getAttribute('aria-label') || undefined,
+        };
+    }
+    describeElement(info) {
+        if (info.dataTestId)
+            return `[data-testid="${info.dataTestId}"]`;
+        if (info.dataCy)
+            return `[data-cy="${info.dataCy}"]`;
+        if (info.id)
+            return `#${info.id}`;
+        if (info.ariaLabel)
+            return `"${info.ariaLabel}"`;
+        if (info.placeholder)
+            return `"${info.placeholder}" input`;
+        if (info.text)
+            return `"${info.text}"`;
+        return info.tagName;
+    }
+    // ─── Helpers ──────────────────────────────────────────────────────────────
+    shouldRecord(target) {
+        if (!this._isRecording() || this._isPaused())
+            return false;
+        if (!target)
+            return false;
+        // Ignore the debug panel itself
+        if (target.closest('[data-debug-panel]'))
+            return false;
+        return true;
+    }
+    addAction(partial) {
+        const action = {
+            id: this.generateId(),
+            timestamp: Date.now(),
+            url: window.location.href,
+            ...partial,
+        };
+        // Deduplicate consecutive identical inputs (keep only latest value)
+        if (action.type === 'input') {
+            this._currentSession.update(s => {
+                if (!s)
+                    return s;
+                const last = s.actions[s.actions.length - 1];
+                if (last?.type === 'input' && last.selector === action.selector) {
+                    return { ...s, actions: [...s.actions.slice(0, -1), action] };
+                }
+                return { ...s, actions: [...s.actions, action] };
+            });
+            return;
+        }
+        this._currentSession.update(s => s ? { ...s, actions: [...s.actions, action] } : s);
+    }
+    generateId() {
+        return Math.random().toString(36).slice(2, 11);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RecorderService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RecorderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RecorderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+class AiGeneratorService {
+    constructor(http) {
+        this.http = http;
+        this._webhookUrl = signal(localStorage.getItem('debugRecorder_webhookUrl') ?? '');
+        this._isGenerating = signal(false);
+        this._error = signal(null);
+        this._lastTest = signal(null);
+        this.webhookUrl = this._webhookUrl.asReadonly();
+        this.isGenerating = this._isGenerating.asReadonly();
+        this.error = this._error.asReadonly();
+        this.lastTest = this._lastTest.asReadonly();
+    }
+    setWebhookUrl(url) {
+        this._webhookUrl.set(url);
+        localStorage.setItem('debugRecorder_webhookUrl', url);
+    }
+    async generateCypressTest(session) {
+        const url = this._webhookUrl();
+        if (!url)
+            throw new Error('Keine Webhook-URL konfiguriert');
+        this._isGenerating.set(true);
+        this._error.set(null);
+        try {
+            const code = await this.postSession(url, session);
+            const test = {
+                code,
+                generatedAt: Date.now(),
+                model: url,
+                sessionId: session.id,
+            };
+            this._lastTest.set(test);
+            return test;
+        }
+        catch (err) {
+            const msg = err?.error?.message || err?.message || 'Fehler beim Senden';
+            this._error.set(msg);
+            throw err;
+        }
+        finally {
+            this._isGenerating.set(false);
+        }
+    }
+    postSession(url, session) {
+        return new Promise((resolve, reject) => {
+            this.http.post(url, session, { responseType: 'text' }).subscribe({
+                next: (res) => resolve(res),
+                error: reject,
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AiGeneratorService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AiGeneratorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AiGeneratorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class RrwebRecorderService {
+    constructor(zone) {
+        this.zone = zone;
+        this._events = signal([]);
+        this._isRecording = signal(false);
+        this.events = this._events.asReadonly();
+        this.isRecording = this._isRecording.asReadonly();
+    }
+    async startRecording() {
+        // Dynamically import rrweb to avoid SSR issues and reduce initial bundle
+        const { record } = await import('rrweb');
+        this._events.set([]);
+        this._isRecording.set(true);
+        this.stopFn = record({
+            emit: (event) => {
+                this.zone.run(() => {
+                    this._events.update(ev => [...ev, event]);
+                });
+            },
+            // Note: blockSelector is omitted — rrweb 2.0.0-alpha.4 calls node.matches()
+            // on TextNodes/CommentNodes which don't have that method, crashing the recorder.
+            maskTextSelector: 'input[type="password"]',
+            checkoutEveryNth: 200,
+        });
+    }
+    stopRecording() {
+        if (this.stopFn) {
+            this.stopFn();
+            this.stopFn = undefined;
+        }
+        this._isRecording.set(false);
+        return this._events();
+    }
+    getEvents() {
+        return this._events();
+    }
+    clearEvents() {
+        this._events.set([]);
+    }
+    hasEvents() {
+        return this._events().length > 0;
+    }
+    // ─── Replay ──────────────────────────────────────────────────────────────
+    async startReplay(container, events) {
+        const { Replayer } = await import('rrweb');
+        const eventsToReplay = events ?? this._events();
+        if (eventsToReplay.length === 0)
+            return;
+        // Destroy previous replayer
+        this.destroyReplayer();
+        this.replayer = new Replayer(eventsToReplay, {
+            root: container,
+            skipInactive: true,
+            showWarning: false,
+            showDebug: false,
+            blockClass: 'debug-panel',
+        });
+        this.replayer.play();
+    }
+    pauseReplay() {
+        this.replayer?.pause();
+    }
+    resumeReplay() {
+        this.replayer?.play();
+    }
+    destroyReplayer() {
+        if (this.replayer) {
+            try {
+                this.replayer.pause();
+            }
+            catch { }
+            this.replayer = undefined;
+        }
+    }
+    // ─── Export ───────────────────────────────────────────────────────────────
+    exportEvents() {
+        return JSON.stringify(this._events(), null, 2);
+    }
+    downloadEvents(filename = 'rrweb-session.json') {
+        const blob = new Blob([this.exportEvents()], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    importEvents(json) {
+        try {
+            const events = JSON.parse(json);
+            this._events.set(events);
+            return events;
+        }
+        catch {
+            console.error('Invalid rrweb events JSON');
+            return [];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RrwebRecorderService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RrwebRecorderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RrwebRecorderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+class ActionListComponent {
+    constructor() {
+        this.session = null;
+        this.removeAction = new EventEmitter();
+        this.addNote = new EventEmitter();
+        this.expandedId = signal(null);
+        this.noteMap = {};
+    }
+    toggleExpand(id) {
+        this.expandedId.update(v => v === id ? null : id);
+    }
+    onRemove(id, e) {
+        e.stopPropagation();
+        this.removeAction.emit(id);
+    }
+    onAddNote(id) {
+        this.addNote.emit({ id, note: this.noteMap[id] ?? '' });
+    }
+    getActionIcon(type) {
+        const icons = {
+            click: '👆',
+            dblclick: '👆👆',
+            input: '⌨️',
+            select: '📋',
+            submit: '📤',
+            navigation: '🔗',
+            keypress: '⌨️',
+            scroll: '↕️',
+            hover: '🖱️',
+            assertion: '✅',
+            screenshot: '📸',
+        };
+        return icons[type] ?? '•';
+    }
+    formatTime(ts) {
+        return new Date(ts).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    }
+    formatDuration(start, end) {
+        const s = Math.round((end - start) / 1000);
+        return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ActionListComponent, isStandalone: true, selector: "app-action-list", inputs: { session: "session" }, outputs: { removeAction: "removeAction", addNote: "addNote" }, ngImport: i0, template: `
+    <div class="action-list" data-debug-panel>
+      @if (!session || session.actions.length === 0) {
+        <div class="empty-state">
+          <div class="empty-icon">🎬</div>
+          <p>Noch keine Aktionen aufgezeichnet.</p>
+          <p class="hint">Starte die Aufnahme und interagiere mit der App.</p>
+          <div class="shortcuts-hint">
+            <kbd>Ctrl+Shift+D</kbd> Panel &nbsp;
+            <kbd>Ctrl+Shift+R</kbd> Record
+          </div>
+        </div>
+      } @else {
+        <div class="list-header">
+          <span class="list-count">{{ session.actions.length }} Aktionen</span>
+          <span class="list-duration">
+            @if (session.endTime) {
+              {{ formatDuration(session.startTime, session.endTime) }}
+            } @else {
+              Live
+            }
+          </span>
+        </div>
+
+        @for (action of session.actions; track action.id; let i = $index) {
+          <div class="action-item" [class.expanded]="expandedId() === action.id">
+            <div class="action-row" (click)="toggleExpand(action.id)">
+              <span class="action-index">{{ i + 1 }}</span>
+              <span class="action-type-badge" [class]="'type-' + action.type">
+                {{ getActionIcon(action.type) }}
+              </span>
+              <div class="action-info">
+                <span class="action-desc">{{ action.description }}</span>
+                <span class="action-selector">{{ action.selector }}</span>
+              </div>
+              <span class="action-time">{{ formatTime(action.timestamp) }}</span>
+              <button
+                class="remove-btn"
+                data-debug-panel
+                title="Aktion entfernen"
+                (click)="onRemove(action.id, $event)"
+              >✕</button>
+            </div>
+
+            @if (expandedId() === action.id) {
+              <div class="action-detail" data-debug-panel>
+                <div class="detail-grid">
+                  <span class="detail-label">Selector</span>
+                  <code class="detail-value">{{ action.selector }}</code>
+                  @if (action.value) {
+                    <span class="detail-label">Wert</span>
+                    <code class="detail-value">{{ action.value }}</code>
+                  }
+                  @if (action.element?.tagName) {
+                    <span class="detail-label">Element</span>
+                    <code class="detail-value">&lt;{{ action.element?.tagName }}&gt;</code>
+                  }
+                  <span class="detail-label">Strategie</span>
+                  <span class="detail-value strategy-badge" [class]="'strat-' + action.selectorStrategy">
+                    {{ action.selectorStrategy }}
+                  </span>
+                  <span class="detail-label">URL</span>
+                  <code class="detail-value url-val">{{ action.url }}</code>
+                </div>
+                <div class="note-area">
+                  <textarea
+                    data-debug-panel
+                    class="note-input"
+                    [(ngModel)]="noteMap[action.id]"
+                    placeholder="Notiz zu dieser Aktion..."
+                    rows="2"
+                    (blur)="onAddNote(action.id)"
+                  ></textarea>
+                </div>
+              </div>
+            }
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".action-list{padding:0}.empty-state{text-align:center;padding:32px 20px;color:#64748b}.empty-icon{font-size:40px;margin-bottom:10px}.empty-state p{margin:4px 0;font-size:13px}.hint{font-size:11px;color:#475569}.shortcuts-hint{margin-top:12px;font-size:11px;color:#475569}kbd{background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:2px 6px;border-radius:4px;font-size:10px}.list-header{display:flex;justify-content:space-between;padding:8px 14px;font-size:11px;color:#64748b;background:#0f172a;border-bottom:1px solid #1e293b;position:sticky;top:0}.action-item{border-bottom:1px solid #1e293b;transition:background .1s}.action-item:hover{background:#1e293b80}.action-item.expanded{background:#1e293b}.action-row{display:flex;align-items:center;padding:8px 10px;gap:8px;cursor:pointer}.action-index{color:#475569;font-size:10px;min-width:18px;text-align:right}.action-type-badge{font-size:14px;min-width:20px;text-align:center}.action-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.action-desc{font-size:12px;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-selector{font-size:10px;color:#64748b;font-family:Cascadia Code,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-time{font-size:10px;color:#475569;white-space:nowrap}.remove-btn{background:none;border:none;color:#475569;cursor:pointer;font-size:12px;padding:2px 5px;border-radius:3px;opacity:0;transition:opacity .15s,color .15s}.action-row:hover .remove-btn{opacity:1}.remove-btn:hover{color:#f87171}.action-detail{padding:10px 14px;background:#0f172ab3;border-top:1px solid #1e293b}.detail-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin-bottom:8px;align-items:start}.detail-label{font-size:10px;color:#64748b;padding-top:2px;white-space:nowrap}.detail-value{font-size:11px;color:#93c5fd;font-family:Cascadia Code,Consolas,monospace;word-break:break-all}.url-val{color:#6ee7b7}.strategy-badge{font-size:10px;padding:1px 6px;border-radius:3px;font-family:monospace}.strat-data-testid,.strat-data-cy{background:#064e3b;color:#34d399}.strat-id{background:#1e3a8a;color:#93c5fd}.strat-name{background:#44337a;color:#c4b5fd}.strat-class{background:#374151;color:#9ca3af}.strat-combined{background:#292524;color:#d6d3d1}.note-area{margin-top:6px}.note-input{width:100%;box-sizing:border-box;background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:5px;padding:6px 8px;font-size:11px;resize:vertical}.note-input:focus{outline:none;border-color:#3b82f6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-action-list', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div class="action-list" data-debug-panel>
+      @if (!session || session.actions.length === 0) {
+        <div class="empty-state">
+          <div class="empty-icon">🎬</div>
+          <p>Noch keine Aktionen aufgezeichnet.</p>
+          <p class="hint">Starte die Aufnahme und interagiere mit der App.</p>
+          <div class="shortcuts-hint">
+            <kbd>Ctrl+Shift+D</kbd> Panel &nbsp;
+            <kbd>Ctrl+Shift+R</kbd> Record
+          </div>
+        </div>
+      } @else {
+        <div class="list-header">
+          <span class="list-count">{{ session.actions.length }} Aktionen</span>
+          <span class="list-duration">
+            @if (session.endTime) {
+              {{ formatDuration(session.startTime, session.endTime) }}
+            } @else {
+              Live
+            }
+          </span>
+        </div>
+
+        @for (action of session.actions; track action.id; let i = $index) {
+          <div class="action-item" [class.expanded]="expandedId() === action.id">
+            <div class="action-row" (click)="toggleExpand(action.id)">
+              <span class="action-index">{{ i + 1 }}</span>
+              <span class="action-type-badge" [class]="'type-' + action.type">
+                {{ getActionIcon(action.type) }}
+              </span>
+              <div class="action-info">
+                <span class="action-desc">{{ action.description }}</span>
+                <span class="action-selector">{{ action.selector }}</span>
+              </div>
+              <span class="action-time">{{ formatTime(action.timestamp) }}</span>
+              <button
+                class="remove-btn"
+                data-debug-panel
+                title="Aktion entfernen"
+                (click)="onRemove(action.id, $event)"
+              >✕</button>
+            </div>
+
+            @if (expandedId() === action.id) {
+              <div class="action-detail" data-debug-panel>
+                <div class="detail-grid">
+                  <span class="detail-label">Selector</span>
+                  <code class="detail-value">{{ action.selector }}</code>
+                  @if (action.value) {
+                    <span class="detail-label">Wert</span>
+                    <code class="detail-value">{{ action.value }}</code>
+                  }
+                  @if (action.element?.tagName) {
+                    <span class="detail-label">Element</span>
+                    <code class="detail-value">&lt;{{ action.element?.tagName }}&gt;</code>
+                  }
+                  <span class="detail-label">Strategie</span>
+                  <span class="detail-value strategy-badge" [class]="'strat-' + action.selectorStrategy">
+                    {{ action.selectorStrategy }}
+                  </span>
+                  <span class="detail-label">URL</span>
+                  <code class="detail-value url-val">{{ action.url }}</code>
+                </div>
+                <div class="note-area">
+                  <textarea
+                    data-debug-panel
+                    class="note-input"
+                    [(ngModel)]="noteMap[action.id]"
+                    placeholder="Notiz zu dieser Aktion..."
+                    rows="2"
+                    (blur)="onAddNote(action.id)"
+                  ></textarea>
+                </div>
+              </div>
+            }
+          </div>
+        }
+      }
+    </div>
+  `, styles: [".action-list{padding:0}.empty-state{text-align:center;padding:32px 20px;color:#64748b}.empty-icon{font-size:40px;margin-bottom:10px}.empty-state p{margin:4px 0;font-size:13px}.hint{font-size:11px;color:#475569}.shortcuts-hint{margin-top:12px;font-size:11px;color:#475569}kbd{background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:2px 6px;border-radius:4px;font-size:10px}.list-header{display:flex;justify-content:space-between;padding:8px 14px;font-size:11px;color:#64748b;background:#0f172a;border-bottom:1px solid #1e293b;position:sticky;top:0}.action-item{border-bottom:1px solid #1e293b;transition:background .1s}.action-item:hover{background:#1e293b80}.action-item.expanded{background:#1e293b}.action-row{display:flex;align-items:center;padding:8px 10px;gap:8px;cursor:pointer}.action-index{color:#475569;font-size:10px;min-width:18px;text-align:right}.action-type-badge{font-size:14px;min-width:20px;text-align:center}.action-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.action-desc{font-size:12px;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-selector{font-size:10px;color:#64748b;font-family:Cascadia Code,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-time{font-size:10px;color:#475569;white-space:nowrap}.remove-btn{background:none;border:none;color:#475569;cursor:pointer;font-size:12px;padding:2px 5px;border-radius:3px;opacity:0;transition:opacity .15s,color .15s}.action-row:hover .remove-btn{opacity:1}.remove-btn:hover{color:#f87171}.action-detail{padding:10px 14px;background:#0f172ab3;border-top:1px solid #1e293b}.detail-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin-bottom:8px;align-items:start}.detail-label{font-size:10px;color:#64748b;padding-top:2px;white-space:nowrap}.detail-value{font-size:11px;color:#93c5fd;font-family:Cascadia Code,Consolas,monospace;word-break:break-all}.url-val{color:#6ee7b7}.strategy-badge{font-size:10px;padding:1px 6px;border-radius:3px;font-family:monospace}.strat-data-testid,.strat-data-cy{background:#064e3b;color:#34d399}.strat-id{background:#1e3a8a;color:#93c5fd}.strat-name{background:#44337a;color:#c4b5fd}.strat-class{background:#374151;color:#9ca3af}.strat-combined{background:#292524;color:#d6d3d1}.note-area{margin-top:6px}.note-input{width:100%;box-sizing:border-box;background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:5px;padding:6px 8px;font-size:11px;resize:vertical}.note-input:focus{outline:none;border-color:#3b82f6}\n"] }]
+        }], propDecorators: { session: [{
+                type: Input
+            }], removeAction: [{
+                type: Output
+            }], addNote: [{
+                type: Output
+            }] } });
+
+class TestPreviewComponent {
+    constructor() {
+        this.test = null;
+        this.copied = signal(false);
+        this.highlightedCode = computed(() => {
+            if (!this.test)
+                return '';
+            return this.syntaxHighlight(this.test.code);
+        });
+    }
+    syntaxHighlight(code) {
+        return code
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            // Comments
+            .replace(/(\/\/[^\n]*)/g, '<span class="cm">$1</span>')
+            // cy. commands
+            .replace(/\b(cy)\b/g, '<span class="cy">$1</span>')
+            // Keywords
+            .replace(/\b(describe|it|beforeEach|afterEach|before|after|context|specify|const|let|var|function|return|import|export|from|async|await|new)\b/g, '<span class="kw">$1</span>')
+            // Strings
+            .replace(/('[^']*'|"[^"]*"|`[^`]*`)/g, '<span class="str">$1</span>')
+            // Numbers
+            .replace(/\b(\d+)\b/g, '<span class="num">$1</span>');
+    }
+    async copyCode() {
+        if (!this.test)
+            return;
+        await navigator.clipboard.writeText(this.test.code);
+        this.copied.set(true);
+        setTimeout(() => this.copied.set(false), 2000);
+    }
+    downloadCode() {
+        if (!this.test)
+            return;
+        const blob = new Blob([this.test.code], { type: 'text/typescript' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `cypress-test-${new Date().toISOString().slice(0, 10)}.cy.ts`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    formatDate(ts) {
+        return new Date(ts).toLocaleString('de-DE', {
+            day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TestPreviewComponent, isStandalone: true, selector: "app-test-preview", inputs: { test: "test" }, ngImport: i0, template: `
+    <div class="test-preview" data-debug-panel>
+      @if (!test) {
+        <div class="empty-state">
+          <div class="empty-icon">🤖</div>
+          <p>Noch kein Test generiert.</p>
+          <p class="hint">Zeichne Aktionen auf und klicke „🤖 → Cypress Test".</p>
+        </div>
+      } @else {
+        <div class="test-toolbar" data-debug-panel>
+          <div class="test-meta">
+            <span class="model-tag">{{ test.model }}</span>
+            <span class="gen-time">{{ formatDate(test.generatedAt) }}</span>
+          </div>
+          <div class="test-actions">
+            <button class="action-btn" title="Kopieren" (click)="copyCode()">
+              {{ copied() ? '✅ Kopiert!' : '📋 Kopieren' }}
+            </button>
+            <button class="action-btn" title="Herunterladen" (click)="downloadCode()">
+              💾 Download
+            </button>
+          </div>
+        </div>
+
+        <div class="code-container">
+          <pre class="code-block"><code [innerHTML]="highlightedCode()"></code></pre>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".test-preview{height:100%;display:flex;flex-direction:column}.empty-state{text-align:center;padding:32px 20px;color:#64748b}.empty-icon{font-size:40px;margin-bottom:10px}.empty-state p{margin:4px 0;font-size:13px}.hint{font-size:11px;color:#475569}.test-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#1e293b;border-bottom:1px solid #334155;flex-shrink:0;gap:8px}.test-meta{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.model-tag{background:#312e81;color:#a5b4fc;font-size:10px;padding:2px 7px;border-radius:4px;font-weight:600;white-space:nowrap}.gen-time{font-size:10px;color:#64748b;white-space:nowrap}.test-actions{display:flex;gap:6px;flex-shrink:0}.action-btn{background:#334155;border:none;color:#cbd5e1;padding:4px 10px;border-radius:5px;font-size:11px;cursor:pointer;white-space:nowrap;transition:background .15s}.action-btn:hover{background:#475569}.code-container{flex:1;overflow:auto}.code-container::-webkit-scrollbar{width:5px;height:5px}.code-container::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}.code-block{margin:0;padding:14px;font-family:Cascadia Code,Consolas,Fira Code,monospace;font-size:11px;line-height:1.7;color:#e2e8f0;white-space:pre;tab-size:2}:global(.kw){color:#c084fc}:global(.str){color:#86efac}:global(.fn){color:#67e8f9}:global(.cm){color:#64748b;font-style:italic}:global(.num){color:#fb923c}:global(.cy){color:#fbbf24;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-test-preview', standalone: true, imports: [CommonModule], template: `
+    <div class="test-preview" data-debug-panel>
+      @if (!test) {
+        <div class="empty-state">
+          <div class="empty-icon">🤖</div>
+          <p>Noch kein Test generiert.</p>
+          <p class="hint">Zeichne Aktionen auf und klicke „🤖 → Cypress Test".</p>
+        </div>
+      } @else {
+        <div class="test-toolbar" data-debug-panel>
+          <div class="test-meta">
+            <span class="model-tag">{{ test.model }}</span>
+            <span class="gen-time">{{ formatDate(test.generatedAt) }}</span>
+          </div>
+          <div class="test-actions">
+            <button class="action-btn" title="Kopieren" (click)="copyCode()">
+              {{ copied() ? '✅ Kopiert!' : '📋 Kopieren' }}
+            </button>
+            <button class="action-btn" title="Herunterladen" (click)="downloadCode()">
+              💾 Download
+            </button>
+          </div>
+        </div>
+
+        <div class="code-container">
+          <pre class="code-block"><code [innerHTML]="highlightedCode()"></code></pre>
+        </div>
+      }
+    </div>
+  `, styles: [".test-preview{height:100%;display:flex;flex-direction:column}.empty-state{text-align:center;padding:32px 20px;color:#64748b}.empty-icon{font-size:40px;margin-bottom:10px}.empty-state p{margin:4px 0;font-size:13px}.hint{font-size:11px;color:#475569}.test-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#1e293b;border-bottom:1px solid #334155;flex-shrink:0;gap:8px}.test-meta{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.model-tag{background:#312e81;color:#a5b4fc;font-size:10px;padding:2px 7px;border-radius:4px;font-weight:600;white-space:nowrap}.gen-time{font-size:10px;color:#64748b;white-space:nowrap}.test-actions{display:flex;gap:6px;flex-shrink:0}.action-btn{background:#334155;border:none;color:#cbd5e1;padding:4px 10px;border-radius:5px;font-size:11px;cursor:pointer;white-space:nowrap;transition:background .15s}.action-btn:hover{background:#475569}.code-container{flex:1;overflow:auto}.code-container::-webkit-scrollbar{width:5px;height:5px}.code-container::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}.code-block{margin:0;padding:14px;font-family:Cascadia Code,Consolas,Fira Code,monospace;font-size:11px;line-height:1.7;color:#e2e8f0;white-space:pre;tab-size:2}:global(.kw){color:#c084fc}:global(.str){color:#86efac}:global(.fn){color:#67e8f9}:global(.cm){color:#64748b;font-style:italic}:global(.num){color:#fb923c}:global(.cy){color:#fbbf24;font-weight:600}\n"] }]
+        }], propDecorators: { test: [{
+                type: Input
+            }] } });
+
+class SettingsDialogComponent {
+    constructor() {
+        this.close = new EventEmitter();
+        this.ai = inject(AiGeneratorService);
+        this.localUrl = this.ai.webhookUrl();
+    }
+    save() {
+        this.ai.setWebhookUrl(this.localUrl.trim());
+        this.close.emit();
+    }
+    onOverlayClick(e) {
+        if (e.target.classList.contains('overlay')) {
+            this.close.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SettingsDialogComponent, isStandalone: true, selector: "app-settings-dialog", outputs: { close: "close" }, ngImport: i0, template: `
+    <div class="overlay" data-debug-panel (click)="onOverlayClick($event)">
+      <div class="dialog" data-debug-panel>
+        <div class="dialog-header">
+          <h2>⚙️ Einstellungen</h2>
+          <button class="close-btn" (click)="close.emit()">✕</button>
+        </div>
+
+        <div class="dialog-body">
+          <div class="field-group">
+            <label>KI Webhook-URL</label>
+            <input
+              data-debug-panel
+              class="field-input"
+              type="url"
+              [(ngModel)]="localUrl"
+              placeholder="https://deine-ki-api.de/generate"
+            />
+            <p class="field-hint">
+              Die aufgezeichnete Session wird als JSON per POST an diese URL gesendet.
+              Die Antwort wird als Cypress-Test angezeigt.
+            </p>
+          </div>
+
+          <div class="info-box">
+            <p>📦 POST-Body: Die Session als JSON (<code>actions</code>, <code>startUrl</code>, ...)</p>
+            <p>📄 Erwartete Antwort: Cypress-Test-Code als Plain-Text</p>
+            <p>⌨️ Shortcuts: <kbd>Ctrl+Shift+D</kbd> Panel &nbsp; <kbd>Ctrl+Shift+R</kbd> Aufnahme</p>
+          </div>
+        </div>
+
+        <div class="dialog-footer">
+          <button class="btn-cancel" (click)="close.emit()">Abbrechen</button>
+          <button class="btn-save" (click)="save()">💾 Speichern</button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".overlay{position:fixed;inset:0;background:#000000b3;z-index:100000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog{background:#0f172a;border:1px solid #1e3a5f;border-radius:12px;width:440px;max-width:95vw;display:flex;flex-direction:column;box-shadow:0 25px 60px #0009;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#1e293b;border-bottom:1px solid #334155}.dialog-header h2{margin:0;font-size:15px;color:#f1f5f9;font-weight:600}.close-btn{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:16px;padding:4px;border-radius:4px}.close-btn:hover{color:#f1f5f9;background:#334155}.dialog-body{padding:18px;display:flex;flex-direction:column;gap:16px}.field-group{display:flex;flex-direction:column;gap:6px}label{font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.field-input{background:#1e293b;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:10px 12px;font-size:13px;width:100%;box-sizing:border-box}.field-input:focus{outline:none;border-color:#3b82f6}.field-hint{font-size:11px;color:#64748b;margin:0;line-height:1.5}.info-box{background:#1e293b80;border:1px solid #1e3a5f;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px}.info-box p{margin:0;font-size:11px;color:#64748b}.info-box code{background:#1e293b;color:#34d399;padding:1px 4px;border-radius:3px;font-family:monospace}kbd{background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:1px 5px;border-radius:3px;font-size:10px}.dialog-footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;background:#1e293b;border-top:1px solid #334155}.btn-cancel,.btn-save{padding:8px 20px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:filter .15s}.btn-cancel{background:#334155;color:#94a3b8}.btn-cancel:hover{filter:brightness(1.2)}.btn-save{background:#2563eb;color:#fff}.btn-save:hover{filter:brightness(1.1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettingsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-settings-dialog', standalone: true, imports: [CommonModule, FormsModule], template: `
+    <div class="overlay" data-debug-panel (click)="onOverlayClick($event)">
+      <div class="dialog" data-debug-panel>
+        <div class="dialog-header">
+          <h2>⚙️ Einstellungen</h2>
+          <button class="close-btn" (click)="close.emit()">✕</button>
+        </div>
+
+        <div class="dialog-body">
+          <div class="field-group">
+            <label>KI Webhook-URL</label>
+            <input
+              data-debug-panel
+              class="field-input"
+              type="url"
+              [(ngModel)]="localUrl"
+              placeholder="https://deine-ki-api.de/generate"
+            />
+            <p class="field-hint">
+              Die aufgezeichnete Session wird als JSON per POST an diese URL gesendet.
+              Die Antwort wird als Cypress-Test angezeigt.
+            </p>
+          </div>
+
+          <div class="info-box">
+            <p>📦 POST-Body: Die Session als JSON (<code>actions</code>, <code>startUrl</code>, ...)</p>
+            <p>📄 Erwartete Antwort: Cypress-Test-Code als Plain-Text</p>
+            <p>⌨️ Shortcuts: <kbd>Ctrl+Shift+D</kbd> Panel &nbsp; <kbd>Ctrl+Shift+R</kbd> Aufnahme</p>
+          </div>
+        </div>
+
+        <div class="dialog-footer">
+          <button class="btn-cancel" (click)="close.emit()">Abbrechen</button>
+          <button class="btn-save" (click)="save()">💾 Speichern</button>
+        </div>
+      </div>
+    </div>
+  `, styles: [".overlay{position:fixed;inset:0;background:#000000b3;z-index:100000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog{background:#0f172a;border:1px solid #1e3a5f;border-radius:12px;width:440px;max-width:95vw;display:flex;flex-direction:column;box-shadow:0 25px 60px #0009;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#1e293b;border-bottom:1px solid #334155}.dialog-header h2{margin:0;font-size:15px;color:#f1f5f9;font-weight:600}.close-btn{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:16px;padding:4px;border-radius:4px}.close-btn:hover{color:#f1f5f9;background:#334155}.dialog-body{padding:18px;display:flex;flex-direction:column;gap:16px}.field-group{display:flex;flex-direction:column;gap:6px}label{font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.field-input{background:#1e293b;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:10px 12px;font-size:13px;width:100%;box-sizing:border-box}.field-input:focus{outline:none;border-color:#3b82f6}.field-hint{font-size:11px;color:#64748b;margin:0;line-height:1.5}.info-box{background:#1e293b80;border:1px solid #1e3a5f;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px}.info-box p{margin:0;font-size:11px;color:#64748b}.info-box code{background:#1e293b;color:#34d399;padding:1px 4px;border-radius:3px;font-family:monospace}kbd{background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:1px 5px;border-radius:3px;font-size:10px}.dialog-footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;background:#1e293b;border-top:1px solid #334155}.btn-cancel,.btn-save{padding:8px 20px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:filter .15s}.btn-cancel{background:#334155;color:#94a3b8}.btn-cancel:hover{filter:brightness(1.2)}.btn-save{background:#2563eb;color:#fff}.btn-save:hover{filter:brightness(1.1)}\n"] }]
+        }], propDecorators: { close: [{
+                type: Output
+            }] } });
+
+class SessionReplayComponent {
+    constructor() {
+        this.rrweb = inject(RrwebRecorderService);
+        this.overlayOpen = signal(false);
+        this.isPlaying = signal(false);
+    }
+    async openOverlay() {
+        this.overlayOpen.set(true);
+        this.isPlaying.set(false);
+        // Wait for the DOM to render the overlay
+        await new Promise(r => setTimeout(r, 50));
+        await this.startPlay();
+    }
+    closeOverlay() {
+        this.rrweb.destroyReplayer();
+        this.overlayOpen.set(false);
+        this.isPlaying.set(false);
+    }
+    async pauseResume() {
+        if (this.isPlaying()) {
+            this.rrweb.pauseReplay();
+            this.isPlaying.set(false);
+        }
+        else {
+            this.rrweb.resumeReplay();
+            this.isPlaying.set(true);
+        }
+    }
+    async restart() {
+        this.rrweb.destroyReplayer();
+        await new Promise(r => setTimeout(r, 50));
+        await this.startPlay();
+    }
+    exportSession() {
+        this.rrweb.downloadEvents();
+    }
+    async startPlay() {
+        if (!this.replayContainer)
+            return;
+        const container = this.replayContainer.nativeElement;
+        await this.rrweb.startReplay(container);
+        // Scale iframe to fill the stage container
+        this.scaleReplayer(container);
+        this.isPlaying.set(true);
+    }
+    scaleReplayer(container) {
+        // rrweb injects .replayer-wrapper with an iframe sized to the recorded viewport
+        setTimeout(() => {
+            const wrapper = container.querySelector('.replayer-wrapper');
+            if (!wrapper)
+                return;
+            const iframe = wrapper.querySelector('iframe');
+            const wrapW = iframe?.offsetWidth || wrapper.offsetWidth || 1280;
+            const wrapH = iframe?.offsetHeight || wrapper.offsetHeight || 720;
+            const stageW = container.offsetWidth;
+            const stageH = container.offsetHeight;
+            if (!stageW || !stageH || !wrapW || !wrapH)
+                return;
+            const scale = Math.min(stageW / wrapW, stageH / wrapH);
+            const offsetX = (stageW - wrapW * scale) / 2;
+            const offsetY = (stageH - wrapH * scale) / 2;
+            wrapper.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+        }, 300);
+    }
+    ngOnDestroy() {
+        this.rrweb.destroyReplayer();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SessionReplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SessionReplayComponent, isStandalone: true, selector: "app-session-replay", viewQueries: [{ propertyName: "replayContainer", first: true, predicate: ["replayContainer"], descendants: true }], ngImport: i0, template: `
+    <div class="replay-panel" data-debug-panel>
+      @if (!rrweb.hasEvents()) {
+        <div class="replay-empty">
+          <div class="replay-icon">📽️</div>
+          <p>Kein Replay verfügbar.</p>
+          <p class="hint">Starte eine Aufnahme — rrweb zeichnet den DOM parallel mit.</p>
+        </div>
+      } @else {
+        <div class="replay-info">
+          <span class="event-count">{{ rrweb.events().length }} Events aufgezeichnet</span>
+        </div>
+        <div class="replay-actions">
+          <button class="replay-btn primary" (click)="openOverlay()">
+            ▶ Replay abspielen
+          </button>
+          <button class="replay-btn" (click)="exportSession()">
+            💾 JSON exportieren
+          </button>
+        </div>
+        <p class="replay-hint">
+          Der Replay öffnet sich als Vollbild-Overlay über der aktuellen Seite.
+        </p>
+      }
+    </div>
+
+    <!-- Fullscreen Replay Overlay -->
+    @if (overlayOpen()) {
+      <div class="replay-overlay" data-debug-panel>
+        <div class="overlay-header" data-debug-panel>
+          <span class="overlay-title">📽️ Session Replay</span>
+          <div class="overlay-controls" data-debug-panel>
+            <button class="ovl-btn" (click)="pauseResume()">
+              {{ isPlaying() ? '⏸ Pause' : '▶ Play' }}
+            </button>
+            <button class="ovl-btn" (click)="restart()">⟳ Neustart</button>
+            <button class="ovl-btn close-ovl" (click)="closeOverlay()">✕ Schließen</button>
+          </div>
+        </div>
+        <div #replayContainer class="overlay-stage" data-debug-panel></div>
+      </div>
+    }
+  `, isInline: true, styles: [".replay-panel{padding:20px 16px;display:flex;flex-direction:column;gap:14px}.replay-empty{text-align:center;padding:20px 0;color:#64748b}.replay-icon{font-size:36px;margin-bottom:8px}.replay-empty p{margin:4px 0;font-size:13px}.hint{font-size:11px;color:#475569}.replay-info{background:#1e293b;border-radius:6px;padding:8px 12px}.event-count{font-size:12px;color:#6ee7b7;font-weight:600}.replay-actions{display:flex;gap:8px}.replay-btn{background:#334155;border:none;color:#cbd5e1;padding:8px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}.replay-btn:hover{background:#475569}.replay-btn.primary{background:#1d4ed8;color:#fff}.replay-btn.primary:hover{background:#2563eb}.replay-hint{font-size:11px;color:#475569;margin:0}.replay-overlay{position:fixed;inset:0;z-index:99997;background:#000;display:flex;flex-direction:column}.overlay-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0f172a;border-bottom:1px solid #1e293b;flex-shrink:0}.overlay-title{font-size:14px;font-weight:600;color:#f1f5f9}.overlay-controls{display:flex;gap:8px}.ovl-btn{background:#1e293b;border:1px solid #334155;color:#cbd5e1;padding:5px 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}.ovl-btn:hover{background:#334155}.close-ovl{color:#fca5a5}.close-ovl:hover{background:#dc262633}.overlay-stage{flex:1;overflow:hidden;position:relative;background:#f8fafc}:host ::ng-deep .replayer-wrapper{position:absolute!important;top:0!important;left:0!important;transform-origin:top left!important}:host ::ng-deep .replayer-wrapper iframe{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SessionReplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-session-replay', standalone: true, imports: [CommonModule], template: `
+    <div class="replay-panel" data-debug-panel>
+      @if (!rrweb.hasEvents()) {
+        <div class="replay-empty">
+          <div class="replay-icon">📽️</div>
+          <p>Kein Replay verfügbar.</p>
+          <p class="hint">Starte eine Aufnahme — rrweb zeichnet den DOM parallel mit.</p>
+        </div>
+      } @else {
+        <div class="replay-info">
+          <span class="event-count">{{ rrweb.events().length }} Events aufgezeichnet</span>
+        </div>
+        <div class="replay-actions">
+          <button class="replay-btn primary" (click)="openOverlay()">
+            ▶ Replay abspielen
+          </button>
+          <button class="replay-btn" (click)="exportSession()">
+            💾 JSON exportieren
+          </button>
+        </div>
+        <p class="replay-hint">
+          Der Replay öffnet sich als Vollbild-Overlay über der aktuellen Seite.
+        </p>
+      }
+    </div>
+
+    <!-- Fullscreen Replay Overlay -->
+    @if (overlayOpen()) {
+      <div class="replay-overlay" data-debug-panel>
+        <div class="overlay-header" data-debug-panel>
+          <span class="overlay-title">📽️ Session Replay</span>
+          <div class="overlay-controls" data-debug-panel>
+            <button class="ovl-btn" (click)="pauseResume()">
+              {{ isPlaying() ? '⏸ Pause' : '▶ Play' }}
+            </button>
+            <button class="ovl-btn" (click)="restart()">⟳ Neustart</button>
+            <button class="ovl-btn close-ovl" (click)="closeOverlay()">✕ Schließen</button>
+          </div>
+        </div>
+        <div #replayContainer class="overlay-stage" data-debug-panel></div>
+      </div>
+    }
+  `, styles: [".replay-panel{padding:20px 16px;display:flex;flex-direction:column;gap:14px}.replay-empty{text-align:center;padding:20px 0;color:#64748b}.replay-icon{font-size:36px;margin-bottom:8px}.replay-empty p{margin:4px 0;font-size:13px}.hint{font-size:11px;color:#475569}.replay-info{background:#1e293b;border-radius:6px;padding:8px 12px}.event-count{font-size:12px;color:#6ee7b7;font-weight:600}.replay-actions{display:flex;gap:8px}.replay-btn{background:#334155;border:none;color:#cbd5e1;padding:8px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}.replay-btn:hover{background:#475569}.replay-btn.primary{background:#1d4ed8;color:#fff}.replay-btn.primary:hover{background:#2563eb}.replay-hint{font-size:11px;color:#475569;margin:0}.replay-overlay{position:fixed;inset:0;z-index:99997;background:#000;display:flex;flex-direction:column}.overlay-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0f172a;border-bottom:1px solid #1e293b;flex-shrink:0}.overlay-title{font-size:14px;font-weight:600;color:#f1f5f9}.overlay-controls{display:flex;gap:8px}.ovl-btn{background:#1e293b;border:1px solid #334155;color:#cbd5e1;padding:5px 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}.ovl-btn:hover{background:#334155}.close-ovl{color:#fca5a5}.close-ovl:hover{background:#dc262633}.overlay-stage{flex:1;overflow:hidden;position:relative;background:#f8fafc}:host ::ng-deep .replayer-wrapper{position:absolute!important;top:0!important;left:0!important;transform-origin:top left!important}:host ::ng-deep .replayer-wrapper iframe{pointer-events:none}\n"] }]
+        }], propDecorators: { replayContainer: [{
+                type: ViewChild,
+                args: ['replayContainer']
+            }] } });
+
+class DebugPanelComponent {
+    constructor() {
+        this.recorder = inject(RecorderService);
+        this.aiService = inject(AiGeneratorService);
+        this.rrweb = inject(RrwebRecorderService);
+        this.panelOpen = signal(false);
+        this.activeTab = signal('actions');
+        this.position = signal('bottom-right');
+        this.panelWidth = signal(420);
+        this.showSettings = signal(false);
+        this.sessionName = '';
+        this.sessionDesc = '';
+        this.hasActions = computed(() => (this.recorder.currentSession()?.actions.length ?? 0) > 0 ||
+            (this.recorder.sessions().length > 0));
+        this.resizing = false;
+        this.resizeStartY = 0;
+        this.resizeStartH = 0;
+        this.handleHotkey = (e) => {
+            if (e.ctrlKey && e.shiftKey && e.key === 'D') {
+                e.preventDefault();
+                this.togglePanel();
+            }
+            if (e.ctrlKey && e.shiftKey && e.key === 'R') {
+                e.preventDefault();
+                if (this.recorder.isRecording()) {
+                    this.stopRecording();
+                }
+                else {
+                    this.startRecording();
+                }
+            }
+        };
+    }
+    ngOnInit() {
+        // Keyboard shortcut: Ctrl+Shift+D
+        document.addEventListener('keydown', this.handleHotkey);
+    }
+    ngOnDestroy() {
+        document.removeEventListener('keydown', this.handleHotkey);
+    }
+    togglePanel() {
+        this.panelOpen.update(v => !v);
+        if (this.panelOpen() && !this.recorder.currentSession()) {
+            this.activeTab.set('actions');
+        }
+    }
+    cyclePosition() {
+        const positions = ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+        const idx = positions.indexOf(this.position());
+        this.position.set(positions[(idx + 1) % positions.length]);
+    }
+    startRecording() {
+        this.recorder.startRecording(this.sessionName || undefined, this.sessionDesc || undefined);
+        // Start rrweb in parallel for visual replay
+        this.rrweb.startRecording();
+        this.activeTab.set('actions');
+    }
+    stopRecording() {
+        const session = this.recorder.stopRecording();
+        this.rrweb.stopRecording();
+        if (session) {
+            this.activeTab.set('actions');
+        }
+    }
+    async generateTest() {
+        const session = this.recorder.currentSession() ?? this.recorder.sessions().at(-1);
+        if (!session)
+            return;
+        await this.aiService.generateCypressTest(session);
+        this.activeTab.set('test');
+    }
+    async loadAndGenerate(session) {
+        await this.aiService.generateCypressTest(session);
+        this.activeTab.set('test');
+    }
+    // Drag to reposition
+    startDrag(e) {
+        if (e.target.closest('button'))
+            return;
+        const panel = e.currentTarget.parentElement;
+        const startX = e.clientX - panel.getBoundingClientRect().left;
+        const startY = e.clientY - panel.getBoundingClientRect().top;
+        const onMove = (ev) => {
+            panel.style.left = `${ev.clientX - startX}px`;
+            panel.style.top = `${ev.clientY - startY}px`;
+            panel.style.right = 'auto';
+            panel.style.bottom = 'auto';
+        };
+        const onUp = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    // Resize height
+    startResize(e) {
+        const panel = e.currentTarget.parentElement;
+        this.resizeStartY = e.clientY;
+        this.resizeStartH = panel.getBoundingClientRect().height;
+        const onMove = (ev) => {
+            const newH = Math.max(250, this.resizeStartH + (ev.clientY - this.resizeStartY));
+            panel.style.maxHeight = `${newH}px`;
+        };
+        const onUp = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        e.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DebugPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DebugPanelComponent, isStandalone: true, selector: "app-debug-panel", ngImport: i0, template: `
+    <!-- Toggle FAB -->
+    <button
+      data-debug-panel
+      class="debug-fab"
+      [class.recording]="recorder.isRecording()"
+      [class.pulse]="recorder.isRecording() && !recorder.isPaused()"
+      (click)="togglePanel()"
+      [title]="panelOpen() ? 'Debug Panel schließen' : 'Debug Panel öffnen'"
+    >
+      <span class="fab-icon">{{ recorder.isRecording() ? '⏺' : '🐛' }}</span>
+      @if (recorder.isRecording() && recorder.actionCount() > 0) {
+        <span class="fab-badge">{{ recorder.actionCount() }}</span>
+      }
+    </button>
+
+    <!-- Main Panel -->
+    @if (panelOpen()) {
+      <div
+        data-debug-panel
+        class="debug-panel"
+        [class]="'pos-' + position()"
+        [style.width.px]="panelWidth()"
+      >
+        <!-- Header -->
+        <div class="panel-header" (mousedown)="startDrag($event)">
+          <div class="header-left">
+            <span class="panel-icon">🐛</span>
+            <span class="panel-title">Debug Recorder</span>
+            @if (recorder.isRecording()) {
+              <span class="rec-indicator" [class.paused]="recorder.isPaused()">
+                {{ recorder.isPaused() ? '⏸ PAUSED' : '⏺ REC' }}
+              </span>
+            }
+          </div>
+          <div class="header-actions">
+            <button class="icon-btn" title="Einstellungen" (click)="showSettings.set(true)">⚙️</button>
+            <button class="icon-btn" title="Position wechseln" (click)="cyclePosition()">📌</button>
+            <button class="icon-btn" title="Schließen" (click)="togglePanel()">✕</button>
+          </div>
+        </div>
+
+        <!-- Session Name Input (only when not recording) -->
+        @if (!recorder.isRecording()) {
+          <div class="session-setup">
+            <input
+              data-debug-panel
+              class="session-input"
+              type="text"
+              [(ngModel)]="sessionName"
+              placeholder="Session-Name (optional)"
+            />
+            <textarea
+              data-debug-panel
+              class="session-desc"
+              [(ngModel)]="sessionDesc"
+              placeholder="Fehlerbeschreibung..."
+              rows="2"
+            ></textarea>
+          </div>
+        }
+
+        <!-- Recording Controls -->
+        <div class="recording-controls" data-debug-panel>
+          @if (!recorder.isRecording()) {
+            <button class="ctrl-btn start" (click)="startRecording()">
+              ▶ Aufnahme starten
+            </button>
+          } @else {
+            <button class="ctrl-btn pause" (click)="recorder.pauseRecording()">
+              {{ recorder.isPaused() ? '▶ Fortsetzen' : '⏸ Pause' }}
+            </button>
+            <button class="ctrl-btn stop" (click)="stopRecording()">
+              ⏹ Stoppen
+            </button>
+            <button class="ctrl-btn clear" title="Aktionen löschen" (click)="recorder.clearCurrentSession()">
+              🗑
+            </button>
+          }
+
+          @if (hasActions()) {
+            <button
+              class="ctrl-btn generate"
+              [disabled]="aiService.isGenerating() || !aiService.webhookUrl()"
+              [title]="!aiService.webhookUrl() ? 'Webhook-URL in Einstellungen eintragen' : 'Cypress Test generieren'"
+              (click)="generateTest()"
+            >
+              @if (aiService.isGenerating()) {
+                <span class="spinner">⟳</span> Generiere...
+              } @else {
+                🤖 → Cypress Test
+              }
+            </button>
+          }
+        </div>
+
+        <!-- Error Banner -->
+        @if (aiService.error()) {
+          <div class="error-banner" data-debug-panel>
+            ⚠️ {{ aiService.error() }}
+          </div>
+        }
+
+        <!-- Tabs -->
+        <div class="tab-bar" data-debug-panel>
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === 'actions'"
+            (click)="activeTab.set('actions')"
+          >
+            Aktionen
+            @if (recorder.actionCount() > 0) {
+              <span class="tab-badge">{{ recorder.actionCount() }}</span>
+            }
+          </button>
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === 'replay'"
+            (click)="activeTab.set('replay')"
+            title="rrweb Session Replay"
+          >
+            📽️ Replay
+            @if (rrweb.events().length > 0) {
+              <span class="tab-badge">{{ rrweb.events().length }}</span>
+            }
+          </button>
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === 'test'"
+            [disabled]="!aiService.lastTest()"
+            (click)="activeTab.set('test')"
+          >
+            🤖 Test
+            @if (aiService.lastTest()) {
+              <span class="tab-badge new">NEU</span>
+            }
+          </button>
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === 'sessions'"
+            [disabled]="recorder.sessions().length === 0"
+            (click)="activeTab.set('sessions')"
+          >
+            Sessions ({{ recorder.sessions().length }})
+          </button>
+        </div>
+
+        <!-- Tab Content -->
+        <div class="tab-content">
+          @if (activeTab() === 'actions') {
+            <app-action-list
+              [session]="recorder.currentSession()"
+              (removeAction)="recorder.removeAction($event)"
+              (addNote)="recorder.addNote($event.id, $event.note)"
+            />
+          }
+
+          @if (activeTab() === 'replay') {
+            <app-session-replay />
+          }
+
+          @if (activeTab() === 'test') {
+            <app-test-preview [test]="aiService.lastTest()" />
+          }
+
+          @if (activeTab() === 'sessions') {
+            <div class="sessions-list">
+              @for (session of recorder.sessions(); track session.id) {
+                <div class="session-card">
+                  <div class="session-card-header">
+                    <span class="session-name">{{ session.name }}</span>
+                    <span class="session-meta">{{ session.actions.length }} Aktionen</span>
+                  </div>
+                  <div class="session-card-actions">
+                    <button class="sm-btn" (click)="loadAndGenerate(session)">🤖 Neu generieren</button>
+                    <button class="sm-btn danger" (click)="recorder.deleteSession(session.id)">🗑</button>
+                  </div>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Resize Handle -->
+        <div class="resize-handle" (mousedown)="startResize($event)">⠿</div>
+      </div>
+    }
+
+    <!-- Settings Dialog -->
+    @if (showSettings()) {
+      <app-settings-dialog (close)="showSettings.set(false)" />
+    }
+  `, isInline: true, styles: [".debug-fab{bottom:24px;right:24px;z-index:99999;width:52px;height:52px;border-radius:50%;border:none;background:#1e293b;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0006;transition:transform .2s,background .2s;position:fixed}.debug-fab:hover{transform:scale(1.1);background:#334155}.debug-fab.recording{background:#dc2626}.debug-fab.pulse{animation:fabPulse 1.5s ease-in-out infinite}@keyframes fabPulse{0%,to{box-shadow:0 4px 20px #dc262666}50%{box-shadow:0 4px 30px #dc2626e6,0 0 0 8px #dc262626}}.fab-badge{position:absolute;top:-4px;right:-4px;background:#f59e0b;color:#000;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}.debug-panel{position:fixed;z-index:99998;width:420px;max-height:80vh;background:#0f172a;color:#e2e8f0;border-radius:12px;border:1px solid #1e3a5f;box-shadow:0 25px 60px #0009;display:flex;flex-direction:column;font-family:Segoe UI,system-ui,sans-serif;font-size:13px;overflow:hidden}.pos-bottom-right{bottom:88px;right:24px}.pos-bottom-left{bottom:88px;left:24px}.pos-top-right{top:24px;right:24px}.pos-top-left{top:24px;left:24px}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#1e293b;border-bottom:1px solid #334155;cursor:move;-webkit-user-select:none;user-select:none;flex-shrink:0}.header-left{display:flex;align-items:center;gap:8px}.panel-icon{font-size:16px}.panel-title{font-weight:600;font-size:14px;color:#f1f5f9}.rec-indicator{font-size:10px;font-weight:700;color:#ef4444;background:#ef444426;padding:2px 7px;border-radius:4px;animation:blink 1s step-end infinite}.rec-indicator.paused{color:#f59e0b;background:#f59e0b26;animation:none}@keyframes blink{50%{opacity:.4}}.header-actions{display:flex;gap:4px}.icon-btn{background:none;border:none;color:#94a3b8;cursor:pointer;padding:4px;border-radius:4px;font-size:14px;line-height:1;transition:color .15s,background .15s}.icon-btn:hover{color:#f1f5f9;background:#334155}.session-setup{padding:10px 14px;border-bottom:1px solid #1e293b;display:flex;flex-direction:column;gap:6px;flex-shrink:0}.session-input,.session-desc{background:#1e293b;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:6px 10px;font-size:12px;width:100%;box-sizing:border-box;resize:vertical}.session-input:focus,.session-desc:focus{outline:none;border-color:#3b82f6}.recording-controls{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid #1e293b;flex-wrap:wrap;flex-shrink:0}.ctrl-btn{border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:filter .15s,transform .1s;display:flex;align-items:center;gap:5px}.ctrl-btn:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}.ctrl-btn:active:not(:disabled){transform:translateY(0)}.ctrl-btn:disabled{opacity:.5;cursor:not-allowed}.ctrl-btn.start{background:#16a34a;color:#fff}.ctrl-btn.stop{background:#dc2626;color:#fff}.ctrl-btn.pause{background:#d97706;color:#fff}.ctrl-btn.generate{background:#7c3aed;color:#fff;flex:1;justify-content:center}.ctrl-btn.clear{background:#374151;color:#9ca3af;padding:6px 10px}.spinner{display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{background:#dc262626;border-left:3px solid #dc2626;color:#fca5a5;padding:8px 14px;font-size:12px;flex-shrink:0}.tab-bar{display:flex;border-bottom:1px solid #1e293b;flex-shrink:0}.tab-btn{flex:1;background:none;border:none;color:#64748b;padding:8px 4px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;border-bottom:2px solid transparent;transition:color .15s}.tab-btn:hover:not(:disabled){color:#cbd5e1}.tab-btn.active{color:#60a5fa;border-bottom-color:#3b82f6}.tab-btn:disabled{opacity:.4;cursor:not-allowed}.tab-badge{background:#334155;color:#94a3b8;font-size:10px;padding:1px 5px;border-radius:3px}.tab-badge.new{background:#7c3aed;color:#e9d5ff}.tab-content{overflow-y:auto;flex:1;min-height:0}.tab-content::-webkit-scrollbar{width:5px}.tab-content::-webkit-scrollbar-track{background:transparent}.tab-content::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}.sessions-list{padding:10px 14px;display:flex;flex-direction:column;gap:8px}.session-card{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:10px}.session-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.session-name{font-weight:600;color:#f1f5f9;font-size:13px}.session-meta{font-size:11px;color:#64748b}.session-card-actions{display:flex;gap:6px}.sm-btn{background:#334155;border:none;color:#cbd5e1;padding:4px 10px;border-radius:5px;font-size:11px;cursor:pointer;transition:background .15s}.sm-btn:hover{background:#475569}.sm-btn.danger{color:#fca5a5}.sm-btn.danger:hover{background:#dc262633}.resize-handle{text-align:center;color:#334155;cursor:ns-resize;font-size:16px;padding:2px;flex-shrink:0;background:#0f172a;-webkit-user-select:none;user-select:none}.resize-handle:hover{color:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ActionListComponent, selector: "app-action-list", inputs: ["session"], outputs: ["removeAction", "addNote"] }, { kind: "component", type: TestPreviewComponent, selector: "app-test-preview", inputs: ["test"] }, { kind: "component", type: SettingsDialogComponent, selector: "app-settings-dialog", outputs: ["close"] }, { kind: "component", type: SessionReplayComponent, selector: "app-session-replay" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DebugPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-debug-panel', standalone: true, imports: [CommonModule, FormsModule, ActionListComponent, TestPreviewComponent, SettingsDialogComponent, SessionReplayComponent], template: `
+    <!-- Toggle FAB -->
+    <button
+      data-debug-panel
+      class="debug-fab"
+      [class.recording]="recorder.isRecording()"
+      [class.pulse]="recorder.isRecording() && !recorder.isPaused()"
+      (click)="togglePanel()"
+      [title]="panelOpen() ? 'Debug Panel schließen' : 'Debug Panel öffnen'"
+    >
+      <span class="fab-icon">{{ recorder.isRecording() ? '⏺' : '🐛' }}</span>
+      @if (recorder.isRecording() && recorder.actionCount() > 0) {
+        <span class="fab-badge">{{ recorder.actionCount() }}</span>
+      }
+    </button>
+
+    <!-- Main Panel -->
+    @if (panelOpen()) {
+      <div
+        data-debug-panel
+        class="debug-panel"
+        [class]="'pos-' + position()"
+        [style.width.px]="panelWidth()"
+      >
+        <!-- Header -->
+        <div class="panel-header" (mousedown)="startDrag($event)">
+          <div class="header-left">
+            <span class="panel-icon">🐛</span>
+            <span class="panel-title">Debug Recorder</span>
+            @if (recorder.isRecording()) {
+              <span class="rec-indicator" [class.paused]="recorder.isPaused()">
+                {{ recorder.isPaused() ? '⏸ PAUSED' : '⏺ REC' }}
+              </span>
+            }
+          </div>
+          <div class="header-actions">
+            <button class="icon-btn" title="Einstellungen" (click)="showSettings.set(true)">⚙️</button>
+            <button class="icon-btn" title="Position wechseln" (click)="cyclePosition()">📌</button>
+            <button class="icon-btn" title="Schließen" (click)="togglePanel()">✕</button>
+          </div>
+        </div>
+
+        <!-- Session Name Input (only when not recording) -->
+        @if (!recorder.isRecording()) {
+          <div class="session-setup">
+            <input
+              data-debug-panel
+              class="session-input"
+              type="text"
+              [(ngModel)]="sessionName"
+              placeholder="Session-Name (optional)"
+            />
+            <textarea
+              data-debug-panel
+              class="session-desc"
+              [(ngModel)]="sessionDesc"
+              placeholder="Fehlerbeschreibung..."
+              rows="2"
+            ></textarea>
+          </div>
+        }
+
+        <!-- Recording Controls -->
+        <div class="recording-controls" data-debug-panel>
+          @if (!recorder.isRecording()) {
+            <button class="ctrl-btn start" (click)="startRecording()">
+              ▶ Aufnahme starten
+            </button>
+          } @else {
+            <button class="ctrl-btn pause" (click)="recorder.pauseRecording()">
+              {{ recorder.isPaused() ? '▶ Fortsetzen' : '⏸ Pause' }}
+            </button>
+            <button class="ctrl-btn stop" (click)="stopRecording()">
+              ⏹ Stoppen
+            </button>
+            <button class="ctrl-btn clear" title="Aktionen löschen" (click)="recorder.clearCurrentSession()">
+              🗑
+            </button>
+          }
+
+          @if (hasActions()) {
+            <button
+              class="ctrl-btn generate"
+              [disabled]="aiService.isGenerating() || !aiService.webhookUrl()"
+              [title]="!aiService.webhookUrl() ? 'Webhook-URL in Einstellungen eintragen' : 'Cypress Test generieren'"
+              (click)="generateTest()"
+            >
+              @if (aiService.isGenerating()) {
+                <span class="spinner">⟳</span> Generiere...
+              } @else {
+                🤖 → Cypress Test
+              }
+            </button>
+          }
+        </div>
+
+        <!-- Error Banner -->
+        @if (aiService.error()) {
+          <div class="error-banner" data-debug-panel>
+            ⚠️ {{ aiService.error() }}
+          </div>
+        }
+
+        <!-- Tabs -->
+        <div class="tab-bar" data-debug-panel>
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === 'actions'"
+            (click)="activeTab.set('actions')"
+          >
+            Aktionen
+            @if (recorder.actionCount() > 0) {
+              <span class="tab-badge">{{ recorder.actionCount() }}</span>
+            }
+          </button>
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === 'replay'"
+            (click)="activeTab.set('replay')"
+            title="rrweb Session Replay"
+          >
+            📽️ Replay
+            @if (rrweb.events().length > 0) {
+              <span class="tab-badge">{{ rrweb.events().length }}</span>
+            }
+          </button>
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === 'test'"
+            [disabled]="!aiService.lastTest()"
+            (click)="activeTab.set('test')"
+          >
+            🤖 Test
+            @if (aiService.lastTest()) {
+              <span class="tab-badge new">NEU</span>
+            }
+          </button>
+          <button
+            class="tab-btn"
+            [class.active]="activeTab() === 'sessions'"
+            [disabled]="recorder.sessions().length === 0"
+            (click)="activeTab.set('sessions')"
+          >
+            Sessions ({{ recorder.sessions().length }})
+          </button>
+        </div>
+
+        <!-- Tab Content -->
+        <div class="tab-content">
+          @if (activeTab() === 'actions') {
+            <app-action-list
+              [session]="recorder.currentSession()"
+              (removeAction)="recorder.removeAction($event)"
+              (addNote)="recorder.addNote($event.id, $event.note)"
+            />
+          }
+
+          @if (activeTab() === 'replay') {
+            <app-session-replay />
+          }
+
+          @if (activeTab() === 'test') {
+            <app-test-preview [test]="aiService.lastTest()" />
+          }
+
+          @if (activeTab() === 'sessions') {
+            <div class="sessions-list">
+              @for (session of recorder.sessions(); track session.id) {
+                <div class="session-card">
+                  <div class="session-card-header">
+                    <span class="session-name">{{ session.name }}</span>
+                    <span class="session-meta">{{ session.actions.length }} Aktionen</span>
+                  </div>
+                  <div class="session-card-actions">
+                    <button class="sm-btn" (click)="loadAndGenerate(session)">🤖 Neu generieren</button>
+                    <button class="sm-btn danger" (click)="recorder.deleteSession(session.id)">🗑</button>
+                  </div>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        <!-- Resize Handle -->
+        <div class="resize-handle" (mousedown)="startResize($event)">⠿</div>
+      </div>
+    }
+
+    <!-- Settings Dialog -->
+    @if (showSettings()) {
+      <app-settings-dialog (close)="showSettings.set(false)" />
+    }
+  `, styles: [".debug-fab{bottom:24px;right:24px;z-index:99999;width:52px;height:52px;border-radius:50%;border:none;background:#1e293b;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0006;transition:transform .2s,background .2s;position:fixed}.debug-fab:hover{transform:scale(1.1);background:#334155}.debug-fab.recording{background:#dc2626}.debug-fab.pulse{animation:fabPulse 1.5s ease-in-out infinite}@keyframes fabPulse{0%,to{box-shadow:0 4px 20px #dc262666}50%{box-shadow:0 4px 30px #dc2626e6,0 0 0 8px #dc262626}}.fab-badge{position:absolute;top:-4px;right:-4px;background:#f59e0b;color:#000;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}.debug-panel{position:fixed;z-index:99998;width:420px;max-height:80vh;background:#0f172a;color:#e2e8f0;border-radius:12px;border:1px solid #1e3a5f;box-shadow:0 25px 60px #0009;display:flex;flex-direction:column;font-family:Segoe UI,system-ui,sans-serif;font-size:13px;overflow:hidden}.pos-bottom-right{bottom:88px;right:24px}.pos-bottom-left{bottom:88px;left:24px}.pos-top-right{top:24px;right:24px}.pos-top-left{top:24px;left:24px}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#1e293b;border-bottom:1px solid #334155;cursor:move;-webkit-user-select:none;user-select:none;flex-shrink:0}.header-left{display:flex;align-items:center;gap:8px}.panel-icon{font-size:16px}.panel-title{font-weight:600;font-size:14px;color:#f1f5f9}.rec-indicator{font-size:10px;font-weight:700;color:#ef4444;background:#ef444426;padding:2px 7px;border-radius:4px;animation:blink 1s step-end infinite}.rec-indicator.paused{color:#f59e0b;background:#f59e0b26;animation:none}@keyframes blink{50%{opacity:.4}}.header-actions{display:flex;gap:4px}.icon-btn{background:none;border:none;color:#94a3b8;cursor:pointer;padding:4px;border-radius:4px;font-size:14px;line-height:1;transition:color .15s,background .15s}.icon-btn:hover{color:#f1f5f9;background:#334155}.session-setup{padding:10px 14px;border-bottom:1px solid #1e293b;display:flex;flex-direction:column;gap:6px;flex-shrink:0}.session-input,.session-desc{background:#1e293b;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:6px 10px;font-size:12px;width:100%;box-sizing:border-box;resize:vertical}.session-input:focus,.session-desc:focus{outline:none;border-color:#3b82f6}.recording-controls{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid #1e293b;flex-wrap:wrap;flex-shrink:0}.ctrl-btn{border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:filter .15s,transform .1s;display:flex;align-items:center;gap:5px}.ctrl-btn:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}.ctrl-btn:active:not(:disabled){transform:translateY(0)}.ctrl-btn:disabled{opacity:.5;cursor:not-allowed}.ctrl-btn.start{background:#16a34a;color:#fff}.ctrl-btn.stop{background:#dc2626;color:#fff}.ctrl-btn.pause{background:#d97706;color:#fff}.ctrl-btn.generate{background:#7c3aed;color:#fff;flex:1;justify-content:center}.ctrl-btn.clear{background:#374151;color:#9ca3af;padding:6px 10px}.spinner{display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{background:#dc262626;border-left:3px solid #dc2626;color:#fca5a5;padding:8px 14px;font-size:12px;flex-shrink:0}.tab-bar{display:flex;border-bottom:1px solid #1e293b;flex-shrink:0}.tab-btn{flex:1;background:none;border:none;color:#64748b;padding:8px 4px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;border-bottom:2px solid transparent;transition:color .15s}.tab-btn:hover:not(:disabled){color:#cbd5e1}.tab-btn.active{color:#60a5fa;border-bottom-color:#3b82f6}.tab-btn:disabled{opacity:.4;cursor:not-allowed}.tab-badge{background:#334155;color:#94a3b8;font-size:10px;padding:1px 5px;border-radius:3px}.tab-badge.new{background:#7c3aed;color:#e9d5ff}.tab-content{overflow-y:auto;flex:1;min-height:0}.tab-content::-webkit-scrollbar{width:5px}.tab-content::-webkit-scrollbar-track{background:transparent}.tab-content::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}.sessions-list{padding:10px 14px;display:flex;flex-direction:column;gap:8px}.session-card{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:10px}.session-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.session-name{font-weight:600;color:#f1f5f9;font-size:13px}.session-meta{font-size:11px;color:#64748b}.session-card-actions{display:flex;gap:6px}.sm-btn{background:#334155;border:none;color:#cbd5e1;padding:4px 10px;border-radius:5px;font-size:11px;cursor:pointer;transition:background .15s}.sm-btn:hover{background:#475569}.sm-btn.danger{color:#fca5a5}.sm-btn.danger:hover{background:#dc262633}.resize-handle{text-align:center;color:#334155;cursor:ns-resize;font-size:16px;padding:2px;flex-shrink:0;background:#0f172a;-webkit-user-select:none;user-select:none}.resize-handle:hover{color:#64748b}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of debug-recorder
+ */
+// Main entry component — add this to your Angular app
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionListComponent, AiGeneratorService, DebugPanelComponent, RecorderService, RrwebRecorderService, SessionReplayComponent, SettingsDialogComponent, TestPreviewComponent };
+//# sourceMappingURL=angular-debug-recorder.mjs.map