parapet-rails 0.1.0

data/app/views/parapet/activities/_file_editor.html.erb

@@ -0,0 +1,183 @@
+<template id="qss-tpl-file-editor">
+    <div id="pp-file-editor-shell" class="qss-flex qss-flex-col qss-w-full qss-h-full qss-text-left qss-overflow-hidden qss-border qss-border-slate-800 qss-min-h-0 qss-contain-layout">
+        <!-- Editor Viewport (Dynamic Panes) -->
+        <div id="pp-editor-viewport" class="qss-editor-viewport qss-flex-1 qss-flex qss-w-full qss-h-full qss-bg-[#1e1e1e] qss-overflow-hidden qss-min-h-0 qss-contain-layout"></div>
+    </div>
+</template>
+
+<template id="qss-tpl-editor-pane">
+    <div class="qss-editor-pane qss-flex-1 qss-flex qss-flex-col qss-w-full qss-h-full qss-overflow-hidden qss-transition-all qss-duration-200 qss-rounded-sm qss-opacity-100 qss-min-w-0 qss-contain-layout" data-qss-active="false" data-qss-linked="false">
+        <!-- Tab Bar -->
+        <div class="qss-editor-tab-bar qss-relative qss-flex qss-items-start qss-border-b qss-border-slate-800/60 qss-flex-shrink-0 qss-justify-between qss-h-[26]">
+            <div class="qss-flex qss-items-center qss-flex-1 qss-min-w-0 qss-overflow-hidden qss-relative">
+                <div class="qss-flex qss-items-center qss-flex-nowrap qss-editor-tab-strip qss-overflow-x-auto qss-custom-scrollbar-h no-scrollbar"></div>
+                
+                <!-- Mini-Explorer Down Chevron -->
+                <div class="qss-relative qss-group/mini-explorer qss-flex-shrink-0">
+                    <button class="qss-pane-action-btn qss-flex qss-items-center qss-justify-center qss-w-6 qss-h-full qss-text-slate-500 hover:qss-text-white qss-border-l qss-border-slate-800/40 qss-bg-[#111418]/20 qss-transition-colors" title="Open Buffers" data-action="mini-explorer">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-4 qss-h-4"><path d="m6 9 6 6 6-6"></path></svg>
+                    </button>
+                    <div id="pp-portal-mini-explorer-dropdown" class="qss-mini-explorer-dropdown qss-absolute qss-w-64 qss-bg-[#1a1d23] qss-border qss-border-slate-800 qss-rounded qss-shadow-2xl qss-z-[120] qss-hidden group-hover/mini-explorer:qss-block qss-pointer-events-auto" style="--dropdown-top: auto; --dropdown-left: auto;">
+                        <div class="qss-p-2 qss-border-b qss-border-slate-800/50">
+                            <input type="text" class="qss-w-full qss-bg-black/40 qss-border qss-border-slate-700 qss-rounded qss-px-2 qss-py-1 qss-text-[10px] qss-text-slate-300 focus:qss-outline-none focus:qss-border-indigo-500" placeholder="Search open buffers...">
+                        </div>
+                        <div class="qss-buffer-list qss-flex qss-flex-col qss-py-1 qss-max-h-64 qss-overflow-y-auto qss-custom-scrollbar"></div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Pane Status Overlay -->
+            <div class="qss-pane-status-container qss-absolute qss-right-0 qss-top-0 qss-h-full qss-overflow-hidden qss-pointer-events-none qss-flex qss-justify-end">
+                <div class="qss-pane-status-msg qss-h-full qss-text-white qss-text-[9px] qss-font-bold qss-px-3 qss-flex qss-items-center qss-translate-x-full">
+                    <!-- Text injected by JS -->
+                </div>
+            </div>
+
+            <div class="qss-pane-toolbar qss-flex qss-items-center qss-px-1 qss-border-l qss-border-slate-800/40 qss-bg-[#111418]/20 qss-h-full">
+                <!-- Buttons targeted by JS for context -->
+                <button class="qss-pane-action-btn qss-flex qss-items-center qss-justify-center qss-w-6 qss-h-full qss-text-slate-500 hover:qss-text-indigo-400 hover:qss-bg-white/5 qss-transition-all" title="Run Current Test" data-action="run">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
+                </button>
+                <button class="qss-pane-action-btn qss-flex qss-items-center qss-justify-center qss-w-6 qss-h-full qss-text-slate-500 hover:qss-text-orange-400 hover:qss-bg-white/5 qss-transition-all" title="Toggle Code Help" data-action="toggle-snippets">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .5 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>
+                </button>
+                <button class="qss-pane-action-btn qss-flex qss-items-center qss-justify-center qss-w-6 qss-h-full qss-text-slate-500 hover:qss-text-emerald-400 hover:qss-bg-white/5 qss-transition-all qss-hidden" title="Save File (Ctrl+S)" data-action="save">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
+                </button>
+                <button class="qss-pane-action-btn qss-flex qss-items-center qss-justify-center qss-w-6 qss-h-full qss-text-slate-500 hover:qss-text-indigo-400 hover:qss-bg-white/5 qss-transition-all" title="Add Split" data-action="split">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+                </button>
+                
+                <div class="qss-w-px qss-h-3 qss-bg-slate-800/50 qss-mx-1"></div>
+
+                <div class="qss-relative qss-group/new-menu qss-h-full">
+                    <button class="qss-pane-action-btn qss-flex qss-items-center qss-justify-center qss-w-6 qss-h-full qss-text-slate-500 hover:qss-text-white hover:qss-bg-white/5 qss-transition-all" title="New File" data-action="new-menu">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-4 qss-h-4"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
+                    </button>
+                    <div id="pp-portal-new-menu-dropdown" class="qss-new-menu-dropdown qss-absolute qss-w-40 qss-bg-[#1a1d23] qss-border qss-border-slate-800 qss-rounded qss-shadow-2xl qss-z-[100] qss-hidden group-hover/new-menu:qss-block qss-pointer-events-auto" style="--dropdown-top: auto; --dropdown-left: auto;">
+                        <div class="qss-template-list qss-flex qss-flex-col qss-py-1">
+                            <!-- Populated in JS -->
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="qss-relative qss-group/link-menu">
+                    <button class="qss-pane-action-btn qss-link-btn qss-flex qss-items-center qss-justify-center qss-w-6 qss-h-full qss-text-slate-500 hover:qss-text-indigo-400 hover:qss-bg-white/5 qss-transition-all" title="Link/Unlink Mirror" data-action="toggle-link">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-4 qss-h-4"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+                    </button>
+                    <div id="pp-portal-link-menu-dropdown" class="qss-link-menu-dropdown qss-absolute qss-w-20 qss-bg-[#1a1d23] qss-border qss-border-slate-800 qss-rounded qss-shadow-2xl qss-z-[100] qss-hidden group-hover/link-menu:qss-block qss-pointer-events-auto" style="--dropdown-top: auto; --dropdown-left: auto;">
+                        <div class="qss-mirror-list qss-flex qss-flex-col qss-py-1">
+                            <!-- Populated in JS -->
+                        </div>
+                    </div>
+                </div>
+
+                <button class="qss-pane-action-btn qss-close-split-btn qss-flex qss-items-center qss-justify-center qss-w-6 qss-h-full qss-text-slate-500 hover:qss-text-red-400 hover:qss-bg-white/5 qss-transition-all qss-hidden" title="Close Split" data-action="close-split">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                </button>
+            </div>
+        </div>
+
+        <div class="qss-flex-1 qss-flex qss-overflow-hidden">
+            <!-- Contextual Snippet Drawer -->
+            <div class="qss-snippet-drawer qss-border-r qss-border-slate-800 qss-bg-[#111418] qss-overflow-hidden qss-transition-all qss-duration-300 qss-flex qss-flex-col" style="--drawer-w: 0px;">
+                <div class="qss-flex qss-items-center qss-justify-between qss-px-2 qss-py-2 qss-border-b qss-border-slate-800 qss-bg-[#16191e]">
+                    <span class="qss-text-size[11] qss-font-bold qss-text-slate-400 qss-uppercase qss-tracking-widest">Code Help</span>
+                    <button class="qss-pane-action-btn qss-close-drawer-btn qss-text-slate-600 hover:qss-text-white qss-transition-colors" data-action="toggle-snippets">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-4 qss-h-4"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                    </button>
+                </div>
+                <div class="qss-drawer-content qss-flex-1 qss-overflow-y-auto qss-custom-scrollbar qss-p-2 qss-space-y-2"></div>
+            </div>
+
+            <div class="qss-monaco-editor-target qss-flex-1 qss-bg-[#1e1e1e] qss-overflow-hidden"></div>
+        </div>
+        
+        <!-- Fix Suggestions Footer -->
+        <div class="qss-fix-footer qss-border-t qss-border-red-900/40 qss-bg-red-900/10 qss-hidden qss-overflow-hidden qss-transition-all qss-duration-300" style="--footer-h: 0px;">
+            <div class="qss-flex qss-flex-col qss-p-2 qss-gap-2">
+                <div class="qss-flex qss-items-center qss-justify-between">
+                    <div class="qss-flex qss-items-center qss-gap-2">
+                        <div class="qss-w-2 qss-h-2 qss-rounded-full qss-bg-red-500 qss-animate-pulse"></div>
+                        <span class="qss-text-[10px] qss-font-bold qss-text-red-400 qss-uppercase qss-tracking-widest">Diagnostic</span>
+                    </div>
+                    <button class="qss-close-fix-btn qss-text-slate-500 hover:qss-text-white qss-transition-colors">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3 qss-h-3"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                    </button>
+                </div>
+                <div class="qss-fix-message qss-text-[10px] qss-text-slate-300 qss-font-mono qss-leading-tight"></div>
+                <div class="qss-flex qss-gap-2 qss-mt-1">
+                    <button class="qss-apply-fix-btn qss-bg-indigo-600 hover:qss-bg-indigo-500 qss-text-white qss-text-[9px] qss-font-bold qss-px-2 qss-py-1 qss-rounded qss-transition-colors qss-uppercase">Apply AI Fix</button>
+                    <button class="qss-explain-fix-btn qss-bg-slate-800 hover:qss-bg-slate-700 qss-text-slate-300 qss-text-[9px] qss-font-bold qss-px-2 qss-py-1 qss-rounded qss-transition-colors qss-uppercase">Explain</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="qss-tpl-editor-tab">
+    <div class="qss-editor-tab qss-flex qss-items-center qss-gap-1.5 qss-px-2 qss-h-full qss-text-[10px] qss-font-mono qss-text-slate-300 qss-cursor-pointer qss-whitespace-nowrap qss-select-none qss-border-r qss-border-slate-800/50 qss-transition-colors qss-flex-shrink-0" data-qss-active="false">
+        <span class="qss-tab-icon qss-w-3.5 qss-h-3.5 qss-flex qss-items-center qss-justify-center"></span>
+        <span class="qss-editor-tab-label qss-select-none"></span>
+        <div class="qss-dirty-indicator qss-w-1.5 qss-h-1.5 qss-rounded-full qss-bg-orange-500 qss-ml-1 qss-hidden"></div>
+        <span class="qss-editor-tab-close qss-text-slate-600 hover:qss-text-red-400 qss-ml-1 qss-transition-colors qss-leading-none qss-text-size[11]">&#215;</span>
+    </div>
+</template>
+
+<template id="qss-tpl-editor-buffer-item">
+    <button class="qss-buffer-item qss-flex qss-items-center qss-gap-2 qss-px-2 qss-py-1.5 hover:qss-bg-indigo-500/10 qss-text-[10px] qss-transition-colors qss-text-left qss-w-full" data-qss-active="false">
+        <span class="qss-item-icon qss-w-3 qss-h-3 qss-flex qss-items-center qss-justify-center"></span>
+        <span class="qss-truncate qss-flex-1"></span>
+        <div class="qss-dirty-indicator qss-w-1.5 qss-h-1.5 qss-rounded-full qss-bg-orange-500 qss-hidden"></div>
+    </button>
+</template>
+
+<template id="qss-tpl-header-actions">
+    <div class="qss-flex qss-items-center qss-gap-1">
+        <button class="qss-pane-action-btn qss-header-action-btn qss-flex qss-items-center qss-justify-center qss-w-7 qss-h-7 qss-text-slate-500 hover:qss-text-white hover:qss-bg-white/5 qss-transition-all" title="Run Tool" data-action="run">
+            <div class="qss-flex qss-items-center">
+                <!-- Injected via updateRunUI -->
+            </div>
+        </button>
+        <button class="qss-pane-action-btn qss-header-action-btn qss-flex qss-items-center qss-justify-center qss-w-7 qss-h-7 qss-text-slate-500 hover:qss-text-orange-400 hover:qss-bg-white/5 qss-transition-all" title="Toggle Code Help" data-action="toggle-snippets">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .5 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>
+        </button>
+        <button class="qss-pane-action-btn qss-header-action-btn qss-flex qss-items-center qss-justify-center qss-w-7 qss-h-7 qss-text-slate-500 hover:qss-text-emerald-400 hover:qss-bg-white/5 qss-transition-all" title="Save File (Ctrl+S)" data-action="save">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
+        </button>
+        <button class="qss-pane-action-btn qss-header-action-btn qss-flex qss-items-center qss-justify-center qss-w-7 qss-h-7 qss-text-slate-500 hover:qss-text-indigo-400 hover:qss-bg-white/5 qss-transition-all" title="Add Split" data-action="split">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+        </button>
+        <button class="qss-pane-action-btn qss-header-action-btn qss-flex qss-items-center qss-justify-center qss-w-7 qss-h-7 qss-text-slate-500 hover:qss-text-indigo-400 hover:qss-bg-white/5 qss-transition-all" title="Link/Unlink Mirror" data-action="toggle-link">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-4 qss-h-4"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+        </button>
+    </div>
+</template>
+
+<template id="qss-tpl-snippet-group">
+    <div class="qss-snippet-group qss-mb-2 qss-border qss-border-slate-800 qss-rounded qss-bg-white/[0.01]" data-category="">
+        <div class="qss-category-header qss-flex qss-items-center qss-justify-between qss-px-2 qss-py-1.5 qss-cursor-pointer hover:qss-bg-white/[0.03] qss-transition-colors group">
+            <span class="qss-category-label qss-text-[9px] qss-font-bold qss-text-slate-500 qss-uppercase qss-tracking-widest group-hover:qss-text-slate-300"></span>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3 qss-h-3 qss-text-slate-600 qss-transform qss-transition-transform qss-duration-200"><polyline points="6 9 12 15 18 9"></polyline></svg>
+        </div>
+        <div class="qss-category-body qss-hidden qss-flex qss-flex-col qss-gap-2 qss-p-2 qss-border-t qss-border-slate-800/50">
+            <!-- Tiles injected here -->
+        </div>
+    </div>
+</template>
+
+<template id="qss-tpl-snippet-tile">
+    <div class="qss-snippet-tile qss-border qss-border-slate-800/50 qss-bg-black/20 qss-rounded qss-overflow-hidden">
+        <div class="qss-p-2 qss-space-y-1.5">
+            <div class="qss-flex qss-items-center qss-justify-between">
+                <span class="qss-snippet-name qss-text-[10px] qss-font-bold qss-text-slate-300 qss-truncate"></span>
+                <button class="qss-insert-btn qss-flex qss-items-center qss-gap-0.5 qss-text-[7px] qss-font-bold qss-text-indigo-400/70 hover:qss-text-indigo-300 qss-transition-colors qss-bg-transparent qss-border-none qss-p-0">
+                    INSERT
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="qss-w-2 qss-h-2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                </button>
+            </div>
+            <div class="qss-snippet-desc qss-text-[9px] qss-text-slate-400 qss-italic qss-leading-tight"></div>
+            <div class="qss-snippet-code-preview qss-bg-black/60 qss-rounded qss-p-1.5 qss-font-mono qss-text-[9px] qss-text-slate-400 qss-border qss-border-white/5 qss-overflow-x-auto qss-custom-scrollbar"></div>
+        </div>
+    </div>
+</template>

