parapet-rails 0.1.0

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

@@ -0,0 +1,79 @@
+<div id="pp-debugger-header" class="qss pos-x[0] pos-y[0] w-full h[40] bg-brand-header border-b[1] border-slate-800 horizontal v-mid px[16] spaced">
+  <div class="qss anchored horizontal v-mid gap[8]">
+    <span class="qss text-slate-500 font[sans] text-size[12] uppercase tracking-wider">Project</span>
+    <span class="qss text-slate-700 font[sans] text-size[12]">/</span>
+    <span class="qss text-slate-400 font[sans] text-size[12]">src</span>
+    <span class="qss text-slate-700 font[sans] text-size[12]">/</span>
+    <span class="qss text-slate-200 font-medium font[sans] text-size[12]">debug_session.rb</span>
+  </div>
+  <div class="qss anchored horizontal v-mid gap[8]">
+    <div class="qss px[12] py[4] bg-emerald-600 rounded[4] text-white text-size[11] weight[600] clickable smooth">Resume</div>
+    <div class="qss px[12] py[4] bg-slate-700 rounded[4] text-slate-200 text-size[11] weight[600] clickable smooth">Step Over</div>
+    <div class="qss px[12] py[4] bg-rose-600 rounded[4] text-white text-size[11] weight[600] clickable smooth">Stop</div>
+  </div>
+</div>
+
+<div id="pp-debugger-console" class="qss pos-x[0] pos-b[0] w-full h[180] bg-black border-t[1] border-slate-800 vertical">
+  <div class="qss anchored w-full h[24] border-b[1] border-slate-800 px[12] horizontal v-mid spaced">
+    <span class="qss text-slate-500 text-size[11] weight[600] uppercase tracking-wider">Console</span>
+    <span class="qss text-slate-600 text-size[11] clickable hover:text-slate-400">Clear</span>
+  </div>
+  <div id="pp-console-output" class="qss anchored w-full flex-1 p[12] vertical gap[4] scroll[auto] foreign">
+    <div class="flex gap-2 font-mono text-[11px]">
+      <span class="text-slate-600">[12:04:01]</span>
+      <span class="text-slate-300">Starting debug session...</span>
+    </div>
+    <div class="flex gap-2 font-mono text-[11px]">
+      <span class="text-slate-600">[12:04:02]</span>
+      <span class="text-slate-300">Breakpoint hit at payment_service.rb:42</span>
+    </div>
+    <div class="flex gap-2 font-mono text-[11px]">
+      <span class="text-slate-600">[12:04:03]</span>
+      <span class="text-rose-400">Warning: amount exceeds threshold</span>
+    </div>
+  </div>
+</div>
+
+<div id="pp-callstack-pane" class="qss pos-x[0] pos-y[^pp-debugger-header] w[260] pos-b[^pp-debugger-console] bg-brand-main border-r[1] border-slate-800 vertical">
+  <div class="qss anchored w-full h[24] border-b[1] border-slate-800 bg-brand-header px[12] horizontal v-mid">
+    <span class="qss text-slate-500 font-semibold font[sans] text-size[11] uppercase tracking-widest">Call Stack</span>
+  </div>
+  <div class="qss anchored w-full flex-1 vertical scroll[auto]">
+    <div class="qss anchored w-full px[12] py[8] border-b[1] border-slate-900 hover:bg-slate-800 clickable">
+      <div class="qss text-slate-100 text-size[13] weight[500]">process_payment</div>
+      <div class="qss text-slate-500 text-size[11]">payment_service.rb:42</div>
+    </div>
+    <div class="qss anchored w-full px[12] py[8] border-b[1] border-slate-900 hover:bg-slate-800 clickable">
+      <div class="qss text-slate-100 text-size[13] weight[500]">execute_transaction</div>
+      <div class="qss text-slate-500 text-size[11]">transaction.rb:118</div>
+    </div>
+  </div>
+</div>
+
+<div id="pp-breakpoints-pane" class="qss pos-r[0] pos-y[^pp-debugger-header] w[280] pos-b[^pp-debugger-console] bg-brand-main border-l[1] border-slate-800 vertical">
+  <div class="qss anchored w-full h[24] border-b[1] border-slate-800 bg-brand-header px[12] horizontal v-mid">
+    <span class="qss text-slate-500 font-semibold font[sans] text-size[11] uppercase tracking-widest">Breakpoints</span>
+  </div>
+  <div class="qss anchored w-full flex-1 vertical scroll[auto]">
+    <div class="qss anchored w-full px[12] py[8] horizontal v-mid gap[8] border-b[1] border-slate-900">
+      <div class="qss w[12] h[12] bg-emerald-500 rounded[2]"></div>
+      <span class="qss text-slate-300 text-size[12] font-mono">payment_service.rb:42</span>
+    </div>
+  </div>
+</div>
+
+<div id="pp-variables-pane" class="qss pos-x[^pp-callstack-pane] pos-y[^pp-debugger-header] pos-r[^pp-breakpoints-pane] pos-b[^pp-debugger-console] bg-brand-main border-l[1] border-r[1] border-slate-800 vertical">
+  <div class="qss anchored w-full h[24] border-b[1] border-slate-800 bg-brand-header px[12] horizontal v-mid">
+    <span class="qss text-slate-500 font-semibold font[sans] text-size[11] uppercase tracking-widest">Variables</span>
+  </div>
+  <div class="qss anchored w-full flex-1 vertical scroll[auto]">
+    <div class="qss anchored w-full px[12] py[6] horizontal spaced border-b[1] border-slate-900 font-mono">
+      <span class="qss text-sky-400 text-size[12]">amount</span>
+      <span class="qss text-slate-300 text-size[12]">4200</span>
+    </div>
+    <div class="qss anchored w-full px[12] py[6] horizontal spaced border-b[1] border-slate-900 font-mono">
+      <span class="qss text-sky-400 text-size[12]">currency</span>
+      <span class="qss text-slate-300 text-size[12]">"USD"</span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,98 @@
+<div class="flex flex-col h-full w-full bg-slate-900 text-slate-200">
+  <header class="flex items-center justify-between px-4 py-2 border-b border-slate-700 bg-slate-800">
+    <nav class="flex items-center gap-2 text-sm">
+      <span class="text-slate-400">Project</span>
+      <span class="text-slate-600">/</span>
+      <span class="text-slate-400">src</span>
+      <span class="text-slate-600">/</span>
+      <span class="text-slate-400">controllers</span>
+      <span class="text-slate-600">/</span>
+      <span class="text-slate-100 font-medium">debug_session.rb</span>
+    </nav>
+    <div class="flex items-center gap-2">
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-emerald-600 hover:bg-emerald-500 text-white">
+        Resume
+      </button>
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-slate-700 hover:bg-slate-600 text-slate-200">
+        Step Over
+      </button>
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-red-600 hover:bg-red-500 text-white">
+        Stop
+      </button>
+    </div>
+  </header>
+
+  <div class="flex flex-1 min-h-0">
+    <section class="flex flex-col flex-1 min-w-0 border-r border-slate-700">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Call Stack
+      </h2>
+      <ul class="flex-1 overflow-y-auto divide-y divide-slate-800">
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">process_payment</p>
+          <p class="text-xs text-slate-500">payment_service.rb:42</p>
+        </li>
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">execute_transaction</p>
+          <p class="text-xs text-slate-500">transaction.rb:118</p>
+        </li>
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">call</p>
+          <p class="text-xs text-slate-500">application_controller.rb:9</p>
+        </li>
+      </ul>
+    </section>
+
+    <section class="flex flex-col flex-1 min-w-0 border-r border-slate-700">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Variables
+      </h2>
+      <ul class="flex-1 overflow-y-auto divide-y divide-slate-800 font-mono text-sm">
+        <li class="flex items-center justify-between px-3 py-2 hover:bg-slate-800">
+          <span class="text-sky-400">amount</span>
+          <span class="text-slate-300">4200</span>
+        </li>
+        <li class="flex items-center justify-between px-3 py-2 hover:bg-slate-800">
+          <span class="text-sky-400">currency</span>
+          <span class="text-slate-300">"USD"</span>
+        </li>
+        <li class="flex items-center justify-between px-3 py-2 hover:bg-slate-800">
+          <span class="text-sky-400">status</span>
+          <span class="text-amber-400">"pending"</span>
+        </li>
+      </ul>
+    </section>
+
+    <section class="flex flex-col flex-1 min-w-0">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Breakpoints
+      </h2>
+      <ul class="flex-1 overflow-y-auto divide-y divide-slate-800">
+        <li class="flex items-center gap-2 px-3 py-2 text-sm hover:bg-slate-800">
+          <input type="checkbox" checked class="rounded border-slate-600 bg-slate-700 text-emerald-500 focus:ring-0">
+          <span class="text-slate-300">payment_service.rb:42</span>
+        </li>
+        <li class="flex items-center gap-2 px-3 py-2 text-sm hover:bg-slate-800">
+          <input type="checkbox" checked class="rounded border-slate-600 bg-slate-700 text-emerald-500 focus:ring-0">
+          <span class="text-slate-300">transaction.rb:118</span>
+        </li>
+        <li class="flex items-center gap-2 px-3 py-2 text-sm hover:bg-slate-800">
+          <input type="checkbox" class="rounded border-slate-600 bg-slate-700 text-emerald-500 focus:ring-0">
+          <span class="text-slate-300">application_controller.rb:9</span>
+        </li>
+      </ul>
+    </section>
+  </div>
+
+  <footer class="flex flex-col h-48 border-t border-slate-700 bg-black">
+    <div class="flex items-center justify-between px-3 py-1 border-b border-slate-800">
+      <span class="text-xs font-semibold uppercase tracking-wide text-slate-400">Console</span>
+      <button type="button" class="text-xs text-slate-500 hover:text-slate-300">Clear</button>
+    </div>
+    <div class="flex-1 overflow-y-auto px-3 py-2 font-mono text-xs text-slate-300 space-y-1">
+      <p><span class="text-slate-600">[12:04:01]</span> Starting debug session...</p>
+      <p><span class="text-slate-600">[12:04:02]</span> Breakpoint hit at payment_service.rb:42</p>
+      <p><span class="text-red-400">[12:04:03]</span> Warning: amount exceeds threshold</p>
+    </div>
+  </footer>
+</div>

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

