parapet-rails 0.1.0

data/app/assets/javascripts/parapet/activity-cards.js

@@ -0,0 +1,291 @@
+(function(global) {
+    console.log("ActivityCards: Script execution started");
+
+    const ActivityCards = {
+        active: {},
+        DRAG_Z: 1000,
+        PROMOTE_Z: 500,
+        Z_LEVELS: [10, 20, 30, 40, 500],
+        registry: {},
+        settings: {
+            gridSize: 5,
+            autoSave: true
+        },
+        state: {
+            layoutName: 'default',
+            lastFocused: null,
+            promotedCardId: null,
+            cards: {}
+        },
+
+        zLabel: function(z) {
+            const idx = this.Z_LEVELS.indexOf(z);
+            return idx >= 0 ? String(idx + 1) : '?';
+        },
+
+        getProficiencyLevel: function() {
+            const saved = localStorage.getItem('parapet-proficiency-level');
+            return saved !== null ? parseInt(saved) : -1;
+        },
+
+        init: function() {
+            const saved = localStorage.getItem('parapet-workspace-state');
+            if (saved) {
+                try {
+                    this.state = JSON.parse(saved);
+                } catch (e) {
+                    console.warn("ActivityCards: Failed to parse saved state", e);
+                }
+            }
+            this.syncCSS();
+            this.initResizeObserver();
+            
+            // Listen for proficiency changes to re-layout
+            document.addEventListener('proficiencyChanged', () => {
+                this.applyLayout();
+            });
+
+            console.log("ActivityCards: Global object initialized");
+        },
+
+        initResizeObserver: function() {
+            const layers = document.querySelector('#pp-workspace-layers');
+            if (!layers) return;
+
+            const observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                if (!entry) return;
+                
+                const { width, height } = entry.contentRect;
+
+                // Use requestAnimationFrame to ensure we read layout after CSS transition/re-calc
+                requestAnimationFrame(() => {
+                    Object.values(this.active).forEach(card => {
+                        card.constrainToBoundaries(width, height);
+                        card.updateElementStyles();
+                        card.onResize(); 
+                        card.saveState();
+                    });
+                });
+            });
+
+            observer.observe(layers);
+        },
+
+        save: function() {
+            try {
+                localStorage.setItem('parapet-workspace-state', JSON.stringify(this.state));
+            } catch(e) {
+                console.warn('ActivityCards: state serialization failed —', e.message);
+            }
+        },
+
+        updateCardState: function(id, state) {
+            this.state.cards[id] = { ...state };
+            if (this.settings.autoSave) this.save();
+        },
+
+        getCardState: function(id) {
+            return this.state.cards[id] || null;
+        },
+
+        removeCardState: function(id) {
+            delete this.state.cards[id];
+            if (this.settings.autoSave) this.save();
+        },
+
+        cleanTitle: function(title) {
+            if (!title) return '';
+            return title.replace(/\s*\([NIAP]\)\s*-\s*\w+\s*$/, '').trim();
+        },
+
+        generateIdFromTitle: function(title) {
+            if (!title) return null;
+            let id = title.split(' (')[0].toLowerCase().replace(/\s+/g, '-');
+            const mapping = {
+                'failure-inspector': 'ai-error-explainer',
+                'discovery-sidebar': 'discovery-sidebar',
+                'live-web-preview': 'live-preview'
+            };
+            return mapping[id] || id;
+        },
+
+        register: function(id, CardClass) {
+            this.registry[id] = CardClass;
+            // If the card was previously registered as a stub, or we have saved state for it,
+            // we don't necessarily respawn, but the next spawn will use the new class.
+            console.log(`ActivityCards: Registered class for ${id}`);
+        },
+
+        updateGridSize: function(newSize) {
+            this.settings.gridSize = parseInt(newSize);
+            this.syncCSS();
+            Object.values(this.active).forEach(card => {
+                card.alignToGrid();
+                card.updateElementStyles();
+            });
+        },
+
+        syncCSS: function() {
+            document.documentElement.style.setProperty('--qss-grid-size', `${this.settings.gridSize}px`);
+            document.documentElement.style.setProperty('--qss-card-radius', `${this.settings.gridSize}px`);
+        },
+
+        applyLayout: function() {
+            const level = this.getProficiencyLevel();
+            if (level === -1 || level >= 2) {
+                this.masonryPack();
+            } else {
+                this.structuredLayout();
+            }
+        },
+
+        structuredLayout: function(containerSelector = '#pp-workspace-layers') {
+            const container = document.querySelector(containerSelector);
+            if (!container) return;
+            const cRect = container.getBoundingClientRect();
+            const GRID_SIZE = this.settings.gridSize;
+            
+            // Only layout cards that have not been manually positioned by the user
+            const cards = Object.values(this.active).filter(c => {
+                const isUserPositioned = c.state.userPositioned === true;
+                if (c.id === 'file-editor') {
+                    console.log(`ActivityCards: card ${c.id} userPositioned=${isUserPositioned} x=${c.state.x} y=${c.state.y}`);
+                }
+                return c.state.visible && !isUserPositioned && !c.state.pinned;
+            });
+            if (cards.length === 0) return;
+
+            // Column 1: Explorer / Snippets (20% width)
+            // Column 2: Editor (60% width)
+            // Column 3: Runner / Diagnostics (20% width)
+            const colWidths = [
+                Math.floor(cRect.width * 0.2 / GRID_SIZE) * GRID_SIZE,
+                Math.floor(cRect.width * 0.6 / GRID_SIZE) * GRID_SIZE,
+                Math.floor(cRect.width * 0.2 / GRID_SIZE) * GRID_SIZE
+            ];
+
+            const col1 = cards.filter(c => c.id === 'file-explorer' || c.id === 'snippet-library');
+            const col2 = cards.filter(c => c.id === 'file-editor');
+            const col3 = cards.filter(c => !col1.includes(c) && !col2.includes(c));
+
+            const layoutColumn = (colCards, x, width) => {
+                if (colCards.length === 0) return;
+                const totalPadding = (colCards.length - 1) * GRID_SIZE;
+                const cardHeight = Math.floor((cRect.height - totalPadding) / colCards.length / GRID_SIZE) * GRID_SIZE;
+                
+                colCards.forEach((card, idx) => {
+                    // Force positioning ONLY if not user positioned
+                    card.state.x = x;
+                    card.state.y = idx * (cardHeight + GRID_SIZE);
+                    card.state.width = width;
+                    card.state.height = cardHeight;
+                    card.updateElementStyles();
+                    card.saveState();
+                });
+            };
+
+            layoutColumn(col1, 0, colWidths[0]);
+            layoutColumn(col2, colWidths[0] + GRID_SIZE, colWidths[1] - (GRID_SIZE * 2));
+            layoutColumn(col3, colWidths[0] + colWidths[1], colWidths[2] - GRID_SIZE);
+        },
+
+        spawn: function(options, containerSelector = '#pp-workspace-layers') {
+            const container = document.querySelector(containerSelector);
+            if (!container) return;
+            
+            // If ID is provided, use it as the definitive key in active registry
+            const id = options.id || `card-${Math.random().toString(36).substr(2, 9)}`;
+            if (this.active[id]) return this.active[id];
+
+            console.log(`ActivityCards: Spawning ${id}. Registry keys:`, Object.keys(this.registry));
+            const CardClass = this.registry[id] || ActivityCard;
+            console.log(`ActivityCards: Using class ${CardClass.name} for ${id}`);
+            
+            const card = new CardClass({ ...options, id: id });
+            card.render(container);
+            card.state.visible = true;
+            card.saveState();
+            this.active[id] = card;
+            
+            // Re-apply layout on spawn
+            this.applyLayout();
+
+            document.dispatchEvent(new CustomEvent('cardSpawned', { detail: { id: id } }));
+            return card;
+        },
+
+        masonryPack: function(containerSelector = '#pp-workspace-layers') {
+            const container = document.querySelector(containerSelector);
+            if (!container) return;
+            const cRect = container.getBoundingClientRect();
+            const GRID_SIZE = this.settings.gridSize;
+            const MARGIN = GRID_SIZE;
+            
+            // Skip pinned and user-positioned cards
+            const cards = Object.values(this.active).filter(c => {
+                const isUserPositioned = c.state.userPositioned === true;
+                return !c.state.pinned && !isUserPositioned;
+            });
+            const sizeWeight = { 'xlarge': 0, 'large': 1, 'medium': 2, 'small': 3 };
+            const orientWeight = { 'neutral': 0, 'horizontal': 1, 'vertical': 2 };
+            cards.sort((a, b) => (sizeWeight[a.state.size] - sizeWeight[b.state.size]) || (orientWeight[a.state.orientation] - orientWeight[b.state.orientation]) || (a.state.y - b.state.y) || (a.state.x - b.state.x));
+            const placedCards = [];
+            cards.forEach(card => {
+                let placed = false;
+                for (let y = 0; y < 5000; y += GRID_SIZE) {
+                    for (let x = 0; x < cRect.width - card.state.width; x += GRID_SIZE) {
+                        const testState = { x, y, width: card.state.width, height: card.state.height };
+                        const isOccupied = placedCards.some(p => {
+                            const pBound = { x: p.state.x - MARGIN, y: p.state.y - MARGIN, width: p.state.width + (MARGIN * 2), height: p.state.height + (MARGIN * 2) };
+                            return card.isOverlapping(testState, pBound);
+                        });
+                        if (!isOccupied) {
+                            card.state.x = x;
+                            card.state.y = y;
+                            card.updateElementStyles();
+                            card.saveState();
+                            placedCards.push(card);
+                            placed = true;
+                            break;
+                        }
+                    }
+                    if (placed) break;
+                }
+            });
+        },
+
+        promote: function(cardId) {
+            const card = this.active[cardId];
+            if (!card || card.state.pinned) return;
+            if (this.state.promotedCardId && this.state.promotedCardId !== cardId) {
+                const prev = this.active[this.state.promotedCardId];
+                if (prev) prev.demote();
+            }
+            this.state.promotedCardId = cardId;
+            card.state.zIndex = this.PROMOTE_Z;
+            card.element.style.zIndex = this.PROMOTE_Z;
+            card.element.classList.add('qss-promoted');
+            const zDisplay = card.element.querySelector('.qss-z-index-display');
+            if (zDisplay) zDisplay.textContent = this.zLabel(this.PROMOTE_Z);
+            card.saveState();
+        },
+
+        respawnAll: function() {
+            Object.keys(this.state.cards).forEach(id => {
+                const saved = this.state.cards[id];
+                if (!this.active[id] && saved.visible !== false) this.spawn({ id: id });
+            });
+            this.applyLayout();
+        }
+    };
+
+    global.ActivityCards = ActivityCards;
+    ActivityCards.init();
+
+    // Ensure all script-based registrations (like FileEditorCard) complete before respawning
+    document.addEventListener('DOMContentLoaded', function() {
+        setTimeout(function() { ActivityCards.respawnAll(); }, 0);
+    });
+
+})(typeof window !== 'undefined' ? window : this);