data/app/views/parapet/activities/_file_explorer.html.erb

@@ -0,0 +1,23 @@
+<!-- Perspective Explorer Shell (Drawn) -->
+<div id="qss-file-explorer-shell" class="qss-absolute pos-x[0] pos-y[0] w-pct[1000] h-pct[1000] qss-bg-[#16191e] qss-overflow-hidden qss-font-sans">
+    
+    <!-- Smart Search Area (Drawn) -->
+    <div id="qss-sidebar-search" class="qss-absolute pos-x[0] pos-y[0] w-pct[1000] h[45] qss-p-2 qss-border-b qss-border-slate-800/50 qss-bg-[#1a1d23]/30">
+        <div class="qss-bg-[#0f1115] qss-rounded qss-border qss-border-slate-800 qss-px-2 qss-py-1.5 qss-flex qss-items-center qss-gap-2 qss-group focus-within:qss-border-indigo-500/50 qss-transition-colors">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="qss-w-3.5 qss-h-3.5 qss-text-slate-600 group-focus-within:qss-text-indigo-400"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+            <input type="text" placeholder="Filter files, features, or specs..." class="qss-bg-transparent qss-border-none qss-text-[10px] qss-outline-none qss-w-full placeholder:qss-text-slate-600 qss-text-slate-300">
+        </div>
+    </div>
+
+    <!-- Tree Area Wrapper (Calculated offset) -->
+    <div id="qss-explorer-content" class="qss-absolute pos-x[0] pos-y[45] w-pct[1000] qss-fill-h qss-overflow-y-auto qss-custom-scrollbar">
+        <%= render "parapet/activities/explorer_base" %>
+    </div>
+
+    <!-- Progress / Status Area (Fixed at bottom) -->
+    <div id="qss-progress-area" class="qss-absolute pos-x[0] pos-b[0] w-pct[1000] h[4] depth[ui]">
+        <%= render "parapet/activities/progress_area" %>
+    </div>
+</div>
+
+<%= render "parapet/activities/file_explorer/viewport_scripts" %>

