parapet-rails 0.1.0

data/app/assets/javascripts/parapet/card-file-editor.js

@@ -0,0 +1,1722 @@
+(function() {
+
+    // --- Native Anchor Positioning + Popover replacement gate (stub, not active) ---
+    // Detects real browser capability, but capability alone does NOT flip this on --
+    // portalDropdownNative() below is unimplemented. Flip
+    // NATIVE_POPOVER_ANCHOR_IMPLEMENTATION_READY only once that method is built and
+    // verified in a real browser. Until then this always resolves to the existing
+    // portalDropdown()/closeAllDropdowns() path, unchanged, on every browser.
+    const SUPPORTS_NATIVE_POPOVER_ANCHOR =
+        typeof HTMLElement !== 'undefined' &&
+        typeof HTMLElement.prototype.showPopover === 'function' &&
+        typeof CSS !== 'undefined' &&
+        CSS.supports('anchor-name: --a') &&
+        CSS.supports('position-anchor: --a');
+
+    const NATIVE_POPOVER_ANCHOR_IMPLEMENTATION_READY = false; // set true only when portalDropdownNative() is finished
+
+    const USE_NATIVE_POPOVER_ANCHOR = SUPPORTS_NATIVE_POPOVER_ANCHOR && NATIVE_POPOVER_ANCHOR_IMPLEMENTATION_READY;
+
+    class FileEditorCard extends ActivityCard {
+
+        get cardTitle()       { return 'File Editor'; }
+        get cardKeyArea()     { return 'Studio'; }
+        get cardProficiency() { return 0; }
+        get cardIcon() {
+            return `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path class="qss-icon-path" d="M17 13L22 18L17 23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path class="qss-icon-path" d="M7 23L2 18L7 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path class="qss-icon-path" d="M14 4L10 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`;
+        }
+
+        defaults() {
+            return Object.assign({}, super.defaults(), {
+                orientation: 'neutral',
+                size: 'large',
+                width: 800, height: 500,
+                minWidth: 400, minHeight: 300,
+                panes: [
+                    { 
+                        openFiles: [{ name: 'untitled.rb', buffer: '', language: 'ruby' }],
+                        activeFileIndex: 0,
+                        linked: false,
+                        drawerOpen: false
+                    }
+                ],
+                activePaneIndex: 0
+            });
+        }
+
+        // Card header actions — Act on the active pane
+        renderHeaderActions() {
+            const template = document.getElementById('qss-tpl-header-actions');
+            if (!template) return '';
+            
+            const clone = template.content.cloneNode(true);
+            const paneIdx = this.state.activePaneIndex || 0;
+
+            // Assign pane index to actions
+            clone.querySelectorAll('[data-action]').forEach(btn => {
+                btn.setAttribute('data-pane', paneIdx);
+            });
+
+            const div = document.createElement('div');
+            div.appendChild(clone);
+            return div.innerHTML;
+        }
+        
+        async handleFileSelected(event) {
+        if (!event.detail || !event.detail.path) return;
+        const path = event.detail.path;
+        const paneIdx = this.state.activePaneIndex || 0;
+        const pane = this.state.panes[paneIdx];
+        if (!pane) return;
+
+        const existingIdx = pane.openFiles.findIndex(f => f.path === path);
+        if (existingIdx !== -1) {
+            pane.activeFileIndex = existingIdx;
+            this.renderPaneTabs(paneIdx);
+            this.loadPaneFile(paneIdx);
+        } else {
+            await this.openFile(path, paneIdx);
+        }
+    }
+
+
+        onInit() {
+            this.draftTimers = this.draftTimers || new Map();
+            this.draftRequests = this.draftRequests || new Map();
+            this.programmaticModelUpdates = new WeakSet();
+
+            // Clean up existing listeners
+            if (this._onFileSelected) document.removeEventListener('parapet:fileSelected', this._onFileSelected);
+
+            // Create hidden file input for the "Open" action
+            this.filePicker = document.createElement('input');
+            this.filePicker.type = 'file';
+            this.filePicker.multiple = true;
+            this.filePicker.style.display = 'none';
+            this.element.appendChild(this.filePicker);
+
+            this.filePicker.addEventListener('change', (e) => {
+                const files = Array.from(e.target.files);
+                const targetPane = this._targetPaneForPicker || this.state.activePaneIndex || 0;
+                
+                files.forEach(file => {
+                    const reader = new FileReader();
+                    reader.onload = (re) => {
+                        this.openFile(file.name, targetPane, {
+                            name: file.name,
+                            path: `external://${file.name}`,
+                            buffer: re.target.result,
+                            language: this.getLanguageFromExt(file.name)
+                        });
+                    };
+                    reader.readAsText(file);
+                });
+                // Reset for next use
+                this.filePicker.value = '';
+            });
+
+            // Migrate/Reset state
+            if (!this.state.panes || !Array.isArray(this.state.panes)) {
+                this.state.panes = [{ 
+                    openFiles: [],
+                    activeFileIndex: 0,
+                    linkedTo: null,
+                    drawerOpen: false
+                }];
+                delete this.state.openFiles;
+                delete this.state.activeFileIndex;
+                this.saveState();
+            } else {
+                // Ensure state consistency for dogfooding
+                this.state.panes.forEach((p, i) => { 
+                    if (p.drawerOpen === undefined) p.drawerOpen = false;
+                    p.openFiles.forEach(f => {
+                        if (f.linkedTo === undefined) f.linkedTo = null;
+                    });
+                    delete p.linkedTo;
+                });
+            }
+
+            this.viewport = this.element.querySelector('.qss-editor-viewport');
+            
+            // Define listener and store reference for cleanup
+            this._onFileSelected = (e) => this.handleFileSelected(e);
+            document.addEventListener('parapet:fileSelected', this._onFileSelected);
+
+            this._onRevealLine = async (e) => {
+                const { path, line, message } = e.detail;
+                if (!path || !line) return;
+
+                // 1. Open the file in the active pane
+                await this.openFile(path);
+
+                // 2. Find the pane that now has this file active
+                const targetPaneIdx = this.state.panes.findIndex(p => p.openFiles[p.activeFileIndex]?.path === path);
+                if (targetPaneIdx === -1) return;
+
+                const instance = this.paneInstances[targetPaneIdx];
+                if (!instance || !instance.editor) return;
+
+                // 3. Reveal and Select
+                setTimeout(() => {
+                    instance.editor.revealLineInCenter(line);
+                    instance.editor.setSelection({
+                        startLineNumber: line,
+                        startColumn: 1,
+                        endLineNumber: line,
+                        endColumn: 1000
+                    });
+                    
+                    // Focus the editor
+                    instance.editor.focus();
+                    
+                    // 4. Show Pane Status with error message
+                    this.showPaneStatus(targetPaneIdx, `Error at L${line}: ${message}`, true);
+                    
+                    // 5. Open/Update the Fix Footer
+                    this.showFixFooter(targetPaneIdx, line, message);
+
+                    // 6. Spawn AI Error Explainer Card if not active
+                    if (!ActivityCards.active['ai-error-explainer']) {
+                        ActivityCards.spawn({ id: 'ai-error-explainer' });
+                    }
+
+                    // 7. Update the Sidebar Widget to show the AI-Error tab
+                    const widgetTab = document.querySelector('.qss-widget-tab[data-target="ai-error"]');
+                    if (widgetTab) widgetTab.click();
+
+                }, 100);
+            };
+            document.addEventListener('parapet:revealLine', this._onRevealLine);
+
+            this._onInsertSnippet = (e) => {
+                const { code } = e.detail;
+                if (!code) return;
+
+                // Insert into the editor in the active pane
+                const paneIdx = this.state.activePaneIndex || 0;
+                const instance = this.paneInstances[paneIdx];
+                if (!instance || !instance.editor) return;
+
+                const selection = instance.editor.getSelection();
+                const range = new this.monaco.Range(
+                    selection.startLineNumber, 
+                    selection.startColumn, 
+                    selection.endLineNumber, 
+                    selection.endColumn
+                );
+
+                instance.editor.executeEdits("snippet", [{
+                    range: range,
+                    text: code,
+                    forceMoveMarkers: true
+                }]);
+
+                instance.editor.focus();
+                this.showPaneStatus(paneIdx, "Snippet Inserted");
+            };
+            document.addEventListener('parapet:insertSnippet', this._onInsertSnippet);
+
+            // Drag and Drop support
+            this.element.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'copy';
+                this.element.classList.add('qss-drag-over');
+            });
+
+            this.element.addEventListener('dragleave', () => {
+                this.element.classList.remove('qss-drag-over');
+            });
+
+            this.element.addEventListener('drop', async (e) => {
+                e.preventDefault();
+                this.element.classList.remove('qss-drag-over');
+                
+                const path = e.dataTransfer.getData('text/plain');
+                if (path) {
+                    console.log("FileEditorCard: Dropped file:", path);
+                    const paneIdx = this.state.activePaneIndex || 0;
+                    await this.handleFileSelected({ detail: { path: path } });
+                }
+            });
+
+            if (typeof require === 'undefined') return;
+            require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' } });
+            require(['vs/editor/editor.main'], (monaco) => {
+                this.monaco = monaco;
+                this.viewport = this.element.querySelector('.qss-editor-viewport');
+                if (!this.viewport) return;
+                
+                this.renderPanes();
+                this.initActionHandlers();
+            });
+        }
+
+        onDestroy() {
+            if (this._onFileSelected) document.removeEventListener('parapet:fileSelected', this._onFileSelected);
+            if (this._onRevealLine)   document.removeEventListener('parapet:revealLine', this._onRevealLine);
+            if (this._onInsertSnippet) document.removeEventListener('parapet:insertSnippet', this._onInsertSnippet);
+            
+            // Dispose Monaco instances
+            if (this.paneInstances) {
+                this.paneInstances.forEach(p => {
+                    if (p.editor) p.editor.dispose();
+                });
+            }
+        }
+
+        renderPanes() {
+            if (!this.viewport) return;
+            
+            try {
+                // Save all current scroll positions before any potential DOM churn
+                if (this.paneInstances) {
+                    this.paneInstances.forEach((instance, idx) => {
+                        const pane = this.state.panes[idx];
+                        if (pane && instance.editor) {
+                            const file = pane.openFiles[pane.activeFileIndex];
+                            if (file) file.scrollPosition = instance.editor.getScrollTop();
+                        }
+                    });
+                }
+
+                // Sanity check for state
+                if (!this.state.panes || !Array.isArray(this.state.panes)) {
+                    this.state.panes = [{ 
+                        openFiles: [{ name: 'untitled.rb', buffer: '', language: 'ruby' }],
+                        activeFileIndex: 0,
+                        linked: false
+                    }];
+                    try { this.saveState(); } catch(e) {}
+                }
+
+                // Only perform full innerHTML reset if the number of panes changed 
+                // or if we haven't rendered yet.
+                const needsFullReset = !this.paneInstances || 
+                                     this.paneInstances.length !== this.state.panes.length;
+
+                if (needsFullReset) {
+                    // Dispose old editors properly
+                    if (this.paneInstances) {
+                        this.paneInstances.forEach(p => {
+                            try { if (p.editor) p.editor.dispose(); } catch(e) {}
+                        });
+                    }
+
+                    this.viewport.innerHTML = '';
+                    this.paneInstances = [];
+
+                    this.state.panes.forEach((paneState, index) => {
+                        try {
+                            const paneEl = this.createPaneElement(index);
+                            this.viewport.appendChild(paneEl);
+                            
+                            const editorTarget = paneEl.querySelector('.qss-monaco-editor-target');
+                            const editor = this.createEditor(editorTarget, index);
+                            
+                            this.paneInstances.push({
+                                element: paneEl,
+                                editor: editor,
+                                tabStrip: paneEl.querySelector('.qss-editor-tab-strip'),
+                                models: {}
+                            });
+
+                            this.renderPaneTabs(index);
+                            this.loadPaneFile(index);
+                        } catch (paneErr) {
+                            console.error(`FileEditorCard: Pane ${index} render failed`, paneErr);
+                        }
+                    });
+                } else {
+                    // Incremental update: Just refresh tabs and content
+                    this.state.panes.forEach((paneState, index) => {
+                        this.renderPaneTabs(index);
+                        this.loadPaneFile(index);
+                    });
+                }
+
+                this.updatePaneFocus();
+
+                // Clear debug outline
+                this.element.style.outline = 'none';
+                
+                // Force a layout pass
+                setTimeout(() => this.onResize(), 10);
+
+            } catch (err) {
+                console.error("FileEditorCard: Global render failed", err);
+            }
+        }
+
+        getNewFileTemplates() {
+            // For now, hardcode 'test' as the suite, but could be dynamic
+            const suite = 'test'; 
+            
+            const templates = {
+                test: [
+                    { label: 'RSpec Spec', icon: 'test-tube', ext: '_spec.rb', defaultDir: 'spec', content: "# frozen_string_literal: true\n\nrequire 'rails_helper'\n\nRSpec.describe \"Something\" do\n  it \"does something\" do\n  end\nend\n" },
+                    { label: 'Minitest Test', icon: 'file-check', ext: '_test.rb', defaultDir: 'test', content: "require 'test_helper'\n\nclass SomethingTest < ActiveSupport::TestCase\n  test \"the truth\" do\n    assert true\n  end\nend\n" },
+                    { label: 'Factory', icon: 'factory', ext: '_factory.rb', defaultDir: 'spec/factories', content: "FactoryBot.define do\n  factory :something do\n  end\nend\n" },
+                    { label: 'Support Module', icon: 'lifesaver', ext: '.rb', defaultDir: 'spec/support', content: "module Support\n  module Something\n  end\nend\n" },
+                    { label: 'Rake Task', icon: 'command', ext: '.rake', defaultDir: 'lib/tasks', content: "namespace :something do\n  desc \"description\"\n  task :run do\n  end\nend\n" },
+                    { label: 'Config JSON', icon: 'settings', ext: '.json', defaultDir: 'config', content: "{\n  \"key\": \"value\"\n}\n" }
+                ],
+                general: [
+                    { label: 'Ruby Script', icon: 'file-code', ext: '.rb', defaultDir: 'lib', content: "# frozen_string_literal: true\n\n" },
+                    { label: 'Text File', icon: 'file-text', ext: '.txt', defaultDir: 'doc', content: "" }
+                ]
+            };
+            
+            return templates[suite] || templates.general;
+        }
+
+        createPaneElement(index) {
+            const tpl = document.getElementById('qss-tpl-editor-pane');
+            const paneEl = tpl.content.cloneNode(true).firstElementChild;
+            const pane = this.state.panes[index];
+            const isActive = index === (this.state.activePaneIndex || 0);
+            
+            paneEl.id = `pp-editor-pane-${this.id}-${index}`;
+            paneEl.dataset.index = index;
+            paneEl.dataset.prptActive = isActive;
+            
+            // Wire up constant action buttons
+            paneEl.querySelectorAll('[data-action]').forEach(btn => {
+                btn.dataset.pane = index;
+            });
+
+            // Initial drawer state
+            const drawer = paneEl.querySelector('.qss-snippet-drawer');
+            if (drawer) {
+                drawer.style.setProperty('--drawer-w', pane.drawerOpen ? '220px' : '0px');
+            }
+
+            // Hide/Show close split button
+            const closeSplitBtn = paneEl.querySelector('.qss-close-split-btn');
+            if (closeSplitBtn) {
+                closeSplitBtn.classList.toggle('qss-hidden', index === 0);
+            }
+
+            return paneEl;
+        }
+        updatePaneFocus() {
+            this.paneInstances.forEach((instance, idx) => {
+                const isActive = idx === this.state.activePaneIndex;
+                const tabBar = instance.element.querySelector('.qss-editor-tab-bar');
+                
+                // Active pane: Highlighted border and shadow
+                if (isActive) {
+                    instance.element.classList.add('qss-ring-1', 'qss-ring-indigo-500', 'qss-z-10', 'qss-shadow-2xl', 'qss-shadow-black');
+                } else {
+                    instance.element.classList.remove('qss-ring-1', 'qss-ring-indigo-500', 'qss-z-10', 'qss-shadow-2xl', 'qss-shadow-black');
+                }
+
+                // Always full opacity and color
+                instance.element.classList.add('qss-opacity-100');
+                instance.element.classList.remove('qss-opacity-40', 'qss-grayscale');
+
+                if (tabBar) {
+                    tabBar.classList.toggle('qss-bg-[#2a2e38]', isActive);
+                    tabBar.classList.toggle('qss-bg-[#1a1d23]', !isActive);
+                }
+            });
+            this.updatePaneActions(this.state.activePaneIndex);
+        }
+
+        createEditor(container, paneIndex) {
+            const editor = this.monaco.editor.create(container, {
+                value: '',
+                language: 'ruby',
+                theme: 'vs-dark',
+                fontSize: 13,
+                minimap: { enabled: false },
+                automaticLayout: true,
+                scrollBeyondLastLine: false,
+                wordWrap: 'on',
+                contextmenu: false,
+                lineNumbersMinChars: 3,
+                glyphMargin: false,
+                folding: false,
+                lineDecorationsWidth: 5
+            });
+
+            editor.onMouseDown(() => {
+                this.state.activePaneIndex = paneIndex;
+                this.updatePaneFocus();
+                this.saveState();
+            });
+
+            // Ctrl+S Keybinding
+            editor.addCommand(this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KeyS, () => {
+                this.saveCurrentFile(paneIndex);
+            });
+
+            editor.onDidChangeModelContent((event) => {
+                if (event.isFlush || this.programmaticModelUpdates.has(editor)) return;
+
+                const pane = this.state.panes[paneIndex];
+                const activeFile = pane.openFiles[pane.activeFileIndex];
+                if (activeFile && activeFile.path) {
+                    activeFile.buffer = editor.getValue();
+                    this.queueDraftSnapshot(activeFile);
+                    
+                    // Mark dirty if content changed
+                    if (!activeFile.isDirty) {
+                        activeFile.isDirty = true;
+                        this.renderPaneTabs(paneIndex);
+                    }
+
+                    this.saveState();
+                    
+                    // Propagation: Sync tabs in other panes ONLY if they are explicitly linked to this pane
+                    this.state.panes.forEach((p, pIdx) => {
+                        if (pIdx === paneIndex) return; // Skip own pane
+                        
+                        const targetActiveFile = p.openFiles[p.activeFileIndex];
+                        if (targetActiveFile && targetActiveFile.linkedTo === paneIndex) {
+                            targetActiveFile.buffer = activeFile.buffer;
+                            
+                            // Update the Monaco instance for the target pane
+                            const instance = this.paneInstances[pIdx];
+                            if (instance && instance.editor && instance.editor.getValue() !== targetActiveFile.buffer) {
+                                this.withProgrammaticModelUpdateSuppressed(instance.editor, () => {
+                                    instance.editor.setValue(targetActiveFile.buffer);
+                                });
+                            }
+                        }
+                    });
+                }
+            });
+
+            return editor;
+        }
+
+        withProgrammaticModelUpdateSuppressed(editor, update) {
+            if (!editor) {
+                update();
+                return;
+            }
+
+            this.programmaticModelUpdates.add(editor);
+            try {
+                update();
+            } finally {
+                this.programmaticModelUpdates.delete(editor);
+            }
+        }
+
+        loadPaneFile(paneIndex) {
+            try {
+                const pane = this.state.panes[paneIndex];
+                const file = pane.openFiles[pane.activeFileIndex];
+                const instance = this.paneInstances[paneIndex];
+                if (!instance || !instance.editor) return;
+
+                if (!file) {
+                    if (!this._nullModel) {
+                        this._nullModel = this.monaco.editor.createModel('', 'plaintext');
+                    }
+                    instance.editor.setModel(this._nullModel);
+                    return;
+                }
+
+                const lang = file.language || 'ruby';
+                // Use the file path as a stable key instead of the unstable array index
+                const modelKey = file.path || `untitled-${file.name}`;
+                
+                if (!instance.models[modelKey]) {
+                    instance.models[modelKey] = this.monaco.editor.createModel(file.buffer || '', lang);
+                } else {
+                    // Update content if it has changed (e.g., via global buffer sync)
+                    if (instance.models[modelKey].getValue() !== file.buffer) {
+                        this.withProgrammaticModelUpdateSuppressed(instance.editor, () => {
+                            instance.models[modelKey].setValue(file.buffer || '');
+                        });
+                    }
+                }
+                instance.editor.setModel(instance.models[modelKey]);
+                
+                // Restore scroll position
+                if (file.scrollPosition !== undefined) {
+                    instance.editor.setScrollTop(file.scrollPosition);
+                }
+
+                // If drawer is open, refresh snippets for new file type
+                if (pane.drawerOpen) {
+                    this.renderDrawerSnippets(paneIndex);
+                }
+
+                this.updatePaneActions(paneIndex);
+            } catch (err) {
+                console.error(`FileEditorCard: loadPaneFile(${paneIndex}) failed`, err);
+            }
+        }
+
+        updatePaneActions(paneIndex) {
+            const instance = this.paneInstances[paneIndex];
+            if (!instance) return;
+
+            const pane = this.state.panes[paneIndex];
+            const file = pane.openFiles[pane.activeFileIndex];
+
+            // Refresh header actions if this is the active pane
+            if (paneIndex === this.state.activePaneIndex) {
+                const headerActions = this.element.querySelector('.qss-header-actions');
+                if (headerActions) {
+                    headerActions.innerHTML = this.renderHeaderActions();
+                }
+            }
+
+            // 1. Update Save Button
+            const saveBtns = instance.element.querySelectorAll('[data-action="save"]');
+            saveBtns.forEach(saveBtn => {
+                if (file) {
+                    saveBtn.classList.remove('qss-hidden');
+                    saveBtn.classList.toggle('qss-text-emerald-400', file.isDirty);
+                    saveBtn.classList.toggle('qss-text-slate-500', !file.isDirty);
+                    saveBtn.title = file.isDirty ? "Save Changes (Ctrl+S)" : "File Saved";
+                } else {
+                    saveBtn.classList.add('qss-hidden');
+                }
+            });
+
+            // 2. Update Run Button
+            const runBtns = instance.element.querySelectorAll('[data-action="run"]');
+            const headerRunBtn = this.element.querySelector('.qss-header-actions [data-action="run"]');
+            
+            const updateRunUI = (btn) => {
+                if (!btn) return;
+                if (file && file.path) {
+                    btn.classList.remove('qss-opacity-20', 'qss-pointer-events-none');
+                    btn.classList.remove('qss-text-rose-400', 'qss-text-emerald-400', 'qss-text-green-400', 'qss-text-indigo-400', 'qss-text-slate-500', 'qss-text-red-400');
+                    const filename = file.name || "";
+                    
+        
+                    
+                    let templateId = 'qss-tpl-run-content-default';
+                    let runTitle = "Run Tool";
+                    let runColor = 'qss-text-slate-500';
+
+                    if (filename.endsWith('_spec.rb')) {
+                        templateId = 'qss-tpl-run-content-rspec';
+                        runTitle = "Run RSpec Spec";
+                        runColor = 'qss-text-red-400';
+                    } else if (filename.endsWith('_test.rb')) {
+                        templateId = 'qss-tpl-run-content-minitest';
+                        runTitle = "Run Minitest Test";
+                        runColor = 'qss-text-emerald-400';
+                    } else if (filename.endsWith('.feature')) {
+                        templateId = 'qss-tpl-run-content-cucumber';
+                        runTitle = "Run Cucumber Feature";
+                        runColor = 'qss-text-emerald-400';
+                    }
+
+                    const tpl = document.getElementById(templateId);
+                    if (tpl) {
+                        btn.innerHTML = '';
+                        const wrap = document.createElement('div');
+                        wrap.className = 'qss-flex qss-items-center';
+                        wrap.appendChild(tpl.content.cloneNode(true));
+                        btn.appendChild(wrap);
+                    }
+                    
+                    btn.title = runTitle;
+                    btn.classList.add(runColor);
+                } else {
+                    btn.classList.add('qss-opacity-20', 'qss-pointer-events-none');
+                }
+            };
+
+            runBtns.forEach(updateRunUI);
+            if (paneIndex === this.state.activePaneIndex) updateRunUI(headerRunBtn);
+
+            // 3. Update Split Button
+            const splitBtns = instance.element.querySelectorAll('[data-action="split"]');
+            const headerSplitBtn = this.element.querySelector('.qss-header-actions [data-action="split"]');
+            
+            const updateSplitUI = (btn) => {
+                if (!btn) return;
+                if (this.state.panes.length >= 3) {
+                    btn.classList.add('qss-opacity-20', 'qss-pointer-events-none');
+                } else {
+                    btn.classList.remove('qss-opacity-20', 'qss-pointer-events-none');
+                }
+            };
+            splitBtns.forEach(updateSplitUI);
+            if (paneIndex === this.state.activePaneIndex) updateSplitUI(headerSplitBtn);
+
+            // 4. Update Link Button
+            const linkBtns = instance.element.querySelectorAll('[data-action="toggle-link"]');
+            const headerLinkBtn = this.element.querySelector('.qss-header-actions [data-action="toggle-link"]');
+            const isLinked = file && file.linkedTo !== null && file.linkedTo !== undefined;
+            
+            const updateLinkUI = (btn) => {
+                if (!btn) return;
+                btn.classList.toggle('qss-text-indigo-400', isLinked);
+                btn.classList.toggle('qss-animate-pulse', isLinked);
+                btn.classList.toggle('qss-text-slate-500', !isLinked);
+            };
+            linkBtns.forEach(updateLinkUI);
+            if (paneIndex === this.state.activePaneIndex) updateLinkUI(headerLinkBtn);
+
+            // 5. Update Snippet/Help Button
+            const snippetBtns = instance.element.querySelectorAll('[data-action="toggle-snippets"]');
+            const headerSnippetBtn = this.element.querySelector('.qss-header-actions [data-action="toggle-snippets"]');
+            
+            const updateSnippetUI = (btn) => {
+                if (!btn) return;
+                btn.classList.remove('qss-text-orange-400', 'qss-text-amber-400', 'qss-text-slate-500');
+                btn.classList.add(pane.drawerOpen ? 'qss-text-orange-400' : 'qss-text-slate-500');
+            };
+            snippetBtns.forEach(updateSnippetUI);
+            if (paneIndex === this.state.activePaneIndex) updateSnippetUI(headerSnippetBtn);
+
+            // 6. Update Save Button
+            const saveBtns_alt = instance.element.querySelectorAll('[data-action="save"]');
+            const headerSaveBtn = this.element.querySelector('.qss-header-actions [data-action="save"]');
+            
+            const updateSaveUI = (btn) => {
+                if (!btn) return;
+                if (file) {
+                    btn.classList.remove('qss-hidden');
+                    btn.classList.toggle('qss-text-emerald-400', file.isDirty);
+                    btn.classList.toggle('qss-text-slate-500', !file.isDirty);
+                    btn.title = file.isDirty ? "Save Changes (Ctrl+S)" : "File Saved";
+                } else {
+                    btn.classList.add('qss-hidden');
+                }
+            };
+            saveBtns_alt.forEach(updateSaveUI);
+            if (paneIndex === this.state.activePaneIndex) updateSaveUI(headerSaveBtn);
+
+            // Refresh header actions if this is the active pane
+            if (paneIndex === this.state.activePaneIndex) {
+                const headerActions = this.element.querySelector('.qss-header-actions');
+                if (headerActions && !headerActions.querySelector('.qss-header-action-btn')) {
+                    headerActions.innerHTML = this.renderHeaderActions();
+                }
+            }
+        }
+
+        renderPaneTabs(paneIndex) {
+            const pane = this.state.panes[paneIndex];
+            const instance = this.paneInstances[paneIndex];
+            if (!instance || !instance.tabStrip) return;
+
+            instance.tabStrip.innerHTML = '';
+            const bufferList = instance.element.querySelector('.qss-buffer-list');
+            if (bufferList) bufferList.innerHTML = '';
+
+            const tabTpl = document.getElementById('qss-tpl-editor-tab');
+            const itemTpl = document.getElementById('qss-tpl-editor-buffer-item');
+
+            pane.openFiles.forEach((file, index) => {
+                const isActive = index === pane.activeFileIndex;
+                const fileType = this.getFileIcon(file.name);
+
+                // 1. Create Tab
+                if (tabTpl) {
+                    const tabClone = tabTpl.content.cloneNode(true);
+                    const tab = tabClone.firstElementChild;
+                    tab.dataset.prptActive = isActive;
+                    
+                    if (isActive) {
+                        tab.classList.add('active', 'qss-bg-[#1e1e1e]');
+                    } else {
+                        tab.classList.add('qss-bg-[#1a1d23]', 'hover:qss-bg-white/5');
+                    }
+
+                    const iconWrap = tab.querySelector('.qss-tab-icon');
+                    if (iconWrap) {
+                        iconWrap.className = `qss-tab-icon ${fileType.color} qss-w-3.5 qss-h-3.5 qss-flex qss-items-center qss-justify-center`;
+                        iconWrap.innerHTML = fileType.svg;
+                    }
+
+                    const label = tab.querySelector('.qss-editor-tab-label');
+                    if (label) {
+                        label.textContent = file.name;
+                        label.classList.add(isActive ? 'qss-text-slate-100' : 'qss-text-slate-400');
+                        label.title = "Double click to rename";
+                    }
+
+                    const dirty = tab.querySelector('.qss-dirty-indicator');
+                    if (dirty) dirty.classList.toggle('qss-hidden', !file.isDirty);
+
+                    tab.addEventListener('click', (e) => {
+                        if (e.target.classList.contains('qss-editor-tab-close')) {
+                            this.closeFile(paneIndex, index);
+                        } else {
+                            this.switchToFile(paneIndex, index);
+                        }
+                    });
+
+                    tab.addEventListener('dblclick', () => this.renameFile(paneIndex, index));
+                    instance.tabStrip.appendChild(tab);
+                }
+
+                // 2. Populate Mini-Explorer buffer list
+                if (bufferList && itemTpl) {
+                    const itemClone = itemTpl.content.cloneNode(true);
+                    const item = itemClone.firstElementChild;
+                    item.dataset.prptActive = isActive;
+                    
+                    if (isActive) {
+                        item.classList.add('qss-text-indigo-400', 'qss-bg-indigo-500/5');
+                    } else {
+                        item.classList.add('qss-text-slate-400', 'hover:qss-text-indigo-400');
+                    }
+
+                    const iconWrap = item.querySelector('.qss-item-icon');
+                    if (iconWrap) {
+                        iconWrap.className = `qss-item-icon ${fileType.color} qss-w-3 qss-h-3 qss-flex qss-items-center qss-justify-center`;
+                        iconWrap.innerHTML = fileType.svg;
+                    }
+
+                    const label = item.querySelector('.qss-truncate');
+                    if (label) label.textContent = file.name;
+
+                    const dirty = item.querySelector('.qss-dirty-indicator');
+                    if (dirty) dirty.classList.toggle('qss-hidden', !file.isDirty);
+
+                    item.addEventListener('click', () => {
+                        this.switchToFile(paneIndex, index);
+                        this.closeAllDropdowns();
+                    });
+                    bufferList.appendChild(item);
+                }
+            });
+
+            // Handle search in Mini-Explorer
+            const portal = document.getElementById('pp-portal-root');
+            const searchInput = portal ? portal.querySelector('.qss-mini-explorer-dropdown input') : null;
+            if (searchInput) {
+                searchInput.addEventListener('input', (e) => {
+                    const query = e.target.value.toLowerCase();
+                    const items = bufferList.querySelectorAll('.qss-buffer-item');
+                    items.forEach(item => {
+                        const nameEl = item.querySelector('.qss-truncate');
+                        if (nameEl) {
+                            const name = nameEl.textContent.toLowerCase();
+                            item.classList.toggle('qss-hidden', !name.includes(query));
+                        }
+                    });
+                });
+            }
+
+            // Ensure active tab is visible in the strip
+            const activeTab = instance.tabStrip.children[pane.activeFileIndex];
+            if (activeTab) {
+                activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+            }
+
+            // Sync action buttons state
+            this.updatePaneActions(paneIndex);
+        }
+
+        showNotice(message, type = 'notice') {
+            document.dispatchEvent(new CustomEvent('parapet:flash', { 
+                detail: { message: message, type: type } 
+            }));
+        }
+
+        showPaneStatus(paneIndex, message, isError = false) {
+            const instance = this.paneInstances[paneIndex];
+            if (!instance) return;
+
+            const msgEl = instance.element.querySelector('.qss-pane-status-msg');
+            if (!msgEl) return;
+
+            msgEl.textContent = message;
+            msgEl.classList.toggle('qss-bg-emerald-600', !isError);
+            msgEl.classList.toggle('qss-bg-red-600', isError);
+            msgEl.classList.toggle('bg-emerald-600', false);
+            msgEl.classList.toggle('bg-red-600', false);
+            
+            // Slide In
+            msgEl.classList.remove('qss-translate-x-full', 'translate-x-full');
+            
+            setTimeout(() => {
+                // Slide Out
+                msgEl.classList.add('qss-translate-x-full');
+            }, 2500);
+        }
+
+        closeAllDropdowns() {
+            const portal = document.getElementById('pp-portal-root');
+            if (portal) {
+                portal.querySelectorAll('.qss-mini-explorer-dropdown, .qss-new-menu-dropdown, .qss-link-menu-dropdown').forEach(d => {
+                    d.classList.add('qss-hidden');
+                });
+            }
+        }
+
+        portalDropdown(btn, dropdownSelector) {
+            if (USE_NATIVE_POPOVER_ANCHOR) {
+                this.portalDropdownNative(btn, dropdownSelector);
+                return;
+            }
+
+            const instance = this.paneInstances[btn.dataset.pane];
+            if (!instance) return;
+
+            const dropdown = instance.element.querySelector(dropdownSelector);
+            const portal = document.getElementById('pp-portal-root');
+            if (!dropdown || !portal) return;
+
+            // Close others first
+            this.closeAllDropdowns();
+
+            // Move to portal if not already there
+            if (dropdown.parentElement !== portal) {
+                portal.appendChild(dropdown);
+            }
+
+            // Position it
+            const rect = btn.getBoundingClientRect();
+            dropdown.style.setProperty('--dropdown-top', `${rect.bottom + 2}px`);
+            dropdown.style.setProperty('--dropdown-left', `${rect.left}px`);
+            
+            // Toggle
+            dropdown.classList.remove('qss-hidden');
+
+            // Click-away listener
+            const clickOutside = (e) => {
+                if (!dropdown.contains(e.target) && !btn.contains(e.target)) {
+                    dropdown.classList.add('qss-hidden');
+                    document.removeEventListener('mousedown', clickOutside);
+                }
+            };
+            document.addEventListener('mousedown', clickOutside);
+        }
+
+        // STUB -- not implemented. Gated off by NATIVE_POPOVER_ANCHOR_IMPLEMENTATION_READY
+        // above, so this is never called today regardless of real browser support.
+        //
+        // When built, this replaces portalDropdown()/closeAllDropdowns()'s manual
+        // bounding-rect math, portal relocation, and click-outside listener with:
+        //   - `popover` on each dropdown -- native top-layer promotion means the
+        //     dropdown never needs to move into #pp-portal-root at all; the popover
+        //     top layer solves the same stacking-context escape problem the portal
+        //     was built for.
+        //   - `popovertarget="<dropdown-id>"` on each trigger button in place of the
+        //     click listener calling this method.
+        //   - `anchor-name` on the trigger plus `position-anchor`/`position-area`
+        //     (with `position-try` fallbacks) on the dropdown, in place of the
+        //     getBoundingClientRect() + --dropdown-top/--dropdown-left math.
+        //   - native light-dismiss (popover="auto") in place of the manual
+        //     mousedown/clickOutside listener.
+        //   - NOTE: "only one open at a time" is not automatic across independent
+        //     popovers -- still needs an explicit check here, or a shared group once
+        //     that part of the popover spec stabilizes.
+        // Once browser support is broad enough and this method is built and verified
+        // in a real browser, flip NATIVE_POPOVER_ANCHOR_IMPLEMENTATION_READY above.
+        portalDropdownNative(btn, dropdownSelector) {
+            throw new Error('portalDropdownNative() is a stub -- not implemented. See NATIVE_POPOVER_ANCHOR_IMPLEMENTATION_READY.');
+        }
+
+        initActionHandlers() {
+            // Use mousedown to trigger before any potential drag/focus interceptors
+            this.element.addEventListener('mousedown', (e) => {
+                const btn = e.target.closest('.qss-pane-action-btn') || e.target.closest('.qss-pane-action-btn');
+                if (!btn) return;
+                
+                e.preventDefault();
+                e.stopPropagation();
+
+                const action = btn.dataset.action;
+                const paneIndex = parseInt(btn.dataset.pane || 0);
+
+                if (action === 'mini-explorer') this.portalDropdown(btn, '.qss-mini-explorer-dropdown');
+                if (action === 'new-menu') this.portalDropdown(btn, '.qss-new-menu-dropdown');
+                if (action === 'link-menu') this.portalDropdown(btn, '.qss-link-menu-dropdown');
+                
+                if (action === 'new') this.newFile(paneIndex);
+                if (action === 'new-template') {
+                    const tplIdx = parseInt(btn.dataset.tplIdx);
+                    this.newFromTemplate(paneIndex, tplIdx);
+                }
+                if (action === 'save') this.saveCurrentFile(paneIndex);
+                if (action === 'run') this.runCurrentFile(paneIndex);
+                if (action === 'toggle-snippets') this.toggleSnippetDrawer(paneIndex);
+                if (action === 'toggle-link') this.toggleLink(paneIndex);
+                if (action === 'open') {
+                    this._targetPaneForPicker = paneIndex;
+                    this.filePicker.click();
+                }
+                if (action === 'split') this.addSplit(paneIndex);
+                if (action === 'close-split') this.closeSplit(paneIndex);
+                if (action === 'set-link') {
+                    const targetIdx = parseInt(btn.dataset.target);
+                    const currentPane = this.state.panes[paneIndex];
+                    let activeFile = currentPane.openFiles[currentPane.activeFileIndex];
+                    
+                    // Direction: The establisher (this tab) pulls from the target pane
+                    const sourcePane = this.state.panes[targetIdx];
+                    const sourceFile = sourcePane.openFiles[sourcePane.activeFileIndex];
+
+                    if (!activeFile) {
+                        activeFile = {
+                            name: sourceFile ? sourceFile.name : 'Mirroring...',
+                            path: sourceFile ? sourceFile.path : '',
+                            buffer: sourceFile ? sourceFile.buffer : '',
+                            language: sourceFile ? sourceFile.language : 'plaintext',
+                            linkedTo: targetIdx
+                        };
+                        currentPane.openFiles.push(activeFile);
+                        currentPane.activeFileIndex = currentPane.openFiles.length - 1;
+                    } else {
+                        activeFile.linkedTo = targetIdx;
+                        if (sourceFile) {
+                            activeFile.name = sourceFile.name;
+                            activeFile.path = sourceFile.path;
+                            activeFile.buffer = sourceFile.buffer;
+                            activeFile.language = sourceFile.language;
+                        }
+                    }
+                    
+                    // Shift focus back to the SOURCE pane
+                    this.state.activePaneIndex = targetIdx;
+                    
+                    this.renderPanes();
+                    this.saveState();
+                }
+                if (action === 'unlink') {
+                    const currentPane = this.state.panes[paneIndex];
+                    const activeFile = currentPane.openFiles[currentPane.activeFileIndex];
+                    if (activeFile) activeFile.linkedTo = null;
+                    this.renderPanes();
+                    this.saveState();
+                }
+            });
+        }
+
+        async openFile(path, targetPaneIndex = null, directData = null) {
+            try {
+                let filename, buffer, language, isDirty = false;
+
+                if (directData) {
+                    filename = directData.name;
+                    buffer = directData.buffer;
+                    language = directData.language;
+                    path = directData.path;
+                } else {
+                    const response = await fetch(`/files/content?path=${encodeURIComponent(path)}`);
+                    const data = await response.json();
+                    filename = path.replace(/\\/g, '/').split('/').pop();
+                    buffer = data.content;
+                    language = this.getLanguageFromExt(filename);
+
+                    const draftResponse = await fetch(`/files/draft?path=${encodeURIComponent(path)}`);
+                    if (draftResponse.ok && draftResponse.status !== 204) {
+                        const draft = await draftResponse.json();
+                        const decision = await this.promptDraftRecovery(filename);
+                        if (decision === 'cancel') return;
+                        if (decision === 'restore') {
+                            buffer = draft.content;
+                            isDirty = true;
+                        } else {
+                            await this.discardDraft(path);
+                        }
+                    }
+                }
+                
+                const paneIndex = targetPaneIndex !== null ? targetPaneIndex : (this.state.activePaneIndex || 0);
+                const pane = this.state.panes[paneIndex];
+                const isInitiallyEmpty = pane.openFiles.length === 0;
+                
+                // Check if file already open in this pane
+                const existingIndex = pane.openFiles.findIndex(f => f.path === path);
+                if (existingIndex >= 0) {
+                    this.switchToFile(paneIndex, existingIndex);
+                    return;
+                }
+
+                const newFile = {
+                    name: filename,
+                    path: path,
+                    buffer: buffer,
+                    language: language,
+                    isDirty: isDirty
+                };
+
+                pane.openFiles.push(newFile);
+                
+                if (isInitiallyEmpty) {
+                    // Force a full re-render of the panes to ensure the editor is created
+                    // since createPaneElement logic might have skipped it or it was in a "null" state
+                    this.renderPanes();
+                } else {
+                    this.switchToFile(paneIndex, pane.openFiles.length - 1);
+                }
+            } catch (err) {
+                console.error("FileEditorCard: Failed to open file", path, err);
+            }
+        }
+
+        promptDraftRecovery(filename) {
+            const portal = document.getElementById('pp-portal-root');
+            if (!portal) return Promise.resolve('cancel');
+
+            return new Promise((resolve) => {
+                const previousFocus = document.activeElement;
+                const overlay = document.createElement('div');
+                overlay.className = 'qss-fixed qss-inset-0 qss-z-[2000] qss-flex qss-items-center qss-justify-center qss-bg-black/60 qss-backdrop-blur-sm qss-p-4 qss-pointer-events-auto';
+                overlay.dataset.draftRecoveryPrompt = 'true';
+
+                const panel = document.createElement('section');
+                panel.className = 'qss-w-full qss-max-w-lg qss-bg-[#1a1d23] qss-border qss-border-slate-700 qss-rounded-lg qss-shadow-2xl qss-overflow-hidden qss-flex qss-flex-col';
+                panel.setAttribute('role', 'alertdialog');
+                panel.setAttribute('aria-modal', 'true');
+                panel.tabIndex = -1;
+
+                this.draftPromptSequence = (this.draftPromptSequence || 0) + 1;
+                const heading = document.createElement('h2');
+                heading.id = `parapet-draft-recovery-title-${this.draftPromptSequence}`;
+                heading.className = 'qss-px-4 qss-pt-4 qss-text-sm qss-font-bold qss-text-slate-100';
+                heading.textContent = 'Unsaved changes found';
+                panel.setAttribute('aria-labelledby', heading.id);
+
+                const message = document.createElement('p');
+                message.className = 'qss-px-4 qss-py-3 qss-text-sm qss-text-slate-300';
+                message.textContent = `Restore the unsaved draft for ${filename}?`;
+
+                const actions = document.createElement('div');
+                actions.className = 'qss-flex qss-justify-end qss-gap-2 qss-border-t qss-border-slate-700 qss-bg-[#111418] qss-px-4 qss-py-3';
+
+                const restoreButton = document.createElement('button');
+                restoreButton.type = 'button';
+                restoreButton.className = 'qss-rounded qss-bg-indigo-600 qss-px-3 qss-py-2 qss-text-xs qss-font-bold qss-text-white hover:qss-bg-indigo-500 focus:qss-outline-none';
+                restoreButton.textContent = 'Restore draft';
+
+                const discardButton = document.createElement('button');
+                discardButton.type = 'button';
+                discardButton.className = 'qss-rounded qss-bg-red-700 qss-px-3 qss-py-2 qss-text-xs qss-font-bold qss-text-white hover:qss-bg-red-600 focus:qss-outline-none';
+                discardButton.textContent = 'Discard draft';
+
+                const cancelButton = document.createElement('button');
+                cancelButton.type = 'button';
+                cancelButton.className = 'qss-rounded qss-border qss-border-slate-600 qss-px-3 qss-py-2 qss-text-xs qss-font-semibold qss-text-slate-300 hover:qss-bg-slate-800 focus:qss-outline-none';
+                cancelButton.textContent = 'Cancel';
+
+                let settled = false;
+                const finish = (decision) => {
+                    if (settled) return;
+                    settled = true;
+                    overlay.remove();
+                    if (previousFocus && typeof previousFocus.focus === 'function') previousFocus.focus();
+                    resolve(decision);
+                };
+
+                restoreButton.addEventListener('click', () => finish('restore'));
+                discardButton.addEventListener('click', () => finish('discard'));
+                cancelButton.addEventListener('click', () => finish('cancel'));
+                overlay.addEventListener('click', (event) => {
+                    if (event.target === overlay) finish('cancel');
+                });
+                overlay.addEventListener('keydown', (event) => {
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        finish('cancel');
+                        return;
+                    }
+
+                    if (event.key === 'Tab') {
+                        const buttons = [restoreButton, discardButton, cancelButton];
+                        if (event.shiftKey && document.activeElement === buttons[0]) {
+                            event.preventDefault();
+                            buttons[buttons.length - 1].focus();
+                        } else if (!event.shiftKey && document.activeElement === buttons[buttons.length - 1]) {
+                            event.preventDefault();
+                            buttons[0].focus();
+                        }
+                    }
+                });
+
+                actions.append(restoreButton, discardButton, cancelButton);
+                panel.append(heading, message, actions);
+                overlay.appendChild(panel);
+                portal.appendChild(overlay);
+                restoreButton.focus();
+            });
+        }
+
+        queueDraftSnapshot(file) {
+            if (!file.path || file.path.startsWith('external://')) return;
+
+            const path = file.path;
+            clearTimeout(this.draftTimers.get(path));
+            const timer = setTimeout(() => {
+                this.draftTimers.delete(path);
+                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+                const request = fetch('/files/draft', {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-Token': csrfToken
+                    },
+                    body: JSON.stringify({ path: path, content: file.buffer })
+                }).then((response) => {
+                    if (!response.ok) throw new Error(response.statusText);
+                }).catch((error) => {
+                    console.error('FileEditorCard: Draft recovery save failed', error);
+                }).finally(() => {
+                    if (this.draftRequests.get(path) === request) this.draftRequests.delete(path);
+                });
+                this.draftRequests.set(path, request);
+            }, 750);
+            this.draftTimers.set(path, timer);
+        }
+
+        async flushDraftSnapshot(path) {
+            clearTimeout(this.draftTimers.get(path));
+            this.draftTimers.delete(path);
+            const request = this.draftRequests.get(path);
+            if (request) await request;
+        }
+
+        async discardDraft(path) {
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+            const response = await fetch(`/files/draft?path=${encodeURIComponent(path)}`, {
+                method: 'DELETE',
+                headers: { 'X-CSRF-Token': csrfToken }
+            });
+            if (!response.ok) throw new Error(response.statusText);
+        }
+
+        getLanguageFromExt(filename) {
+            const ext = filename.split('.').pop().toLowerCase();
+            const map = {
+                'rb': 'ruby',
+                'js': 'javascript',
+                'ts': 'typescript',
+                'html': 'html',
+                'css': 'css',
+                'json': 'json',
+                'md': 'markdown',
+                'feature': 'gherkin'
+            };
+            return map[ext] || 'plaintext';
+        }
+
+        switchToFile(paneIndex, fileIndex) {
+            const pane = this.state.panes[paneIndex];
+            if (pane.activeFileIndex === fileIndex && this.state.activePaneIndex === paneIndex) return;
+            
+            // Save scroll state of outgoing file
+            const oldFile = pane.openFiles[pane.activeFileIndex];
+            const instance = this.paneInstances[paneIndex];
+            if (oldFile && instance && instance.editor) {
+                oldFile.scrollPosition = instance.editor.getScrollTop();
+            }
+
+            pane.activeFileIndex = fileIndex;
+            this.state.activePaneIndex = paneIndex;
+            
+            this.loadPaneFile(paneIndex);
+            this.renderPaneTabs(paneIndex);
+            this.updatePaneFocus();
+            this.saveState();
+        }
+
+        newFile(paneIndex) {
+            const pane = this.state.panes[paneIndex];
+            pane.openFiles.push({ 
+                name: 'untitled.rb', 
+                buffer: '', 
+                language: 'ruby',
+                defaultDir: 'test'
+            });
+            this.switchToFile(paneIndex, pane.openFiles.length - 1);
+        }
+
+        newFromTemplate(paneIndex, templateIdx) {
+            const templates = this.getNewFileTemplates();
+            const tpl = templates[templateIdx];
+            if (!tpl) return;
+
+            const pane = this.state.panes[paneIndex];
+            const name = `untitled${tpl.ext}`;
+            pane.openFiles.push({ 
+                name: name, 
+                buffer: tpl.content, 
+                language: this.getLanguageFromExt(name),
+                defaultDir: tpl.defaultDir,
+                isDirty: true
+            });
+            this.switchToFile(paneIndex, pane.openFiles.length - 1);
+        }
+
+        async renameFile(paneIndex, fileIndex) {
+            const pane = this.state.panes[paneIndex];
+            const file = pane.openFiles[fileIndex];
+            if (!file) return;
+
+            const newPath = prompt("Rename file to (path relative to test root):", file.path || file.name);
+            if (!newPath || newPath === file.path) return;
+
+            const oldPath = file.path;
+            const newName = newPath.split('/').pop();
+            const newLang = this.getLanguageFromExt(newName);
+
+            if (oldPath) {
+                try {
+                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+                    const response = await fetch('/files/move', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-Token': csrfToken
+                        },
+                        body: JSON.stringify({ old_path: oldPath, new_path: newPath })
+                    });
+
+                    if (!response.ok) {
+                        const data = await response.json();
+                        this.showNotice(`Rename failed: ${data.error}`, 'alert');
+                        return;
+                    }
+                } catch (err) {
+                    console.error("Rename failed", err);
+                    this.showNotice("Network error during rename", 'alert');
+                    return;
+                }
+            }
+
+            // Update state locally (for this tab and all linked/synced tabs)
+            const oldModelKey = oldPath || `untitled-${file.name}`;
+            const newModelKey = newPath;
+
+            this.state.panes.forEach((p, pIdx) => {
+                p.openFiles.forEach((f, fIdx) => {
+                    if (f.path === oldPath || (f.name === file.name && !f.path)) {
+                        f.path = newPath;
+                        f.name = newName;
+                        f.language = newLang;
+
+                        // Update Monaco models in this pane instance
+                        const instance = this.paneInstances[pIdx];
+                        if (instance && instance.models[oldModelKey]) {
+                            instance.models[newModelKey] = instance.models[oldModelKey];
+                            delete instance.models[oldModelKey];
+                            
+                            // If this model is currently active, we might need to notify monaco but
+                            // usually setModel handles it if we just change the reference.
+                            // However, we already changed the path in the state, so next loadPaneFile will work.
+                        }
+                    }
+                });
+            });
+
+            this.renderPaneTabs(paneIndex);
+            this.loadPaneFile(paneIndex);
+            this.saveState();
+            
+            document.dispatchEvent(new CustomEvent('parapet:flash', { 
+                detail: { message: `Renamed to ${newName}`, type: 'notice' } 
+            }));
+
+            // Trigger Tree Refresh
+            document.dispatchEvent(new CustomEvent('parapet:fileSystemChanged'));
+        }
+
+        toggleSnippetDrawer(paneIndex) {
+            const pane = this.state.panes[paneIndex];
+            const instance = this.paneInstances[paneIndex];
+            if (!instance) return;
+
+            const drawer = instance.element.querySelector('.qss-snippet-drawer');
+            const closeBtn = drawer.querySelector('.qss-close-drawer-btn');
+            if (!drawer) return;
+
+            pane.drawerOpen = !pane.drawerOpen;
+            
+            if (pane.drawerOpen) {
+                this.renderDrawerSnippets(paneIndex);
+                drawer.style.setProperty('--drawer-w', '220px');
+            } else {
+                drawer.style.setProperty('--drawer-w', '0px');
+            }
+
+            this.saveState();
+            this.updatePaneActions(paneIndex);
+
+            // Trigger Monaco layout update after transition
+            setTimeout(() => instance.editor && instance.editor.layout(), 310);
+        }
+
+        renderDrawerSnippets(paneIndex) {
+            const pane = this.state.panes[paneIndex];
+            const file = pane.openFiles[pane.activeFileIndex];
+            const instance = this.paneInstances[paneIndex];
+            const content = instance.element.querySelector('.qss-drawer-content');
+            if (!content) return;
+
+            const lib = ActivityCards.registry['snippet-library'];
+            const allSnippets = lib ? (new lib()).getSnippets() : [];
+            
+            const filename = (file?.name || '').toLowerCase();
+            let filtered = [];
+            
+            if (filename.endsWith('.feature')) {
+                filtered = allSnippets.filter(c => c.category.includes('Cucumber'));
+            } else if (filename.endsWith('_spec.rb')) {
+                filtered = allSnippets.filter(c => 
+                    c.category.includes('RSpec') || 
+                    c.category.includes('FactoryBot') ||
+                    c.category.includes('Setup')
+                );
+            } else if (filename.endsWith('_test.rb')) {
+                filtered = allSnippets.filter(c => 
+                    c.category.includes('Minitest') || 
+                    c.category.includes('FactoryBot')
+                );
+            } else if (filename.endsWith('.rb')) {
+                filtered = allSnippets.filter(c => 
+                    c.category.includes('RSpec') || 
+                    c.category.includes('FactoryBot') ||
+                    c.category.includes('Setup')
+                );
+            } else {
+                filtered = allSnippets.filter(c => c.category.includes('FactoryBot'));
+            }
+
+            const isSingle = filtered.length === 1;
+            const groupTpl = document.getElementById('qss-tpl-snippet-group');
+            const tileTpl = document.getElementById('qss-tpl-snippet-tile');
+            
+            content.innerHTML = '';
+            
+            filtered.forEach(cat => {
+                const groupEl = groupTpl.content.cloneNode(true).firstElementChild;
+                groupEl.dataset.category = cat.category;
+                groupEl.querySelector('.qss-category-label').textContent = cat.category;
+                
+                const body = groupEl.querySelector('.qss-category-body');
+                const icon = groupEl.querySelector('.qss-category-header svg');
+
+                if (isSingle) {
+                    groupEl.classList.add('qss-border-slate-700', 'qss-bg-white/[0.04]');
+                    body.classList.remove('qss-hidden');
+                    if (icon) icon.style.transform = 'rotate(180deg)';
+                }
+                
+                cat.items.forEach(item => {
+                    const tileEl = tileTpl.content.cloneNode(true).firstElementChild;
+                    tileEl.querySelector('.qss-snippet-name').textContent = item.name;
+                    tileEl.querySelector('.qss-snippet-desc').textContent = item.description || 'No description available.';
+                    tileEl.querySelector('.qss-snippet-code-preview').textContent = item.code;
+                    
+                    const insertBtn = tileEl.querySelector('.qss-insert-btn');
+                    insertBtn.onclick = (e) => {
+                        e.stopPropagation();
+                        this.insertSnippet(paneIndex, item.code);
+                        this.closeAllDropdowns();
+                    };
+                    
+                    body.appendChild(tileEl);
+                });
+                
+                groupEl.querySelector('.qss-category-header').onclick = () => {
+                    const isHidden = body.classList.contains('qss-hidden');
+                    if (isHidden) {
+                        // Collapse all others
+                        content.querySelectorAll('.qss-snippet-group').forEach(otherGroup => {
+                            if (otherGroup === groupEl) return;
+                            const otherBody = otherGroup.querySelector('.qss-category-body');
+                            const otherIcon = otherGroup.querySelector('.qss-category-header svg');
+                            otherBody.classList.add('qss-hidden');
+                            if (otherIcon) otherIcon.style.transform = 'rotate(0deg)';
+                            otherGroup.classList.remove('qss-border-slate-700', 'qss-bg-white/[0.04]');
+                        });
+                    }
+
+                    body.classList.toggle('qss-hidden');
+                    if (icon) icon.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';
+                    groupEl.classList.toggle('qss-border-slate-700', isHidden);
+                    groupEl.classList.toggle('qss-bg-white/[0.04]', isHidden);
+                };
+                
+                content.appendChild(groupEl);
+            });
+        }
+
+        insertSnippet(paneIndex, code) {
+            const instance = this.paneInstances[paneIndex];
+            if (!instance || !instance.editor) return;
+
+            const selection = instance.editor.getSelection();
+            const range = new this.monaco.Range(
+                selection.startLineNumber, 
+                selection.startColumn, 
+                selection.endLineNumber, 
+                selection.endColumn
+            );
+
+            instance.editor.executeEdits("snippet", [{
+                range: range,
+                text: code,
+                forceMoveMarkers: true
+            }]);
+
+            instance.editor.focus();
+            this.showPaneStatus(paneIndex, "Snippet Inserted");
+        }
+
+        async runCurrentFile(paneIndex) {
+            const pane = this.state.panes[paneIndex];
+            const file = pane.openFiles[pane.activeFileIndex];
+            
+            if (!file || !file.path) {
+                this.showNotice("Cannot run unsaved file", 'alert');
+                return;
+            }
+
+            // Save first if dirty
+            if (file.isDirty) {
+                await this.saveCurrentFile(paneIndex);
+            }
+
+            // Ensure Progress Area card is open
+            if (!ActivityCards.active['progress-area']) {
+                ActivityCards.spawn({ id: 'progress-area' });
+            }
+
+            // Dispatch event to the runner card
+            document.dispatchEvent(new CustomEvent('parapet:runTest', { 
+                detail: { path: file.path } 
+            }));
+            
+            this.showPaneStatus(paneIndex, `Running: ${file.name}`);
+        }
+
+        showFixFooter(paneIndex, line, message) {
+            const instance = this.paneInstances[paneIndex];
+            if (!instance) return;
+
+            const footer = instance.element.querySelector('.qss-fix-footer');
+            if (!footer) return;
+
+            footer.classList.remove('qss-hidden');
+            footer.style.setProperty('--footer-h', 'auto');
+            const fullHeight = footer.scrollHeight;
+            footer.style.setProperty('--footer-h', '0px');
+            
+            // Trigger animation
+            setTimeout(() => {
+                footer.style.setProperty('--footer-h', `${fullHeight}px`);
+            }, 10);
+
+            footer.querySelector('.qss-fix-line-num').textContent = line;
+            footer.querySelector('.qss-fix-message').textContent = message;
+
+            // Handlers
+            const closeBtn = footer.querySelector('.qss-close-fix-btn');
+            const ignoreBtn = footer.querySelector('.qss-ignore-fix-btn');
+            const hide = () => {
+                footer.style.setProperty('--footer-h', '0px');
+                setTimeout(() => footer.classList.add('qss-hidden'), 300);
+            };
+
+            closeBtn.onclick = hide;
+            ignoreBtn.onclick = hide;
+
+            footer.querySelector('.qss-apply-fix-btn').onclick = () => {
+                this.showNotice("Applying AI Fix...", 'notice');
+                // Simulate fix applying logic here
+                hide();
+            };
+        }
+
+        async saveCurrentFile(paneIndex) {
+            const pane = this.state.panes[paneIndex];
+            const file = pane.openFiles[pane.activeFileIndex];
+            
+            if (!file) return;
+
+            if (!file.path) {
+                const defaultPath = file.defaultDir ? `${file.defaultDir}/${file.name}` : file.name;
+                const newPath = prompt("Enter path for new file (e.g. models/user_spec.rb):", defaultPath);
+                if (!newPath) return;
+                
+                // Ensure it has an extension if omitted
+                file.path = newPath.includes('.') ? newPath : `${newPath}.rb`;
+                file.name = file.path.split('/').pop();
+                file.language = this.getLanguageFromExt(file.name);
+            }
+
+            try {
+                await this.flushDraftSnapshot(file.path);
+                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+                const response = await fetch('/files', {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-Token': csrfToken
+                    },
+                    body: JSON.stringify({
+                        path: file.path,
+                        content: file.buffer
+                    })
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    file.isDirty = false;
+                    this.renderPaneTabs(paneIndex);
+                    this.showPaneStatus(paneIndex, `Saved: ${file.name}`);
+                    this.saveState();
+
+                    // Dispatch Global Flash Event
+                    if (data.flash) {
+                        document.dispatchEvent(new CustomEvent('parapet:flash', { 
+                            detail: { message: data.flash.notice, type: 'notice' } 
+                        }));
+                    }
+
+                    // Trigger Tree Refresh
+                    document.dispatchEvent(new CustomEvent('parapet:fileSystemChanged'));
+                } else {
+                    const data = await response.json();
+                    this.showPaneStatus(paneIndex, `Error: ${data.error || response.statusText}`, true);
+                    
+                    if (data.flash) {
+                        document.dispatchEvent(new CustomEvent('parapet:flash', { 
+                            detail: { message: data.flash.alert, type: 'alert' } 
+                        }));
+                    }
+                }
+            } catch (err) {
+                console.error("FileEditorCard: Save failed", err);
+                this.showPaneStatus(paneIndex, "Network Error", true);
+                
+                document.dispatchEvent(new CustomEvent('parapet:flash', { 
+                    detail: { message: "Critical: Network Error during file save", type: 'error' } 
+                }));
+            }
+        }
+
+        closeFile(paneIndex, fileIndex) {
+            const pane = this.state.panes[paneIndex];
+            const file = pane.openFiles[fileIndex];
+            const instance = this.paneInstances[paneIndex];
+            const wasActive = fileIndex === pane.activeFileIndex;
+            
+            if (file && instance) {
+                const modelKey = file.path || `untitled-${file.name}`;
+                if (instance.models[modelKey]) {
+                    instance.models[modelKey].dispose();
+                    delete instance.models[modelKey];
+                }
+            }
+
+            pane.openFiles.splice(fileIndex, 1);
+            
+            // Adjust active index:
+            // 1. If we closed a tab before the active one, shift active down
+            // 2. If we closed the active tab, it stays the same (now pointing to next) unless it was last
+            if (fileIndex < pane.activeFileIndex) {
+                pane.activeFileIndex--;
+            }
+            
+            pane.activeFileIndex = Math.max(0, Math.min(pane.activeFileIndex, pane.openFiles.length - 1));
+            
+            this.loadPaneFile(paneIndex);
+            this.renderPaneTabs(paneIndex);
+            this.saveState();
+        }
+
+        addSplit(sourcePaneIndex = 0) {
+            if (this.state.panes.length >= 3) return;
+            
+            this.state.panes.push({
+                openFiles: [],
+                activeFileIndex: 0
+            });
+            
+            this.saveState();
+            setTimeout(() => {
+                this.renderPanes();
+                this.onResize();
+                // Focus the newly created pane
+                this.state.activePaneIndex = this.state.panes.length - 1;
+                this.updatePaneFocus();
+            }, 50);
+        }
+
+        closeSplit(paneIndex) {
+            if (paneIndex === 0) return;
+            
+            // Clean up any panes linked to this one
+            this.state.panes.forEach(p => {
+                if (p.linkedTo === paneIndex) p.linkedTo = null;
+                // Shift indices down if they were linked to a higher pane
+                if (p.linkedTo > paneIndex) p.linkedTo--;
+            });
+
+            this.state.panes.splice(paneIndex, 1);
+            
+            // Fix activePaneIndex if it was the closed one
+            if (this.state.activePaneIndex >= this.state.panes.length) {
+                this.state.activePaneIndex = this.state.panes.length - 1;
+            }
+
+            this.renderPanes();
+            this.saveState();
+        }
+
+        toggleLink(paneIndex) {
+            if (paneIndex === 0) return;
+            const pane = this.state.panes[paneIndex];
+            const activeFile = pane.openFiles[pane.activeFileIndex];
+            if (!activeFile) return;
+
+            if (activeFile.linkedTo === null) {
+                // Link to Pane 1 (index 0) by default if toggled via generic action
+                activeFile.linkedTo = 0;
+                const sourcePane = this.state.panes[0];
+                const sourceFile = sourcePane.openFiles[sourcePane.activeFileIndex];
+                if (sourceFile) {
+                    activeFile.name = sourceFile.name;
+                    activeFile.path = sourceFile.path;
+                    activeFile.buffer = sourceFile.buffer;
+                    activeFile.language = sourceFile.language;
+                }
+            } else {
+                activeFile.linkedTo = null;
+            }
+            
+            this.renderPanes();
+            this.saveState();
+        }
+
+        getFileIcon(filename) {
+            const ext = filename.split('.').pop().toLowerCase();
+            const mapping = {
+                'rb':      { svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-full qss-h-full"><path d="M6 3h12l4 6-10 12L2 9z"></path><path d="M11 3 8 9l4 12 4-12-3-6"></path><path d="M2 9h20"></path></svg>',   color: 'qss-text-red-400' },
+                'feature': { svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-full qss-h-full"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="m9 15 2 2 4-4"></path></svg>',  color: 'qss-text-emerald-400' },
+                'js':      { svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-full qss-h-full"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>',   color: 'qss-text-yellow-400' },
+                'css':     { svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-full qss-h-full"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>',   color: 'qss-text-blue-400' },
+                'erb':     { svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-full qss-h-full"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>',   color: 'qss-text-indigo-400' }
+            };
+            return mapping[ext] || { svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-full qss-h-full"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>', color: 'qss-text-slate-400' };
+        }
+
+        onResize() {
+            this.paneInstances.forEach(p => p.editor && p.editor.layout());
+        }
+
+        onDestroy() {
+            this.paneInstances.forEach(p => {
+                p.editor && p.editor.dispose();
+                Object.values(p.models).forEach(m => m.dispose());
+            });
+        }
+    }
+
+    ActivityCards.register('file-editor', FileEditorCard);
+
+})();