@@ -0,0 +1,5 @@
+<div id="pp-target" 
+     class="qss-canvas <%= 'dark' %>" 
+     style="contain: layout; --sidebar-w: 350px; background: #fff;">
+  <p>Static content</p>
+</div>

data/app/views/parapet/explorers/show.html.erb

@@ -0,0 +1 @@
+<%= render @partial_path %>

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

@@ -0,0 +1,62 @@
+<div id="pp-git-viewer" class="qss w-full h-full">
+
+  <!-- Left: Commit History Sidebar -->
+  <div id="pp-git-history-sidebar" class="qss detached pos-x[0] pos-y[0] w[300] pos-b[^pp-git-metadata] bg-brand-header border-r[1] border-slate-800 scroll[auto] vertical">
+    <div class="qss anchored w-full px[12] py[8] border-b[1] border-slate-800">
+      <h3 class="text-size[11] weight[700] uppercase tracking[wide] text-slate-400">Commit History</h3>
+    </div>
+    <div id="pp-git-commit-list" class="qss anchored w-full vertical scroll[auto]">
+      <div class="qss anchored w-full horizontal v-mid spaced px[12] py[8] border-b[1] border-slate-800 clickable">
+        <span class="text-size[12] font-mono text-slate-300">a1b2c3d</span>
+        <span class="foreign bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded-full text-size[11] [padding:2px_8px]">merged</span>
+      </div>
+      <div class="qss anchored w-full horizontal v-mid spaced px[12] py[8] border-b[1] border-slate-800 clickable">
+        <span class="text-size[12] font-mono text-slate-300">7f9e0d2</span>
+        <span class="foreign bg-amber-500/10 text-amber-400 border border-amber-500/20 rounded-full text-size[11] [padding:2px_8px]">pending</span>
+      </div>
+      <div class="qss anchored w-full horizontal v-mid spaced px[12] py[8] border-b[1] border-slate-800 clickable">
+        <span class="text-size[12] font-mono text-slate-300">4c8a1f6</span>
+        <span class="foreign bg-rose-500/10 text-rose-400 border border-rose-500/20 rounded-full text-size[11] [padding:2px_8px]">reverted</span>
+      </div>
+      <div class="qss anchored w-full horizontal v-mid spaced px[12] py[8] border-b[1] border-slate-800 clickable">
+        <span class="text-size[12] font-mono text-slate-300">e3d5b7a</span>
+        <span class="foreign bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded-full text-size[11] [padding:2px_8px]">merged</span>
+      </div>
+      <!-- Additional commit entries rendered here -->
+    </div>
+  </div>
+
+  <!-- Right: Diff Viewer (Old/New split-pane) -->
+  <div id="pp-git-diff-viewer" class="qss detached pos-x[^pp-git-history-sidebar] pos-y[0] pos-r[0] pos-b[^pp-git-metadata] horizontal">
+
+    <div id="pp-git-diff-old" class="qss anchored h-full flex-1 border-r[1] border-slate-800 bg-brand-main scroll[auto] vertical">
+      <div class="qss anchored w-full px[12] py[8] border-b[1] border-slate-800">
+        <span class="text-size[11] weight[700] uppercase tracking[wide] text-slate-500">Old</span>
+      </div>
+      <div id="pp-git-diff-old-content" class="qss anchored w-full foreign">
+        <!-- Old version diff content -->
+      </div>
+    </div>
+
+    <div id="pp-git-diff-new" class="qss anchored h-full flex-1 bg-brand-main scroll[auto] vertical">
+      <div class="qss anchored w-full px[12] py[8] border-b[1] border-slate-800">
+        <span class="text-size[11] weight[700] uppercase tracking[wide] text-slate-500">New</span>
+      </div>
+      <div id="pp-git-diff-new-content" class="qss anchored w-full foreign">
+        <!-- New version diff content -->
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Bottom: Metadata / Comment Pane -->
+  <div id="pp-git-metadata" class="qss detached pos-x[0] pos-b[0] w-full h[120] bg-brand-header border-t[1] border-slate-800 vertical">
+    <div class="qss anchored w-full px[12] py[8] border-b[1] border-slate-800">
+      <h3 class="text-size[11] weight[700] uppercase tracking[wide] text-slate-400">Metadata / Comment</h3>
+    </div>
+    <div id="pp-git-metadata-content" class="qss anchored w-full flex-1 px[12] py[8] scroll[auto]">
+      <p class="text-size[12] text-slate-400">Select a commit to view metadata and comments.</p>
+    </div>
+  </div>
+
+</div>

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