data/app/views/parapet/activities/_fix_suggestions_widget.html.erb

@@ -0,0 +1,13 @@
+<turbo-frame id="active-widget">
+    <div class="qss-p-3 qss-flex qss-flex-col qss-h-full qss-overflow-hidden">
+        <div class="qss-flex qss-items-center qss-gap-2 qss-mb-2">
+            <i class="lucide-hammer qss-w-3.5 qss-h-3.5 qss-text-amber-400"></i>
+            <span class="qss-text-[10px] qss-font-bold qss-uppercase qss-tracking-widest qss-text-slate-400">Fix Suggestions</span>
+        </div>
+        <div class="qss-flex-1 qss-overflow-y-auto custom-scrollbar">
+            <div class="qss-text-[10px] qss-text-slate-500 qss-italic qss-px-1">
+                No active failures detected. Focus on a failing spec node to see suggestions.
+            </div>
+        </div>
+    </div>
+</turbo-frame>

data/app/views/parapet/activities/_generic.html.erb

@@ -0,0 +1,6 @@
+<% action_phrase = {
+  "file_saved" => "saved #{activity.details.fetch("file_path", "a file")}",
+  "test_run" => "ran tests",
+  "publish" => "published changes"
+}.fetch(activity.action) { activity.action.humanize.downcase } %>
+<%= "#{actor_name} #{action_phrase}" %>