data/app/assets/javascripts/parapet/activity-registry.js

@@ -0,0 +1,181 @@
+//
+// activity-registry.js — Stub factory for unimplemented cards.
+//
+// CONVENTION: When a card is implemented, create card-[name].js which:
+//   1. defines `class FooCard extends ActivityCard`
+//   2. calls `ActivityCards.registry['foo'] = FooCard`
+//   3. is added to application.html.erb AFTER activity-registry.js
+//   The card-[name].js registration overwrites the stub here.
+//
+// This file should shrink over time as cards graduate to their own files.
+//
+
+(function() {
+
+    var stubs = {
+        'smart-search': {
+            title: 'Smart Search',
+            icon: `<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>`,
+            keyArea: 'Explorer', proficiency: 2,
+            orientation: 'vertical', size: 'medium',
+            width: 300, height: 200, minWidth: 200, minHeight: 150
+        },
+        'live-preview': {
+            title: 'Live Web Preview',
+            icon: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="icon-path" d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle class="icon-path" cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+            keyArea: 'Stylist', proficiency: 0,
+            orientation: 'neutral', size: 'medium',
+            width: 400, height: 250, minWidth: 300, minHeight: 200
+        },
+        'ai-error-explainer': {
+            title: 'Failure Inspector',
+            icon: `<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>`,
+            keyArea: 'Runner', proficiency: 1,
+            orientation: 'neutral', size: 'small',
+            width: 480, height: 380, minWidth: 300, minHeight: 250
+        },
+        'file-explorer': {
+            title: 'File Explorer',
+            icon: 'folder',
+            keyArea: 'Explorer', proficiency: 0,
+            orientation: 'vertical', size: 'medium',
+            width: 250, height: 600, minWidth: 200
+        },
+        'environment-toggles': {
+            title: 'Environment Toggles',
+            icon: 'toggle-right',
+            keyArea: 'Stylist', proficiency: 1,
+            orientation: 'horizontal', size: 'small',
+            width: 300, height: 150, minWidth: 200, minHeight: 100
+        },
+        'component-inspector': {
+            title: 'Component Inspector',
+            icon: 'inspect',
+            keyArea: 'Stylist', proficiency: 2,
+            orientation: 'neutral', size: 'medium',
+            width: 400, height: 300, minWidth: 250, minHeight: 200
+        },
+        'injection-engine': {
+            title: 'Injection Engine',
+            icon: 'zap',
+            keyArea: 'Stylist', proficiency: 2,
+            orientation: 'vertical', size: 'medium',
+            width: 350, height: 380, minWidth: 250, minHeight: 250
+        },
+        'seed-inspector': {
+            title: 'Seed Inspector',
+            icon: 'leaf',
+            keyArea: 'Inspector', proficiency: 2,
+            orientation: 'vertical', size: 'medium',
+            width: 360, height: 440, minWidth: 250, minHeight: 300
+        },
+        'unified-schema-view': {
+            title: 'Unified Schema View',
+            icon: 'table',
+            keyArea: 'Inspector', proficiency: 2,
+            orientation: 'vertical', size: 'medium',
+            width: 400, height: 380, minWidth: 250, minHeight: 250
+        },
+        'live-sql-stream': {
+            title: 'Live SQL Stream',
+            icon: 'database',
+            keyArea: 'Inspector', proficiency: 2,
+            orientation: 'horizontal', size: 'medium',
+            width: 520, height: 260, minWidth: 300, minHeight: 150
+        },
+        'registry-metadata': {
+            title: 'Registry Metadata',
+            icon: 'database',
+            keyArea: 'Explorer', proficiency: 2,
+            orientation: 'vertical', size: 'medium',
+            width: 360, height: 420, minWidth: 250, minHeight: 250
+        },
+        'visual-summary-bar': {
+            title: 'Visual Summary Bar',
+            icon: 'bar-chart',
+            keyArea: 'Runner', proficiency: 1,
+            orientation: 'horizontal', size: 'small',
+            width: 420, height: 120, minWidth: 250, minHeight: 80
+        },
+        'terminal': {
+            title: 'Terminal',
+            icon: 'terminal',
+            keyArea: 'Runner', proficiency: 3,
+            orientation: 'horizontal', size: 'large',
+            width: 620, height: 300, minWidth: 350, minHeight: 180
+        },
+        'visual-comparison': {
+            title: 'Visual Comparison',
+            icon: 'columns-2',
+            keyArea: 'Runner', proficiency: 2,
+            orientation: 'neutral', size: 'large',
+            width: 720, height: 420, minWidth: 400, minHeight: 250
+        },
+        'snippet-library': {
+            title: 'Snippet Library',
+            icon: 'book-open',
+            keyArea: 'Studio', proficiency: 2,
+            orientation: 'vertical', size: 'medium',
+            width: 300, height: 420, minWidth: 220, minHeight: 280
+        },
+        'flight-recorder': {
+            title: 'Flight Recorder',
+            icon: 'history',
+            keyArea: 'Studio', proficiency: 3,
+            orientation: 'vertical', size: 'medium',
+            width: 340, height: 440, minWidth: 220, minHeight: 300
+        },
+        'health-graph': {
+            title: 'Health Graph',
+            icon: 'trending-up',
+            keyArea: 'Studio', proficiency: 3,
+            orientation: 'horizontal', size: 'medium',
+            width: 520, height: 300, minWidth: 300, minHeight: 200
+        },
+        'coverage-heatmap': {
+            title: 'Coverage Heatmap',
+            icon: 'layers',
+            keyArea: 'Analysis', proficiency: 2,
+            orientation: 'neutral', size: 'large',
+            width: 520, height: 400, minWidth: 300, minHeight: 250
+        },
+        'flaky-history': {
+            title: 'Flaky History',
+            icon: 'refresh-cw',
+            keyArea: 'Analysis', proficiency: 2,
+            orientation: 'neutral', size: 'medium',
+            width: 420, height: 360, minWidth: 280, minHeight: 220
+        },
+        'slow-test-bottlenecks': {
+            title: 'Slow Test Bottlenecks',
+            icon: 'clock',
+            keyArea: 'Analysis', proficiency: 2,
+            orientation: 'horizontal', size: 'medium',
+            width: 460, height: 280, minWidth: 280, minHeight: 180
+        }
+    };
+
+    Object.entries(stubs).forEach(function(entry) {
+        var id  = entry[0];
+        var def = entry[1];
+
+        // Skip if a real class has already registered for this ID
+        if (ActivityCards.registry[id] && ActivityCards.registry[id].prototype instanceof ActivityCard) {
+            console.log(`ActivityRegistry: Skipping stub for ${id}, already registered.`);
+            return;
+        }
+
+        var StubCard = class extends ActivityCard {
+            get cardTitle()       { return def.title; }
+            get cardIcon()        { return def.icon; }
+            get cardKeyArea()     { return def.keyArea; }
+            get cardProficiency() { return def.proficiency || 0; }
+            defaults() {
+                return Object.assign({}, super.defaults(), def);
+            }
+        };
+        StubCard.cardId = id;
+        ActivityCards.register(id, StubCard);
+    });
+
+})();