@@ -0,0 +1,14 @@
+<div id="pp-git-history-sidebar" class="qss pos-x[0] pos-y[0] w[300] pos-b[0] bg-brand-main border-r[1] border-slate-800 vertical">
+  <div class="qss anchored w-full h[24] border-b[1] border-slate-800 bg-brand-header px[12] horizontal v-mid">
+    <span class="qss text-slate-500 font-semibold text-size[11] uppercase tracking-widest">Commit History</span>
+  </div>
+  <div class="qss anchored w-full flex-1 vertical scroll[auto]">
+    <!-- Commit list items -->
+  </div>
+</div>
+
+<div id="pp-git-diff-viewer" class="qss pos-x[^pp-git-history-sidebar] pos-y[0] pos-r[0] pos-b[0] bg-brand-main vertical">
+  <div class="qss anchored w-full h[24] border-b[1] border-slate-800 bg-brand-header px[12] horizontal v-mid">
+    <span class="qss text-slate-500 font-semibold text-size[11] uppercase tracking-widest">Diff Viewer</span>
+  </div>
+</div>

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

@@ -0,0 +1,14 @@
+<div id="pp-git-history-sidebar" class="qss pos-x[0] pos-y[0] w[250] pos-b[0] bg-brand-main border-r[1] border-slate-800 vertical">
+  <div class="qss anchored w-full h[24] border-b[1] border-slate-800 bg-brand-header px[12] horizontal v-mid">
+    <span class="qss text-slate-500 font-semibold text-size[11] uppercase tracking-widest">Commit History</span>
+  </div>
+  <div class="qss anchored w-full flex-1 vertical scroll[auto]">
+    <!-- Commit list items -->
+  </div>
+</div>
+
+<div id="pp-git-diff-viewer" class="qss pos-x[^pp-git-history-sidebar] pos-y[0] pos-r[0] pos-b[0] bg-brand-main vertical">
+  <div class="qss anchored w-full h[24] border-b[1] border-slate-800 bg-brand-header px[12] horizontal v-mid">
+    <span class="qss text-slate-500 font-semibold text-size[11] uppercase tracking-widest">Diff Viewer</span>
+  </div>
+</div>

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

