parapet-rails 0.1.0

data/app/views/parapet/hierarchical_layout_test.html.erb

@@ -0,0 +1,85 @@
+<div id="pp-hierarchical-wrapper" class="qss-canvas" style="contain: layout; width: 100vw; height: 100vh; position: relative; background: #f3f4f6; --header-height: 60px; --left-sidebar-width-decl: 260px;">
+  <!-- Top Level: Header -->
+  <header id="pp-top-header" style="contain: layout; width: 100%; height: var(--header-height); background: #1e293b; color: white; display: flex; items-center: center; padding: 0 20px;">
+    <h1 class="text-xl font-bold">Hierarchical Protocol Test</h1>
+  </header>
+
+  <!-- Top Level: Sidebar -->
+  <aside id="pp-left-sidebar" style="contain: layout; width: var(--left-sidebar-width-decl); top: var(--header-height); bottom: 0; left: 0; position: absolute; background: white; border-right: 1px solid #e5e7eb; padding: 20px;">
+    <p class="text-sm font-medium text-gray-500 uppercase">Top Level Navigation</p>
+    <div class="mt-4 space-y-2">
+      <div class="h-8 bg-gray-100 rounded"></div>
+      <div class="h-8 bg-gray-100 rounded"></div>
+    </div>
+  </aside>
+
+  <!-- Top Level: Main Content Area (Nested Frame) -->
+  <main id="pp-main-workspace" style="contain: layout; left: var(--left-sidebar-width); top: var(--header-height); right: 0; bottom: 0; position: absolute; background: #f9fafb; padding: 20px;">
+    
+    <!-- Nested Structural Layout -->
+    <div id="pp-nested-frame" style="contain: layout; width: 100%; height: 100%; position: relative; border: 2px dashed #3b82f6; border-radius: 8px; background: white; --inner-sidebar-width-decl: 200px;">
+      
+      <!-- Nested Sidebar -->
+      <aside id="pp-inner-sidebar" style="contain: layout; width: var(--inner-sidebar-width-decl); height: 100%; position: absolute; left: 0; top: 0; background: #eff6ff; border-right: 1px solid #bfdbfe; padding: 15px;">
+        <p class="text-xs font-bold text-blue-600 uppercase">Nested Sidebar</p>
+        <div class="mt-4 h-full bg-blue-50 rounded opacity-50"></div>
+      </aside>
+
+      <!-- Nested Workspace (Anchored to Nested Sidebar) -->
+      <section id="pp-inner-workspace" style="contain: layout; left: var(--inner-sidebar-width); right: 0; top: 0; bottom: 0; position: absolute; padding: 20px;">
+        <h2 class="text-lg font-semibold mb-4">Nested Content Area</h2>
+        <p class="text-gray-600 mb-6">This area anchors to the blue inner sidebar, which itself sits inside the main workspace.</p>
+        
+        <!-- Overlay Trigger (Stacking Context Test) -->
+        <button id="pp-trigger-button" class="qss-content-driven px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
+          Open Portal Dropdown
+        </button>
+      </section>
+
+      <!-- Nested Thin Pulse (Scoped to pp-nested-frame) -->
+      <script>
+        (function() {
+          const sidebar = document.querySelector('#pp-inner-sidebar');
+          const root = document.querySelector('#pp-nested-frame');
+          const update = () => root.style.setProperty('--inner-sidebar-width', `${sidebar.offsetWidth}px`);
+          new MutationObserver(update).observe(sidebar, { attributes: true });
+          window.addEventListener('resize', update);
+          update();
+        })();
+      </script>
+    </div>
+
+  </main>
+
+  <!-- Top Level Thin Pulse (Scoped to pp-hierarchical-wrapper) -->
+  <script>
+    (function() {
+      const sidebar = document.querySelector('#pp-left-sidebar');
+      const root = document.querySelector('#pp-hierarchical-wrapper');
+      const update = () => root.style.setProperty('--left-sidebar-width', `${sidebar.offsetWidth}px`);
+      new MutationObserver(update).observe(sidebar, { attributes: true });
+      window.addEventListener('resize', update);
+      update();
+    })();
+  </script>
+
+  <!-- Portal Root (Rule 4 Compliance) -->
+  <div id="pp-portal-root">
+    <!-- Dropdown content will be injected here via JS to simulate portal behavior -->
+    <div id="pp-portal-dropdown" style="display: none; position: absolute; z-index: 9999; background: white; border: 1px solid #ccc; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); padding: 10px; border-radius: 4px;">
+      <p class="text-sm">I am a Portaled Dropdown</p>
+      <hr class="my-2">
+      <p class="text-xs text-gray-500">Escaped the Stacking Context Trap</p>
+    </div>
+  </div>
+
+  <script>
+    document.querySelector('#pp-trigger-button').addEventListener('click', (e) => {
+      const dropdown = document.querySelector('#pp-portal-dropdown');
+      const rect = e.target.getBoundingClientRect();
+      dropdown.style.display = 'block';
+      dropdown.style.top = `${rect.bottom + window.scrollY + 5}px`;
+      dropdown.style.left = `${rect.left + window.scrollX}px`;
+    });
+  </script>
+</div>

