Implement in-app browser

.superset/lib/setup/steps.sh

@@ -350,7 +350,8 @@ step_write_env() {
     # Each workspace gets a range of 20 ports from its base.
     # Offsets: +0 web, +1 api, +2 marketing, +3 admin, +4 docs,
     #          +5 desktop vite, +6 notifications, +7 streams, +8 streams internal, +9 electric,
-    #          +10 caddy (HTTP/2 reverse proxy for API electric endpoint), +11 code inspector
+    #          +10 caddy (HTTP/2 reverse proxy for API electric endpoint), +11 code inspector,
+    #          +12 desktop automation (CDP)
     local BASE=$SUPERSET_PORT_BASE
 
     # App ports (fixed offsets from base)
@@ -366,6 +367,7 @@ step_write_env() {
     local ELECTRIC_PORT=$((BASE + 9))
     local CADDY_ELECTRIC_PORT=$((BASE + 10))
     local CODE_INSPECTOR_PORT=$((BASE + 11))
+    local DESKTOP_AUTOMATION_PORT=$((BASE + 12))
 
     echo ""
     echo "# Workspace Ports (allocated from SUPERSET_PORT_BASE=$BASE, range=20)"
@@ -382,6 +384,7 @@ step_write_env() {
     write_env_var "ELECTRIC_PORT" "$ELECTRIC_PORT"
     write_env_var "CADDY_ELECTRIC_PORT" "$CADDY_ELECTRIC_PORT"
     write_env_var "CODE_INSPECTOR_PORT" "$CODE_INSPECTOR_PORT"
+    write_env_var "DESKTOP_AUTOMATION_PORT" "$DESKTOP_AUTOMATION_PORT"
     echo ""
     echo "# Cross-app URLs (overrides from root .env)"
     write_env_var "NEXT_PUBLIC_API_URL" "http://localhost:$API_PORT"

apps/desktop/src/lib/electron-app/factories/app/setup.ts

@@ -53,15 +53,16 @@ export async function makeAppSetup(
 		}
 	});
 
-	app.on("web-contents-created", (_, contents) =>
+	app.on("web-contents-created", (_, contents) => {
+		if (contents.getType() === "webview") return;
 		contents.on("will-navigate", (event, url) => {
 			// Always prevent in-app navigation for external URLs
 			if (url.startsWith("http://") || url.startsWith("https://")) {
 				event.preventDefault();
 				shell.openExternal(url);
 			}
-		}),
-	);
+		});
+	});
 
 	app.on("window-all-closed", () => !PLATFORM.IS_MAC && app.quit());
 	app.on("before-quit", () => {});

apps/desktop/src/lib/trpc/routers/browser-history/index.ts

@@ -0,0 +1,70 @@
+import { browserHistory } from "@superset/local-db";
+import { like, or, sql } from "drizzle-orm";
+import { localDb } from "main/lib/local-db";
+import { z } from "zod";
+import { publicProcedure, router } from "../..";
+
+export const createBrowserHistoryRouter = () => {
+	return router({
+		getAll: publicProcedure.query(() => {
+			return localDb
+				.select()
+				.from(browserHistory)
+				.orderBy(sql`${browserHistory.lastVisitedAt} desc`)
+				.limit(500)
+				.all();
+		}),
+
+		search: publicProcedure
+			.input(z.object({ query: z.string() }))
+			.query(({ input }) => {
+				const pattern = `%${input.query}%`;
+				return localDb
+					.select()
+					.from(browserHistory)
+					.where(
+						or(
+							like(browserHistory.url, pattern),
+							like(browserHistory.title, pattern),
+						),
+					)
+					.orderBy(sql`${browserHistory.lastVisitedAt} desc`)
+					.limit(10)
+					.all();
+			}),
+
+		upsert: publicProcedure
+			.input(
+				z.object({
+					url: z.string(),
+					title: z.string(),
+					faviconUrl: z.string().nullable().optional(),
+				}),
+			)
+			.mutation(({ input }) => {
+				localDb
+					.insert(browserHistory)
+					.values({
+						url: input.url,
+						title: input.title,
+						faviconUrl: input.faviconUrl ?? null,
+						lastVisitedAt: Date.now(),
+						visitCount: 1,
+					})
+					.onConflictDoUpdate({
+						target: browserHistory.url,
+						set: {
+							title: input.title,
+							faviconUrl: input.faviconUrl ?? null,
+							lastVisitedAt: Date.now(),
+							visitCount: sql`${browserHistory.visitCount} + 1`,
+						},
+					})
+					.run();
+			}),
+
+		clear: publicProcedure.mutation(() => {
+			localDb.delete(browserHistory).run();
+		}),
+	});
+};

