parapet-rails 0.1.0

data/app/assets/javascripts/parapet/card-progress-area.js

@@ -0,0 +1,297 @@
+(function() {
+    class DiagnosticAreaCard extends ActivityCard {
+        get cardTitle()       { return 'Diagnostic Area'; }
+        get cardKeyArea()     { return 'Runner'; }
+        get cardProficiency() { return 0; }
+        get cardIcon() {
+            return `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path class="icon-path" d="M22 12H18L15 21L9 3L6 12H2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`;
+        }
+
+        defaults() {
+            return Object.assign({}, super.defaults(), {
+                width: 500, height: 300,
+                minWidth: 350, minHeight: 180,
+                lastRun: null
+            });
+        }
+
+        buildContent() {
+            return `
+                <div class="qss-progress-area-container qss-flex qss-flex-col qss-h-full qss-bg-[#111418] qss-text-size[11] qss-font-mono qss-overflow-hidden">
+                    <!-- Control Bar -->
+                    <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">
+                        <div class="qss-flex qss-items-center qss-gap[8]">
+                            <div class="qss-test-triggers qss-flex qss-items-center qss-gap[8]">
+                                <!-- Dynamic buttons will be injected here -->
+                                <div class="qss-animate-pulse qss-w[64] qss-h[20] qss-bg-slate-800 qss-rounded"></div>
+                            </div>
+                            <div class="qss-w[1] qss-h[16] qss-bg-slate-800 qss-mx[4]"></div>
+                            <div class="qss-status-indicator qss-flex qss-items-center qss-gap[8] qss-text-slate-500 qss-italic">
+                                <span class="qss-status-text">Idle</span>
+                            </div>
+                        </div>
+                        <div class="qss-flex qss-items-center qss-gap[8]">
+                             <button class="qss-clear-btn qss-text-slate-600 hover:qss-text-white qss-transition-colors qss-p[4]" title="Clear Console">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w[12] qss-h[12]"><path d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6"/></svg>
+                             </button>
+                        </div>
+                    </div>
+
+                    <!-- Output Console -->
+                    <div class="qss-output-console qss-flex-grow qss-overflow-y-auto qss-p[12] qss-space-y[2] qss-custom-scrollbar qss-bg-black/20">
+                        <div class="qss-text-slate-600 qss-italic qss-uppercase qss-tracking-widest qss-text-size[9] qss-mb[8] qss-border-b qss-border-slate-800/50 qss-pb[4]">System Output</div>
+                        <div class="qss-console-lines qss-flex qss-flex-col qss-gap[2]">
+                            <div class="qss-text-slate-500">Ready for execution.</div>
+                        </div>
+                    </div>
+
+                    <!-- Summary Stats (Footer) -->
+                    <div class="qss-stats-footer qss-h[32] qss-px[12] qss-border-t qss-border-slate-800 qss-bg-[#0b0d11] qss-flex qss-items-center qss-justify-between qss-overflow-hidden">
+                        <div class="qss-flex qss-items-center qss-gap[16]">
+                            <div class="qss-flex qss-items-center qss-gap[6]">
+                                <div class="qss-w[6] qss-h[6] qss-rounded-full qss-bg-emerald-500"></div>
+                                <span class="qss-text-slate-400"><strong class="qss-pass-count qss-text-slate-200 qss-font-bold">0</strong> Passing</span>
+                            </div>
+                            <div class="qss-flex qss-items-center qss-gap[6]">
+                                <div class="qss-w[6] qss-h[6] qss-rounded-full qss-bg-red-500 qss-shadow-[0_0_8px_rgba(239,68,68,0.4)]"></div>
+                                <span class="qss-text-slate-400"><strong class="qss-fail-count qss-text-slate-200 qss-font-bold">0</strong> Failing</span>
+                            </div>
+                        </div>
+                        <div class="qss-run-time qss-text-slate-600 qss-italic qss-text-size[10]">--</div>
+                    </div>
+                </div>
+            `;
+        }
+
+        onInit() {
+            this.triggerContainer = this.element.querySelector('.qss-test-triggers');
+            this.clearBtn = this.element.querySelector('.qss-clear-btn');
+            this.consoleLines = this.element.querySelector('.qss-console-lines');
+            this.statusText = this.element.querySelector('.qss-status-text');
+            
+            this.clearBtn.addEventListener('click', () => this.clearConsole());
+            this.detectFrameworks();
+
+            // Global listener for "Run Test" requests from other cards
+            this._onRunRequest = (e) => {
+                if (e.detail && e.detail.path) {
+                    this.runTests(e.detail.path);
+                }
+            };
+            document.addEventListener('parapet:runTest', this._onRunRequest);
+        }
+
+        onDestroy() {
+            if (this._onRunRequest) document.removeEventListener('parapet:runTest', this._onRunRequest);
+        }
+
+        async detectFrameworks() {
+            try {
+                const response = await fetch('/runner/detect');
+                const data = await response.json();
+                
+                this.triggerContainer.innerHTML = '';
+                
+                if (data.frameworks.length === 0) {
+                    this.triggerContainer.innerHTML = '<span class="qss-text-slate-600 qss-italic qss-text-[9px]">No tests detected</span>';
+                    return;
+                }
+
+                data.frameworks.forEach(fw => {
+                    const btn = document.createElement('button');
+                    const colorMap = {
+                        red: 'qss-bg-red-600/20 qss-text-red-400 qss-border-red-500/30 hover:qss-bg-red-600/30',
+                        blue: 'qss-bg-blue-600/20 qss-text-blue-400 qss-border-blue-500/30 hover:qss-bg-blue-600/30',
+                        emerald: 'qss-bg-emerald-600/20 qss-text-emerald-400 qss-border-emerald-500/30 hover:qss-bg-emerald-600/30',
+                        amber: 'qss-bg-amber-600/20 qss-text-amber-400 qss-border-amber-500/30 hover:qss-bg-amber-600/30',
+                        indigo: 'qss-bg-indigo-600/20 qss-text-indigo-400 qss-border-indigo-500/30 hover:qss-bg-indigo-600/30',
+                        slate: 'qss-bg-slate-600/20 qss-text-slate-400 qss-border-slate-500/30 hover:qss-bg-slate-600/30',
+                        orange: 'qss-bg-orange-600/20 qss-text-orange-400 qss-border-orange-500/30 hover:qss-bg-orange-600/30',
+                        cyan: 'qss-bg-cyan-600/20 qss-text-cyan-400 qss-border-cyan-500/30 hover:qss-bg-cyan-600/30',
+                        rose: 'qss-bg-rose-600/20 qss-text-rose-400 qss-border-rose-500/30 hover:qss-bg-rose-600/30',
+                        lime: 'qss-bg-lime-600/20 qss-text-lime-400 qss-border-lime-500/30 hover:qss-bg-lime-600/30',
+                        pink: 'qss-bg-pink-600/20 qss-text-pink-400 qss-border-pink-500/30 hover:qss-bg-pink-600/30',
+                        teal: 'qss-bg-teal-600/20 qss-text-teal-400 qss-border-teal-500/30 hover:qss-bg-teal-600/30',
+                        violet: 'qss-bg-violet-600/20 qss-text-violet-400 qss-border-violet-500/30 hover:qss-bg-violet-600/30',
+                        sky: 'qss-bg-sky-600/20 qss-text-sky-400 qss-border-sky-500/30 hover:qss-bg-sky-600/30'
+                    };
+                    const colorClasses = colorMap[fw.color] || colorMap.blue;
+                    
+                    btn.className = `qss-run-btn qss-flex qss-items-center qss-gap-1.5 qss-px-2 qss-py-1 qss-border qss-rounded qss-transition-all active:qss-scale-95 ${colorClasses}`;
+                    btn.dataset.command = fw.id;
+                    btn.innerHTML = `<span class="qss-font-bold qss-uppercase qss-tracking-wider qss-text-[9px]">${fw.name}</span>`;
+                    
+                    btn.addEventListener('click', () => this.runTests(null, fw.id));
+                    this.triggerContainer.appendChild(btn);
+                });
+            } catch (err) {
+                console.error("Framework detection failed", err);
+                this.triggerContainer.innerHTML = '<span class="qss-text-red-400 qss-italic">Detection failed</span>';
+            }
+        }
+
+        async runTests(path = null, command = null) {
+            if (this._running) return;
+            this._running = true;
+
+            const btns = this.triggerContainer.querySelectorAll('button');
+            btns.forEach(btn => {
+                btn.disabled = true;
+                btn.classList.add('qss-opacity-50', 'qss-grayscale');
+            });
+
+            const statusMessages = {
+                'rspec': 'Executing Tests...',
+                'cucumber': 'Running Scenarios...',
+                'minitest': 'Running Tests...',
+                'rubocop': 'Inspecting Style...',
+                'standardrb': 'Checking Standards...',
+                'brakeman': 'Scanning Security...',
+                'zeitwerk': 'Checking Autoloads...',
+                'bundle_audit': 'Auditing Gems...',
+                'rails_best_practices': 'Analyzing Quality...',
+                'factory_bot_lint': 'Linting Factories...',
+                'erb_lint': 'Inspecting Templates...',
+                'database_consistency': 'Checking DB Health...',
+                'i18n_tasks': 'Checking Translations...'
+            };
+
+            this.statusText.textContent = statusMessages[command] || "Running...";
+            this.statusText.className = "qss-status-text qss-text-amber-400 qss-animate-pulse";
+
+            const logCommand = command || (path ? 'test' : 'run all');
+            this.log(`> Parapet executing ${logCommand}...`, 'qss-text-indigo-400 qss-font-bold qss-mt-2');
+
+            try {
+                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+                const response = await fetch('/runner/execute', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-Token': csrfToken
+                    },
+                    body: JSON.stringify({ path: path, command: command })
+                });
+
+                const data = await response.json();
+
+                if (data.status === 'success') {
+                    // Speed up the simulation for high-output tools
+                    const delay = data.output.length > 50 ? 15 : 40;
+                    
+                    for (const line of data.output) {
+                        await new Promise(r => setTimeout(r, delay)); 
+                        
+                        let colorClass = 'qss-text-slate-400';
+                        let canClick = false;
+
+                        if (line.type === 'pass') colorClass = 'qss-text-emerald-500 qss-inline-block qss-mr-0.5';
+                        if (line.type === 'fail' || line.type === 'error') {
+                            colorClass = 'qss-text-red-500 qss-font-bold qss-inline-block qss-mr-0.5 qss-cursor-pointer hover:qss-underline hover:qss-scale-110 qss-transition-transform';
+                            canClick = true;
+                        }
+                        if (line.type === 'lint') {
+                            colorClass = 'qss-text-slate-500 qss-cursor-pointer hover:qss-text-indigo-400 hover:qss-underline qss-transition-colors';
+                            canClick = true;
+                        }
+                        if (line.type === 'summary') {
+                            if (line.text.includes('Finished')) colorClass = 'qss-text-slate-200 qss-border-t qss-border-slate-800 qss-mt-2 qss-pt-1';
+                            else colorClass = 'qss-text-slate-100 qss-font-bold';
+                        }
+                        if (line.type === 'info' && line.text.startsWith('>')) colorClass = 'qss-text-indigo-400 qss-font-bold qss-mt-2';
+                        
+                        const el = this.log(line.text, colorClass, line.type === 'pass' || line.type === 'fail' || line.type === 'error');
+                        
+                        if (canClick && el) {
+                            el.title = `Click to reveal: ${line.file}:${line.line} - ${line.message}`;
+                            el.addEventListener('click', () => {
+                                document.dispatchEvent(new CustomEvent('parapet:revealLine', {
+                                    detail: { path: line.file, line: line.line, message: line.message }
+                                }));
+                            });
+
+                            // Auto-dispatch to Failure Inspector if it's a failure
+                            if (line.type === 'fail' || line.type === 'error' || line.type === 'lint') {
+                                document.dispatchEvent(new CustomEvent('parapet:failureFound', {
+                                    detail: { path: line.file, line: line.line, message: line.message }
+                                }));
+                            }
+                        }
+                    }
+
+                    this.updateStats(data.summary);
+                    const hasFailures = data.summary.failures > 0 || data.summary.errors > 0;
+                    this.statusText.textContent = hasFailures ? "Failures Detected" : "Success";
+                    this.statusText.className = `qss-status-text ${hasFailures ? 'qss-text-red-400' : 'qss-text-emerald-400'}`;
+                } else {
+                    this.log(`Error: ${data.error}`, 'qss-text-red-500 qss-font-bold');
+                    this.statusText.textContent = "Error";
+                    this.statusText.className = "qss-status-text qss-text-red-500";
+                }
+            } catch (err) {
+                console.error("Test runner failed", err);
+                this.log("Network Error: Could not reach test runner", 'qss-text-red-500 qss-font-bold');
+                this.statusText.textContent = "Network Error";
+                this.statusText.className = "qss-status-text qss-text-red-500";
+            } finally {
+                this._running = false;
+                const btns = this.triggerContainer.querySelectorAll('button');
+                btns.forEach(btn => {
+                    btn.disabled = false;
+                    btn.classList.remove('qss-opacity-50', 'qss-grayscale');
+                });
+            }
+        }
+
+        log(message, className = 'qss-text-slate-400', inline = false) {
+            const div = document.createElement(inline ? 'span' : 'div');
+            div.className = className;
+            div.textContent = message;
+            
+            // If inline, we might need a container if the last child isn't an inline-container
+            if (inline) {
+                let last = this.consoleLines.lastElementChild;
+                if (!last || !last.classList.contains('qss-inline-row')) {
+                    last = document.createElement('div');
+                    last.className = 'qss-inline-row qss-flex qss-flex-wrap';
+                    this.consoleLines.appendChild(last);
+                }
+                last.appendChild(div);
+            } else {
+                this.consoleLines.appendChild(div);
+            }
+            
+            // Auto scroll
+            const console = this.element.querySelector('.qss-output-console');
+            console.scrollTop = console.scrollHeight;
+            return div;
+        }
+
+        clearConsole() {
+            this.consoleLines.innerHTML = '<div class="qss-text-slate-600 qss-italic">Console cleared.</div>';
+            this.statusText.textContent = "Idle";
+            this.statusText.className = "qss-status-text qss-text-slate-500 qss-italic";
+        }
+
+        updateStats(summary) {
+            const passEl = this.element.querySelector('.qss-pass-count');
+            const failEl = this.element.querySelector('.qss-fail-count');
+            const timeEl = this.element.querySelector('.qss-run-time');
+
+            if (passEl) passEl.textContent = summary.runs - (summary.failures + summary.errors);
+            if (failEl) failEl.textContent = summary.failures + summary.errors;
+            if (timeEl) timeEl.textContent = `${(Math.random() * 0.5 + 0.1).toFixed(2)}s`;
+        }
+
+        onDestroy() {
+            if (this._onRunRequest) {
+                document.removeEventListener('parapet:runTest', this._onRunRequest);
+            }
+        }
+    }
+
+    DiagnosticAreaCard.cardId = 'progress-area';
+    ActivityCards.registry['progress-area'] = DiagnosticAreaCard;
+})();