data/app/assets/javascripts/parapet/activity-toggles.js

@@ -0,0 +1,76 @@
+// Activity Toggles — bridges ribbon buttons to ActivityCards.spawn
+(function() {
+    function init() {
+        document.querySelectorAll('.qss-activity-item').forEach(function(item) {
+            if (item._toggleBound) return;
+            item._toggleBound = true;
+
+            item.addEventListener('click', function(e) {
+                const cardId = item.dataset.activityId;
+                if (!cardId) return;
+
+                // Handle Live Preview specially (it's a global popup, not a masonry card)
+                if (cardId === 'live-preview') {
+                    if (window.ParapetPreview) window.ParapetPreview.toggle();
+                    return;
+                }
+
+                if (!window.ActivityCards) return;
+
+                if (e.shiftKey && item.classList.contains('qss-active')) {
+                    window.ActivityCards.promote(cardId);
+                    return;
+                }
+
+                if (item.classList.contains('qss-active')) {
+                    item.classList.remove('qss-active');
+                    if (window.ActivityCards.active[cardId]) {
+                        window.ActivityCards.active[cardId].destroy();
+                    }
+                } else {
+                    item.classList.add('qss-active');
+                    const svg = item.querySelector('svg');
+                    window.ActivityCards.spawn({
+                        id: cardId,
+                        icon: svg ? svg.outerHTML : null
+                    });
+                }
+            });
+        });
+
+        document.addEventListener('cardSpawned', function(e) {
+            const cardId = e.detail.id;
+            document.querySelectorAll('.qss-activity-item').forEach(function(item) {
+                if (item.dataset.activityId === cardId) {
+                    item.classList.add('qss-active');
+                }
+            });
+        });
+
+        document.addEventListener('cardClosed', function(e) {
+            const cardId = e.detail.id;
+            document.querySelectorAll('.qss-activity-item').forEach(function(item) {
+                if (item.dataset.activityId === cardId) {
+                    item.classList.remove('qss-active');
+                }
+            });
+        });
+
+        // Sync Live Preview ribbon state
+        document.addEventListener('previewOpened', function() {
+            document.querySelectorAll('.qss-activity-item[data-activity-id="live-preview"]').forEach(function(item) {
+                item.classList.add('qss-active');
+            });
+        });
+
+        document.addEventListener('previewClosed', function() {
+            document.querySelectorAll('.qss-activity-item[data-activity-id="live-preview"]').forEach(function(item) {
+                item.classList.remove('qss-active');
+            });
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', init);
+    document.addEventListener('turbo:load', init);
+    if (document.readyState === 'complete' || document.readyState === 'interactive') init();
+})();

data/app/assets/javascripts/parapet/application.js

@@ -0,0 +1,37 @@
+(function() {
+    // Start QSS Engine
+    if (typeof QSSEngine !== 'undefined') {
+        QSSEngine.startPulse();
+        QSSEngine.startObserver();
+    }
+    let flashTimeout = null;
+
+    document.addEventListener('parapet:flash', (e) => {
+        const flashEl = document.getElementById('qss-footer-flash');
+        const contentEl = document.getElementById('qss-footer-flash-content');
+        const dotEl = document.getElementById('qss-footer-flash-dot');
+        if (!flashEl || !contentEl) return;
+
+        const { message, type } = e.detail;
+        contentEl.textContent = message;
+        
+        // Reset dot colors
+        if (dotEl) {
+            dotEl.className = 'qss-w-1.5 qss-h-1.5 qss-rounded-full'; // Reset classes
+            if (type === 'alert' || type === 'error') dotEl.classList.add('qss-bg-red-400');
+            else if (type === 'notice' || type === 'success') dotEl.classList.add('qss-bg-emerald-400');
+            else dotEl.classList.add('qss-bg-amber-400');
+        }
+
+        // Show (Fade In + Scale)
+        flashEl.classList.remove('qss-opacity-0', 'qss-scale-95');
+        flashEl.classList.add('qss-opacity-100', 'qss-scale-100');
+
+        // Auto-Hide after delay
+        if (flashTimeout) clearTimeout(flashTimeout);
+        flashTimeout = setTimeout(() => {
+            flashEl.classList.remove('qss-opacity-100', 'qss-scale-100');
+            flashEl.classList.add('qss-opacity-0', 'qss-scale-95');
+        }, 3500);
+    });
+})();