angular-debug-recorder 1.0.3 → 1.1.1

package/fesm2022/angular-debug-recorder.mjs

@@ -5,9 +5,38 @@ import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@angular/common/http';
 
+/**
+ * Performance notes
+ * ─────────────────
+ * All DOM event listeners are registered **outside Angular's NgZone**
+ * (zone.runOutsideAngular). This means a click, input, or scroll never
+ * triggers Angular Change Detection by itself.
+ *
+ * Recorded actions are batched in a plain array and flushed once per
+ * animation frame via requestAnimationFrame. Only the RAF callback runs
+ * inside zone.run() → at most one CD cycle per frame, regardless of how
+ * many events fired.
+ *
+ * Why this matters for OnPush host apps
+ * ──────────────────────────────────────
+ * When this recorder is embedded in a library used inside an OnPush app,
+ * the old zone.run()-per-event approach caused the host app's CD to run
+ * on every user interaction. With this implementation the host app is
+ * completely unaffected — only the recorder's own signals trigger CD.
+ *
+ * F5 / page-reload survival
+ * ─────────────────────────
+ * The active recording session is written to sessionStorage on
+ * beforeunload and restored in the constructor. If the user accidentally
+ * refreshes mid-recording, no actions are lost.
+ */
 class RecorderService {
+    // ─── SessionStorage keys ──────────────────────────────────────────────
+    static { this.SESSION_KEY = 'dr_active_session'; }
+    static { this.SESSIONS_KEY = 'dr_sessions'; }
     constructor(zone) {
         this.zone = zone;
+        // ─── Reactive state ───────────────────────────────────────────────────
         this._isRecording = signal(false);
         this._currentSession = signal(null);
         this._sessions = signal([]);
@@ -17,9 +46,19 @@ class RecorderService {
         this.currentSession = computed(() => this._currentSession());
         this.sessions = computed(() => this._sessions());
         this.actionCount = computed(() => this._currentSession()?.actions.length ?? 0);
+        // ─── RAF batch buffer ─────────────────────────────────────────────────
+        this.pendingActions = [];
+        // ─── Listener registry ────────────────────────────────────────────────
         this.listeners = [];
         this.lastScrollTime = 0;
+        this.restoreFromStorage();
+        // Register outside Angular zone — zone.js intercepts beforeunload
+        // inside the zone and may suppress it (dialog-return handling).
+        this.zone.runOutsideAngular(() => {
+            window.addEventListener('beforeunload', () => this.persistToStorage());
+        });
     }
+    // ─── Public API ───────────────────────────────────────────────────────
     startRecording(name, description) {
         const session = {
             id: this.generateId(),
@@ -34,9 +73,15 @@ class RecorderService {
         this._isRecording.set(true);
         this._isPaused.set(false);
         this.attachListeners();
-        this.recordNavigation('navigation', window.location.href);
+        this.recordNavigation(window.location.href);
     }
     stopRecording() {
+        // Flush pending actions synchronously before tearing down
+        if (this.rafId !== undefined) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = undefined;
+        }
+        this.flushPending();
         const session = this._currentSession();
         if (!session)
             return null;
@@ -46,6 +91,7 @@ class RecorderService {
         this._isRecording.set(false);
         this._isPaused.set(false);
         this.detachListeners();
+        this.persistToStorage();
         return completed;
     }
     pauseRecording() {
@@ -60,10 +106,7 @@ class RecorderService {
         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);
+        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));
@@ -71,23 +114,71 @@ class RecorderService {
     loadSession(session) {
         this._currentSession.set(session);
     }
-    // ─── Event Listeners ──────────────────────────────────────────────────────
+    // ─── RAF batch flush ──────────────────────────────────────────────────
+    /**
+     * Schedule one signal update at the next animation frame.
+     * Multiple events within a single frame are coalesced → one CD cycle.
+     */
+    scheduleFlush() {
+        if (this.rafId !== undefined)
+            return;
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = undefined;
+            this.flushPending();
+        });
+    }
+    flushPending() {
+        if (!this.pendingActions.length)
+            return;
+        const batch = this.pendingActions.splice(0);
+        this.zone.run(() => {
+            this._currentSession.update(s => {
+                if (!s)
+                    return s;
+                let actions = [...s.actions];
+                for (const action of batch) {
+                    // Deduplicate consecutive inputs: keep only the latest value
+                    if (action.type === 'input') {
+                        const last = actions[actions.length - 1];
+                        if (last?.type === 'input' && last.selector === action.selector) {
+                            actions[actions.length - 1] = action;
+                            continue;
+                        }
+                    }
+                    actions.push(action);
+                }
+                return { ...s, actions };
+            });
+        });
+    }
+    // ─── Event listeners (registered outside NgZone) ──────────────────────
     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 });