@@ -0,0 +1,88 @@
+<div class="flex flex-col h-full w-full bg-slate-900 text-slate-200">
+  <header class="flex items-center justify-between px-4 py-2 border-b border-slate-700 bg-slate-800">
+    <nav class="flex items-center gap-2 text-sm">
+      <span class="text-slate-400">Repository</span>
+      <span class="text-slate-600">/</span>
+      <span class="text-slate-100 font-medium">main</span>
+    </nav>
+    <div class="flex items-center gap-2">
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-emerald-600 hover:bg-emerald-500 text-white">
+        Pull
+      </button>
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-slate-700 hover:bg-slate-600 text-slate-200">
+        Fetch
+      </button>
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-red-600 hover:bg-red-500 text-white">
+        Discard
+      </button>
+    </div>
+  </header>
+
+  <div class="flex flex-1 min-h-0">
+    <aside class="flex flex-col w-80 shrink-0 border-r border-slate-700">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Commit History
+      </h2>
+      <ul class="flex-1 overflow-y-auto divide-y divide-slate-800">
+        <li class="px-3 py-2 text-sm bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Add diff viewer layout</p>
+          <p class="text-xs text-slate-500">a1b2c3d &middot; 2 hours ago</p>
+        </li>
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Refactor commit sidebar</p>
+          <p class="text-xs text-slate-500">e4f5g6h &middot; 1 day ago</p>
+        </li>
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Fix metadata pane overflow</p>
+          <p class="text-xs text-slate-500">i7j8k9l &middot; 2 days ago</p>
+        </li>
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Initial commit</p>
+          <p class="text-xs text-slate-500">m0n1o2p &middot; 5 days ago</p>
+        </li>
+      </ul>
+    </aside>
+
+    <section class="flex flex-col flex-1 min-w-0">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Diff Viewer
+      </h2>
+      <div class="flex flex-1 min-h-0">
+        <div class="flex flex-col flex-1 min-w-0 border-r border-slate-700">
+          <div class="px-3 py-1 text-xs font-medium text-slate-400 border-b border-slate-800 bg-slate-800/50">
+            Old
+          </div>
+          <pre class="flex-1 overflow-auto px-3 py-2 font-mono text-xs text-slate-400 whitespace-pre"><code><span class="block px-2 bg-red-950 text-red-300">- def calculate_total(items)</span>
+<span class="block px-2 bg-red-950 text-red-300">-   items.sum(&:price)</span>
+<span class="block px-2">  end</span></code></pre>
+        </div>
+        <div class="flex flex-col flex-1 min-w-0">
+          <div class="px-3 py-1 text-xs font-medium text-slate-400 border-b border-slate-800 bg-slate-800/50">
+            New
+          </div>
+          <pre class="flex-1 overflow-auto px-3 py-2 font-mono text-xs text-slate-400 whitespace-pre"><code><span class="block px-2 bg-emerald-950 text-emerald-300">+ def calculate_total(items, tax_rate: 0.0)</span>
+<span class="block px-2 bg-emerald-950 text-emerald-300">+   items.sum(&:price) * (1 + tax_rate)</span>
+<span class="block px-2">  end</span></code></pre>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <footer class="flex flex-col h-48 border-t border-slate-700 bg-black">
+    <div class="flex items-center justify-between px-3 py-1 border-b border-slate-800">
+      <span class="text-xs font-semibold uppercase tracking-wide text-slate-400">Metadata / Comment</span>
+      <button type="button" class="text-xs text-slate-500 hover:text-slate-300">Copy SHA</button>
+    </div>
+    <div class="flex-1 overflow-y-auto px-3 py-2 grid grid-cols-2 gap-4 text-xs">
+      <div class="space-y-1">
+        <p><span class="text-slate-500">Author:</span> <span class="text-slate-300">Jane Doe &lt;jane@example.com&gt;</span></p>
+        <p><span class="text-slate-500">Date:</span> <span class="text-slate-300">2026-08-27 14:32:00</span></p>
+        <p><span class="text-slate-500">SHA:</span> <span class="text-slate-300 font-mono">a1b2c3d4e5f6</span></p>
+      </div>
+      <div class="space-y-1">
+        <p class="text-slate-500">Comment</p>
+        <p class="text-slate-300">Adds support for tax rate calculation in the diff viewer totals module.</p>
+      </div>
+    </div>
+  </footer>
+</div>

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