data/app/views/parapet/hybrid_stress_test.html.erb

@@ -0,0 +1,25 @@
+<div id="pp-hybrid-test" class="qss w-full h-full vertical">
+  <!-- QSS Frame -->
+  <div id="pp-hybrid-frame" class="qss anchored w-full h[200] border-b[1] border-slate-800 vertical px[20] py[16] bg-brand-main">
+    <h3 class="qss text-size[14] weight[bold] text-slate-300">Auditor Context Test</h3>
+    
+    <!-- Tailwind Drywall (inside .foreign) -->
+    <div id="pp-tailwind-payload" class="qss anchored w-full mt[10] foreign bg-slate-900 rounded p-4">
+      <div class="flex items-center justify-between divide-x divide-slate-800 border border-slate-700 rounded overflow-hidden">
+        <div class="flex-1 px-4 py-2 text-sm text-slate-300 cursor-pointer hover:bg-slate-800 transition-colors">
+          Unprefixed: flex, grid, divide-y
+        </div>
+        <div class="flex-none px-4 py-2 text-xs font-mono text-emerald-400 bg-emerald-500/10">
+          Status: Auditor Patched
+        </div>
+      </div>
+      
+      <ul class="mt-4 divide-y divide-slate-800 border-t border-slate-800">
+        <li class="py-2 flex items-center gap-2">
+          <span class="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]"></span>
+          <span class="text-xs text-slate-400">Testing unprefixed classes inside .foreign</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,35 @@
+<div id="pp-landing-container" class="qss w-full h-full centered">
+    
+    <div id="login-card" class="qss Card[400|500] pos[center] vertical v-mid pt[40]">
+        
+        <div id="login-branding" class="qss mb[40] vertical v-mid">
+            <span class="qss text-indigo-500 font-black text-size[48] italic tracking-tighter">PARAPET</span>
+            <span class="qss text-slate-500 text-size[12] uppercase tracking-widest mt[-8]">Secure Access IDE</span>
+        </div>
+
+        <%= form_with url: login_path, method: :post, class: "qss vertical gap[24]" do |f| %>
+            
+            <div class="qss Field[320|64]">
+                <label class="qss Field-label">USERNAME</label>
+                <%= f.text_field :username, class: "qss Field-input", placeholder: "Enter username..." %>
+            </div>
+
+            <div class="qss Field[320|64]">
+                <label class="qss Field-label">PASSWORD</label>
+                <%= f.password_field :password, class: "qss Field-input", placeholder: "••••••••" %>
+            </div>
+
+            <div class="qss mt[20]">
+                <button type="submit" class="qss Button[320|48]">
+                    <span class="qss Button-label">SIGN IN</span>
+                </button>
+            </div>
+            
+        <% end %>
+
+        <div class="qss mt[40] text-slate-600 text-size[12]">
+            &copy; <%= Time.now.year %> Parapet Software Engineering
+        </div>
+    </div>
+
+</div>

data/app/views/parapet/mutation_stress_test.html.erb

@@ -0,0 +1,82 @@
+<div id="pp-stress-wrapper" class="qss-canvas" style="contain: layout; width: 100vw; height: 100vh; position: relative; background: #0f172a; color: white; overflow: hidden;">
+  
+  <!-- Sidebar -->
+  <aside id="pp-sidebar" style="contain: layout; width: var(--sidebar-w, 300px); height: 100%; position: absolute; left: 0; top: 0; background: #1e293b; border-right: 1px solid #334155; display: flex; flex-direction: column; padding: 20px;">
+    <h2 class="text-lg font-bold mb-4">Mutation Stress Test</h2>
+    <p class="text-sm text-slate-400 mb-8">Simulating 60fps continuous resize to detect layout thrashing.</p>
+    
+    <div id="stats" class="mt-auto p-4 bg-black/20 rounded font-mono text-xs">
+      <div>FPS: <span id="fps-val">0</span></div>
+      <div>Pulse Latency: <span id="lat-val">0</span>ms</div>
+    </div>
+  </aside>
+
+  <!-- Workspace (Anchored to Sidebar) -->
+  <main id="pp-workspace" style="contain: layout; left: var(--sidebar-width); right: 0; height: 100%; position: absolute; background: #0f1115; padding: 40px; display: flex; items-center: center; justify-content: center;">
+    <div class="qss centered">
+      <div id="indicator" class="qss-payload-override" style="width: 100px; height: 100px; border-radius: 50%; background: #6366f1; transition: transform 0.1s linear;"></div>
+      <p class="mt-4 font-bold">Anchored Workspace</p>
+      <code class="text-xs text-slate-500">left: var(--sidebar-width)</code>
+    </div>
+  </main>
+
+  <!-- Thin Pulse Script -->
+  <script id="pp-thin-pulse">
+    (function() {
+      const sidebar = document.querySelector('#pp-sidebar');
+      const root = document.querySelector('#pp-stress-wrapper');
+      
+      const update = () => {
+        const start = performance.now();
+        root.style.setProperty('--sidebar-width', `${sidebar.offsetWidth}px`);
+        const end = performance.now();
+        window.lastPulseDuration = end - start;
+      };
+
+      const observer = new MutationObserver(update);
+      observer.observe(sidebar, { attributes: true, attributeFilter: ['style'] });
+      
+      window.addEventListener('resize', update);
+      update();
+    })();
+  </script>
+
+  <!-- Simulation Script -->
+  <script>
+    (function() {
+      const sidebar = document.querySelector('#pp-sidebar');
+      const fpsVal = document.querySelector('#fps-val');
+      const latVal = document.querySelector('#lat-val');
+      const indicator = document.querySelector('#indicator');
+      
+      let frameCount = 0;
+      let lastTime = performance.now();
+      let phase = 0;
+
+      function simulate() {
+        const now = performance.now();
+        frameCount++;
+        
+        if (now > lastTime + 1000) {
+          fpsVal.textContent = Math.round((frameCount * 1000) / (now - lastTime));
+          latVal.textContent = (window.lastPulseDuration || 0).toFixed(3);
+          frameCount = 0;
+          lastTime = now;
+        }
+
+        // Oscillate sidebar width between 200 and 600
+        phase += 0.05;
+        const width = 400 + Math.sin(phase) * 200;
+        sidebar.style.width = `${width}px`;
+
+        // Rotate indicator to show animation smoothness
+        indicator.style.transform = `rotate(${phase * 50}deg)`;
+
+        requestAnimationFrame(simulate);
+      }
+
+      // Start simulation after a small delay
+      setTimeout(simulate, 1000);
+    })();
+  </script>
+</div>