apps/desktop/src/lib/trpc/routers/browser/browser.ts

@@ -0,0 +1,176 @@
+import { observable } from "@trpc/server/observable";
+import { session } from "electron";
+import { browserManager } from "main/lib/browser/browser-manager";
+import { z } from "zod";
+import { publicProcedure, router } from "../..";
+
+export const createBrowserRouter = () => {
+	return router({
+		register: publicProcedure
+			.input(z.object({ paneId: z.string(), webContentsId: z.number() }))
+			.mutation(({ input }) => {
+				browserManager.register(input.paneId, input.webContentsId);
+				return { success: true };
+			}),
+
+		unregister: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.mutation(({ input }) => {
+				browserManager.unregister(input.paneId);
+				return { success: true };
+			}),
+
+		navigate: publicProcedure
+			.input(z.object({ paneId: z.string(), url: z.string() }))
+			.mutation(({ input }) => {
+				const wc = browserManager.getWebContents(input.paneId);
+				if (!wc) throw new Error(`No webContents for pane ${input.paneId}`);
+				wc.loadURL(input.url);
+				return { success: true };
+			}),
+
+		goBack: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.mutation(({ input }) => {
+				const wc = browserManager.getWebContents(input.paneId);
+				if (wc?.canGoBack()) wc.goBack();
+				return { success: true };
+			}),
+
+		goForward: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.mutation(({ input }) => {
+				const wc = browserManager.getWebContents(input.paneId);
+				if (wc?.canGoForward()) wc.goForward();
+				return { success: true };
+			}),
+
+		reload: publicProcedure
+			.input(z.object({ paneId: z.string(), hard: z.boolean().optional() }))
+			.mutation(({ input }) => {
+				const wc = browserManager.getWebContents(input.paneId);
+				if (!wc) return { success: false };
+				if (input.hard) {
+					wc.reloadIgnoringCache();
+				} else {
+					wc.reload();
+				}
+				return { success: true };
+			}),
+
+		screenshot: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.mutation(async ({ input }) => {
+				const base64 = await browserManager.screenshot(input.paneId);
+				return { base64 };
+			}),
+
+		evaluateJS: publicProcedure
+			.input(z.object({ paneId: z.string(), code: z.string() }))
+			.mutation(async ({ input }) => {
+				const result = await browserManager.evaluateJS(
+					input.paneId,
+					input.code,
+				);
+				return { result };
+			}),
+
+		getConsoleLogs: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.query(({ input }) => {
+				return browserManager.getConsoleLogs(input.paneId);
+			}),
+
+		consoleStream: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.subscription(({ input }) => {
+				return observable<{
+					level: string;
+					message: string;
+					timestamp: number;
+				}>((emit) => {
+					const handler = (entry: {
+						level: string;
+						message: string;
+						timestamp: number;
+					}) => {
+						emit.next(entry);
+					};
+					browserManager.on(`console:${input.paneId}`, handler);
+					return () => {
+						browserManager.off(`console:${input.paneId}`, handler);
+					};
+				});
+			}),
+
+		onNewWindow: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.subscription(({ input }) => {
+				return observable<{ url: string }>((emit) => {
+					const handler = (url: string) => {
+						emit.next({ url });
+					};
+					browserManager.on(`new-window:${input.paneId}`, handler);
+					return () => {
+						browserManager.off(`new-window:${input.paneId}`, handler);
+					};
+				});
+			}),
+
+		openDevTools: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.mutation(({ input }) => {
+				browserManager.openDevTools(input.paneId);
+				return { success: true };
+			}),
+
+		getDevToolsUrl: publicProcedure
+			.input(z.object({ browserPaneId: z.string() }))
+			.query(async ({ input }) => {
+				const url = await browserManager.getDevToolsUrl(input.browserPaneId);
+				return { url };
+			}),
+
+		getPageInfo: publicProcedure
+			.input(z.object({ paneId: z.string() }))
+			.query(({ input }) => {
+				const wc = browserManager.getWebContents(input.paneId);
+				if (!wc) return null;
+				return {
+					url: wc.getURL(),
+					title: wc.getTitle(),
+					canGoBack: wc.canGoBack(),
+					canGoForward: wc.canGoForward(),
+					isLoading: wc.isLoading(),
+				};
+			}),
+
+		clearBrowsingData: publicProcedure
+			.input(
+				z.object({
+					type: z.enum(["cookies", "cache", "storage", "all"]),
+				}),
+			)
+			.mutation(async ({ input }) => {
+				const ses = session.fromPartition("persist:superset");
+				switch (input.type) {
+					case "cookies":
+						await ses.clearStorageData({ storages: ["cookies"] });
+						break;
+					case "cache":
+						await ses.clearCache();
+						break;
+					case "storage":
+						await ses.clearStorageData({
+							storages: ["localstorage", "indexdb"],
+						});
+						break;
+					case "all":
+						await ses.clearStorageData();
+						await ses.clearCache();
+						break;
+				}
+				return { success: true };
+			}),
+	});
+};

