From b68cdcb8d5d42add494d1a4c11093246626997ff Mon Sep 17 00:00:00 2001
From: Guilhem Lemouel <guilhemlemouel@gmail.com>
Date: Wed, 20 May 2026 22:54:45 +0200
Subject: [PATCH] feat(raw_apps): VS Code-style "Preview" header on the right
 pane
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In split mode, the right pane now shows a small "Preview" tab-styled
header anchored at its top-left — making the layout read like a real
VS Code editor split, where each group has its own tab bar.

- Header appears only when `splitWithPreview && activeTabKind !== 'preview'`
  (i.e. when the right pane is meaningfully separate from the left's
  content). In single mode with preview active, the right pane is the
  only thing visible and the main tab bar already labels it.
- The header uses the same styling as an active tab: `bg-surface`
  on a `bg-surface-secondary` strip, h-8, text-xs, no border.
- An X button next to the label toggles split off — equivalent to
  closing the editor in VS Code's split view (preview goes back to
  living as a tab in the main bar).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/raw_apps/RawAppEditor.svelte   | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
index a775404dae..9ffa812ec9 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
@@ -28,7 +28,7 @@
 	import { createAppSelectedContext, type AppCodeSelectionElement } from '../copilot/chat/context'
 	import { rawAppLintStore } from './lintStore'
 	import { dbSchemas } from '$lib/stores'
-	import { MousePointerSquareDashed, RefreshCw, Columns2 } from 'lucide-svelte'
+	import { MousePointerSquareDashed, RefreshCw, Columns2, X } from 'lucide-svelte'
 	import DraggableTabs, {
 		type TabItem
 	} from '$lib/components/common/tabs/DraggableTabs.svelte'
@@ -1472,12 +1472,38 @@
 							</div>
 						</Pane>
 						<Pane bind:size={paneBRightSize} minSize={0}>
-							<iframe
-								bind:this={previewIframe}
-								title="App preview"
-								src="/ui_builder/app-preview.html"
-								class="w-full h-full block"
-							></iframe>
+							<div class="h-full w-full flex flex-col">
+								<!-- VS Code-style split: the preview side gets its own
+								     tab header so the user sees "Preview" as a tab
+								     anchored to the right pane (rather than just an
+								     iframe with no label). The X closes the split
+								     (preview goes back to the main tab bar). -->
+								{#if splitWithPreview && activeTabKind !== 'preview'}
+									<div
+										class="flex items-stretch bg-surface-secondary border-l border-border-light flex-shrink-0"
+									>
+										<div
+											class="inline-flex items-center gap-1.5 px-3 h-8 text-xs bg-surface text-primary"
+										>
+											<span>Preview</span>
+											<button
+												type="button"
+												class="opacity-60 hover:opacity-100 rounded hover:bg-surface-hover w-4 h-4 inline-flex items-center justify-center"
+												aria-label="Move preview back into a tab"
+												onclick={toggleSplit}
+											>
+												<X size={10} />
+											</button>
+										</div>
+									</div>
+								{/if}
+								<iframe
+									bind:this={previewIframe}
+									title="App preview"
+									src="/ui_builder/app-preview.html"
+									class="w-full flex-1 block"
+								></iframe>
+							</div>
 						</Pane>
 					</Splitpanes>
 				</div>