data/app/assets/javascripts/parapet/card-smart-search.js

@@ -0,0 +1,114 @@
+(function() {
+    class SmartSearchCard extends ActivityCard {
+        get cardId()          { return 'smart-search'; }
+        get cardTitle()       { return 'Smart Search'; }
+        get cardIcon()        { return `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="icon-path" d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2"/><path class="icon-path" d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2"/></svg>`; }
+        get cardKeyArea()     { return 'Explorer'; }
+        get cardProficiency() { return 2; }
+
+        defaults() {
+            return Object.assign({}, super.defaults(), {
+                width: 320,
+                height: 400,
+                minWidth: 280,
+                minHeight: 300
+            });
+        }
+
+        buildContent() {
+            return `
+                <div class="qss-flex qss-flex-col qss-h-full qss-bg-[#111418]">
+                    <!-- Search Input Area -->
+                    <div class="qss-p-3 qss-border-b qss-border-slate-800/50">
+                        <div class="qss-relative qss-group">
+                            <input type="text" 
+                                   class="qss-w-full qss-bg-[#0f1115] qss-border qss-border-slate-700/50 qss-rounded qss-px-8 qss-py-1.5 qss-text-[11px] qss-text-slate-300 focus:qss-outline-none focus:qss-border-indigo-500/50 qss-transition-all placeholder:qss-text-slate-600"
+                                   placeholder="Ask anything or search code...">
+                            <div class="qss-absolute qss-left-2.5 qss-top-1/2 qss--translate-y-1/2 qss-text-slate-500 group-focus-within:qss-text-indigo-400 qss-transition-colors">
+                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                                </svg>
+                            </div>
+                        </div>
+                        <div class="qss-flex qss-gap-1.5 qss-mt-2 qss-overflow-x-auto qss-pb-1 no-scrollbar">
+                            <span class="qss-text-[9px] qss-bg-slate-800/50 qss-text-slate-400 qss-px-1.5 qss-py-0.5 qss-rounded qss-border qss-border-slate-700/30 qss-whitespace-nowrap qss-cursor-pointer hover:qss-bg-slate-700/50 qss-transition-colors">Files</span>
+                            <span class="qss-text-[9px] qss-bg-slate-800/50 qss-text-slate-400 qss-px-1.5 qss-py-0.5 qss-rounded qss-border qss-border-slate-700/30 qss-whitespace-nowrap qss-cursor-pointer hover:qss-bg-slate-700/50 qss-transition-colors">Symbols</span>
+                            <span class="qss-text-[9px] qss-bg-slate-800/50 qss-text-slate-400 qss-px-1.5 qss-py-0.5 qss-rounded qss-border qss-border-slate-700/30 qss-whitespace-nowrap qss-cursor-pointer hover:qss-bg-slate-700/50 qss-transition-colors">AI Help</span>
+                            <span class="qss-text-[9px] qss-bg-slate-800/50 qss-text-slate-400 qss-px-1.5 qss-py-0.5 qss-rounded qss-border qss-border-slate-700/30 qss-whitespace-nowrap qss-cursor-pointer hover:qss-bg-slate-700/50 qss-transition-colors">Tests</span>
+                        </div>
+                    </div>
+
+                    <!-- Results / Suggestions Area -->
+                    <div class="qss-flex-1 qss-overflow-y-auto qss-p-2 qss-custom-scrollbar qss-space-y-3">
+                        <!-- Recent Activity Section -->
+                        <div>
+                            <div class="qss-text-[9px] qss-font-bold qss-text-slate-500 qss-uppercase qss-tracking-widest qss-px-1 qss-mb-2">Recent & Relevant</div>
+                            <div class="qss-space-y-1">
+                                <div class="qss-flex qss-items-center qss-gap-2 qss-p-1.5 qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-group qss-transition-colors">
+                                    <div class="qss-w-6 qss-h-6 qss-rounded qss-bg-indigo-500/10 qss-flex qss-items-center qss-justify-center qss-text-indigo-400">
+                                        <i class="lucide-file-text w-3 h-3"></i>
+                                    </div>
+                                    <div class="qss-flex-1 qss-min-w-0">
+                                        <div class="qss-text-[10px] qss-text-slate-300 qss-truncate">dashboard_controller.rb</div>
+                                        <div class="qss-text-[8px] qss-text-slate-500 qss-truncate">app/controllers/parapet/</div>
+                                    </div>
+                                </div>
+                                <div class="qss-flex qss-items-center qss-gap-2 qss-p-1.5 qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-group qss-transition-colors">
+                                    <div class="qss-w-6 qss-h-6 qss-rounded qss-bg-emerald-500/10 qss-flex qss-items-center qss-justify-center qss-text-emerald-400">
+                                        <i class="lucide-test-tube w-3 h-3"></i>
+                                    </div>
+                                    <div class="qss-flex-1 qss-min-w-0">
+                                        <div class="qss-text-[10px] qss-text-slate-300 qss-truncate">index_spec.rb</div>
+                                        <div class="qss-text-[8px] qss-text-slate-500 qss-truncate">spec/views/parapet/dashboard/</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Suggested Queries Section -->
+                        <div>
+                            <div class="qss-text-[9px] qss-font-bold qss-text-slate-500 qss-uppercase qss-tracking-widest qss-px-1 qss-mb-2">Try searching for...</div>
+                            <div class="qss-grid qss-grid-cols-1 qss-gap-1">
+                                <div class="qss-text-[10px] qss-text-slate-400 qss-bg-white/5 qss-p-2 qss-rounded qss-border qss-border-slate-700/20 hover:qss-border-indigo-500/30 qss-cursor-pointer qss-transition-all">
+                                    "How do I add a new activity card?"
+                                </div>
+                                <div class="qss-text-[10px] qss-text-slate-400 qss-bg-white/5 qss-p-2 qss-rounded qss-border qss-border-slate-700/20 hover:qss-border-indigo-500/30 qss-cursor-pointer qss-transition-all">
+                                    "Find all Novice proficiency elements"
+                                </div>
+                                <div class="qss-text-[10px] qss-text-slate-400 qss-bg-white/5 qss-p-2 qss-rounded qss-border qss-border-slate-700/20 hover:qss-border-indigo-500/30 qss-cursor-pointer qss-transition-all">
+                                    "Show me where routes are defined"
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Footer / Status -->
+                    <div class="qss-px-3 qss-py-2 qss-border-t qss-border-slate-800/50 qss-bg-[#0f1115]/50 qss-flex qss-items-center qss-justify-between">
+                        <div class="qss-flex qss-items-center qss-gap-1.5 qss-text-[9px] qss-text-slate-500">
+                            <div class="qss-w-1.5 qss-h-1.5 qss-rounded-full qss-bg-emerald-500/50"></div>
+                            <span>AI Index Ready</span>
+                        </div>
+                        <div class="qss-text-[9px] qss-text-slate-600">
+                            <span class="qss-bg-slate-800 qss-px-1 qss-rounded qss-border qss-border-slate-700/50">⌘K</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+
+        onInit() {
+            // Future interaction logic for stub
+            const input = this.element.querySelector('input');
+            if (input) {
+                input.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter') {
+                        // Simulated search
+                        console.log('Smart search for:', input.value);
+                    }
+                });
+            }
+        }
+    }
+
+    ActivityCards.registry['smart-search'] = SmartSearchCard;
+})();