data/app/views/parapet/recursive_anchoring_test.html.erb

@@ -0,0 +1,66 @@
+<div id="pp-recursive-root" class="qss-canvas" style="contain: layout; width: 100vw; height: 100vh; position: relative; --header-h: 60px;">
+  
+  <!-- Root Level: Header -->
+  <header id="pp-root-header" style="contain: layout; width: 100%; height: var(--header-h); background: #1e293b; color: white; display: flex; items-center: center; padding: 0 20px;">
+    <h1 class="text-xl font-bold">Recursive Anchor Standard</h1>
+  </header>
+
+  <!-- Root Level: Main Frame -->
+  <main id="pp-root-main" style="contain: layout; top: var(--header-h); bottom: 0; width: 100%; position: absolute; background: #f1f5f9; padding: 20px;">
+    
+    <!-- Recursive Panel A -->
+    <div id="pp-panel-a" style="contain: layout; width: 100%; height: var(--local-panel-h); position: relative; background: white; border: 1px solid #cbd5e1; --local-sidebar-w: 200px; --local-panel-h: 400px;">
+      
+      <!-- Panel A Sidebar (Uses local property) -->
+      <aside id="pp-panel-a-side" style="contain: layout; width: var(--local-sidebar-w); height: 100%; position: absolute; left: 0; top: 0; background: #f8fafc; border-right: 1px solid #e2e8f0; padding: 15px;">
+        <p class="text-xs font-bold text-slate-500 uppercase">Panel A Nav</p>
+      </aside>
+
+      <!-- Panel A Content (Anchored to local property) -->
+      <section id="pp-panel-a-content" style="contain: layout; left: var(--local-sidebar-w); right: 0; top: 0; bottom: 0; position: absolute; padding: 20px;">
+        <h2 class="text-md font-semibold">Panel A Content</h2>
+        <p class="text-sm text-slate-600">Anchored to local --local-sidebar-w</p>
+      </section>
+
+      <!-- Panel A Thin Pulse (Scoped to Panel A) -->
+      <script>
+        (function() {
+          const side = document.querySelector('#pp-panel-a-side');
+          const root = document.querySelector('#pp-panel-a');
+          const update = () => root.style.setProperty('--local-sidebar-w', `${side.offsetWidth}px`);
+          new MutationObserver(update).observe(side, { attributes: true });
+          window.addEventListener('resize', update);
+          update();
+        })();
+      </script>
+    </div>
+
+    <!-- Recursive Panel B (Identical structure, different scope) -->
+    <div id="pp-panel-b" class="mt-8" style="contain: layout; width: 100%; height: var(--local-panel-h); position: relative; background: white; border: 1px solid #cbd5e1; --local-sidebar-w: 250px; --local-panel-h: 400px;">
+      
+      <!-- Panel B Sidebar -->
+      <aside id="pp-panel-b-side" style="contain: layout; width: var(--local-sidebar-w); height: 100%; position: absolute; left: 0; top: 0; background: #f8fafc; border-right: 1px solid #e2e8f0; padding: 15px;">
+        <p class="text-xs font-bold text-slate-500 uppercase">Panel B Nav</p>
+      </aside>
+
+      <!-- Panel B Content -->
+      <section id="pp-panel-b-content" style="contain: layout; left: var(--local-sidebar-w); right: 0; top: 0; bottom: 0; position: absolute; padding: 20px;">
+        <h2 class="text-md font-semibold">Panel B Content</h2>
+        <p class="text-sm text-slate-600">Anchored to local --local-sidebar-w (independent of Panel A)</p>
+      </section>
+
+      <!-- Panel B Thin Pulse -->
+      <script>
+        (function() {
+          const side = document.querySelector('#pp-panel-b-side');
+          const root = document.querySelector('#pp-panel-b');
+          const update = () => root.style.setProperty('--local-sidebar-w', `${side.offsetWidth}px`);
+          new MutationObserver(update).observe(side, { attributes: true });
+          window.addEventListener('resize', update);
+          update();
+        })();
+      </script>
+    </div>
+
+  </main>
+</div>