data/app/views/parapet/activities/_live_preview.html.erb

@@ -0,0 +1,13 @@
+<div class="qss-bg-white qss-h-full qss-w-full qss-rounded qss-overflow-hidden qss-flex qss-flex-col">
+    <div class="qss-h-6 qss-bg-slate-100 qss-border-b qss-flex qss-items-center qss-px-2 qss-gap-2">
+        <div class="qss-flex qss-gap-1">
+            <div class="qss-w-2 qss-h-2 qss-rounded-full qss-bg-red-400"></div>
+            <div class="qss-w-2 qss-h-2 qss-rounded-full qss-bg-amber-400"></div>
+            <div class="qss-w-2 qss-h-2 qss-rounded-full qss-bg-emerald-400"></div>
+        </div>
+        <div class="qss-flex-grow qss-bg-white qss-border qss-rounded qss-h-4 qss-flex qss-items-center qss-px-2 qss-text-[8px] qss-text-slate-400">localhost:3000/parapet</div>
+    </div>
+    <div class="qss-flex-grow qss-flex qss-items-center qss-justify-center qss-bg-slate-50">
+         <div class="qss-text-slate-300 qss-font-bold qss-text-xl qss-tracking-tighter">PARAPET</div>
+    </div>
+</div>

data/app/views/parapet/activities/_perspective_filters.html.erb

