parapet-rails 0.1.0

data/app/assets/javascripts/parapet/card-failure-inspector.js

@@ -0,0 +1,134 @@
+(function() {
+    class FailureInspectorCard extends ActivityCard {
+        get cardTitle()       { return 'Failure Inspector'; }
+        get cardKeyArea()     { return 'Runner'; }
+        get cardProficiency() { return 1; }
+        get cardIcon() {
+            return `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path class="icon-path" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
+                <path class="icon-path" d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2"/>
+            </svg>`;
+        }
+
+        defaults() {
+            return Object.assign({}, super.defaults(), {
+                width: 480, height: 380,
+                minWidth: 300, minHeight: 250,
+                failures: []
+            });
+        }
+
+        buildContent() {
+            return `
+                <div class="qss-failure-inspector-container qss-flex qss-flex-col qss-h-full qss-bg-[#111418] qss-text-size[11] qss-overflow-hidden">
+                    <div class="qss-flex qss-items-center qss-justify-between qss-px[12] qss-py[8] qss-border-b qss-border-slate-800 qss-bg-[#16191e]/50">
+                        <span class="qss-text-slate-400 qss-uppercase qss-tracking-widest qss-text-size[9] qss-font-bold">Active Failures</span>
+                        <button class="qss-clear-failures-btn qss-text-slate-600 hover:qss-text-white qss-transition-colors qss-text-size[9]">Clear</button>
+                    </div>
+                    
+                    <div class="qss-failure-list qss-flex-grow qss-overflow-y-auto qss-custom-scrollbar qss-p[8] qss-space-y[8]">
+                        <div class="qss-text-slate-600 qss-italic qss-p[16] qss-text-center">No active failures to inspect.</div>
+                    </div>
+                </div>
+            `;
+        }
+
+        onInit() {
+            this.listContainer = this.element.querySelector('.qss-failure-list');
+            this.clearBtn = this.element.querySelector('.qss-clear-failures-btn');
+            
+            this.clearBtn.addEventListener('click', () => {
+                this.state.failures = [];
+                this.renderFailures();
+                this.saveState();
+            });
+
+            this._onFailureFound = (e) => {
+                const { path, line, message } = e.detail;
+                this.addFailure({ path, line, message });
+            };
+            document.addEventListener('parapet:failureFound', this._onFailureFound);
+
+            this.renderFailures();
+        }
+
+        addFailure(failure) {
+            // Prevent duplicates
+            const exists = this.state.failures.some(f => f.path === failure.path && f.line === failure.line);
+            if (!exists) {
+                this.state.failures.unshift(failure); // Newest on top
+                if (this.state.failures.length > 50) this.state.failures.pop();
+                this.renderFailures();
+                this.saveState();
+            }
+            
+            // Highlight the card if it's already open
+            this.element.classList.add('qss-active');
+            setTimeout(() => this.element.classList.remove('qss-active'), 1000);
+        }
+
+        renderFailures() {
+            if (this.state.failures.length === 0) {
+                this.listContainer.innerHTML = '<div class="qss-text-slate-600 qss-italic qss-p-4 qss-text-center">No active failures to inspect.</div>';
+                return;
+            }
+
+            this.listContainer.innerHTML = this.state.failures.map((f, i) => `
+                <div class="qss-failure-item qss-group qss-bg-red-900/10 qss-border qss-border-red-900/30 qss-rounded qss-overflow-hidden qss-transition-all hover:qss-border-red-500/50" data-index="${i}">
+                    <div class="qss-p[8] qss-cursor-pointer">
+                        <div class="qss-flex qss-items-center qss-justify-between qss-mb[4]">
+                            <span class="qss-text-red-400 qss-font-bold qss-truncate qss-flex-grow">${f.path.split('/').pop()}</span>
+                            <span class="qss-text-slate-500 qss-text-size[9]">Line ${f.line}</span>
+                        </div>
+                        <div class="qss-text-slate-300 qss-font-mono qss-leading-tight qss-mb[4] qss-break-words">
+                            ${this.escapeHtml(f.message || 'Unknown Error')}
+                        </div>
+                        <div class="qss-text-size[9] qss-text-slate-500 qss-truncate">
+                            ${f.path}
+                        </div>
+                    </div>
+                    <div class="qss-flex qss-border-t qss-border-red-900/20 qss-bg-black/20">
+                        <button class="qss-reveal-btn qss-flex-grow qss-py[4] qss-text-slate-500 hover:qss-text-white hover:qss-bg-white/5 qss-transition-all qss-text-size[9] qss-uppercase qss-font-bold" data-action="reveal">Reveal</button>
+                        <div class="qss-w[1] qss-bg-red-900/20"></div>
+                        <button class="qss-ai-fix-btn qss-flex-grow qss-py[4] qss-text-amber-500/70 hover:qss-text-amber-400 hover:qss-bg-white/5 qss-transition-all qss-text-size[9] qss-uppercase qss-font-bold" data-action="ai-fix">AI Fix</button>
+                    </div>
+                </div>
+            `).join('');
+
+            // Add listeners
+            this.listContainer.querySelectorAll('.qss-failure-item').forEach(item => {
+                const idx = item.dataset.index;
+                const failure = this.state.failures[idx];
+
+                item.querySelector('.qss-p-2').addEventListener('click', () => this.reveal(failure));
+                item.querySelector('[data-action="reveal"]').addEventListener('click', () => this.reveal(failure));
+                item.querySelector('[data-action="ai-fix"]').addEventListener('click', () => this.aiFix(failure));
+            });
+        }
+
+        reveal(failure) {
+            document.dispatchEvent(new CustomEvent('parapet:revealLine', {
+                detail: { path: failure.path, line: failure.line, message: failure.message }
+            }));
+        }
+
+        aiFix(failure) {
+            console.log("AI Fix requested for:", failure);
+            // Future integration with AI agent
+            alert("AI Fix functionality coming soon to the Power Tier!");
+        }
+
+        escapeHtml(str) {
+            const div = document.createElement('div');
+            div.textContent = str;
+            return div.innerHTML;
+        }
+
+        onDestroy() {
+            if (this._onFailureFound) document.removeEventListener('parapet:failureFound', this._onFailureFound);
+        }
+    }
+
+    FailureInspectorCard.cardId = 'ai-error-explainer'; // Match registry ID
+    ActivityCards.registry['ai-error-explainer'] = FailureInspectorCard;
+})();