data/app/views/parapet/sessions/new.html.erb

@@ -0,0 +1,28 @@
+<div id="pp-login-frame" class="qss pp-frame w-full h-full bg-brand-main contain-layout">
+  <main class="flex h-full items-center justify-center p-6">
+    <section class="w-full max-w-md rounded-lg border border-slate-700 bg-slate-900 p-8">
+      <header class="mb-8 text-center">
+        <h1 class="text-3xl font-bold tracking-tight text-indigo-400">Parapet</h1>
+        <p class="mt-2 text-sm text-slate-400">Sign in to your developer account</p>
+      </header>
+
+      <% if flash[:alert].present? %>
+        <p class="mb-4 rounded border border-red-800 bg-red-950 p-3 text-sm text-red-300" role="alert"><%= flash[:alert] %></p>
+      <% end %>
+
+      <%= form_with url: login_path, class: "space-y-5" do |form| %>
+        <div>
+          <%= form.label :email_address, "Email address", class: "mb-2 block text-sm font-medium text-slate-300" %>
+          <%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", class: "w-full rounded border border-slate-700 bg-slate-950 px-3 py-3 text-slate-100" %>
+        </div>
+
+        <div>
+          <%= form.label :password, "Password", class: "mb-2 block text-sm font-medium text-slate-300" %>
+          <%= form.password_field :password, required: true, autocomplete: "current-password", class: "w-full rounded border border-slate-700 bg-slate-950 px-3 py-3 text-slate-100" %>
+        </div>
+
+        <%= form.submit "Sign in", class: "w-full rounded bg-indigo-600 px-4 py-3 font-semibold text-white hover:bg-indigo-500" %>
+      <% end %>
+    </section>
+  </main>
+</div>

data/app/views/parapet/shared/_cad_inspector.html.erb