@@ -0,0 +1,36 @@
+<!-- Perspective Filters -->
+<div id="qss-perspective-filters" class="qss anchored px[8] py[6] border-b[1] border-slate-800 horizontal v-mid spaced gap[6] bg-brand-header">
+    
+    <!-- Test Suite Perspectives -->
+    <div class="suite-group horizontal w-full gap[6]" data-suites="tests">
+      <% ['project', 'registry', 'coverage'].each do |view| %>
+          <% 
+             current_view = local_assigns[:explorer_type] || @explorer_type || 'project'
+             is_active = (view == current_view)
+             active_classes = "active bg-indigo-500/10 border-indigo-500/30 text-indigo-400"
+             inactive_classes = "bg-slate-800 border-slate-700 text-slate-500"
+          %>
+          <%= link_to view.capitalize, parapet.explorer_path(type: view), 
+              class: "perspective-btn flex-1 px[4] py[2] rounded[2] text-size[5] weight[700] uppercase tracking[tight] border[1] smooth text-center #{is_active ? active_classes : inactive_classes}",
+              data: { turbo_stream: true, view: view } %>
+      <% end %>
+    </div>
+
+    <!-- CSS Suite Perspectives -->
+    <div class="suite-group horizontal w-full gap[6]" data-suites="css">
+      <% ['grammar', 'css', 'views'].each do |view| %>
+          <% 
+             current_view = local_assigns[:explorer_type] || @explorer_type || 'grammar'
+             is_active = (view == current_view)
+             active_classes = "active bg-indigo-500/10 border-indigo-500/30 text-indigo-400"
+             inactive_classes = "bg-slate-800 border-slate-700 text-slate-500"
+          %>
+          <%= link_to view.capitalize, parapet.explorer_path(type: view), 
+              class: "perspective-btn flex-1 px[4] py[2] rounded[2] text-size[5] weight[700] uppercase tracking[tight] border[1] smooth text-center #{is_active ? active_classes : inactive_classes}",
+              data: { turbo_stream: true, view: view } %>
+      <% end %>
+    </div>
+
+</div>
+
+<%= render 'parapet/activities/file_explorer/perspective_scripts' %>

data/app/views/parapet/activities/_progress_area.html.erb

@@ -0,0 +1,37 @@
+<!-- Diagnostic Area: Consolidated Health & Context -->
+<% 
+   summary = local_assigns[:summary] || explorer_summary('project')
+   counts = summary['counts'] || {}
+   total = summary['total_files'].to_i
+   
+   pass_count = counts['green'].to_i
+   fail_count = counts['red'].to_i
+   warn_count = counts['orange'].to_i
+   grey_count = counts['grey'].to_i
+
+   pass_pct = total > 0 ? (pass_count.to_f / total * 100).round : 0
+   fail_pct = total > 0 ? (fail_count.to_f / total * 100).round : 0
+   warn_pct = total > 0 ? (warn_count.to_f / total * 100).round : 0
+   grey_pct = total > 0 ? (grey_count.to_f / total * 100).round : 0
+
+   all_segments = [
+     { count: pass_count, pct: pass_pct, bar_class: "qss-bg-emerald-500 qss-shadow-[0_0_8px_rgba(16,185,129,0.3)]", text_class: "qss-text-emerald-400/70" },
+     { count: fail_count, pct: fail_pct, bar_class: "qss-bg-red-500 qss-shadow-[0_0_8px_rgba(239,68,68,0.3)]",     text_class: "qss-text-red-400/70" },
+     { count: warn_count, pct: warn_pct, bar_class: "qss-bg-orange-500",                                        text_class: "qss-text-orange-400/70" },
+     { count: grey_count, pct: grey_pct, bar_class: "qss-bg-slate-500",                                         text_class: "qss-text-slate-400/70" },
+   ]
+   segments = all_segments.select { |s| s[:count] > 0 }
+%>
+<div id="qss-progress-area" class="qss anchored w-full h[28] vertical v-mid px[8] py[4] bg-white/2 border-b[1] border-slate-800/50">
+    <!-- Health Analytics Cluster -->
+    <div class="qss anchored horizontal v-mid w-full h[4] gap[1]">
+        <% if segments.any? %>
+            <% segments.each_with_index do |seg, idx| %>
+                <% flex_val = [seg[:pct], 1].max %>
+                <div class="qss anchored h-full <%= seg[:bar_class] %> rounded[2]" style="flex: <%= flex_val %> 1 0%;"></div>
+            <% end %>
+        <% else %>
+            <div class="qss anchored h-full w-full bg-slate-800/40 rounded[2] border[1] border-white/5"></div>
+        <% end %>
+    </div>
+</div>

