feat(local-explorer-ui): Added initial data studio plumbing

.changeset/chilly-pans-follow.md

@@ -0,0 +1,9 @@
+---
+"@cloudflare/local-explorer-ui": minor
+---
+
+Implemented initial data studio driver support.
+
+This provides the initial plumbing needed to add the complete data studio component to the local explorer in a later PR.
+
+This is an experimental WIP feature.

packages/local-explorer-ui/package.json

@@ -20,6 +20,7 @@
 		"@phosphor-icons/react": "^2.1.10",
 		"@tailwindcss/vite": "^4.0.15",
 		"@tanstack/react-router": "^1.158.0",
+		"lodash": "^4.17.23",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"tailwindcss": "^4.0.15"
@@ -30,6 +31,7 @@
 		"@hey-api/openapi-ts": "^0.91.1",
 		"@tanstack/react-router-devtools": "^1.158.0",
 		"@tanstack/router-plugin": "^1.158.0",
+		"@types/lodash": "^4.17.23",
 		"@types/react": "^19.2.0",
 		"@types/react-dom": "^19.2.0",
 		"@vitejs/plugin-react": "^4.4.1",

packages/local-explorer-ui/src/components/Sidebar.tsx

@@ -1,28 +1,32 @@
 import { Collapsible } from "@base-ui/react/collapsible";
 import { cn } from "@cloudflare/kumo";
-import { CaretRightIcon } from "@phosphor-icons/react";
+import { CaretRightIcon, DatabaseIcon } from "@phosphor-icons/react";
 import { Link } from "@tanstack/react-router";
 import CloudflareLogo from "../assets/icons/cloudflare-logo.svg?react";
 import KVIcon from "../assets/icons/kv.svg?react";