+        // Handlers run completely outside Angular Zone — zero CD impact per event.
+        // Only the RAF flush (above) re-enters the zone.
+        const onClick = (e) => { if (this.shouldRecord(e.target))
+            this.handleClick(e); };
+        const onDblClick = (e) => { if (this.shouldRecord(e.target))
+            this.handleDblClick(e); };
+        const onInput = (e) => { if (this.shouldRecord(e.target))
+            this.handleInput(e); };
+        const onChange = (e) => { if (this.shouldRecord(e.target))
+            this.handleChange(e); };
+        const onSubmit = (e) => { if (this.shouldRecord(e.target))
+            this.handleSubmit(e); };
+        const onKeydown = (e) => { if (this.shouldRecord(e.target))
+            this.handleKeydown(e); };
+        const onScroll = (e) => { if (this.shouldRecord(e.target))
+            this.handleScroll(e); };
+        this.zone.runOutsideAngular(() => {
+            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 },
@@ -101,48 +192,38 @@ class RecorderService {
     detachListeners() {
         this.listeners.forEach(({ type, fn }) => document.removeEventListener(type, fn, true));
         this.listeners = [];
-        this.mutationObserver?.disconnect();
     }
-    // ─── Handlers ─────────────────────────────────────────────────────────────
+    // ─── Handlers (run outside NgZone, call addAction which batches) ──────
     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,
+            selector: this.buildSelector(el),
             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,
+            selector: this.buildSelector(el),
             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,
+            selector: this.buildSelector(el),
             selectorStrategy: this.getSelectorStrategy(el),
             element: info,
             value: el.value,
@@ -150,8 +231,6 @@ class RecorderService {
         });
     }
     handleChange(e) {
-        if (!this.shouldRecord(e.target))
-            return;
         const el = e.target;
         const info = this.getElementInfo(el);
         const selector = this.buildSelector(el);
@@ -177,31 +256,26 @@ class RecorderService {
         }
     }
     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,
+            selector: this.buildSelector(form),
             selectorStrategy: this.getSelectorStrategy(form),
             element: info,