@@ -0,0 +1,36 @@
+<div class="flex flex-col h-full w-full bg-slate-900 text-slate-200">
+  <header class="flex items-center justify-between px-4 py-2 border-b border-slate-700 bg-slate-800">
+    <nav class="flex items-center gap-2 text-sm">
+      <span class="text-slate-400">Repository</span>
+      <span class="text-slate-600">/</span>
+      <span class="text-slate-100 font-medium">main</span>
+    </nav>
+  </header>
+
+  <div class="flex flex-1 min-h-0">
+    <!-- Left: Commit History Sidebar (AFTER RESIZE: w-[300px]) -->
+    <aside class="flex flex-col w-[300px] shrink-0 border-r border-slate-700">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Commit History
+      </h2>
+      <ul class="flex-1 overflow-y-auto divide-y divide-slate-800">
+        <li class="px-3 py-2 text-sm bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Add diff viewer layout</p>
+          <p class="text-xs text-slate-500">a1b2c3d &middot; 2 hours ago</p>
+        </li>
+      </ul>
+    </aside>
+
+    <section class="flex flex-col flex-1 min-w-0">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Diff Viewer
+      </h2>
+    </section>
+  </div>
+
+  <footer class="flex flex-col h-48 border-t border-slate-700 bg-black">
+    <div class="flex items-center justify-between px-3 py-1 border-b border-slate-800">
+      <span class="text-xs font-semibold uppercase tracking-wide text-slate-400">Metadata / Comment</span>
+    </div>
+  </footer>
+</div>

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

