parapet-rails 0.1.0

data/app/views/parapet/shared/activities_ribbon/_studio_group.html.erb

@@ -0,0 +1,18 @@
+<!-- Studio Group -->
+<div class="qss-ribbon-group">
+  <div class="qss-ribbon-activities">
+    <div class="qss-activity-item" data-proficiency="0" data-activity-id="file-editor" title="File Editor (N) - Studio">
+      <%= pp_icon 'monaco-editor' %>
+    </div>
+    <div class="qss-activity-item" data-proficiency="2" data-activity-id="snippet-library" title="Snippet Library (A) - Studio">
+      <%= pp_icon 'snippet-library' %>
+    </div>
+    <div class="qss-activity-item" data-proficiency="3" data-activity-id="flight-recorder" title="Flight Recorder (P) - Studio">
+      <%= pp_icon 'flight-recorder' %>
+    </div>
+    <div class="qss-activity-item" data-proficiency="3" data-activity-id="health-graph" title="Health Graph (P) - Studio">
+      <%= pp_icon 'health-graph' %>
+    </div>
+  </div>
+  <span class="qss-text-[7px] qss-font-bold qss-text-slate-500 qss-uppercase qss-tracking-tight">Studio</span>
+</div>

data/app/views/parapet/shared/activities_ribbon/_stylist_group.html.erb

@@ -0,0 +1,18 @@
+<!-- Stylist Group -->
+<div class="qss-ribbon-group">
+  <div class="qss-ribbon-activities">
+    <div class="qss-activity-item" data-proficiency="0" data-activity-id="live-preview" title="Live Web Preview (N) - Stylist">
+      <%= pp_icon 'live-web-preview' %>
+    </div>
+    <div class="qss-activity-item" data-proficiency="1" data-activity-id="environment-toggles" title="Environment Toggles (I) - Stylist">
+      <%= pp_icon 'environment-toggles' %>
+    </div>
+    <div class="qss-activity-item" data-proficiency="2" data-activity-id="component-inspector" title="Component Inspector (A) - Stylist">
+      <%= pp_icon 'component-inspector' %>
+    </div>
+    <div class="qss-activity-item" data-proficiency="2" data-activity-id="injection-engine" title="Injection Engine (A) - Stylist">
+      <%= pp_icon 'injection-engine' %>
+    </div>
+  </div>
+  <span class="qss-text-[7px] qss-font-bold qss-text-slate-500 qss-uppercase qss-tracking-tight">Stylist</span>
+</div>

data/app/views/parapet/shared/explorers/_base.html.erb