data/app/views/parapet/activities/_project_explorer.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'parapet/activities/explorer_base', locals: { type: 'project', tree_data: @tree_data } %>

data/app/views/parapet/activities/_registry_explorer.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'parapet/activities/explorer_base', locals: { type: 'registry', tree_data: @tree_data } %>

data/app/views/parapet/activities/_run_history.html.erb

@@ -0,0 +1,2 @@
+<% action_phrase = activity.action == "publish" ? "published changes" : "ran tests" %>
+<%= "#{actor_name} #{action_phrase}" %>

data/app/views/parapet/activities/_smart_search.html.erb

@@ -0,0 +1,11 @@
+<div class="qss-space-y-3">
+    <div class="qss-flex qss-items-center qss-bg-slate-900 qss-border qss-border-slate-800 qss-rounded qss-px-2 qss-py-1.5 qss-gap-2">
+        <i class="lucide-search qss-w-3 qss-h-3 qss-text-slate-500"></i>
+        <input type="text" placeholder="Search files, symbols..." class="qss-bg-transparent qss-border-none qss-outline-none qss-text-[10px] qss-w-full qss-text-slate-300">
+    </div>
+    <div class="qss-space-y-1">
+        <div class="qss-text-[9px] qss-font-bold qss-text-slate-600 qss-uppercase qss-tracking-widest qss-px-1">Recent Searches</div>
+        <div class="qss-text-[10px] qss-text-slate-400 qss-px-2 qss-py-1 hover:qss-bg-slate-800 qss-rounded qss-cursor-pointer">activity-cards.js</div>
+        <div class="qss-text-[10px] qss-text-slate-400 qss-px-2 qss-py-1 hover:qss-bg-slate-800 qss-rounded qss-cursor-pointer">dashboard/index.html.erb</div>
+    </div>
+</div>

data/app/views/parapet/activities/file_explorer/_perspective_scripts.html.erb

@@ -0,0 +1,58 @@
+<script>
+    (function() {
+        const STORAGE_KEY = 'parapet-explorer-view';
+
+        function updateUI(filters, view) {
+            filters.querySelectorAll('.qss-perspective-btn').forEach(btn => {
+                if (btn.dataset.view === view) {
+                    btn.classList.add('qss-active', 'qss-bg-indigo-500/10', 'qss-border-indigo-500/30', 'qss-text-indigo-400');
+                    btn.classList.remove('qss-bg-slate-800/50', 'qss-border-slate-700', 'qss-text-slate-500');
+                } else {
+                    btn.classList.remove('qss-active', 'qss-bg-indigo-500/10', 'qss-border-indigo-500/30', 'qss-text-indigo-400');
+                    btn.classList.add('qss-bg-slate-800/50', 'qss-border-slate-700', 'qss-text-slate-500');
+                }
+            });
+        }
+
+        function initPerspectiveFilters() {
+            const filters = document.getElementById('qss-perspective-filters');
+            if (!filters || filters._perspectiveInit) return;
+            filters._perspectiveInit = true;
+
+            const savedView = localStorage.getItem(STORAGE_KEY);
+            const activeBtn = filters.querySelector('.qss-perspective-btn.qss-active');
+            const currentView = activeBtn ? activeBtn.dataset.view : 'project';
+
+            console.log("Parapet: Perspective init. Current:", currentView, "Saved:", savedView);
+
+            // 1. Restore on fresh load if needed
+            if (savedView && savedView !== currentView && !window._parapetRestoring) {
+                const targetBtn = filters.querySelector(`.qss-perspective-btn[data-view="${savedView}"]`);
+                if (targetBtn) {
+                    console.log("Parapet: Restoring perspective view:", savedView);
+                    window._parapetRestoring = true;
+                    targetBtn.click();
+                    setTimeout(() => window._parapetRestoring = false, 500);
+                    return; 
+                }
+            }
+
+            // 2. Click listener
+            filters.addEventListener('click', (e) => {
+                const btn = e.target.closest('.qss-perspective-btn');
+                if (btn) {
+                    const view = btn.dataset.view;
+                    console.log("Parapet: Perspective clicked:", view);
+                    localStorage.setItem(STORAGE_KEY, view);
+                    // Update UI immediately for snappiness
+                    updateUI(filters, view);
+                }
+            });
+        }
+
+        document.addEventListener('turbo:load', initPerspectiveFilters);
+        if (document.readyState === 'complete' || document.readyState === 'interactive') {
+            initPerspectiveFilters();
+        }
+    })();
+</script>

data/app/views/parapet/activities/file_explorer/_viewport_scripts.html.erb

@@ -0,0 +1,33 @@
+<script>
+    (function() {
+        const viewport = document.getElementById('qss-explorer-viewport');
+        const expandBtn = document.getElementById('qss-explorer-expand-all');
+        const collapseBtn = document.getElementById('qss-explorer-collapse-all');
+
+        if (!viewport || !expandBtn || !collapseBtn) return;
+
+        function setAllNodesState(expand) {
+            const containers = viewport.querySelectorAll('.qss-children-container');
+            const nodes = viewport.querySelectorAll('.qss-explorer-node');
+            
+            nodes.forEach(node => {
+                if (expand) {
+                    node.classList.add('qss-is-open');
+                } else {
+                    node.classList.remove('qss-is-open');
+                }
+            });
+
+            containers.forEach(container => {
+                if (expand) {
+                    container.style.display = 'block';
+                } else {
+                    container.style.display = 'none';
+                }
+            });
+        }
+
+        expandBtn.addEventListener('click', () => setAllNodesState(true));
+        collapseBtn.addEventListener('click', () => setAllNodesState(false));
+    })();
+</script>