@@ -0,0 +1,36 @@
+<div class="flex flex-col h-full w-full bg-slate-900 text-slate-200">
+  <header class="flex items-center justify-between px-4 py-2 border-b border-slate-700 bg-slate-800">
+    <nav class="flex items-center gap-2 text-sm">
+      <span class="text-slate-400">Repository</span>
+      <span class="text-slate-600">/</span>
+      <span class="text-slate-100 font-medium">main</span>
+    </nav>
+  </header>
+
+  <div class="flex flex-1 min-h-0">
+    <!-- Left: Commit History Sidebar (BEFORE RESIZE: w-64) -->
+    <aside class="flex flex-col w-64 shrink-0 border-r border-slate-700">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Commit History
+      </h2>
+      <ul class="flex-1 overflow-y-auto divide-y divide-slate-800">
+        <li class="px-3 py-2 text-sm bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Add diff viewer layout</p>
+          <p class="text-xs text-slate-500">a1b2c3d &middot; 2 hours ago</p>
+        </li>
+      </ul>
+    </aside>
+
+    <section class="flex flex-col flex-1 min-w-0">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Diff Viewer
+      </h2>
+    </section>
+  </div>
+
+  <footer class="flex flex-col h-48 border-t border-slate-700 bg-black">
+    <div class="flex items-center justify-between px-3 py-1 border-b border-slate-800">
+      <span class="text-xs font-semibold uppercase tracking-wide text-slate-400">Metadata / Comment</span>
+    </div>
+  </footer>
+</div>

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