-            description: `Submit form ${info.id ? '#' + info.id : info.name ? info.name : ''}`.trim(),
+            description: `Submit form ${info.id ? '#' + info.id : info.name ?? ''}`.trim(),
         });
     }
     handleScroll(e) {
-        if (!this.shouldRecord(e.target))
-            return;
         const now = Date.now();
         if (now - this.lastScrollTime < 1000)
-            return; // debounce 1s
+            return; // debounce 1 s
         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'
+        const selector = (el.tagName === 'HTML' || el.tagName === 'BODY')
             ? 'window'
             : this.buildSelector(el);
         this.addAction({
@@ -216,33 +290,30 @@ class RecorderService {
         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,
+            selector: this.buildSelector(el),
             selectorStrategy: this.getSelectorStrategy(el),
             value: e.key,
             description: `Press "${e.key}" on ${el.tagName.toLowerCase()}`,
         });
     }
-    recordNavigation(type, navUrl) {
+    recordNavigation(navUrl) {
+        // Navigation is always added synchronously (no pending batch needed)
         const action = {
             id: this.generateId(),
             timestamp: Date.now(),
             url: navUrl,
-            type,
+            type: 'navigation',
             selector: 'window',
             selectorStrategy: 'combined',
             description: `Navigate to ${navUrl}`,
         };
         this._currentSession.update(s => s ? { ...s, actions: [...s.actions, action] } : s);
     }
-    // ─── Selector Building ────────────────────────────────────────────────────
+    // ─── 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}"]`;
@@ -257,14 +328,12 @@ class RecorderService {
         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)
@@ -313,17 +382,17 @@ class RecorderService {
             return `"${info.text}"`;
         return info.tagName;
     }
-    // ─── Helpers ──────────────────────────────────────────────────────────────
+    // ─── Guard ────────────────────────────────────────────────────────────
     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;
     }
+    // ─── Batch buffer ─────────────────────────────────────────────────────
     addAction(partial) {
         const action = {
             id: this.generateId(),
@@ -331,21 +400,43 @@ class RecorderService {
             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.pendingActions.push(action);
+        this.scheduleFlush();
+    }
+    // ─── SessionStorage (F5 survival) ─────────────────────────────────────
+    persistToStorage() {
+        try {
+            const session = this._currentSession();
+            if (session && this._isRecording()) {
+                sessionStorage.setItem(RecorderService.SESSION_KEY, JSON.stringify({ session, isPaused: this._isPaused() }));
+            }
+            else {
+                sessionStorage.removeItem(RecorderService.SESSION_KEY);
+            }
+            const sessions = this._sessions();
+            if (sessions.length > 0) {
+                sessionStorage.setItem(RecorderService.SESSIONS_KEY, JSON.stringify(sessions));
+            }
         }
-        this._currentSession.update(s => s ? { ...s, actions: [...s.actions, action] } : s);
+        catch { /* storage quota exceeded or private browsing */ }
+    }
+    restoreFromStorage() {
+        try {
+            const savedSessions = sessionStorage.getItem(RecorderService.SESSIONS_KEY);
+            if (savedSessions)
+                this._sessions.set(JSON.parse(savedSessions));
+            const savedActive = sessionStorage.getItem(RecorderService.SESSION_KEY);
+            if (savedActive) {
+                const { session, isPaused } = JSON.parse(savedActive);
+                this._currentSession.set(session);
+                this._isRecording.set(true);
+                this._isPaused.set(isPaused);
+                this.attachListeners(); // resume recording after reload
+            }
+        }
+        catch { /* corrupt or missing storage */ }
     }
+    // ─── Helpers ──────────────────────────────────────────────────────────
     generateId() {
         return Math.random().toString(36).slice(2, 11);
     }
@@ -968,6 +1059,8 @@ class SessionReplayComponent {
         this.rrweb = inject(RrwebRecorderService);
         this.overlayOpen = signal(false);
         this.isPlaying = signal(false);
+        this.importError = signal(null);
+        this.importedFilename = signal(null);
     }
     async openOverlay() {
         this.overlayOpen.set(true);
@@ -999,6 +1092,34 @@ class SessionReplayComponent {
     exportSession() {
         this.rrweb.downloadEvents();
     }
+    onFileSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        // Reset input so the same file can be re-selected after clearing
+        input.value = '';
+        this.importError.set(null);
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const events = this.rrweb.importEvents(reader.result);
+                if (events.length === 0) {
+                    this.importError.set('Keine Events in der Datei gefunden.');
+                    this.importedFilename.set(null);
+                }
+                else {
+                    this.importedFilename.set(file.name);
+                }
+            }
+            catch {
+                this.importError.set('Ungültiges JSON-Format.');
+                this.importedFilename.set(null);
+            }
+        };
+        reader.onerror = () => this.importError.set('Datei konnte nicht gelesen werden.');
+        reader.readAsText(file);
+    }
     async startPlay() {
         if (!this.replayContainer)
             return;
@@ -1033,15 +1154,34 @@ class SessionReplayComponent {
     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>
+      <!-- Hidden file input for import -->
+      <input
+        #fileInput
+        type="file"
+        accept=".json"
+        style="display:none"
+        data-debug-panel
+        (change)="onFileSelected($event)"
+      />
+
       @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>
+          <button class="replay-btn import" (click)="fileInput.click()">
+            📂 JSON importieren
+          </button>
+          @if (importError()) {
+            <p class="import-error">{{ importError() }}</p>
+          }
         </div>
       } @else {
         <div class="replay-info">
           <span class="event-count">{{ rrweb.eventCount() }} Events aufgezeichnet</span>
+          @if (importedFilename()) {
+            <span class="imported-badge">📂 {{ importedFilename() }}</span>
+          }
         </div>
         <div class="replay-actions">
           <button class="replay-btn primary" (click)="openOverlay()">
@@ -1050,10 +1190,16 @@ class SessionReplayComponent {
           <button class="replay-btn" (click)="exportSession()">
             💾 JSON exportieren
           </button>
+          <button class="replay-btn import" (click)="fileInput.click()">
+            📂 Importieren
+          </button>
         </div>
         <p class="replay-hint">
           Der Replay öffnet sich als Vollbild-Overlay über der aktuellen Seite.
         </p>
+        @if (importError()) {
+          <p class="import-error">{{ importError() }}</p>
+        }
       }
     </div>
 
@@ -1073,21 +1219,40 @@ class SessionReplayComponent {
         <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 }] }); }