@@ -0,0 +1,107 @@
+<%# locals: (type: 'project', tree_data: nil) %>
+<% 
+  type ||= 'project' 
+  unless tree_data
+    seed_path = storage_path("seeds-#{type}-explorer.json")
+    if File.exist?(seed_path)
+      tree_data = JSON.parse(File.read(seed_path)).deep_symbolize_keys
+    end
+  end
+%>
+
+<turbo-frame id="qss-explorer-content" class="qss anchored h-full">
+    <div class="qss anchored vertical h-full">
+        <!-- Watermark -->
+        <div class="qss detached pos-x[center] pos-y[center] centered ghost opacity[15]">
+            <span class="qss anchored font-black -rotate[12] tracking-tighter text-size[36] uppercase"><%= type.upcase %></span>
+        </div>
+
+        <!-- File Tree Container -->
+        <div id="qss-explorer-tree-wrapper" class="qss anchored vertical scroll[auto] w-full h-full">
+            <%= render partial: 'parapet/activities/explorer_tree', locals: { tree_data: tree_data } %>
+        </div>
+    </div>
+
+    <script>
+        (function() {
+            const wrapper = document.getElementById('qss-explorer-tree-wrapper');
+            if (!wrapper) return;
+
+            const STORAGE_KEY = 'parapet-<%= type %>-explorer-expanded';
+            let expandedPaths = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
+
+            // Default expanded paths for different perspectives
+            const DEFAULT_EXPANDED = {
+                'project': ['/project-tests', 'spec', 'test', 'features', '/spec', '/test', '/features'],
+                'registry': ['/registry'],
+                'coverage': ['/coverage'],
+                'grammar': ['/grammar', '/grammar/core-syntax', '/grammar/spatial-coordinates', '/grammar/dimensions', '/grammar/visual-depth'],
+                'ideas': ['/intentions', 'controllers', 'models', 'views', 'services', 'helpers'],
+                'css': ['/styles'],
+                'tests': ['/project-tests']
+            };
+
+            function updateExpandedState() {
+                const raw = localStorage.getItem(STORAGE_KEY);
+                if (raw === null) {
+                    expandedPaths = DEFAULT_EXPANDED['<%= type %>'] || ['/'];
+                    saveState();
+                } else {
+                    expandedPaths = JSON.parse(raw);
+                }
+            }
+
+            updateExpandedState();
+
+            function saveState() {
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(expandedPaths));
+            }
+
+            function hydrate() {
+                const nodes = wrapper.querySelectorAll('.qss-explorer-node[data-type="directory"]');
+                nodes.forEach(node => {
+                    const path = node.getAttribute('data-path');
+                    if (expandedPaths.includes(path)) {
+                        node.classList.add('qss-is-open');
+                    } else {
+                        node.classList.remove('qss-is-open');
+                    }
+                });
+            }
+
+            const observer = new MutationObserver((mutations) => {
+                hydrate();
+            });
+
+            observer.observe(wrapper, { childList: true, subtree: true });
+            hydrate();
+
+            wrapper.addEventListener('click', (e) => {
+                const row = e.target.closest('.qss-tree-row');
+                if (!row) return;
+
+                const node = row.closest('.qss-explorer-node');
+                if (!node) return;
+
+                const path = node.getAttribute('data-path');
+                const nodeType = node.getAttribute('data-type');
+
+                if (nodeType === 'directory') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    node.classList.toggle('qss-is-open');
+                    
+                    setTimeout(() => {
+                        const newExpanded = [];
+                        wrapper.querySelectorAll('.qss-explorer-node.qss-is-open').forEach(el => {
+                            const p = el.getAttribute('data-path');
+                            if (p) newExpanded.push(p);
+                        });
+                        expandedPaths = newExpanded;
+                        saveState();
+                    }, 0);
+                }
+            });
+        })();
+    </script>
+</turbo-frame>

data/app/views/parapet/shared/explorers/_css.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'parapet/shared/explorers/base', locals: { type: 'css', tree_data: @tree_data } %>

data/app/views/parapet/shared/explorers/_intentions.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'parapet/shared/explorers/base', locals: { type: 'ideas', tree_data: @tree_data } %>

data/app/views/parapet/shared/explorers/_project.html.erb

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

data/app/views/parapet/shared/explorers/_tests.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'parapet/shared/explorers/base', locals: { type: 'tests', tree_data: @tree_data } %>

data/app/views/parapet/shared/head/_meta.html.erb

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide-static@0.321.0/font/lucide.min.css">
+<script src="https://unpkg.com/@hotwired/turbo@8.0.4/dist/turbo.es2017-umd.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>

data/app/views/parapet/shared/head/_styles_activities.html.erb