@@ -0,0 +1,92 @@
+<div id="qss-cad-inspector-canvas" class="qss-relative qss-w-pct[1000] qss-h-pct[1000] qss-bg-[#16191e] qss-overflow-hidden">
+    
+    <!-- Inspector Header -->
+    <div id="qss-cad-header" class="qss-absolute qss-pos-x[0] qss-pos-y[0] qss-w-pct[1000] qss-h[40] qss-border-b qss-border-slate-800 qss-flex qss-justify-center qss-items-center">
+        <span class="qss-text-size[12] qss-font-bold qss-text-slate-400 qss-uppercase qss-tracking-widest">CAD Inspector</span>
+    </div>
+
+    <div id="qss-cad-content" class="qss-absolute qss-pos-x[0] qss-pos-y[40] qss-pos-b[0] qss-w-pct[1000] qss-overflow-y-auto qss-p-4 qss-space-y-6 custom-scrollbar">
+        
+        <!-- Selection Info -->
+        <div class="qss-space-y-2">
+            <label class="qss-text-size[9] qss-font-bold qss-text-slate-500 qss-uppercase">Active Noun</label>
+            <div class="qss-bg-slate-900/50 qss-border qss-border-slate-800 qss-p-3 qss-rounded">
+                <span class="qss-text-size[12] qss-font-bold qss-text-indigo-400 qss-font-mono">#qss-main-canvas</span>
+            </div>
+        </div>
+
+        <!-- Spatial Adjectives -->
+        <div class="qss-space-y-3">
+            <label class="qss-text-size[9] qss-font-bold qss-text-slate-500 qss-uppercase">Spatial Adjectives</label>
+            
+            <div class="qss-grid qss-grid-cols-2 qss-gap-3">
+                <div class="qss-space-y-1">
+                    <label class="qss-text-size[8] qss-text-slate-600 qss-uppercase">X-Coord</label>
+                    <div class="qss-bg-slate-900/30 qss-border qss-border-slate-800 qss-p-2 qss-text-size[11] qss-text-slate-300 qss-font-mono">0</div>
+                </div>
+                <div class="qss-space-y-1">
+                    <label class="qss-text-size[8] qss-text-slate-600 qss-uppercase">Y-Coord</label>
+                    <div class="qss-bg-slate-900/30 qss-border qss-border-slate-800 qss-p-2 qss-text-size[11] qss-text-slate-300 qss-font-mono">0</div>
+                </div>
+            </div>
+
+            <div class="qss-grid qss-grid-cols-2 qss-gap-3">
+                <div class="qss-space-y-1">
+                    <label class="qss-text-size[8] qss-text-slate-600 qss-uppercase">Width %</label>
+                    <div class="qss-bg-slate-900/30 qss-border qss-border-slate-800 qss-p-2 qss-text-size[11] qss-text-slate-300 qss-font-mono">100.0%</div>
+                </div>
+                <div class="qss-space-y-1">
+                    <label class="qss-text-size[8] qss-text-slate-600 qss-uppercase">Height %</label>
+                    <div class="qss-bg-slate-900/30 qss-border qss-border-slate-800 qss-p-2 qss-text-size[11] qss-text-slate-300 qss-font-mono">100.0%</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Ergonomic Auditor -->
+        <div class="qss-pt-6 qss-border-t qss-border-slate-800 qss-space-y-3">
+            <div class="qss-flex qss-items-center qss-justify-between">
+                <span class="qss-text-size[9] qss-font-bold qss-text-slate-500 qss-uppercase">Usability Auditor</span>
+                <span class="qss-text-size[10] qss-font-bold qss-text-emerald-500">OPTIMAL</span>
+            </div>
+            
+            <div class="qss-space-y-2">
+                <div class="qss-flex qss-items-center qss-gap-2 qss-p-2 qss-bg-emerald-500/5 qss-border qss-border-emerald-500/20 qss-rounded">
+                    <div class="qss-w[6] qss-h[6] qss-rounded-full qss-bg-emerald-500"></div>
+                    <span class="qss-text-size[9] qss-text-emerald-400/80">Spatial alignment matches 1000-unit grid.</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Grammar Palette (Registry) -->
+        <div class="qss-pt-6 qss-border-t qss-border-slate-800 qss-space-y-3">
+            <div class="qss-flex qss-items-center qss-justify-between">
+                <span class="qss-text-size[9] qss-font-bold qss-text-slate-500 qss-uppercase">Grammar Palette</span>
+                <i class="lucide-book-open qss-w[12] qss-h[12] qss-text-slate-500"></i>
+            </div>
+            
+            <div class="qss-relative">
+                <input type="text" placeholder="Search adjectives..." 
+                       class="qss-w-pct[1000] qss-bg-slate-900/50 qss-border qss-border-slate-800 qss-rounded qss-px-2 qss-py-1.5 qss-text-size[10] qss-text-slate-300 focus:qss-outline-none focus:qss-border-indigo-500/50">
+            </div>
+
+            <div class="qss-h[150] qss-overflow-y-auto qss-space-y-1 custom-scrollbar">
+                <div class="qss-text-size[8] qss-text-slate-600 qss-uppercase qss-font-bold qss-px-1 qss-mt-2">Spatial</div>
+                <div class="qss-p-1.5 qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-text-size[10] qss-text-slate-300">.pos-x[...]</div>
+                <div class="qss-p-1.5 qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-text-size[10] qss-text-slate-300">.pos-y[...]</div>
+                <div class="qss-p-1.5 qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-text-size[10] qss-text-slate-300">.w[...]</div>
+                <div class="qss-p-1.5 qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-text-size[10] qss-text-slate-300">.h[...]</div>
+                
+                <div class="qss-text-size[8] qss-text-slate-600 qss-uppercase qss-font-bold qss-px-1 qss-mt-4">Typography</div>
+                <div class="qss-p-1.5 qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-text-size[10] qss-text-slate-300">.text-size[...]</div>
+                <div class="qss-p-1.5 qss-rounded hover:qss-bg-white/5 qss-cursor-pointer qss-text-size[10] qss-text-slate-300">.font-bold</div>
+            </div>
+        </div>
+
+        <!-- Action Logic -->
+        <div class="qss-pt-6 qss-border-t qss-border-slate-800">
+            <button class="qss-w-pct[1000] qss-py-3 qss-bg-indigo-500/20 qss-border qss-border-indigo-500/40 qss-text-indigo-400 qss-text-size[10] qss-font-bold qss-uppercase qss-rounded hover:qss-bg-indigo-500/30 qss-transition-all">
+                Commit Spatial Changes
+            </button>
+        </div>
+    </div>
+</div>

data/app/views/parapet/shared/_discovery_sidebar.html.erb