@@ -0,0 +1,88 @@
+<div class="flex flex-col h-full w-full bg-slate-900 text-slate-200">
+  <header class="flex items-center justify-between px-4 py-2 border-b border-slate-700 bg-slate-800">
+    <nav class="flex items-center gap-2 text-sm">
+      <span class="text-slate-400">Repository</span>
+      <span class="text-slate-600">/</span>
+      <span class="text-slate-100 font-medium">main</span>
+    </nav>
+    <div class="flex items-center gap-2">
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-emerald-600 hover:bg-emerald-500 text-white">
+        Pull
+      </button>
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-slate-700 hover:bg-slate-600 text-slate-200">
+        Fetch
+      </button>
+      <button type="button" class="px-3 py-1 text-xs font-medium rounded bg-red-600 hover:bg-red-500 text-white">
+        Discard
+      </button>
+    </div>
+  </header>
+
+  <div class="flex flex-1 min-h-0">
+    <aside class="flex flex-col w-64 shrink-0 border-r border-slate-700">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Commit History
+      </h2>
+      <ul class="flex-1 overflow-y-auto divide-y divide-slate-800">
+        <li class="px-3 py-2 text-sm bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Add diff viewer layout</p>
+          <p class="text-xs text-slate-500">a1b2c3d &middot; 2 hours ago</p>
+        </li>
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Refactor commit sidebar</p>
+          <p class="text-xs text-slate-500">e4f5g6h &middot; 1 day ago</p>
+        </li>
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Fix metadata pane overflow</p>
+          <p class="text-xs text-slate-500">i7j8k9l &middot; 2 days ago</p>
+        </li>
+        <li class="px-3 py-2 text-sm hover:bg-slate-800 cursor-pointer">
+          <p class="font-medium text-slate-100">Initial commit</p>
+          <p class="text-xs text-slate-500">m0n1o2p &middot; 5 days ago</p>
+        </li>
+      </ul>
+    </aside>
+
+    <section class="flex flex-col flex-1 min-w-0">
+      <h2 class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700 bg-slate-800">
+        Diff Viewer
+      </h2>
+      <div class="flex flex-1 min-h-0">
+        <div class="flex flex-col flex-1 min-w-0 border-r border-slate-700">
+          <div class="px-3 py-1 text-xs font-medium text-slate-400 border-b border-slate-800 bg-slate-800/50">
+            Old
+          </div>
+          <pre class="flex-1 overflow-auto px-3 py-2 font-mono text-xs text-slate-400 whitespace-pre"><code><span class="block px-2 bg-red-950 text-red-300">- def calculate_total(items)</span>
+<span class="block px-2 bg-red-950 text-red-300">-   items.sum(&:price)</span>
+<span class="block px-2">  end</span></code></pre>
+        </div>
+        <div class="flex flex-col flex-1 min-w-0">
+          <div class="px-3 py-1 text-xs font-medium text-slate-400 border-b border-slate-800 bg-slate-800/50">
+            New
+          </div>
+          <pre class="flex-1 overflow-auto px-3 py-2 font-mono text-xs text-slate-400 whitespace-pre"><code><span class="block px-2 bg-emerald-950 text-emerald-300">+ def calculate_total(items, tax_rate: 0.0)</span>
+<span class="block px-2 bg-emerald-950 text-emerald-300">+   items.sum(&:price) * (1 + tax_rate)</span>
+<span class="block px-2">  end</span></code></pre>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <footer class="flex flex-col h-48 border-t border-slate-700 bg-black">
+    <div class="flex items-center justify-between px-3 py-1 border-b border-slate-800">
+      <span class="text-xs font-semibold uppercase tracking-wide text-slate-400">Metadata / Comment</span>
+      <button type="button" class="text-xs text-slate-500 hover:text-slate-300">Copy SHA</button>
+    </div>
+    <div class="flex-1 overflow-y-auto px-3 py-2 grid grid-cols-2 gap-4 text-xs">
+      <div class="space-y-1">
+        <p><span class="text-slate-500">Author:</span> <span class="text-slate-300">Jane Doe &lt;jane@example.com&gt;</span></p>
+        <p><span class="text-slate-500">Date:</span> <span class="text-slate-300">2026-08-27 14:32:00</span></p>
+        <p><span class="text-slate-500">SHA:</span> <span class="text-slate-300 font-mono">a1b2c3d4e5f6</span></p>
+      </div>
+      <div class="space-y-1">
+        <p class="text-slate-500">Comment</p>
+        <p class="text-slate-300">Adds support for tax rate calculation in the diff viewer totals module.</p>
+      </div>
+    </div>
+  </footer>
+</div>

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