@@ -0,0 +1,152 @@
+<style>
+    .qss-chevron-hitbox {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        width: 36px;
+        height: 36px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 0.02);
+        gap: 2px;
+    }
+    .qss-chevron-hitbox:hover {
+        background: rgba(255, 255, 255, 0.05);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+    .qss-chevron-bar {
+        width: 18px;
+        height: 3px;
+        clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 60%, 50% 100%, 0 60%);
+        transition: all 0.2s ease;
+        pointer-events: none;
+        opacity: 0.7;
+    }
+    .qss-chevron-hitbox:hover .qss-chevron-bar,
+    .qss-chevron-hitbox:not(.off) .qss-chevron-bar {
+        opacity: 1;
+    }
+    .qss-chevron-hitbox.off .qss-chevron-bar {
+        background-color: #1e293b;
+        opacity: 0.15;
+    }
+    .qss-chevron-hitbox:not(.off) {
+        border-color: rgba(255, 255, 255, 0.15);
+        background: rgba(255, 255, 255, 0.04);
+    }
+    #qss-hitbox-novice:not(.off) { border-color: var(--novice); }
+    #qss-hitbox-intermediate:not(.off) { border-color: var(--intermediate); }
+    #qss-hitbox-advanced:not(.off) { border-color: var(--advanced); }
+    #qss-hitbox-power:not(.off) { border-color: var(--power); }
+
+    .qss-activity-item {
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        border: 1px solid transparent;
+        transition: all 0.2s ease;
+        cursor: pointer;
+        background-color: transparent;
+    }
+    .qss-activity-item[data-proficiency="0"] { border-color: rgba(16, 185, 129, 0.2); }
+    .qss-activity-item[data-proficiency="1"] { border-color: rgba(245, 158, 11, 0.2); }
+    .qss-activity-item[data-proficiency="2"] { border-color: rgba(239, 68, 68, 0.2); }
+    .qss-activity-item[data-proficiency="3"] { border-color: rgba(139, 92, 246, 0.2); }
+
+    .qss-activity-item[data-proficiency="0"]:hover,
+    .qss-activity-item[data-proficiency="0"].qss-active { border-color: var(--novice); }
+    .qss-activity-item[data-proficiency="1"]:hover,
+    .qss-activity-item[data-proficiency="1"].qss-active { border-color: var(--intermediate); }
+    .qss-activity-item[data-proficiency="2"]:hover,
+    .qss-activity-item[data-proficiency="2"].qss-active { border-color: var(--advanced); }
+    .qss-activity-item[data-proficiency="3"]:hover,
+    .qss-activity-item[data-proficiency="3"].qss-active { border-color: var(--power); }
+
+    .qss-activity-item.qss-active { background-color: rgba(255, 255, 255, 0.03); }
+    .qss-activity-item svg { width: 24px; height: 24px; transition: all 0.2s ease; }
+    .qss-activity-item svg .icon-path { fill: #475569; stroke: #475569; }
+    .qss-activity-item.qss-active[data-proficiency="0"] svg .icon-path { fill: var(--novice); stroke: var(--novice); }
+    .qss-activity-item.qss-active[data-proficiency="1"] svg .icon-path { fill: var(--intermediate); stroke: var(--intermediate); }
+    .qss-activity-item.qss-active[data-proficiency="2"] svg .icon-path { fill: var(--advanced); stroke: var(--advanced); }
+    .qss-activity-item.qss-active[data-proficiency="3"] svg .icon-path { fill: var(--power); stroke: var(--power); }
+
+    .qss-activity-card {
+        background: transparent;
+        border: none;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 3px;
+        box-sizing: border-box;
+    }
+
+    .qss-card-inner-container {
+        background: #1a1d23;
+        border: 1px solid #334155;
+        border-radius: var(--qss-card-radius);
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+        padding: 1px;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+    }
+
+    .qss-activity-card:hover .qss-card-inner-container {
+        border-color: #475569;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 
+                    0 4px 6px -2px rgba(0, 0, 0, 0.2),
+                    inset 0 0 0 1px #475569;
+    }
+
+    .qss-activity-card.qss-pinned .qss-card-inner-container { border-color: rgba(99, 102, 241, 0.4); box-shadow: none; }
+    
+    .qss-activity-card:not([class*="qss-proficiency-border"]):hover .qss-card-inner-container {
+        border-color: #475569;
+    }
+
+    .qss-activity-card:focus-within .qss-card-inner-container, .qss-activity-card.qss-active .qss-card-inner-container {
+        border-color: rgba(99, 102, 241, 0.8);
+        box-shadow: 0 0 15px rgba(99, 102, 241, 0.2), 
+                    0 10px 15px -3px rgba(0, 0, 0, 0.4);
+    }
+
+    .qss-card-header {
+        background: #111418;
+        padding: 4px 5px;
+        border-bottom: 1px solid #334155;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: move;
+    }
+    .qss-card-title {
+        font-size: 11px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: #94a3b8;
+    }
+    .qss-activity-card-icon svg { width: 14px; height: 14px; }
+    .qss-activity-card-icon svg .icon-path { fill: currentColor; stroke: currentColor; }
+    .qss-card-content { flex-grow: 1; padding: 8px; overflow-y: auto; position: relative; }
+
+    .qss-proficiency-border-0 .qss-card-inner-container { border-color: rgba(16, 185, 129, 0.4); }
+    .qss-proficiency-border-1 .qss-card-inner-container { border-color: rgba(245, 158, 11, 0.4); }
+    .qss-proficiency-border-2 .qss-card-inner-container { border-color: rgba(239, 68, 68, 0.4); }
+    .qss-proficiency-border-3 .qss-card-inner-container { border-color: rgba(139, 92, 246, 0.4); }
+
+    .qss-proficiency-border-0:hover .qss-card-inner-container { border-color: rgba(16, 185, 129, 0.8); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(16, 185, 129, 0.8); }
+    .qss-proficiency-border-1:hover .qss-card-inner-container { border-color: rgba(245, 158, 11, 0.8); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(245, 158, 11, 0.8); }
+    .qss-proficiency-border-2:hover .qss-card-inner-container { border-color: rgba(239, 68, 68, 0.8); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(239, 68, 68, 0.8); }
+    .qss-proficiency-border-3:hover .qss-card-inner-container { border-color: rgba(139, 92, 246, 0.8); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(139, 92, 246, 0.8); }
+</style>

data/app/views/parapet/shared/head/_styles_shared.html.erb

@@ -0,0 +1,52 @@
+<style>
+    :root {
+        --novice: #10B981;
+        --intermediate: #F59E0B;
+        --advanced: #EF4444;
+        --power: #8B5CF6;
+        --qss-grid-size: 5px;
+        --qss-card-radius: 5px;
+    }
+    .qss-badge {
+        font-size: 0.6rem;
+        padding: 1px 4px;
+        border-radius: 4px;
+        color: white;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+    .bg-novice { background-color: var(--novice); }
+    .bg-intermediate { background-color: var(--intermediate); }
+    .bg-advanced { background-color: var(--advanced); }
+    .bg-power { background-color: var(--power); }
+
+    ::-webkit-scrollbar { width: 7px; height: 7px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { 
+        background: #334155; 
+        border-radius: 100px; 
+        border: 1.5px solid transparent;
+        background-clip: content-box;
+    }
+    ::-webkit-scrollbar-thumb:hover { background: #475569; background-clip: content-box; }
+
+    [class^="lucide-"], [class*=" lucide-"],
+    [class^="qss-icon-"], [class*=" qss-icon-"],
+    [class^="icon-"], [class*=" icon-"] {
+        font-family: 'lucide';
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        width: 14px;
+        height: 14px;
+    }
+</style>

data/app/views/parapet/shared/head/_styles_workspace.html.erb

@@ -0,0 +1,67 @@
+<style>
+    .qss-resizer-h {
+        width: 4px;
+        cursor: col-resize;
+        background: #1e293b;
+        transition: background 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        z-index: 100;
+    }
+    .qss-resizer-h:hover, .qss-resizer-h.active { background: #4f46e5; }
+    .qss-resizer-grip {
+        background: rgba(255, 255, 255, 0.2);
+        width: 1px;
+        height: 24px;
+        border-radius: 1px;
+        opacity: 1;
+    }
+    .qss-resizer-grip-h {
+        background: rgba(99, 102, 241, 0.4);
+        width: 32px;
+        height: 2px;
+        border-radius: 1px;
+        opacity: 1;
+    }
+
+    header i[class^="lucide-"],
+    header i[class^="icon-"],
+    #qss-activity-icons svg,
+    .qss-tab-bar-icon,
+    .qss-command-bar-icon {
+        opacity: 0.5;
+        transition: opacity 0.2s ease;
+    }
+
+    header i[class^="lucide-"]:hover,
+    .qss-activity-item:hover svg,
+    .qss-activity-item.qss-active svg,
+    .h-8:hover .qss-tab-bar-icon,
+    button:hover .qss-command-bar-icon {
+        opacity: 0.8;
+    }
+
+    .qss-workspace-layer {
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        padding: 8px;
+        gap: 8px;
+        overflow: hidden;
+    }
+    .qss-workspace-layer .qss-activity-card { pointer-events: auto; }
+    
+    .qss-layer-novice { z-index: 10; }
+    .qss-layer-intermediate { z-index: 20; }
+    .qss-layer-advanced { z-index: 30; }
+    .qss-layer-power { z-index: 40; }
+    .qss-layer-floating { z-index: 100; }
+</style>

data/app/views/parapet/shared/ribbon_header/_diagnostic_controls.html.erb

@@ -0,0 +1,17 @@
+<!-- Section: Diagnostic & Debugging -->
+<div class="qss-flex qss-items-center qss-gap-1">
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-amber-500/20 qss-text-amber-500/50 qss-text-[11px] qss-rounded hover:qss-text-amber-500/70 hover:qss-bg-amber-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="1">Headful</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-red-500/20 qss-text-red-500/50 qss-text-[11px] qss-rounded hover:qss-text-red-500/70 hover:qss-bg-red-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="2">Full Trace</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-red-500/20 qss-text-red-500/50 qss-text-[11px] qss-rounded hover:qss-text-red-500/70 hover:qss-bg-red-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="2">Baseline</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-violet-500/20 qss-text-violet-500/50 qss-text-[11px] qss-rounded hover:qss-text-violet-500/70 hover:qss-bg-violet-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="3">Bisection</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-violet-500/20 qss-text-violet-500/50 qss-text-[11px] qss-rounded hover:qss-text-violet-500/70 hover:qss-bg-violet-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="3">Profile</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-amber-500/20 qss-text-amber-500/50 qss-text-[11px] qss-rounded hover:qss-text-amber-500/70 hover:qss-bg-amber-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="1">Warnings</button>
+
+  <!-- Utility Icons -->
+  <button class="qss-px-2 qss-h-[22px] qss-border qss-border-red-500/20 qss-text-red-500/50 qss-text-[11px] qss-rounded hover:qss-text-red-500/70 hover:qss-bg-red-600/10 qss-transition-colors qss-flex qss-items-center qss-gap-1.5 proficiency-target" data-proficiency="2" title="Debug Context">
+    <svg class="command-bar-icon" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="2" rx="4"/><path d="m19 7-3 2"/><path d="m5 7 3 2"/><path d="m19 19-3-2"/><path d="m5 19 3-2"/><path d="M20 13h-4"/><path d="M4 13h4"/><path d="m10 19 1 2"/><path d="m14 19-1 2"/></svg>
+  </button>
+  <button class="qss-px-2 qss-h-[22px] qss-border qss-border-emerald-500/20 qss-text-emerald-500/50 qss-text-[11px] qss-rounded hover:qss-text-emerald-500/70 hover:qss-bg-emerald-600/10 qss-transition-colors qss-flex qss-items-center qss-gap-1.5 proficiency-target" data-proficiency="0" title="Clear Terminal">
+    <svg class="command-bar-icon" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
+  </button>
+</div>

data/app/views/parapet/shared/ribbon_header/_execution_controls.html.erb

@@ -0,0 +1,28 @@
+<!-- Primary Action: Run (Novice - Green) -->
+<button class="qss-h-[26px] qss-bg-emerald-600/10 qss-text-emerald-500/70 qss-border qss-border-emerald-500/20 qss-px-4 qss-rounded qss-text-[11px] qss-flex qss-items-center qss-gap-1.5 hover:qss-bg-emerald-600/20 qss-transition-colors qss-tracking-tight proficiency-target qss-whitespace-nowrap qss-flex-shrink-0" data-proficiency="0">
+  <svg class="command-bar-icon" viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="2.5" fill="currentColor" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+  Run All
+</button>
+
+<!-- Rerun (Novice - Green) -->
+<button class="qss-w-[42px] qss-h-[22px] qss-flex qss-items-center qss-justify-center qss-bg-emerald-600/10 qss-text-emerald-500/70 qss-border qss-border-emerald-500/20 qss-rounded hover:qss-bg-emerald-600/20 qss-transition-colors proficiency-target" data-proficiency="0" title="Rerun Failed">
+  <svg class="command-bar-icon" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"></path><path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path><path d="M3 22v-6h6"></path><path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>
+</button>
+
+<!-- Stop (Novice - Green) -->
+<button class="qss-w-[42px] qss-h-[22px] qss-flex qss-items-center qss-justify-center qss-bg-emerald-600/10 qss-text-emerald-500/70 qss-border qss-border-emerald-500/20 qss-rounded hover:qss-bg-emerald-600/20 qss-transition-colors proficiency-target" data-proficiency="0" title="Stop All Processes">
+  <svg class="command-bar-icon" viewBox="0 0 24 24" width="12" height="12" fill="currentColor" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12"></rect></svg>
+</button>
+
+<div class="qss-w-px qss-h-3 qss-bg-slate-800 qss-mx-0.5 proficiency-target" data-proficiency="0"></div>
+
+<div class="qss-flex qss-items-center qss-gap-1">
+  <!-- Section: Execution Control -->
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-emerald-500/20 qss-text-emerald-500/50 qss-text-[11px] qss-rounded hover:qss-text-emerald-500/70 hover:qss-bg-emerald-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="0">Fail Fast</button>
+  <button class="qss-px-3 qss-h-[22px] qss-border qss-border-amber-500/20 qss-text-amber-500/50 qss-text-[11px] qss-rounded hover:qss-text-amber-500/70 hover:qss-bg-amber-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="1">Randomize</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-bg-amber-600/10 qss-text-amber-500/70 qss-text-[11px] qss-rounded qss-border qss-border-amber-500/20 qss-tracking-tight proficiency-target" data-proficiency="1">Failures Only</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-amber-500/20 qss-text-amber-500/50 qss-text-[11px] qss-rounded hover:qss-text-amber-500/70 hover:qss-bg-amber-600/10 qss-tracking-tight proficiency-target" data-proficiency="1">Watch: <span class="qss-text-amber-500/70">ON</span></button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-amber-500/20 qss-text-amber-500/50 qss-text-[11px] qss-rounded hover:qss-text-amber-500/70 hover:qss-bg-amber-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="1">Dry Run</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-amber-500/20 qss-text-amber-500/50 qss-text-[11px] qss-rounded hover:qss-text-amber-500/70 hover:qss-bg-amber-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="1">Seed Reset</button>
+  <button class="qss-w-[67px] qss-h-[22px] qss-text-center qss-border qss-border-red-500/20 qss-text-red-500/50 qss-text-[11px] qss-rounded hover:qss-text-red-500/70 hover:qss-bg-red-600/10 qss-transition-colors qss-tracking-tight proficiency-target" data-proficiency="2">Parallel</button>
+</div>

data/app/views/parapet/shared/ribbon_header/_focus_search.html.erb

@@ -0,0 +1,5 @@
+<!-- Filter Scope (Matches Run All Height) -->
+<div class="qss-flex qss-items-center qss-bg-slate-800/30 qss-border qss-border-slate-700 qss-rounded qss-h-[26px] qss-px-2 qss-gap-2 proficiency-target" data-proficiency="0">
+  <span class="qss-text-[10px] qss-font-bold qss-text-slate-500 qss-uppercase qss-tracking-tight qss-whitespace-nowrap">Focus:</span>
+  <input type="text" placeholder="@metadata, #status, :type" class="qss-bg-transparent qss-border-none qss-outline-none qss-text-[11px] qss-text-slate-300 qss-w-48 placeholder:qss-text-slate-600 qss-font-medium">
+</div>

data/app/views/parapet/shared/root_selector/_header.html.erb

@@ -0,0 +1,10 @@
+<!-- Header -->
+<div class="qss-px-4 qss-py-3 qss-border-b qss-border-slate-700 qss-flex qss-items-center qss-justify-between qss-bg-[#111418]">
+    <div class="qss-flex qss-items-center qss-gap-2">
+        <i class="icon-folder-tree qss-text-amber-500"></i>
+        <h3 class="qss-text-xs qss-font-bold qss-uppercase qss-tracking-wider qss-text-slate-200">Select Suite Root</h3>
+    </div>
+    <button onclick="closeRootModal()" class="qss-text-slate-500 hover:qss-text-white qss-transition-colors">
+        <i class="icon-x qss-text-size[16]"></i>
+    </button>
+</div>

data/app/views/parapet/shared/root_selector/_path_input.html.erb

@@ -0,0 +1,13 @@
+<!-- Path Input -->
+<div class="qss-p-4 qss-border-b qss-border-slate-800 qss-flex qss-flex-col qss-gap-2">
+    <label class="qss-text-[9px] qss-uppercase qss-font-bold qss-text-slate-500">Manual Path Entrance</label>
+    <div class="qss-flex qss-gap-2">
+        <input type="text" id="root-path-input" 
+            class="qss-flex-1 qss-bg-[#0f1115] qss-border qss-border-slate-800 qss-rounded qss-px-2 qss-py-1.5 qss-text-xs qss-text-slate-300 qss-font-mono qss-outline-none focus:qss-border-indigo-500 qss-transition-colors"
+            placeholder="e.g. /test or /spec">
+        <button onclick="confirmRootSelection()" 
+            class="qss-px-4 qss-py-1.5 qss-bg-indigo-600 hover:qss-bg-indigo-500 qss-text-white qss-text-[10px] qss-font-bold qss-uppercase qss-rounded qss-transition-all qss-shadow-lg qss-shadow-indigo-600/20">
+            Apply
+        </button>
+    </div>
+</div>

data/app/views/parapet/shared/root_selector/_quick_select.html.erb

@@ -0,0 +1,20 @@
+<!-- Selection Area -->
+<div class="qss-flex-1 qss-overflow-y-auto qss-p-4 qss-flex qss-flex-col qss-gap-3 custom-scrollbar">
+    <div class="qss-flex qss-flex-col qss-gap-2">
+        <span class="qss-text-[9px] qss-uppercase qss-font-bold qss-text-slate-500">Workspace Contexts</span>
+        <div class="qss-grid qss-grid-cols-1 qss-gap-1">
+            <button onclick="selectQuickRoot('test')" class="qss-flex qss-items-center qss-gap-2 qss-px-3 qss-py-2 qss-rounded qss-bg-white/5 hover:qss-bg-white/10 qss-border qss-border-transparent hover:qss-border-slate-600 qss-transition-all qss-text-left qss-group">
+                <i class="icon-beaker qss-text-amber-500"></i>
+                <span class="qss-text-xs qss-text-slate-300 group-hover:qss-text-white">Test Suite (/test)</span>
+            </button>
+            <button onclick="selectQuickRoot('app')" class="qss-flex qss-items-center qss-gap-2 qss-px-3 qss-py-2 qss-rounded qss-bg-white/5 hover:qss-bg-white/10 qss-border qss-border-transparent hover:qss-border-slate-600 qss-transition-all qss-text-left qss-group">
+                <i class="icon-cpu qss-text-blue-400"></i>
+                <span class="qss-text-xs qss-text-slate-300 group-hover:qss-text-white">Application Source (/app)</span>
+            </button>
+            <button onclick="selectQuickRoot('/')" class="qss-flex qss-items-center qss-gap-2 qss-px-3 qss-py-2 qss-rounded qss-bg-white/5 hover:qss-bg-white/10 qss-border qss-border-red-900/30 hover:qss-border-red-500/50 qss-transition-all qss-text-left qss-group">
+                <i class="icon-alert-triangle qss-text-red-500"></i>
+                <span class="qss-text-xs qss-text-slate-300 group-hover:qss-text-white">Full Project Root (Warning: Exposure)</span>
+            </button>
+        </div>
+    </div>
+</div>

data/app/views/parapet/shared/root_selector/_scripts.html.erb

@@ -0,0 +1,61 @@
+<script>
+    function openRootModal() {
+        const modal = document.getElementById('root-selector-modal');
+        const input = document.getElementById('root-path-input');
+        const suite = document.getElementById('sidebar-title')?.textContent?.trim() || 'default';
+        const currentRoot = localStorage.getItem(`parapet-root-${suite}`) || '/test';
+        
+        input.value = currentRoot;
+        modal.classList.remove('qss-hidden');
+        modal.classList.add('qss-flex');
+    }
+
+    function closeRootModal() {
+        const modal = document.getElementById('root-selector-modal');
+        modal.classList.add('qss-hidden');
+        modal.classList.remove('qss-flex');
+    }
+
+    function selectQuickRoot(path) {
+        document.getElementById('root-path-input').value = path;
+    }
+
+    function confirmRootSelection() {
+        const path = document.getElementById('root-path-input').value;
+        const suite = document.getElementById('sidebar-title')?.textContent?.trim() || 'default';
+        
+        localStorage.setItem(`parapet-root-${suite}`, path);
+        
+        // Update label immediately
+        const label = document.getElementById('current-root-label');
+        if (label) label.textContent = path.startsWith('/') ? path : '/' + path;
+
+        closeRootModal();
+
+        // Trigger reload of explorer content based on active perspective
+        const activeBtn = document.querySelector('.perspective-btn.active');
+        if (activeBtn) {
+            activeBtn.click();
+        }
+    }
+
+    function syncRootLabel() {
+        const suite = document.getElementById('sidebar-title')?.textContent?.trim() || 'default';
+        const currentRoot = localStorage.getItem(`parapet-root-${suite}`) || '/test';
+        const label = document.getElementById('current-root-label');
+        if (label) {
+            label.textContent = currentRoot.startsWith('/') ? currentRoot : '/' + currentRoot;
+        }
+    }
+
+    // Global delegation for the pill
+    document.addEventListener('click', (e) => {
+        const pill = e.target.closest('#root-selector-pill');
+        if (pill) {
+            openRootModal();
+        }
+    });
+
+    document.addEventListener('turbo:load', syncRootLabel);
+    document.addEventListener('turbo:render', syncRootLabel);
+</script>

data/app/views/parapet/shared/root_selector/_warning.html.erb

@@ -0,0 +1,11 @@
+<!-- Warning Area -->
+<div class="qss-px-4 qss-py-3 qss-bg-amber-500/5 qss-border-b qss-border-amber-500/10 qss-flex qss-gap-3">
+    <i class="icon-alert-triangle qss-text-amber-500 qss-flex-shrink-0 qss-mt-0.5" style="font-size: 14px;"></i>
+    <div class="qss-flex qss-flex-col qss-gap-1">
+        <span class="qss-text-[10px] qss-font-bold qss-text-amber-500 qss-uppercase">Warning: Structural Exposure</span>
+        <p class="qss-text-[10px] qss-text-amber-600/80 qss-leading-relaxed">
+            Setting a new root will expose the underlying filesystem from that point downward. 
+            Ensure you only select directories relevant to the current suite to avoid performance degradation or accidental modification of sensitive files.
+        </p>
+    </div>
+</div>

data/app/views/parapet/shared/widgets/_base.html.erb

@@ -0,0 +1,6 @@
+<turbo-frame id="qss-widget-content" class="anchored vertical h-full">
+<div class="anchored vertical p[8] gap[4] centered h-full">
+    <i class="icon-info text-slate-700 text-size[12] mb[4]"></i>
+    <span class="anchored text-size[7] text-slate-500 italic">No suite-specific monitors available for this context.</span>
+</div>
+</turbo-frame>