From 69e575ca59fdf7d8c8c41bb6abd751a230f48152 Mon Sep 17 00:00:00 2001
From: Svrnty <info@svrnty.io>
Date: Sun, 24 May 2026 13:05:38 -0400
Subject: [PATCH] fix(plugin): hide native main-views when our panel active;
 BTE in-main not full-viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

JP reported (Chrome) after b43e649:
- Sidebar buttons render ✓
- Adwright: useless middle black panel between sidebar and right area
- BTE: entire left sidebar disappears, only close-X recovers it

ROOT CAUSES:
1. webui CSS has `main.main:not(.showing-X):not(.showing-Y)... > #mainChat
   { display:flex }` which still matches when our class is svrnty-showing-*
   (not in webui's whitelist). Chat rendered alongside our panel → the
   empty void = "middle black panel".
2. BTE overlay was `position:fixed; inset:0; z-index:9991` — covered the
   whole viewport including sidebar + topbar.

FIXES:
- Adwright + BTE CSS now `main.main.svrnty-showing-<id> > .main-view
  { display:none !important }` — explicitly hides every native main-view
  (mainChat, mainSkills, mainTasks, ...) when our panel is active.
- BTE.css: overlay no longer position:fixed. Becomes a normal flex child
  of main when svrnty-showing-bte is active. Sidebar + topbar stay visible.
- bte.js: _openOverlay now appends to <main class="main"> instead of
  document.body. Migrates existing body-mounted overlay on first open.

Karpathy 4 rules: root-caused via direct CSS inspection (not guessing),
two-line CSS change per panel, no new abstractions.
---
 static/adwright.css | 17 ++++++++++-------
 static/bte.css      | 31 ++++++++++++++++++++++++-------
 static/bte.js       |  9 ++++++++-
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/static/adwright.css b/static/adwright.css
index a74e16b..05c3f3d 100644
--- a/static/adwright.css
+++ b/static/adwright.css
@@ -5,10 +5,18 @@
    ============================================================================ */
 
 /* ── Visibility — hidden unless sidebar button activates us ──────────────── */
-/* The panel is mounted inside <main> but only shows when svrnty_nav.js sets
-   main.svrnty-showing-adwright (sidebar button click). Default: hidden. */
+/* Panel mounted inside <main>; shown only when svrnty_nav.js sets
+   main.svrnty-showing-adwright (sidebar button click). Default: hidden.
+   We must !important-hide native .main-view siblings because webui's CSS
+   has a default rule `main.main:not(.showing-X)... > #mainChat { display:flex }`
+   that still matches our svrnty-* class — chat would otherwise render next
+   to us as a useless empty void. */
 .svrnty-aw-panel { display: none; }
 
+main.main.svrnty-showing-adwright > .main-view {
+  display: none !important;
+}
+
 main.main.svrnty-showing-adwright > .svrnty-aw-panel {
   display: flex;
   flex-direction: column;
@@ -22,11 +30,6 @@ main.main.svrnty-showing-adwright > .svrnty-aw-panel {
   overflow: hidden;
 }
 
-/* When our panel is showing, hide every sibling in <main> (chat, etc). */
-main.main.svrnty-showing-adwright > *:not(.svrnty-aw-panel) {
-  display: none !important;
-}
-
 /* ── Header ─────────────────────────────────────────────────────────────── */
 .svrnty-aw-header {
   display: flex;
diff --git a/static/bte.css b/static/bte.css
index 33344b8..fa2d104 100644
--- a/static/bte.css
+++ b/static/bte.css
@@ -17,18 +17,35 @@
 /* ── Launcher removed — sidebar nav (svrnty_nav.js) opens BTE now ──────── */
 .svrnty-bte-launcher { display: none !important; }
 
-/* ── Full-screen overlay panel ────────────────────────────────────────────── */
-.svrnty-bte-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9991;
-  background: var(--bg);
+/* ── Panel mounted inside <main>; sidebar stays visible ────────────────── */
+/* Default hidden. Shown only when sidebar button activates us.
+   !important hides native .main-view siblings so chat doesn't render
+   alongside (same trick as Adwright panel — webui's default mainChat rule
+   matches even when our svrnty-* class is set). */
+.svrnty-bte-overlay { display: none; }
+
+main.main.svrnty-showing-bte > .main-view {
+  display: none !important;
+}
+
+main.main.svrnty-showing-bte > .svrnty-bte-overlay {
   display: grid;
+  position: static;          /* override prior position:fixed */
+  inset: auto;               /* override prior inset:0 */
+  z-index: auto;
+  flex: 1 1 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: var(--bg);
   grid-template-rows: auto 1fr;
   font-family: var(--font-ui, sans-serif);
   color: var(--text);
+  overflow: hidden;
 }
-.svrnty-bte-overlay[hidden] { display: none; }
+
+/* hidden attribute still works for programmatic close */
+.svrnty-bte-overlay[hidden] { display: none !important; }
 
 /* ── Top toolbar ──────────────────────────────────────────────────────────── */
 .svrnty-bte-toolbar {
diff --git a/static/bte.js b/static/bte.js
index 0aa2620..e446ebb 100644
--- a/static/bte.js
+++ b/static/bte.js
@@ -76,11 +76,18 @@
   }
 
   // ── Overlay lifecycle ────────────────────────────────────────────────────
+  // Mount inside <main> so the left sidebar stays visible. CSS
+  // (.svrnty-bte-overlay rules in bte.css) handles show/hide via
+  // main.svrnty-showing-bte class set by svrnty_nav.js wrapper.
   function _openOverlay() {
     let overlay = document.getElementById("svrntyBteOverlay");
+    const mountTarget = document.querySelector("main.main") || document.body;
     if (!overlay) {
       overlay = _buildOverlay();
-      document.body.appendChild(overlay);
+      mountTarget.appendChild(overlay);
+    } else if (overlay.parentElement !== mountTarget && mountTarget.tagName === "MAIN") {
+      // Migrate from body to main (handles older sessions that mounted on body).
+      mountTarget.appendChild(overlay);
     }
     overlay.hidden = false;
     _refreshGrid();