@@ -0,0 +1,48 @@
+<div id="pp-discovery-sidebar-canvas" class="qss relative w-pct[1000] h-pct[1000] bg-[#16191e] overflow-hidden">
+    
+    <!-- Explorer Pane (Top 60%) -->
+    <div id="pp-explorer-pane" class="qss absolute pos-x[0] pos-y[0] w-pct[1000] h-pct[600] border-b border-slate-800">
+        <div id="pp-sidebar-header" class="qss absolute pos-x[0] pos-y[0] w-pct[1000] h[40] border-b border-slate-800 flex justify-center items-center">
+            <span id="pp-suite-explorer-title" class="qss text-size[12] font-bold text-slate-400 uppercase tracking-widest">Workspace Explorer</span>
+        </div>
+        
+        <div id="pp-explorer-content" class="qss absolute pos-x[0] pos-y[40] w-pct[1000] pos-b[0] overflow-y-auto p[8] custom-scrollbar">
+            <!-- Project files tree -->
+            <div id="pp-tree-container" data-endpoint="<%= parapet.files_path %>">
+                <div class="qss text-size[10] text-slate-500 italic text-center mt[20]">
+                    Scanning project files...
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Agent Chat Pane (Bottom 40%) -->
+    <div id="pp-agent-chat-pane" class="qss absolute pos-x[0] pos-y-pct[600] w-pct[1000] pos-b[0] bg-[#0f1115] flex flex-col">
+        <div class="qss h[32] bg-slate-900/50 border-b border-slate-800 flex items-center px[12] gap[8]">
+            <div class="qss w[6] h[6] rounded-full bg-indigo-500 animate-pulse"></div>
+            <span class="qss text-size[10] font-bold text-slate-400 uppercase tracking-wider">Agent Intelligence</span>
+        </div>
+        
+        <div id="pp-agent-messages" class="qss flex-grow overflow-y-auto p[12] space-y[16] custom-scrollbar">
+            <div class="qss flex flex-col gap[4]">
+                <span class="qss text-size[9] font-bold text-slate-600 uppercase">System</span>
+                <div class="qss bg-slate-800/30 border border-slate-800 p[8] rounded">
+                    <p class="qss text-size[11] text-slate-400 leading-tight">
+                        Awaiting spatial instructions...
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <div class="qss p[8] bg-slate-900/30 border-t border-slate-800">
+            <div class="qss relative">
+                <textarea placeholder="Describe layout changes..." 
+                          class="qss w-pct[1000] bg-slate-950 border border-slate-800 rounded p[8] text-size[11] text-slate-300 outline-none focus:border-indigo-500/50 resize-none h[60]"></textarea>
+                <div class="qss absolute pos-r[8] pos-b[8] flex items-center gap[8]">
+                    <span class="qss text-size[8] text-slate-700 font-mono">⌘⏎</span>
+                    <i class="lucide-send qss w[14] h[14] text-indigo-500 cursor-pointer"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

data/app/views/parapet/shared/_explorer_bar.html.erb