@@ -0,0 +1,85 @@
+<div id="pp-git-viewer-wrapper" class="relative w-full h-full bg-slate-900 text-slate-200 overflow-hidden" style="contain: layout; --footer-height: 120px;">
+
+  <!-- Left: Commit History Sidebar -->
+  <aside id="pp-git-history-sidebar" 
+         class="absolute left-0 top-0 w-[400px] border-r border-slate-800 bg-slate-900 overflow-y-auto flex flex-col"
+         style="contain: layout; bottom: var(--footer-height);">
+    
+    <div class="flex-none w-full px-3 py-2 border-b border-slate-800">
+      <h3 class="text-[11px] font-bold uppercase tracking-wide text-slate-400">Commit History</h3>
+    </div>
+    
+    <div id="pp-git-commit-list" class="flex-1 w-full overflow-y-auto flex flex-col">
+      <!-- Item Instance -->
+      <div class="flex-none w-full flex items-center justify-between px-3 py-2 border-b border-slate-800 hover:bg-slate-800 cursor-pointer">
+        <span class="text-[12px] font-mono text-slate-300">a1b2c3d</span>
+        <span class="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 rounded-full text-[10px] px-2 py-0.5">merged</span>
+      </div>
+      <div class="flex-none w-full flex items-center justify-between px-3 py-2 border-b border-slate-800 hover:bg-slate-800 cursor-pointer">
+        <span class="text-[12px] font-mono text-slate-300">7f9e0d2</span>
+        <span class="bg-amber-500/10 text-amber-400 border border-amber-500/20 rounded-full text-[10px] px-2 py-0.5">pending</span>
+      </div>
+      <div class="flex-none w-full flex items-center justify-between px-3 py-2 border-b border-slate-800 hover:bg-slate-800 cursor-pointer">
+        <span class="text-[12px] font-mono text-slate-300">4c8a1f6</span>
+        <span class="bg-rose-500/10 text-rose-400 border border-rose-500/20 rounded-full text-[10px] px-2 py-0.5">reverted</span>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Right: Diff Viewer (Anchored to Sidebar) -->
+  <main id="pp-git-diff-viewer" 
+        class="absolute right-0 top-0 flex"
+        style="contain: layout; left: var(--sidebar-width); bottom: var(--footer-height);">
+
+    <div id="pp-git-diff-old" class="flex-1 h-full border-r border-slate-800 bg-slate-900 overflow-y-auto flex flex-col">
+      <div class="flex-none w-full px-3 py-2 border-b border-slate-800">
+        <span class="text-[11px] font-bold uppercase tracking-wide text-slate-500">Old</span>
+      </div>
+      <div id="pp-git-diff-old-content" class="flex-1 w-full">
+        <!-- Old content -->
+      </div>
+    </div>
+
+    <div id="pp-git-diff-new" class="flex-1 h-full bg-slate-900 overflow-y-auto flex flex-col">
+      <div class="flex-none w-full px-3 py-2 border-b border-slate-800">
+        <span class="text-[11px] font-bold uppercase tracking-wide text-slate-500">New</span>
+      </div>
+      <div id="pp-git-diff-new-content" class="flex-1 w-full">
+        <!-- New content -->
+      </div>
+    </div>
+  </main>
+
+  <!-- Bottom: Metadata (Anchored to Footer Variable) -->
+  <footer id="pp-git-metadata" 
+          class="absolute left-0 right-0 bottom-0 bg-slate-900 border-t border-slate-800 flex flex-col"
+          style="contain: layout; height: var(--footer-height);">
+    <div class="flex-none w-full px-3 py-2 border-b border-slate-800">
+      <h3 class="text-[11px] font-bold uppercase tracking-wide text-slate-400">Metadata / Comment</h3>
+    </div>
+    <div id="pp-git-metadata-content" class="flex-1 w-full px-3 py-2 overflow-y-auto">
+      <p class="text-[12px] text-slate-400">Select a commit to view metadata and comments.</p>
+    </div>
+  </footer>
+
+  <script>
+    // "Thin Pulse" - Minimal reactive anchoring (Native logic, no JIT)
+    (function() {
+      const wrapper = document.currentScript.parentElement;
+      const sidebar = wrapper.querySelector('#pp-git-history-sidebar');
+      
+      const updateAnchors = () => {
+        if (!sidebar) return;
+        const rect = sidebar.getBoundingClientRect();
+        wrapper.style.setProperty('--sidebar-width', `${rect.width}px`);
+      };
+
+      if (sidebar) {
+        new MutationObserver(updateAnchors).observe(sidebar, { attributes: true, childList: true, subtree: true });
+        window.addEventListener('resize', updateAnchors);
+        requestAnimationFrame(updateAnchors);
+      }
+    })();
+  </script>
+
+</div>