Compute Backend in Advanced + kill empty space in browser app

Browser runtime:
- MutationObserver inside the iframe re-tags anything added by later
foldkit renders, so Compute Backend (Auto/WebGPU/WASM) and any
advanced section reliably gets .studio-adv-section and stays hidden
until the Advanced toggle is opened.
- Inject the Advanced toggle button with a fallback re-injector on DOM
mutation, so the toggle survives SPA re-renders.
- Explicit CSS hide of .grid.grid-cols-3.studio-adv-section as a hard
fallback for the compute backend grid.
- Kill the empty space at the bottom of the compose column:
.embedded-compose / .embedded-sidebar use align-self:start + flex:0 0
auto so they don't stretch; the empty border-t pt-6 wrapper and the
flex.w-full download bar (when empty) are hidden; embedded-grid items
align at start.

Co-Authored-By: Claude <noreply@anthropic.com>

index.html

@@ -564,14 +564,15 @@ $("seed").addEventListener("input",(e)=>{ $("seed-val").textContent=e.target.val
     /* ---- injected "Advanced" disclosure for the runtime ---- */
     /* advanced sections hidden by default; revealed by body.studio-adv-open */
     .voice-controls, .playback-setting, .session-status, .embedded-logs { display:none !important }
-    /* compute-backend section has no stable class; hide via its section-label text below */
+    /* Compute Backend (no stable class) is tagged .studio-adv-section by JS; also hide the Auto/WebGPU/WASM grid by sibling match */
+    .grid.grid-cols-3.studio-adv-section{display:none !important}
+    /* show on open */
     body.studio-adv-open .voice-controls,
     body.studio-adv-open .playback-setting,
     body.studio-adv-open .session-status,
-    body.studio-adv-open .embedded-logs { display:flex !important }
-    body.studio-adv-open .studio-hide-bylabel,
-    body.studio-adv-open .studio-adv-section { display:flex !important }
-    .studio-adv-section{display:none !important}
+    body.studio-adv-open .embedded-logs,
+    body.studio-adv-open .studio-adv-section,
+    body.studio-adv-open .grid.grid-cols-3.studio-adv-section { display:flex !important }
 
     .studio-adv-toggle{
       appearance:none;border:1px solid #2a2c2e;background:#1c1e20;color:#f5f5f7;
@@ -596,9 +597,21 @@ $("seed").addEventListener("input",(e)=>{ $("seed-val").textContent=e.target.val
     .model-option .h-2.w-2{height:7px !important;width:7px !important}
 
     /* ---- reduce extra blank space in the embedded runtime ---- */
+    /* stop the compose/sidebar from stretching to fill the embed height */
+    .embedded-compose, .embedded-sidebar { align-self:start !important; flex:0 0 auto !important }
+    .embedded-panel{align-items:start !important}
+    .embedded-grid{align-items:start !important;gap:0 !important}
     .embedded-compose{gap:14px !important;padding:18px !important}
     .embedded-sidebar{padding:18px !important;gap:14px !important}
-    .embedded-grid{gap:0 !important}
+    /* kill the empty playback-area block at the bottom of compose (border-t pt-6 wrapper with nothing inside) */
+    .embedded-compose>div.border-t.border-slate-200.pt-6:empty,
+    .embedded-compose>div.border-t.border-slate-200.pt-6:not(:has(*)),
+    .embedded-compose>.flex.w-full:empty,
+    .embedded-compose>.flex.w-full:not(:has(*)) { display:none !important }
+    /* also kill the wrapper if it contains only an invisible download link */
+    .embedded-compose>.flex.w-full:not(:has(a:not(.hidden)):not(button)){display:none !important}
+    /* collapse the big empty area under the button */
+    .embedded-compose>div:last-child:not(.flex):empty{display:none !important}
     .section-label{font-size:11px !important;letter-spacing:.1em !important;text-transform:uppercase;color:#86868b !important}
     .embedded-compose>div:first-child>h2,
     .embedded-compose .text-lg{font-size:15px !important;margin-top:2px !important}
@@ -629,21 +642,41 @@ $("seed").addEventListener("input",(e)=>{ $("seed-val").textContent=e.target.val
   };
   /* Move the runtime's advanced sections under an injected disclosure,
      leaving only Write / Model / Generate visible by default. Pure CSS
-     toggle (no node-moving) so it survives the runtime's re-renders. */
+     toggle (no node-moving) so it survives the runtime's re-renders.
+     A MutationObserver re-tags anything added later (foldkit renders
+     sections progressively). */
   const ADVANCED_LABELS = new Set(["Compute backend","Runtime","Playback mode","Voice controls","Logs","Activity","Details"]);
-  const groupAdvanced = (doc) => {
+  const tagAdvanced = (doc) => {
     const root = doc.getElementById("root");
     if (!root) return;
-    // mark the compute-backend section (no stable class) by its label text
+    // tag any section-label whose text is in the advanced set; walk up to the
+    // nearest flex/block wrapper so the whole section hides together.
     doc.querySelectorAll(".section-label").forEach((lab) => {
       const t = (lab.textContent || "").trim();
-      if (!t) return;
-      if (ADVANCED_LABELS.has(t)) {
-        let node = lab.parentElement;
-        if (node && !node.classList.contains("studio-adv-section")) node.classList.add("studio-adv-section");
+      if (!t || !ADVANCED_LABELS.has(t)) return;
+      // the label's parent is the section wrapper; climb one more level to
+      // capture the outer block (some labels sit inside an inner heading div)
+      let node = lab.parentElement;
+      if (node) {
+        // mark the immediate parent + any flex/gap wrapper above it
+        node.classList.add("studio-adv-section");
+        if (node.parentElement && /flex|grid/.test(node.parentElement.className)) {
+          node.parentElement.classList.add("studio-adv-section");
+        }
+      }
+    });
+    // also tag the Auto/WebGPU/WASM grid directly as a safety net
+    doc.querySelectorAll(".grid.grid-cols-3").forEach((g) => {
+      const prev = g.previousElementSibling;
+      if (prev && (prev.textContent || "").trim() === "Compute backend") {
+        g.classList.add("studio-adv-section");
+        // and its container
+        const wrap = g.closest(".flex.flex-col");
+        if (wrap) wrap.classList.add("studio-adv-section");
       }
     });
-    // inject the Advanced toggle once
+  };
+  const ensureToggle = (doc) => {
     if (doc.getElementById("studio-adv-toggle")) return;
     const sidebar = doc.querySelector(".embedded-sidebar") || doc.querySelector(".embedded-compose");
     if (!sidebar) return;
@@ -655,14 +688,56 @@ $("seed").addEventListener("input",(e)=>{ $("seed-val").textContent=e.target.val
     btn.addEventListener("click", () => {
       const open = doc.body.classList.toggle("studio-adv-open");
       btn.setAttribute("aria-expanded", String(open));
-      // tell the parent to re-measure the iframe height after the layout changes
       try { frame.contentWindow.postMessage({ type: "inflect-web-resize", height: Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight) }, window.location.origin); } catch (_) {}
     });
     sidebar.appendChild(btn);
   };
+  const groupAdvanced = (doc) => {
+    const root = doc.getElementById("root");
+    if (!root) return;
+    tagAdvanced(doc);
+    ensureToggle(doc);
+    // MutationObserver so later renders (foldkit re-renders) get re-tagged
+    if (!doc.getElementById("studio-adv-mobs")) {
+      const script = doc.createElement("script");
+      script.id = "studio-adv-mobs";
+      script.textContent = `(function(){
+        var mo = new MutationObserver(function(){
+          var doc = document;
+          var LABELS = ["Compute backend","Runtime","Playback mode","Voice controls","Logs","Activity","Details"];
+          doc.querySelectorAll(".section-label").forEach(function(lab){
+            var t=(lab.textContent||"").trim();
+            if (!LABELS.includes(t)) return;
+            var n = lab.parentElement;
+            if (n){ n.classList.add("studio-adv-section");
+              if (n.parentElement && /flex|grid/.test(n.parentElement.className)) n.parentElement.classList.add("studio-adv-section"); }
+          });
+          // also tag the Auto/WebGPU/WASM grid each render
+          doc.querySelectorAll(".grid.grid-cols-3").forEach(function(g){
+            var prev=g.previousElementSibling;
+            if (prev && (prev.textContent||"").trim()==="Compute backend"){
+              g.classList.add("studio-adv-section"); var w=g.closest(".flex.flex-col"); if (w) w.classList.add("studio-adv-section");
+            }
+          });
+          // re-inject toggle if wiped
+          if (!doc.getElementById("studio-adv-toggle")) {
+            var sb = doc.querySelector(".embedded-sidebar") || doc.querySelector(".embedded-compose");
+            if (sb){ var b = doc.createElement("button"); b.id="studio-adv-toggle"; b.type="button"; b.className="studio-adv-toggle";
+              b.innerHTML='<span class="dot"></span><span>Advanced</span><span class="chev">▸</span>';
+              b.addEventListener("click",function(){ var o=doc.body.classList.toggle("studio-adv-open"); b.setAttribute("aria-expanded",String(o));
+                try{ var fr=window.frameElement; (window.parent||{}).postMessage({type:"inflect-web-resize",height:Math.max(doc.body.scrollHeight,doc.documentElement.scrollHeight)}, "*"); }catch(_){} });
+              sb.appendChild(b);
+            }
+          }
+        });
+        mo.observe(document.getElementById("root") || document.body, { childList: true, subtree: true });
+      })();`;
+      doc.body.appendChild(script);
+    }
+  };
   frame.addEventListener("load", apply);
   // re-apply if the SPA mounts after load
-  [100, 400, 900, 1800, 3000].forEach((d) => window.setTimeout(apply, d));
+  [100, 400, 900, 1800, 3000, 5000].forEach((d) => window.setTimeout(apply, d));
 })();
 
 /* responsive browser frame height */