data/app/views/parapet/css_suite/_workbench.html.erb

@@ -0,0 +1,51 @@
+<div id="pp-styles-workbench" class="qss w-full h-full scroll[hidden]">
+    <!-- Command Bar -->
+    <div id="pp-workbench-command-bar" class="qss absolute pos-x[0] pos-y[0] w-full h[20] bg-brand-header border-b[1] border-slate-800 horizontal v-mid px[12] spaced depth[ui]">
+        <!-- Interaction States -->
+        <div class="qss horizontal gap[6] v-mid">
+            <span class="qss text-size[5] text-slate-500 weight[700] uppercase tracking[tighter] mr[4]">States</span>
+            <button class="qss px[6] py[2] bg-slate-800 rounded[2] text-size[6] text-slate-400 hover:text-white smooth border-none clickable" data-state="hover">HOVER</button>
+            <button class="qss px[6] py[2] bg-slate-800 rounded[2] text-size[6] text-slate-400 hover:text-white smooth border-none clickable" data-state="active">ACTIVE</button>
+            <button class="qss px[6] py[2] bg-slate-800 rounded[2] text-size[6] text-slate-400 hover:text-white smooth border-none clickable" data-state="focus">FOCUS</button>
+        </div>
+
+        <!-- Spatial Toggles -->
+        <div class="qss horizontal gap[10] v-mid">
+            <div class="qss horizontal gap[4] v-mid border-r[1] border-slate-800 pr[10]">
+                <span class="qss text-size[5] text-slate-500 weight[700] uppercase tracking[tighter]">Grid</span>
+                <button class="qss w[24] h[14] bg-slate-800 rounded[2] text-size[6] text-slate-400 centered border-none clickable" data-grid="10">10</button>
+                <button class="qss w[24] h[14] bg-slate-800 rounded[2] text-size[6] text-slate-400 centered border-none clickable" data-grid="50">50</button>
+                <button class="qss w[24] h[14] bg-slate-800 rounded[2] text-size[6] text-slate-400 centered border-none clickable" data-grid="100">100</button>
+            </div>
+            <button id="pp-toggle-anchors" class="qss horizontal gap[4] v-mid px[6] py[2] bg-slate-800 rounded[2] text-size[6] text-slate-400 hover:text-indigo-400 smooth border-none clickable">
+                <i class="icon-anchor text-size[7]"></i>
+                <span>ANCHORS</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Center Workspace -->
+    <div id="pp-workspace-wrapper" class="qss anchored pos-x[0] pos-y[20] w-full pos-b[0]">
+        <!-- Agentic Canvas Label -->
+        <div class="qss absolute pos-x[16] pos-y[8] depth[ui] ghost">
+            <span class="qss text-size[9] weight[900] text-slate-500 uppercase tracking[widest]">Agentic Canvas</span>
+        </div>
+
+        <!-- Live Preview Canvas -->
+        <div id="pp-mockup-container" class="qss absolute pos-x[0] pos-y[0] w-full pos-b[200] scroll[auto] border-b[1] border-slate-800">
+            <!-- Content rendered by JS into Shadow DOM -->
+        </div>
+
+        <!-- Monaco Editor (Bottom Console) -->
+        <div id="pp-workspace-console" class="qss absolute pos-x[0] pos-b[0] w-full h[200] bg-brand-header">
+            <div id="pp-console-resizer" class="qss absolute pos-x[0] pos-y[0] w-full h[4] cursor-row-resize bg-transparent hover:bg-indigo-500/50 smooth"></div>
+            <div class="qss absolute w-full h[24] bg-slate-900 border-b[1] border-slate-800 px[12] horizontal v-mid spaced">
+                <span id="pp-source-filename" class="qss text-size[8] text-slate-500 font[mono]">no-file-selected.qss</span>
+            </div>
+            <div class="qss absolute w-full pos-y[24] pos-b[0] horizontal">
+                <div id="pp-monaco-source" class="qss anchored h-full flex-1 border-r[1] border-slate-800 foreign"></div>
+                <div id="pp-monaco-compiled" class="qss anchored h-full flex-1 foreign"></div>
+            </div>
+        </div>
+    </div>
+</div>

data/app/views/parapet/dashboards/index.html.erb

