feat(desktop): browser pane の Connect 導線と session バインディング UI (Phase 1)

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

@@ -9,6 +9,7 @@ import { createAnalyticsRouter } from "./analytics";
 import { createAuthRouter } from "./auth";
 import { createAutoUpdateRouter } from "./auto-update";
 import { createBrowserRouter } from "./browser/browser";
+import { createBrowserAutomationRouter } from "./browser-automation";
 import { createBrowserHistoryRouter } from "./browser-history";
 import { createCacheRouter } from "./cache";
 import { createChangesRouter } from "./changes";
@@ -53,6 +54,7 @@ export const createAppRouter = (
 		aivis: createAivisRouter(),
 		analytics: createAnalyticsRouter(),
 		browser: createBrowserRouter(),
+		browserAutomation: createBrowserAutomationRouter(),
 		browserHistory: createBrowserHistoryRouter(),
 		auth: createAuthRouter(),
 		autoUpdate: createAutoUpdateRouter(),

apps/desktop/src/renderer/hooks/useBrowserAutomationData.ts

@@ -0,0 +1,140 @@
+import { useMemo } from "react";
+import { electronTrpc } from "renderer/lib/electron-trpc";
+import {
+	type AutomationSession,
+	formatRelativeTime,
+	type McpStatus,
+} from "renderer/stores/browser-automation";
+import { useTabsStore } from "renderer/stores/tabs/store";
+
+/**
+ * Aggregates browser-automation session and binding data from the
+ * main-process tRPC routers. Sessions come from two sources:
+ *
+ *   1. TODO-Agent sessions (Claude Code workers the supervisor is running).
+ *   2. Terminal panes that currently have a `claude` or `codex` child
+ *      process. The binding key for this kind is the terminal's paneId so
+ *      that it self-heals across shell re-spawns inside the same pane.
+ *
+ * MCP readiness is resolved against the user's Claude/Codex config files.
+ *
+ * `enabled` controls the expensive queries. The binding query and its
+ * subscription always run because `ConnectButton` is mounted for every
+ * browser pane and needs to reflect the binding state without polling.
+ */
+export function useBrowserAutomationData({
+	enabled = true,
+}: {
+	enabled?: boolean;
+} = {}) {
+	const panes = useTabsStore((s) => s.panes);
+
+	const { data: todoSessions = [], refetch: refetchSessions } =
+		electronTrpc.todoAgent.listAll.useQuery(undefined, {
+			enabled,
+			refetchOnWindowFocus: enabled,
+			refetchInterval: enabled ? 15000 : false,
+		});
+	const { data: terminalAgents = [] } =
+		electronTrpc.browserAutomation.listTerminalAgentSessions.useQuery(
+			undefined,
+			{
+				enabled,
+				refetchOnWindowFocus: enabled,
+				refetchInterval: enabled ? 10000 : false,
+			},
+		);
+	const { data: mcpStatus } =
+		electronTrpc.browserAutomation.getMcpStatus.useQuery(undefined, {
+			enabled,
+			refetchOnWindowFocus: enabled,
+			refetchInterval: enabled ? 30000 : false,
+		});
+	const { data: bindings = [] } =
+		electronTrpc.browserAutomation.listBindings.useQuery(undefined, {
+			// Binding changes are pushed via onBindingsChanged, so no polling.
+			refetchOnWindowFocus: false,
+		});
+	// The binding subscription is centralized in `useBrowserBindingsSync`
+	// (mounted once in ContentView), so this hook does not open one per
+	// consumer.
+
+	const sessions: AutomationSession[] = useMemo(() => {
+		// Only sessions that have a live worker (or are actively scheduled to
+		// wake up) should be connectable. Queued/paused/aborted/done/failed/
+		// escalated sessions either never started or are terminal.
+		const liveStatuses = new Set([
+			"running",
+			"preparing",
+			"verifying",
+			"waiting",
+		]);
+		const claudeReadyForWorkspace = (workspaceId: string | null): McpStatus => {
+			if (!mcpStatus) return "unknown";
+			if (mcpStatus.claudeHomeReady) return "ready";
+			if (workspaceId && mcpStatus.claudeReadyByWorkspaceId[workspaceId])
+				return "ready";
+			return "missing";
+		};
+		const todo: AutomationSession[] = todoSessions
+			.filter((s) => liveStatuses.has(s.status))
+			.map((s) => {
+				// Todo-agent rows always represent Claude Code workers (see
+				// todo-daemon/claude-code-runner.ts).
+				const provider = "Claude" as const;
+				const mcp: McpStatus = claudeReadyForWorkspace(s.workspaceId);
+				const displayName = s.title || `Session ${s.id.slice(0, 6)}`;
+				const branchOrContext =
+					s.workspaceBranch ??
+					s.workspaceName ??
+					(s.projectName ? s.projectName : "workspace");
+				return {
+					id: s.id,
+					displayName,
+					provider,
+					kind: "TODO-Agent",
+					branchOrContextLabel: branchOrContext,
+					lastActiveAt: formatRelativeTime(s.updatedAt ?? s.createdAt),
+					mcpStatus: mcp,
+				};
+			});
+
+		const terminal: AutomationSession[] = terminalAgents.map((t) => {
+			const pane = panes[t.paneId];
+			const mcp: McpStatus =
+				t.provider === "Codex"
+					? mcpStatus
+						? mcpStatus.codexReady
+							? "ready"
+							: "missing"
+						: "unknown"
+					: claudeReadyForWorkspace(t.workspaceId);
+			return {
+				id: `terminal:${t.paneId}`,
+				displayName: pane?.userTitle || pane?.name || `Terminal ${t.command}`,
+				provider: t.provider,
+				kind: "Terminal",
+				branchOrContextLabel: t.command,
+				lastActiveAt: t.lastAttachedAt
+					? formatRelativeTime(Date.parse(t.lastAttachedAt))
+					: "active",
+				mcpStatus: mcp,
+			};
+		});
+
+		return [...todo, ...terminal];
+	}, [todoSessions, terminalAgents, mcpStatus, panes]);
+
+	const bindingsByPane = useMemo(() => {
+		const map: Record<string, string> = {};
+		for (const b of bindings) map[b.paneId] = b.sessionId;
+		return map;
+	}, [bindings]);
+
+	return {
+		sessions,
+		bindingsByPane,
+		mcpStatus,
+		refetchSessions,
+	};
+}

apps/desktop/src/renderer/hooks/useBrowserBindingsSync.ts

@@ -0,0 +1,17 @@
+import { electronTrpc } from "renderer/lib/electron-trpc";
+
+/**
+ * Centralized binding subscription — mount ONCE per window (from
+ * ContentView). Without this, every `useBrowserAutomationData` consumer
+ * (one per browser pane) would open its own subscription to the main
+ * process emitter and fan out an invalidation per binding mutation.
+ */
+export function useBrowserBindingsSync() {
+	const utils = electronTrpc.useUtils();
+	electronTrpc.browserAutomation.onBindingsChanged.useSubscription(undefined, {
+		onData: () => {
+			utils.browserAutomation.listBindings.invalidate();
+			utils.browserAutomation.listBindingLiveness.invalidate();
+		},
+	});
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/BrowserPane.tsx

@@ -5,6 +5,7 @@ import { LuMinus, LuPlus } from "react-icons/lu";
 import { TbDeviceDesktop } from "react-icons/tb";
 import type { MosaicBranch } from "react-mosaic-component";
 import { electronTrpc } from "renderer/lib/electron-trpc";
+import { useBrowserAutomationStore } from "renderer/stores/browser-automation";
 import {
 	findBookmarkByUrl,
 	useBrowserBookmarksStore,
@@ -21,7 +22,9 @@ import {
 } from "./components/BrowserFindOverlay";
 import { BrowserToolbar } from "./components/BrowserToolbar";
 import { BrowserOverflowMenu } from "./components/BrowserToolbar/components/BrowserOverflowMenu";
+import { ConnectButton } from "./components/ConnectButton";
 import { ExtensionToolbar } from "./components/ExtensionToolbar";
+import { SessionConnectModal } from "./components/SessionConnectModal";
 import { DEFAULT_BROWSER_URL } from "./constants";
 import { usePersistentWebview } from "./hooks/usePersistentWebview";
 
@@ -74,6 +77,14 @@ export function BrowserPane({
 	const isFullscreen = useBrowserFullscreenStore(
 		(s) => s.fullscreenPaneId === paneId,
 	);
+	// Narrow the subscription so BrowserPane (and its webview tree) does not
+	// re-render every time the modal's selectedSessionId changes.
+	const isConnectOpenForThisPane = useBrowserAutomationStore(
+		(s) => s.connectModal.isOpen && s.connectModal.paneId === paneId,
+	);
+	const closeConnectModal = useBrowserAutomationStore(
+		(s) => s.closeConnectModal,
+	);
 	const { mutate: openDevTools } =
 		electronTrpc.browser.openDevTools.useMutation();
 	const { mutate: setZoomLevel } =
@@ -294,6 +305,8 @@ export function BrowserPane({
 							onPopOut={handlers.onPopOut}
 							leadingActions={
 								<>
+									<ConnectButton paneId={paneId} />
+									<div className="mx-1 h-3.5 w-px bg-muted-foreground/60" />
 									<div className="flex items-center gap-0.5">
 										<Tooltip>
 											<TooltipTrigger asChild>
@@ -423,6 +436,12 @@ export function BrowserPane({
 					)}
 				</div>
 			</div>
+			<SessionConnectModal
+				open={isConnectOpenForThisPane}
+				onOpenChange={(open) => {
+					if (!open) closeConnectModal();
+				}}
+			/>
 		</BasePaneWindow>
 	);
 }

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/components/BrowserAutomationList/BrowserAutomationList.tsx

@@ -0,0 +1,166 @@
+import { Button } from "@superset/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@superset/ui/dialog";
+import { cn } from "@superset/ui/utils";
+import { useMemo } from "react";
+import { useBrowserAutomationData } from "renderer/hooks/useBrowserAutomationData";
+import { useBrowserAutomationStore } from "renderer/stores/browser-automation";
+import { useTabsStore } from "renderer/stores/tabs/store";
+
+interface BrowserAutomationListProps {
+	workspaceId: string;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export function BrowserAutomationList({
+	workspaceId,
+	open,
+	onOpenChange,
+}: BrowserAutomationListProps) {
+	const panes = useTabsStore((s) => s.panes);
+	const tabs = useTabsStore((s) => s.tabs);
+	const setFocusedPane = useTabsStore((s) => s.setFocusedPane);
+	const setActiveTab = useTabsStore((s) => s.setActiveTab);
+	const { sessions, bindingsByPane } = useBrowserAutomationData({
+		enabled: open,
+	});
+	const openConnectModal = useBrowserAutomationStore((s) => s.openConnectModal);
+
+	const browserPanes = useMemo(() => {
+		const tabById = new Map(tabs.map((t) => [t.id, t]));
+		return Object.values(panes).filter(
+			(p) =>
+				p.type === "webview" &&
+				tabById.get(p.tabId)?.workspaceId === workspaceId,
+		);
+	}, [panes, tabs, workspaceId]);
+
+	// A binding only counts as "connected" if the bound session is still in
+	// the live session list. Stale bindings render as `Unassigned` in the
+	// row below, so summing raw bindings would show a misleading higher
+	// count.
+	const liveSessionIds = new Set(sessions.map((s) => s.id));
+	const connectedCount = browserPanes.filter((p) => {
+		const sid = bindingsByPane[p.id];
+		return sid && liveSessionIds.has(sid);
+	}).length;
+	const needsSetupCount = sessions.filter(
+		(s) => s.mcpStatus === "missing",
+	).length;
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="!max-w-[640px] sm:!max-w-[640px] p-0 gap-0 overflow-hidden">
+				<DialogHeader className="px-5 py-4 border-b">
+					<DialogTitle className="text-sm">Browser Automation</DialogTitle>
+					<DialogDescription className="text-xs">
+						All browser panes in this workspace and their bound sessions.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="p-4 grid grid-cols-3 gap-2 border-b">
+					<Metric label="Browser panes" value={browserPanes.length} />
+					<Metric label="Connected" value={connectedCount} />
+					<Metric label="Needs setup" value={needsSetupCount} />
+				</div>
+
+				<div className="max-h-[420px] overflow-y-auto p-3 flex flex-col gap-2">
+					{browserPanes.length === 0 && (
+						<div className="text-xs text-muted-foreground text-center py-8">
+							No browser panes in this workspace.
+						</div>
+					)}
+					{browserPanes.map((pane) => {
+						const sessionId = bindingsByPane[pane.id];
+						const session = sessionId
+							? (sessions.find((s) => s.id === sessionId) ?? null)
+							: null;
+						const url = pane.browser?.currentUrl ?? pane.url ?? "about:blank";
+						return (
+							<div
+								key={pane.id}
+								className={cn(
+									"rounded-xl border p-3 bg-card/60",
+									session && "border-brand/30 bg-brand/5",
+								)}
+							>
+								<div className="flex items-start justify-between gap-3">
+									<div className="min-w-0">
+										<div className="text-xs font-semibold truncate">
+											{pane.userTitle || pane.name}
+										</div>
+										<div className="text-[11px] text-muted-foreground truncate">
+											{url}
+										</div>
+									</div>
+									<span
+										className={cn(
+											"shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider",
+											session
+												? "bg-emerald-500/15 text-emerald-300"
+												: "bg-muted text-muted-foreground",
+										)}
+									>
+										{session ? "Connected" : "Unassigned"}
+									</span>
+								</div>
+								<div className="mt-2 text-[11px] text-muted-foreground">
+									{session
+										? `${session.displayName} · ${session.provider} · ${session.mcpStatus === "ready" ? "MCP ready" : "MCP missing"}`
+										: "Pick any running LLM session"}
+								</div>
+								<div className="mt-3 flex gap-2">
+									<Button
+										size="sm"
+										variant="outline"
+										onClick={() => {
+											setActiveTab(workspaceId, pane.tabId);
+											setFocusedPane(pane.tabId, pane.id);
+											onOpenChange(false);
+										}}
+									>
+										Focus
+									</Button>
+									<Button
+										size="sm"
+										onClick={() => {
+											// SessionConnectModal is rendered inside each
+											// BrowserPane (gated by isConnectOpenForThisPane), so
+											// it only mounts when the owning tab/pane is active.
+											// Activate the target before opening the modal, or the
+											// dialog never appears if the pane lives on another
+											// tab.
+											setActiveTab(workspaceId, pane.tabId);
+											setFocusedPane(pane.tabId, pane.id);
+											openConnectModal(pane.id, sessionId);
+											onOpenChange(false);
+										}}
+									>
+										{session ? "Change" : "Connect"}
+									</Button>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function Metric({ label, value }: { label: string; value: number }) {
+	return (
+		<div className="rounded-lg bg-muted/40 p-3">
+			<div className="text-xl font-bold tabular-nums">{value}</div>
+			<div className="mt-1 text-[10px] uppercase tracking-wider text-muted-foreground">
+				{label}
+			</div>
+		</div>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/components/BrowserAutomationList/index.ts

@@ -0,0 +1 @@
+export { BrowserAutomationList } from "./BrowserAutomationList";