feat(desktop): add focus debug toggle (#37465)

packages/desktop/src/main/debug.ts

@@ -0,0 +1,95 @@
+import type { WebContents } from "electron"
+
+const focusDebuggerOwners = new WeakSet<WebContents>()
+const forcedFocusNodes = new WeakMap<WebContents, number[]>()
+const focusableSelector = `
+  a[href],
+  button:not([disabled]),
+  input:not([disabled]),
+  select:not([disabled]),
+  textarea:not([disabled]),
+  summary,
+  [contenteditable="true"],
+  [tabindex]:not([tabindex="-1"])
+`
+
+export async function setForceFocus(contents: WebContents, enabled: boolean) {
+  const debuggerApi = contents.debugger
+  if (!debuggerApi.isAttached()) {
+    if (!enabled) {
+      focusDebuggerOwners.delete(contents)
+      forcedFocusNodes.delete(contents)
+      return
+    }
+    debuggerApi.attach("1.3")
+    focusDebuggerOwners.add(contents)
+    debuggerApi.once("detach", () => {
+      focusDebuggerOwners.delete(contents)
+      forcedFocusNodes.delete(contents)
+    })
+  }
+
+  if (!enabled) {
+    await Promise.allSettled(
+      (forcedFocusNodes.get(contents) ?? []).map((nodeId) =>
+        debuggerApi.sendCommand("CSS.forcePseudoState", {
+          nodeId,
+          forcedPseudoClasses: [],
+        }),
+      ),
+    )
+    forcedFocusNodes.delete(contents)
+    if (!focusDebuggerOwners.delete(contents)) return
+    debuggerApi.detach()
+    return
+  }
+
+  await debuggerApi.sendCommand("DOM.enable")
+  await debuggerApi.sendCommand("CSS.enable")
+  const document: unknown = await debuggerApi.sendCommand("DOM.getDocument", {
+    depth: -1,
+    pierce: true,
+  })
+  const nodes: unknown = await debuggerApi.sendCommand("DOM.querySelectorAll", {
+    nodeId: readDocumentNodeId(document),
+    selector: focusableSelector,
+  })
+  const nodeIds = readNodeIds(nodes)
+  forcedFocusNodes.set(contents, [...new Set([...(forcedFocusNodes.get(contents) ?? []), ...nodeIds])])
+  await Promise.allSettled(
+    nodeIds.map((nodeId) =>
+      debuggerApi.sendCommand("CSS.forcePseudoState", {
+        nodeId,
+        forcedPseudoClasses: ["focus", "focus-visible"],
+      }),
+    ),
+  )
+}
+
+function readDocumentNodeId(value: unknown) {
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !("root" in value) ||
+    !value.root ||
+    typeof value.root !== "object" ||
+    !("nodeId" in value.root) ||
+    typeof value.root.nodeId !== "number"
+  ) {
+    throw new Error("Invalid DOM.getDocument response")
+  }
+  return value.root.nodeId
+}
+
+function readNodeIds(value: unknown) {
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !("nodeIds" in value) ||
+    !Array.isArray(value.nodeIds) ||
+    !value.nodeIds.every((nodeId) => typeof nodeId === "number")
+  ) {
+    throw new Error("Invalid DOM.querySelectorAll response")
+  }
+  return value.nodeIds
+}

packages/desktop/src/main/ipc.ts

@@ -7,6 +7,7 @@ import type { DesktopMenuAction } from "@opencode-ai/app/desktop-menu"
 
 import type { FatalRendererError, ServerReadyData, TitlebarTheme } from "../preload/types"
 import { runDesktopMenuAction } from "./desktop-menu-actions"
+import { setForceFocus } from "./debug"
 import { assertAttachmentBudget, createPickedFileAuthorizations } from "./attachment-picker"
 import { getStore, removeStoreFileIfEmpty } from "./store"
 import { getPinchZoomEnabled, getWindowID, setPinchZoomEnabled, setTitlebar, updateTitlebar } from "./windows"
@@ -81,6 +82,9 @@ export function registerIpcHandlers(deps: Deps) {
   ipcMain.handle("updater-install", () => deps.updater.install())
   ipcMain.handle("set-background-color", (_event: IpcMainInvokeEvent, color: string) => deps.setBackgroundColor(color))
   ipcMain.handle("export-debug-logs", () => deps.exportDebugLogs())
+  ipcMain.handle("set-force-focus", (event: IpcMainInvokeEvent, enabled: boolean) =>
+    setForceFocus(event.sender, enabled),
+  )
   ipcMain.handle("record-fatal-renderer-error", (_event: IpcMainInvokeEvent, error: FatalRendererError) =>
     deps.recordFatalRendererError(error),
   )

packages/desktop/src/preload/index.ts

@@ -121,6 +121,7 @@ const api: ElectronAPI = {
   runDesktopMenuAction: (action) => ipcRenderer.invoke("run-desktop-menu-action", action),
   setBackgroundColor: (color: string) => ipcRenderer.invoke("set-background-color", color),
   exportDebugLogs: () => ipcRenderer.invoke("export-debug-logs"),
+  setForceFocus: (enabled) => ipcRenderer.invoke("set-force-focus", enabled),
   recordFatalRendererError: (error) => ipcRenderer.invoke("record-fatal-renderer-error", error),
 }
 

packages/desktop/src/preload/types.ts

@@ -104,5 +104,6 @@ export type ElectronAPI = {
   runDesktopMenuAction: (action: DesktopMenuAction) => Promise<void>
   setBackgroundColor: (color: string) => Promise<void>
   exportDebugLogs: () => Promise<string>
+  setForceFocus: (enabled: boolean) => Promise<void>
   recordFatalRendererError: (error: FatalRendererError) => Promise<void>
 }

packages/desktop/src/renderer/index.tsx

@@ -240,6 +240,8 @@ const createPlatform = (windowState: DesktopWindowState): Platform => {
 
     exportDebugLogs: () => window.api.exportDebugLogs(),
 
+    setForceFocus: (enabled) => window.api.setForceFocus(enabled),
+
     recordFatalRendererError: (error) => window.api.recordFatalRendererError(error),
 
     restart: async () => {