apps/desktop/src/lib/trpc/routers/index.ts

@@ -4,6 +4,8 @@ import { createAiChatRouter } from "./ai-chat";
 import { createAnalyticsRouter } from "./analytics";
 import { createAuthRouter } from "./auth";
 import { createAutoUpdateRouter } from "./auto-update";
+import { createBrowserRouter } from "./browser/browser";
+import { createBrowserHistoryRouter } from "./browser-history";
 import { createCacheRouter } from "./cache";
 import { createChangesRouter } from "./changes";
 import { createConfigRouter } from "./config";
@@ -25,6 +27,8 @@ export const createAppRouter = (getWindow: () => BrowserWindow | null) => {
 	return router({
 		aiChat: createAiChatRouter(),
 		analytics: createAnalyticsRouter(),
+		browser: createBrowserRouter(),
+		browserHistory: createBrowserHistoryRouter(),
 		auth: createAuthRouter(),
 		autoUpdate: createAutoUpdateRouter(),
 		cache: createCacheRouter(),

apps/desktop/src/lib/trpc/routers/ui-state/index.ts

@@ -33,7 +33,7 @@ const fileViewerStateSchema = z.object({
 const paneSchema = z.object({
 	id: z.string(),
 	tabId: z.string(),
-	type: z.enum(["terminal", "webview", "file-viewer", "chat"]),
+	type: z.enum(["terminal", "webview", "file-viewer", "chat", "devtools"]),
 	name: z.string(),
 	isNew: z.boolean().optional(),
 	status: z.enum(["idle", "working", "permission", "review"]).optional(),
@@ -44,6 +44,34 @@ const paneSchema = z.object({
 	cwdConfirmed: z.boolean().optional(),
 	fileViewer: fileViewerStateSchema.optional(),
 	chat: z.object({ sessionId: z.string() }).optional(),
+	browser: z
+		.object({
+			currentUrl: z.string(),
+			history: z.array(
+				z.object({
+					url: z.string(),
+					title: z.string(),
+					timestamp: z.number(),
+					faviconUrl: z.string().optional(),
+				}),
+			),
+			historyIndex: z.number(),
+			isLoading: z.boolean(),
+			viewport: z
+				.object({
+					name: z.string(),
+					width: z.number(),
+					height: z.number(),
+				})
+				.nullable()
+				.optional(),
+		})
+		.optional(),
+	devtools: z
+		.object({
+			targetPaneId: z.string(),
+		})
+		.optional(),
 });
 
 /**

apps/desktop/src/main/index.ts

@@ -278,6 +278,19 @@ if (!gotTheLock) {
 		initSentry();
 		await initAppState();
 
+		// Load browser extension for webview panes
+		try {
+			const extensionPath = app.isPackaged
+				? path.join(process.resourcesPath, "browser-extension")
+				: path.join(__dirname, "../src/resources/browser-extension");
+			await session
+				.fromPartition("persist:superset")
+				.loadExtension(extensionPath);
+			console.log("[main] Browser extension loaded");
+		} catch (error) {
+			console.error("[main] Failed to load browser extension:", error);
+		}
+
 		// Must happen before renderer restore runs
 		await reconcileDaemonSessions();