-import type { WorkersKvNamespace } from "../api";
+import type { D1DatabaseResponse, WorkersKvNamespace } from "../api";
 
 interface SidebarProps {
-	namespaces: WorkersKvNamespace[];
-	loading: boolean;
-	error: string | null;
 	currentPath: string;
+	d1Error: string | null;
+	databases: D1DatabaseResponse[];
+	kvError: string | null;
+	loading: boolean;
+	namespaces: WorkersKvNamespace[];
 }
 
 export function Sidebar({
-	namespaces,
-	loading,
-	error,
 	currentPath,
+	d1Error,
+	databases,
+	kvError,
+	loading,
+	namespaces,
 }: SidebarProps) {
 	return (
 		<aside className="w-sidebar bg-bg-secondary border-r border-border flex flex-col">
 			<a
-				className="flex items-center gap-2.5 p-4 border-b border-border min-h-[67px] box-border"
+				className="flex items-center gap-2.5 p-4 border-b border-border min-h-16.75 box-border"
 				href="/"
 			>
 				<CloudflareLogo className="shrink-0 text-primary" />
@@ -31,31 +35,31 @@ export function Sidebar({
 						Local Explorer
 					</span>
 					<span className="text-[10px] font-medium text-text-secondary uppercase tracking-wide">
-						Cloudflare Dev Tools
+						Cloudflare DevTools
 					</span>
 				</div>
 			</a>
 
 			<Collapsible.Root defaultOpen>
 				<Collapsible.Trigger className="group flex items-center gap-2 w-full py-3 px-4 border-0 border-b border-border bg-transparent font-semibold text-[11px] uppercase tracking-wide text-text-secondary cursor-pointer transition-colors hover:bg-border">
-					<CaretRightIcon className="transition-transform duration-200 group-data-[panel-open]:rotate-90" />
+					<CaretRightIcon className="transition-transform duration-200 group-data-panel-open:rotate-90" />
 					<KVIcon className="w-3.5 h-3.5" />
 					KV Namespaces
 				</Collapsible.Trigger>
-				<Collapsible.Panel className="overflow-hidden transition-[height,opacity] duration-200 ease-out data-[starting-style]:h-0 data-[starting-style]:opacity-0 data-[ending-style]:h-0 data-[ending-style]:opacity-0">
+				<Collapsible.Panel className="overflow-hidden transition-[height,opacity] duration-200 ease-out data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0">
 					<ul className="list-none flex-1 overflow-y-auto">
 						{loading && (
 							<li className="block py-2.5 px-4 text-text-secondary border-b border-border">
 								Loading...
 							</li>
 						)}
-						{error && (
+						{kvError && (
 							<li className="block py-2.5 px-4 text-danger border-b border-border">
-								{error}
+								{kvError}
 							</li>
 						)}
 						{!loading &&
-							!error &&
+							!kvError &&
 							namespaces.map((ns) => {
 								const isActive = currentPath === `/kv/${ns.id}`;
 								return (
@@ -66,7 +70,7 @@ export function Sidebar({
 											className={cn(
 												"block py-2.5 px-4 text-text no-underline border-b border-border cursor-pointer transition-colors hover:bg-border",
 												isActive
-													? "bg-primary/8 text-primary border-l-3 border-l-primary pl-[13px]"
+													? "bg-primary/8 text-primary border-l-3 border-l-primary pl-3.25"
 													: ""
 											)}
 										>
@@ -75,14 +79,63 @@ export function Sidebar({
 									</li>
 								);
 							})}
-						{!loading && !error && namespaces.length === 0 && (
+						{!loading && !kvError && namespaces.length === 0 && (
 							<li className="block py-2.5 px-4 text-text-secondary border-b border-border">
 								No namespaces
 							</li>
 						)}
 					</ul>
 				</Collapsible.Panel>
 			</Collapsible.Root>
+
+			<Collapsible.Root defaultOpen>
+				<Collapsible.Trigger className="group flex items-center gap-2 w-full py-3 px-4 border-0 border-b border-border bg-transparent font-semibold text-[11px] uppercase tracking-wide text-text-secondary cursor-pointer transition-colors hover:bg-border">
+					<CaretRightIcon className="transition-transform duration-200 group-data-panel-open:rotate-90" />
+					<DatabaseIcon className="w-3.5 h-3.5" />
+					D1 Databases
+				</Collapsible.Trigger>
+				<Collapsible.Panel className="overflow-hidden transition-[height,opacity] duration-200 ease-out data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0">
+					<ul className="list-none flex-1 overflow-y-auto">
+						{loading && (
+							<li className="block py-2.5 px-4 text-text-secondary border-b border-border">
+								Loading...
+							</li>
+						)}
+						{d1Error && (
+							<li className="block py-2.5 px-4 text-danger border-b border-border">
+								{d1Error}
+							</li>
+						)}
+						{!loading &&
+							!d1Error &&
+							databases.map((database) => {
+								const isActive = currentPath === `/d1/${database.uuid}`;
+								return (
+									<li key={database.uuid}>
+										<Link
+											className={cn(
+												"block py-2.5 px-4 text-text no-underline border-b border-border cursor-pointer transition-colors hover:bg-border",
+												isActive
+													? "bg-primary/8 text-primary border-l-3 border-l-primary pl-3.25"
+													: ""
+											)}
+											params={{ databaseId: database.uuid as string }}
+											search={{ table: undefined }}
+											to="/d1/$databaseId"
+										>
+											{database.name}
+										</Link>
+									</li>
+								);
+							})}
+						{!loading && !d1Error && databases.length === 0 && (
+							<li className="block py-2.5 px-4 text-text-secondary border-b border-border">
+								No databases
+							</li>
+						)}
+					</ul>
+				</Collapsible.Panel>
+			</Collapsible.Root>
 		</aside>
 	);
 }

packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx

@@ -0,0 +1,209 @@
+import { cn, Tooltip } from "@cloudflare/kumo";
+import { TableIcon } from "@phosphor-icons/react";
+import { Fragment } from "react";
+import type { StudioResultSet } from "../../../types/studio";
+import type { ReactNode } from "react";
+
+interface StudioSQLiteExplainProps {
+	data: StudioResultSet;
+}
+
+interface StudioSQLiteExplainRow {
+	id: number;
+	parent: number;
+	detail: string;
+}
+
+interface StudioSQLiteExplainTree extends StudioSQLiteExplainRow {
+	children: StudioSQLiteExplainTree[];
+}
+
+export function StudioSQLiteExplainTab({
+	data,
+}: StudioSQLiteExplainProps): JSX.Element {
+	const rows = data.rows as unknown as StudioSQLiteExplainRow[];
+
+	let tree = rows.map(
+		(r) =>
+			({
+				...r,
+				children: [],
+			}) satisfies StudioSQLiteExplainTree
+	);
+
+	const nodeTable = tree.reduce(
+		(a, b) => ({
+			...a,
+			[b.id]: b,
+		}),
+		{} as Record<string, StudioSQLiteExplainTree>
+	);
+
+	for (const node of tree) {
+		if (node.parent) {
+			nodeTable[node.parent]?.children.push(node);
+		}
+	}
+
+	tree = tree.filter((node) => node.parent === 0);
+
+	return (
+		<div className="w-full h-full grow p-8 overflow-auto">
+			<div className="font-mono text-sm">
+				<ExplainNodes data={tree} />
+			</div>
+		</div>
+	);
+}
+
+interface ExplainNodesProps {
+	data: StudioSQLiteExplainTree[];
+}
+
+function ExplainNodes({ data }: ExplainNodesProps): JSX.Element {
+	return (
+		<>
+			{data.map((row) => {
+				const { label, performance } = describeExplainNode(row.detail);
+
+				return (
+					<Fragment key={row.id}>
+						<div className="h-8 flex gap-2 items-center">
+							<div
+								className={cn("inline-flex border rounded-full", {
+									"bg-green-500": performance === "fast",
+									"bg-red-500": performance === "slow",
+									"bg-yellow-500": performance === "medium",
+									"bg-gray-500": performance === "neutral",
+								})}
+								style={{ width: 10, height: 10, marginLeft: -5 }}
+							/>
+							<div>{label}</div>
+						</div>
+						<div className="pl-4 border-l">
+							<ExplainNodes data={row.children} />
+						</div>
+					</Fragment>
+				);
+			})}
+		</>
+	);
+}
+
+type ExplainNodePerformance = "slow" | "medium" | "fast" | "neutral";
+
+/**
+ * Convert an EXPLAIN step detail string into a UI-friendly
+ * description with performance classification and formatted label.
+ *
+ * Performance indicates execution efficiency:
+ *   - slow: likely very costly
+ *   - medium: potentially adds extra work
+ *   - fast: generally efficient
+ *   - neutral: informational only
+ *
+ * @param detail - The raw detail text from the EXPLAIN result
+ *
+ * @returns Object containing a ReactNode label and performance level
+ */
+function describeExplainNode(d: string): {
+	label: ReactNode;
+	performance: ExplainNodePerformance;
+} {
+	if (d.startsWith("SCAN ")) {
+		return {
+			performance: "slow",
+			label: (
+				<div className="flex items-center">
+					<strong>SCAN </strong>
+					<span className="border border-color p-1 mx-2 rounded flex items-center gap-2">
+						<TableIcon />
+						{d.substring("SCAN ".length)}
+					</span>
+				</div>
+			),
+		};
+	}
+
+	if (d.startsWith("CORRELATED ")) {
+		return {
+			performance: "slow",
+			label: (
+				<div>
+					<Tooltip
+						side="bottom"
+						content={
+							<div className="flex flex-col gap-2">
+								<div>
+									This subquery depends on values from the outer query, so
+									it&apos;s evaluated once per outer row.{" "}
+									<strong className="text-red-500">
+										Can be slow on large inputs
+									</strong>
+									.
+								</div>
+								<div className="text-green-500">
+									Mitigate by indexing the correlated columns or rewriting as a
+									JOIN + aggregate.
+								</div>
+							</div>
+						}
+					>
+						<strong className="underline cursor-pointer">CORRELATED</strong>
+					</Tooltip>
+					<span>{d.substring("CORRELATED".length)}</span>
+				</div>
+			),
+		};
+	}
+
+	if (d.startsWith("SEARCH ")) {
+		return {
+			performance: "fast",
+			label: (
+				<div>
+					<strong>SEARCH </strong>
+					<span>{d.substring("SEARCH".length)}</span>
+				</div>
+			),
+		};
+	}
+
+	if (
+		d.startsWith("USE TEMP B-TREE FOR ORDER BY") ||
+		d.startsWith("USE TEMP B-TREE FOR GROUP BY") ||
+		d.startsWith("USE TEMP B-TREE FOR DISTINCT")
+	) {
+		return {
+			performance: "medium",
+			label: (
+				<Tooltip
+					side="bottom"
+					content={
+						<div className="flex flex-col gap-2">
+							<div>
+								SQLite can’t return rows in the requested order/grouping
+								directly, so it gathers them into a temporary structure and
+								processes them before returning results.{" "}
+								<span className="text-red-500">
+									This adds extra work and grows with result size.
+								</span>
+							</div>
+							<div className="text-green-500">
+								Add an index that matches the clause (ORDER BY / GROUP BY /
+								DISTINCT) to avoid the temp structure.
+							</div>
+						</div>
+					}
+				>
+					<strong className="underline cursor-pointer">{d}</strong>
+				</Tooltip>
+			),
+		};
+	}
+
+	return {
+		label: <span>{d}</span>,
+		performance: "neutral",
+	};
+}