@@ -0,0 +1,71 @@
+<div id="pp-explorer-bar" class="qss bg-brand-main border-r border-slate-800 contain-layout" style="position: absolute; left: var(--global-nav-w, var(--global-nav-w-default)); top: var(--header-h); width: var(--explorer-bar-w, var(--explorer-bar-w-default)); min-width: var(--explorer-bar-min-w); max-width: var(--explorer-bar-max-w); bottom: var(--footer-h, var(--footer-h-default));">
+    <div id="pp-explorer-header" class="qss border-b border-slate-800 centered contain-layout" style="position: absolute; left: 0; top: 0; width: 100%; height: calc(20 * var(--qnt));">
+        <% 
+            suite_title = case @active_suite
+                when 'css' then 'CSS Suite'
+                when 'tests' then 'Test Suite'
+                when 'intentions' then 'Intentions Suite'
+                when 'signal' then 'Signal Suite'
+                when 'monitor' then 'Monitor Suite'
+                when 'polyglot' then 'Polyglot Suite'
+                when 'build' then 'Build Suite'
+                else 'Explorer'
+            end
+        %>
+        <div id="pp-explorer-title" class="qss absolute pos-x-center text-slate-500 font-bold font-sans text-size[11] uppercase tracking qss-legibility-override"><%= suite_title %></div>
+    </div>
+    
+    <!-- 1. Librarian (File Tree) -->
+    <div id="pp-explorer-content" class="qss border-b border-slate-800 scroll-auto contain-layout" style="position: absolute; width: 100%; top: calc(20 * var(--qnt)); bottom: calc(var(--agent-interface-h, var(--agent-interface-h-default)) + var(--explorer-widgets-h, var(--explorer-widgets-h-default)));">
+        <% 
+            explorer_type = case @active_suite
+                when 'css' then 'css'
+                when 'tests' then 'tests'
+                when 'intentions' then 'intentions'
+                else 'project'
+            end
+        %>
+        <%= turbo_frame_tag "qss-explorer-content", src: parapet.explorer_path(type: explorer_type) do %>
+            <div class="qss p-2.5 text-slate-600 italic text-size[11] qss-legibility-override">
+                Initializing <%= explorer_type %> explorer...
+            </div>
+        <% end %>
+    </div>
+    
+    <!-- 2. Agent Interface (Chat) -->
+    <div id="pp-agent-interface" class="qss bg-slate-900 border-b border-slate-800 vertical depth-ui contain-layout" style="position: absolute; width: 100%; height: var(--agent-interface-h, var(--agent-interface-h-default)); bottom: var(--explorer-widgets-h, var(--explorer-widgets-h-default));">
+        <div id="pp-agent-header" class="qss bg-brand-header border-b border-slate-800 px-2.5 horizontal v-mid spaced contain-layout" style="height: calc(20 * var(--qnt)); width: 100%;">
+            <span class="qss text-size[11] text-slate-500 font-bold uppercase tracking qss-legibility-override">Agent Chat</span>
+            <i class="icon-message-square text-size[11] text-slate-600 qss-legibility-override"></i>
+        </div>
+        <div id="pp-agent-chat-output" class="qss flex-1 scroll-auto p-2.5 text-size[11] text-slate-400 font-sans qss-legibility-override">
+            <div class="qss italic text-slate-600">Ready for instructions...</div>
+        </div>
+        <div id="pp-agent-input-wrapper" class="qss bg-slate-950 p-2 horizontal v-mid border-t border-slate-800 qss-ergonomic-override contain-layout" style="height: calc(44 * var(--qnt)); width: 100%;">
+            <input type="text" placeholder="Ask Zencoder..." class="qss flex-1 bg-transparent border-none text-white text-size[11] outline-none qss-legibility-override" />
+            <button id="pp-agent-send-button" class="qss centered bg-indigo-600/20 hover:bg-indigo-600/40 rounded smooth border-none clickable qss-ergonomic-override w-24 h-24">
+                <i class="icon-send text-size[11] text-indigo-400 qss-legibility-override"></i>
+            </button>
+        </div>
+    </div>
+
+    <!-- 3. Auditor Feed (Bottom) -->
+    <div id="pp-explorer-widgets" class="qss bg-brand-header vertical depth-ui scroll-hidden contain-layout" style="position: absolute; left: 0; bottom: 0; width: 100%; height: var(--explorer-widgets-h, var(--explorer-widgets-h-default));">
+        <div id="pp-auditor-header" class="qss bg-white/2 border-b border-slate-800 horizontal v-mid px-2.5 spaced contain-layout" style="height: calc(20 * var(--qnt)); width: 100%;">
+            <span class="qss text-size[11] font-bold text-slate-500 uppercase tracking qss-legibility-override">The Auditor</span>
+            <div class="qss horizontal gap-1">
+                <div id="pp-auditor-status-dot" class="qss rounded-full bg-emerald-500 shadow-sm w-8 h-8"></div>
+            </div>
+        </div>
+        <div id="pp-widget-container" class="qss flex-1 scroll-auto">
+            <%= turbo_frame_tag "qss-widget-content", src: parapet.widget_path(type: @active_suite || 'base') do %>
+                <div class="qss p-2.5 text-slate-600 italic text-size[11] qss-legibility-override">
+                    Scanning layout...
+                </div>
+            <% end %>
+        </div>
+    </div>
+
+    <!-- Drag Resizer Handle -->
+    <div id="pp-explorer-resizer" class="qss bg-slate-800 hover:bg-indigo-500 opacity-30 hover:opacity-100 depth-overlay smooth contain-layout" style="position: absolute; right: 0; margin-left: calc(-4 * var(--qnt)); top: 0; width: calc(8 * var(--qnt)); height: 100%; cursor: col-resize;"></div>
+</div>

data/app/views/parapet/shared/_footer.html.erb

@@ -0,0 +1,10 @@
+<div id="pp-footer-inner" class="w-full h-full horizontal v-mid px-3 spaced contain-layout">
+  <div class="horizontal v-mid gap-1.5">
+    <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-sm"></div>
+    <span class="text-size[11] text-slate-500 font-bold uppercase tracking qss-legibility-override">Engine Active</span>
+  </div>
+  <div class="horizontal v-mid gap-3">
+    <span class="text-size[11] text-slate-600 font-mono qss-legibility-override">v0.5.2-hardened</span>
+    <span class="text-size[11] text-slate-600 font-mono qss-legibility-override">Latency: 12ms</span>
+  </div>
+</div>

data/app/views/parapet/shared/_footer_ideas.html.erb

