From ce66e3bfed2b791778a604d3341083dbfcd7c0f0 Mon Sep 17 00:00:00 2001
From: Panthevm <panthevm@yandex.ru>
Date: Tue, 7 Jul 2026 18:04:38 +0300
Subject: [PATCH] Notebook: fix "TabsContent must be used within Tabs" on
 multi-statement SQL cells

SqlCellView rendered the shared DB-console ResultContent without a Tabs
wrapper. When $psql returns more than one result set, ResultContent emits
one <TabsContent> per result, which needs a parent Radix <Tabs> context,
so opening such a notebook crashed. Single-result cells render the table
directly, so the crash only showed up for multi-statement SQL.

Wrap the result in <Tabs> and, when there is more than one result, render
a Query-1 (N) / Query-2 (M) switcher, mirroring the DB console ResultPanel.
safeActive clamps the active index so a shorter re-run cannot point past
the results.
---
 src/routes/notebooks.$id.tsx | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/routes/notebooks.$id.tsx b/src/routes/notebooks.$id.tsx
index e8e47e1..f79332a 100644
--- a/src/routes/notebooks.$id.tsx
+++ b/src/routes/notebooks.$id.tsx
@@ -624,7 +624,10 @@ export function SqlCellView({
 		onResultChange?.(null);
 	};
 
+	const [activeTab, setActiveTab] = useState(0);
 	const hasResponse = results !== null || error !== null;
+	const multiple = !!results && results.length > 1;
+	const safeActive = results ? Math.min(activeTab, results.length - 1) : 0;
 
 	return (
 		<div className="group/cell -mx-3 mt-4 mb-4 rounded-lg border border-border-default bg-bg-primary overflow-hidden">
@@ -671,14 +674,28 @@ export function SqlCellView({
 				/>
 			</div>
 			{hasResponse && (
-				<>
+				<HSComp.Tabs
+					value={String(safeActive)}
+					onValueChange={(v) => setActiveTab(Number(v))}
+					className="flex flex-col min-h-0"
+				>
 					<div className="flex items-center justify-between bg-bg-secondary pl-3 pr-4 h-10 border-t border-b border-border-default">
-						<span className="text-sm font-medium text-text-secondary shrink-0">
-							Result
-							{results
-								? ` (${results.reduce((s, r) => s + (r.result?.length ?? 0), 0)})`
-								: ""}
-						</span>
+						{multiple ? (
+							<HSComp.TabsList>
+								{results?.map((r, i) => (
+									<HSComp.TabsTrigger key={`${r.query}-${i}`} value={String(i)}>
+										Query-{i + 1} ({r.result?.length ?? 0})
+									</HSComp.TabsTrigger>
+								))}
+							</HSComp.TabsList>
+						) : (
+							<span className="text-sm font-medium text-text-secondary shrink-0">
+								Result
+								{results
+									? ` (${results.reduce((s, r) => s + (r.result?.length ?? 0), 0)})`
+									: ""}
+							</span>
+						)}
 						<div className="flex items-center gap-3">
 							{duration !== undefined && (
 								<span className="flex items-center text-text-secondary text-sm">
@@ -698,7 +715,7 @@ export function SqlCellView({
 							onCancel={() => undefined}
 						/>
 					</div>
-				</>
+				</HSComp.Tabs>
 			)}
 		</div>
 	);