From 5eb6b96f30584c1969004bd7f6b795abb16f7f67 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sat, 11 Apr 2026 09:18:19 -0700
Subject: [PATCH] fix(cockpit): preserve iframe when switching between Run and
 Code tabs

RunMode was conditionally rendered, causing the iframe to unmount and
remount every time the user switched tabs. Now RunMode stays mounted
but is hidden with CSS when another tab is active. Navigating to a
different example still unmounts the old shell and creates a fresh one.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/cockpit/src/components/cockpit-shell.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/cockpit/src/components/cockpit-shell.tsx b/apps/cockpit/src/components/cockpit-shell.tsx
index 695b7a842..a2d9fa0dd 100644
--- a/apps/cockpit/src/components/cockpit-shell.tsx
+++ b/apps/cockpit/src/components/cockpit-shell.tsx
@@ -104,13 +104,14 @@ export function CockpitShell({
           </div>
         </header>
 
-        <div className="min-h-0">
-          {activeMode === 'Run' ? (
+        <div className="min-h-0 relative">
+          {/* RunMode stays mounted to preserve iframe state across tab switches */}
+          <div className={`h-full ${activeMode === 'Run' ? '' : 'invisible absolute inset-0'}`}>
             <RunMode
               entryTitle={entryTitle}
               runtimeUrl={contentBundle.runtimeUrl}
             />
-          ) : null}
+          </div>
           {activeMode === 'Code' ? (
             <CodeMode
               entryTitle={entryTitle}