+  `, 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-btn.import{background:#1e3a5f;color:#93c5fd}.replay-btn.import:hover{background:#1e4070}.imported-badge{font-size:11px;color:#93c5fd;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;display:inline-block;vertical-align:middle}.import-error{font-size:11px;color:#fca5a5;margin:4px 0 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;display:block}\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>
+      <!-- Hidden file input for import -->
+      <input
+        #fileInput
+        type="file"
+        accept=".json"
+        style="display:none"
+        data-debug-panel
+        (change)="onFileSelected($event)"
+      />
+
       @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>
+          <button class="replay-btn import" (click)="fileInput.click()">
+            📂 JSON importieren
+          </button>
+          @if (importError()) {
+            <p class="import-error">{{ importError() }}</p>
+          }
         </div>
       } @else {
         <div class="replay-info">
           <span class="event-count">{{ rrweb.eventCount() }} Events aufgezeichnet</span>
+          @if (importedFilename()) {
+            <span class="imported-badge">📂 {{ importedFilename() }}</span>
+          }
         </div>
         <div class="replay-actions">
           <button class="replay-btn primary" (click)="openOverlay()">
@@ -1096,10 +1261,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           <button class="replay-btn" (click)="exportSession()">
             💾 JSON exportieren
           </button>
+          <button class="replay-btn import" (click)="fileInput.click()">
+            📂 Importieren
+          </button>
         </div>
         <p class="replay-hint">
           Der Replay öffnet sich als Vollbild-Overlay über der aktuellen Seite.
         </p>
+        @if (importError()) {
+          <p class="import-error">{{ importError() }}</p>
+        }
       }
     </div>
 
@@ -1119,7 +1290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         <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"] }]
+  `, 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-btn.import{background:#1e3a5f;color:#93c5fd}.replay-btn.import:hover{background:#1e4070}.imported-badge{font-size:11px;color:#93c5fd;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;display:inline-block;vertical-align:middle}.import-error{font-size:11px;color:#fca5a5;margin:4px 0 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;display:block}\n"] }]
         }], propDecorators: { replayContainer: [{
                 type: ViewChild,
                 args: ['replayContainer']