@@ -0,0 +1,36 @@
+<%= turbo_frame_tag "qss-suite-footer", class: "qss-absolute qss-pos-x[0] qss-pos-y[0] qss-w-pct[1000] qss-h-pct[1000]" do %>
+  
+  <!-- Left Group: Git & File Info -->
+  <div id="qss-footer-code-branch" class="qss-absolute qss-pos-x[16] qss-pos-y[6] qss-opacity-80" title="Current git branch">
+    <i class="lucide-git-branch qss-w-3 qss-h-3 qss-absolute qss-pos-x[0] qss-pos-y[0]"></i>
+    <span class="qss-font-mono qss-text-[10px] qss-absolute qss-pos-x[16] qss-pos-y[0]">main</span>
+  </div>
+
+  <div id="qss-footer-code-file" class="qss-absolute qss-pos-x[80] qss-pos-y[6] qss-opacity-60" title="Active file context">
+    <i class="lucide-file-code qss-w-3 qss-h-3 qss-absolute qss-pos-x[0] qss-pos-y[0]"></i>
+    <span class="qss-font-mono qss-text-[9px] qss-absolute qss-pos-x[18] qss-pos-y[0]">No file open</span>
+  </div>
+
+  <!-- Center Group: Save Status -->
+  <div id="qss-footer-code-save" class="qss-absolute qss-pos-x[calc(50%-40px)] qss-pos-y[6] qss-opacity-50 qss-font-mono" title="Last save action">
+    <i class="lucide-save qss-w-3 qss-h-3 qss-absolute qss-pos-x[0] qss-pos-y[0]"></i>
+    <span class="qss-text-[9px] qss-absolute qss-pos-x[18] qss-pos-y[0]">—</span>
+  </div>
+
+  <!-- Right Group: Bench & Status -->
+  <div id="qss-footer-code-bench" class="qss-absolute qss-pos-r[140] qss-pos-y[6] qss-opacity-60" title="Benched code changes: unsaved Parapet-managed edits not yet flushed to source">
+    <i class="lucide-layers qss-w-3 qss-h-3 qss-absolute qss-pos-x[0] qss-pos-y[0]"></i>
+    <span class="qss-uppercase qss-tracking-widest qss-font-mono qss-text-[9px] qss-absolute qss-pos-x[18] qss-pos-y[0]">Bench: 0</span>
+  </div>
+
+  <div id="qss-footer-code-cable" class="qss-absolute qss-pos-r[80] qss-pos-y[6] qss-opacity-80" title="ActionCable connected">
+    <span class="qss-uppercase qss-tracking-widest qss-text-[9px] qss-absolute qss-pos-x[0] qss-pos-y[0]">Cable</span>
+    <div class="qss-w-[5px] qss-h-[5px] qss-rounded-full qss-bg-emerald-400 qss-shadow-[0_0_8px_#34d399] qss-absolute qss-pos-x[35] qss-pos-y[3]"></div>
+  </div>
+
+  <div id="qss-footer-code-ready" class="qss-absolute qss-pos-r[16] qss-pos-y[6]" title="Parapet Ready">
+    <div class="qss-w-[5px] qss-h-[5px] qss-rounded-full qss-bg-emerald-400 qss-shadow-[0_0_8px_#34d399] qss-absolute qss-pos-x[0] qss-pos-y[3]"></div>
+    <span class="qss-uppercase qss-tracking-widest qss-text-[9px] qss-absolute qss-pos-x[10] qss-pos-y[0]">Ready</span>
+  </div>
+
+<% end %>

data/app/views/parapet/shared/_footer_languages.html.erb

@@ -0,0 +1,33 @@
+<!-- Footer: Polyglot Suite -->
+<%= turbo_frame_tag "qss-suite-footer", class: "qss-w-full qss-flex qss-items-center qss-justify-between qss-px-2" do %>
+  <div class="qss-flex qss-items-center qss-gap-4">
+    <div class="qss-flex qss-items-center qss-gap-1 qss-opacity-80" title="Current git branch">
+      <i class="lucide-git-branch qss-w-3 qss-h-3"></i>
+      <span class="qss-font-mono">main</span>
+    </div>
+    <div class="qss-flex qss-items-center qss-gap-1.5 qss-opacity-80" title="Active reference locale">
+      <i class="lucide-globe qss-w-3 qss-h-3"></i>
+      <span class="qss-font-mono qss-uppercase qss-tracking-widest">en-US</span>
+    </div>
+    <div class="qss-flex qss-items-center qss-gap-1.5 qss-opacity-60" title="Total configured locales">
+      <i class="lucide-languages qss-w-3 qss-h-3"></i>
+      <span class="qss-uppercase qss-tracking-widest">1 Locale</span>
+    </div>
+  </div>
+
+  <div class="qss-flex qss-items-center qss-gap-3 qss-font-mono" title="Missing translation keys detected">
+    <i class="lucide-key qss-w-3 qss-h-3 qss-opacity-60"></i>
+    <span class="qss-opacity-60">0 missing keys</span>
+  </div>
+
+  <div class="qss-flex qss-items-center qss-gap-4">
+    <div class="qss-flex qss-items-center qss-gap-1.5 qss-opacity-80" title="ActionCable: connected&#10;Last ping: just now">
+      <span class="qss-uppercase qss-tracking-widest">Cable</span>
+      <div class="qss-w-[5px] qss-h-[5px] qss-rounded-full qss-bg-emerald-400 qss-shadow-[0_0_8px_#34d399]"></div>
+    </div>
+    <div class="qss-flex qss-items-center qss-gap-1.5" title="Parapet: ready&#10;ActionCable: connected&#10;Last ping: just now">
+      <div class="qss-w-[5px] qss-h-[5px] qss-rounded-full qss-bg-emerald-400 qss-shadow-[0_0_8px_#34d399]"></div>
+      <span class="qss-uppercase qss-tracking-widest">Ready</span>
+    </div>
+  </div>
+<% end %>