@@ -0,0 +1,113 @@
+<!-- Workspace Layers -->
+<div id="pp-workspace-layers" class="qss anchored depth[canvas] w-full h-full contain-layout">
+  <div class="qss workspace-layer anchored layer-novice" data-layer="0"></div>
+  <div class="qss workspace-layer anchored layer-intermediate" data-layer="1"></div>
+  <div class="qss workspace-layer anchored layer-advanced" data-layer="2"></div>
+  <div class="qss workspace-layer anchored layer-power" data-layer="3"></div>
+  <div class="qss workspace-layer anchored layer-floating" id="pp-floating-layer"></div>
+
+  <div class="qss anchored horizontal v-mid h-mid w-full h-full">
+    <div class="qss suite-group anchored text-slate-700 italic opacity[500] <%= @active_suite.present? ? 'hidden' : '' %>" data-suites="none">
+      Workspace Stable - Select a Suite
+    </div>
+    <div class="qss suite-group anchored w-full h-full <%= @active_suite == 'css' ? '' : 'hidden' %>" data-suites="css">
+      <%= render "parapet/css_suite/workbench" %>
+    </div>
+    <% suite_placeholders = {
+         'tests' => 'Test Suite: In Development',
+         'intentions' => 'Intentions Suite: In Development',
+         'signal' => 'Signal Suite: Coming Soon',
+         'monitor' => 'Process Monitor: Coming Soon',
+         'polyglot' => 'Polyglot Suite: Coming Soon',
+         'build' => 'Build Suite: Coming Soon'
+       } %>
+    <div class="qss suite-group anchored w-full h-full <%= suite_placeholders.key?(@active_suite) ? '' : 'hidden' %>" data-suites="placeholder">
+      <div class="qss absolute pos-x[center] pos-y[center] text-slate-500"><%= suite_placeholders[@active_suite] %></div>
+    </div>
+  </div>
+
+  <!-- Live Preview Popup -->
+  <div id="pp-preview-popup" class="qss absolute pos-r[16] pos-b[52] w[640] h[420] bg-brand-main border[1] border-slate-700 rounded[6] shadow[xl] depth[modal] hidden">
+
+    <!-- Popup Chrome -->
+    <div class="qss anchored w-full h[32] bg-brand-header border-b[1] border-slate-800 horizontal v-mid px[10] gap[8]">
+      <span class="qss anchored text-size[6] text-slate-500 font[mono] flex-1 truncate">
+        localhost:3000
+      </span>
+      <span id="pp-preview-pinned-badge" class="qss anchored text-size[5] weight[700] tracking[wider] text-blue-400 bg-blue-900/30 rounded[3] px[5] py[1] hidden">
+        PINNED
+      </span>
+      <button onclick="window.ParapetPreview.refresh()" title="Refresh" class="qss anchored bg-transparent border-none clickable text-slate-500 hover:text-slate-300 smooth centered w[20] h[20]">
+        <i class="icon-refresh-cw text-size[7]"></i>
+      </button>
+      <button onclick="window.ParapetPreview.togglePin()" title="Pin to front" id="pp-preview-pin-btn" class="qss anchored bg-transparent border-none clickable text-slate-500 hover:text-blue-400 smooth centered w[20] h[20]">
+        <i class="icon-pin text-size[7]"></i>
+      </button>
+      <button onclick="window.ParapetPreview.close()" title="Close" class="qss anchored bg-transparent border-none clickable text-slate-500 hover:text-red-500 smooth centered w[20] h[20] text-size[12]">&times;</button>
+    </div>
+
+    <!-- Iframe content -->
+    <iframe id="pp-preview-iframe"
+      src="about:blank"
+      class="qss anchored flex-1 w-full border-none bg-white foreign contain-layout"
+     
+      sandbox="allow-same-origin allow-scripts allow-forms">
+    </iframe>
+  </div>
+
+  <!-- Activity Card Templates -->
+  <%= render "parapet/activities/file_editor" %>
+</div>
+
+<script>
+window.ParapetPreview = (function() {
+  var popup  = document.getElementById('pp-preview-popup');
+  var badge  = document.getElementById('pp-preview-pinned-badge');
+  var pinBtn = document.getElementById('pp-preview-pin-btn');
+  var iframe = document.getElementById('pp-preview-iframe');
+  var open   = false;
+  var pinned = false;
+
+  function show() {
+    popup.classList.remove('hidden');
+    if (iframe.src === 'about:blank') iframe.src = 'http://localhost:3000';
+    open = true;
+    document.dispatchEvent(new CustomEvent('previewOpened'));
+  }
+
+  function hide() {
+    if (pinned) return;
+    popup.classList.add('hidden');
+    open = false;
+    document.dispatchEvent(new CustomEvent('previewClosed'));
+  }
+
+  return {
+    pinned: pinned,
+    toggle: function() { open ? hide() : show(); },
+    close:  function() { 
+      pinned = false; 
+      this.pinned = false; 
+      popup.classList.remove('border-blue-500');
+      badge.classList.add('hidden');
+      pinBtn.classList.remove('text-blue-400');
+      hide(); 
+    },
+    refresh: function() { if (iframe.src !== 'about:blank') { iframe.src = iframe.src; } },
+    togglePin: function() {
+      pinned = !pinned;
+      this.pinned = pinned;
+      if (pinned) {
+        popup.classList.add('border-blue-500');
+        badge.classList.remove('hidden');
+        pinBtn.classList.add('text-blue-400');
+        if (!open) show();
+      } else {
+        popup.classList.remove('border-blue-500');
+        badge.classList.add('hidden');
+        pinBtn.classList.remove('text-blue-400');
+      }
+    }
+  };
+})();
+</script>