Replace browser mode with entity focus system

src/main/app-control-server.ts

@@ -14,7 +14,7 @@ import {
   endAutomationInteractiveFrame,
   sendInteractiveState,
 } from './runtime/overlay-manager'
-import { boundIsFillBrowserPage } from './runtime/runtime-geometry'
+import { boundIsFocusFillFrame } from './runtime/runtime-geometry'
 import {
   activeSessions,
   resolveSession,
@@ -583,9 +583,9 @@ export async function startAppControlServer(): Promise<void> {
           // Snapshot scale on mousePressed; reuse for mouseReleased so a
           // mid-click zoom change doesn't split the pair across scales.
           if (cdpType === 'mousePressed') {
-            clickEmulationScale = boundIsFillBrowserPage(page) ? 1 : getZoom()
+            clickEmulationScale = boundIsFocusFillFrame(page) ? 1 : getZoom()
           }
-          const emulationScale = clickEmulationScale ?? (boundIsFillBrowserPage(page) ? 1 : getZoom())
+          const emulationScale = clickEmulationScale ?? (boundIsFocusFillFrame(page) ? 1 : getZoom())
           if (cdpType === 'mouseReleased') {
             clickEmulationScale = null
           }

src/main/ipc/register-canvas-ipc.ts

@@ -18,15 +18,14 @@ import { saveImageBuffer } from '../runtime/image-assets'
 import { imageSizeFromBuffer } from '../runtime/image-sizing'
 import {
   cancelPendingPlacement,
+  clearFocus,
   focusSelectedPage,
   getSelectedEntityIds,
-  selectBrowserTab,
   selectEntity,
   selectPage,
   selectPageById,
   selectedPageId,
-  setBrowserMode,
-  setCanvasMode,
+  setFocus,
   setSelectedEntities,
 } from '../runtime/ui-actions'
 import {
@@ -50,10 +49,8 @@ import {
   setActiveWorkspaceTab,
   setWorkspaceTabExpanded,
 } from '../runtime/workspace-session'
-import {
-  setFrameBrowserSizeMode,
-  type BrowserSizeMode,
-} from '../runtime/runtime-entities'
+import { setFrameSizeMode } from '../runtime/runtime-entities'
+import type { FrameSizeMode } from '../../shared/types'
 import { createEdges, deleteEdges } from '../workspace-edges'
 import { selectEntitiesInRect } from '../workspace-entities'
 import { createFileEntity } from '../runtime/document-commands'
@@ -152,34 +149,27 @@ export function registerCanvasIpc(): void {
     }
   })
 
-  // --- Browser mode ---
+  // --- Focus ---
+
+  ipcMain.on('canvas-set-focus', (_event, { entityId, entityKind }: { entityId: string; entityKind: CanvasEntityKind }) => {
+    setFocus(entityId, entityKind)
+  })
 
-  ipcMain.on('canvas-select-browser-tab', (_event, { frameId }: { frameId: string }) => {
-    selectBrowserTab(frameId)
+  ipcMain.on('canvas-clear-focus', () => {
+    clearFocus()
   })
 
   ipcMain.on(
-    'canvas-set-browser-size-mode',
-    (_event, { frameId, mode }: { frameId: string; mode: BrowserSizeMode }) => {
+    'canvas-set-frame-size-mode',
+    (_event, { frameId, mode }: { frameId: string; mode: FrameSizeMode }) => {
       const page = pages.find((candidate) => candidate.id === frameId)
       if (!page) return
-      page.metadata = setFrameBrowserSizeMode(page.metadata, mode)
+      page.metadata = setFrameSizeMode(page.metadata, mode)
       scheduleWorkspaceAutosave()
       layoutAllViews()
     },
   )
 
-  ipcMain.on(
-    'canvas-set-browser-mode',
-    (_event, { mode }: { mode: 'canvas' | 'browser' }) => {
-      if (mode === 'browser') {
-        setBrowserMode()
-        return
-      }
-      setCanvasMode()
-    },
-  )
-
   // --- Tab management ---
 
   ipcMain.on('canvas-select-tab', (_event, { tabId }: { tabId: string }) => {

src/main/ipc/register-toolbar-ipc.ts

@@ -12,29 +12,27 @@ import {
 } from '../runtime/surface-layout'
 import {
   cancelPendingPlacement,
+  clearFocus,
   clearToolMode,
   focusSelectedPage,
   getSelectedEntityIds,
   openInspectPanel,
   selectedPageId,
+  setFocus,
   startPendingPlacement,
   toggleAnnotateMode,
-  toggleBrowserMode,
   toggleLeftSidebar,
   toggleDevTools,
   toggleDrawMode,
   toggleRegionSelectMode,
   toggleInspectMode,
 } from '../runtime/ui-actions'
 import { endDevtoolsResize, setDevtoolsWidthFromScreenX } from '../runtime/window-shell'
-import { selectBrowserTab } from '../runtime/runtime-core'
-import { findPageById, setPendingFocus } from '../runtime/runtime-context'
-import { addFrameFromSource } from '../workspace-frames'
 import { applyNavigationToSelectedPages } from '../navigation-sync'
-import { workspaceViewMode as uiWorkspaceViewMode } from '../ui-state'
+import { isFocused as uiIsFocused } from '../ui-state'
 
-function recenterBrowserSelectionIfNeeded(): void {
-  if (uiWorkspaceViewMode() !== 'browser') return
+function recenterFocusIfNeeded(): void {
+  if (!uiIsFocused()) return
   focusSelectedPage()
 }
 
@@ -83,10 +81,6 @@ export function registerToolbarIpc(): void {
     applyNavigationToSelectedPages({ type: 'reload', fallbackUrl: 'about:blank' })
   })
 
-  ipcMain.on('toolbar-toggle-browser-mode', () => {
-    toggleBrowserMode()
-  })
-
   ipcMain.on('toolbar-toggle-inspect', () => {
     if (toggleInspectMode()) {
       openInspectPanel()
@@ -111,7 +105,7 @@ export function registerToolbarIpc(): void {
 
   ipcMain.on('toggle-devtools', () => {
     toggleDevTools()
-    recenterBrowserSelectionIfNeeded()
+    recenterFocusIfNeeded()
   })
 
   ipcMain.on('toggle-left-sidebar', () => {
@@ -120,12 +114,12 @@ export function registerToolbarIpc(): void {
 
   ipcMain.on('devtools-resize-start', (_event, { screenX }: { screenX: number }) => {
     setDevtoolsWidthFromScreenX(screenX)
-    recenterBrowserSelectionIfNeeded()
+    recenterFocusIfNeeded()
   })
 
   ipcMain.on('devtools-resize-move', (_event, { screenX }: { screenX: number }) => {
     setDevtoolsWidthFromScreenX(screenX)
-    recenterBrowserSelectionIfNeeded()
+    recenterFocusIfNeeded()
   })
 
   ipcMain.on('devtools-resize-end', () => {
@@ -140,38 +134,12 @@ export function registerToolbarIpc(): void {
     })
   })
 
-  ipcMain.on('add-browser-frame', (_event, presetIndex: number | 'custom') => {
-    const result = addFrameFromSource({
-      presetIndex: typeof presetIndex === 'number' ? presetIndex : 0,
-      customSize: presetIndex === 'custom',
-      mode: 'add_from_toolbar',
-      focus: true,
-    })
-    selectBrowserTab(result.frameId)
-
-    // Focus the address bar after the new page finishes loading.
-    // We must wait because Chromium auto-focuses a webContents when
-    // its load completes, which would steal focus from the toolbar.
-    const page = findPageById(result.frameId)
-    if (toolbarView && page) {
-      const focusToolbar = () => {
-        if (!toolbarView) return
-        setPendingFocus({ kind: 'toolbar' })
-        requestLayout()
-        toolbarView.webContents.send('focus-address-bar')
-      }
-      const wc = page.pageView.webContents
-      if (wc.isLoading()) {
-        const onDestroyed = () => wc.removeListener('did-finish-load', focusToolbar)
-        wc.once('destroyed', onDestroyed)
-        wc.once('did-finish-load', () => {
-          wc.removeListener('destroyed', onDestroyed)
-          focusToolbar()
-        })
-      } else {
-        focusToolbar()
-      }
-    }
+  ipcMain.on('canvas-bg-set-focus', (_event, { entityId, entityKind }: { entityId: string; entityKind: import('../../shared/types').CanvasEntityKind }) => {
+    setFocus(entityId, entityKind)
+  })
+
+  ipcMain.on('canvas-bg-clear-focus', () => {
+    clearFocus()
   })
 
   ipcMain.on('cancel-pending-placement', () => {

src/main/routes/session.ts

@@ -27,15 +27,15 @@ import {
 } from '../runtime/runtime-context'
 import { selectNone as clearSelection } from '../runtime/selection-controller'
 import { sendInteractiveState } from '../runtime/overlay-manager'
-import { setCanvasMode as setUiCanvasMode } from '../ui-state'
+import { clearFocus as setUiClearFocus } from '../ui-state'
 import { writeJson, notifyStatusListeners } from '../app-control-server'
 
 function resetSmokeTestState(): void {
   resetPresenceState()
   resetCdpProxyState()
   clearAutomationInteractiveFrameIds()
   clearSelection()
-  setUiCanvasMode()
+  setUiClearFocus()
   sendInteractiveState()
 }
 

src/main/runtime/app-menu.ts

@@ -1,8 +1,8 @@
 import { app, dialog, Menu } from 'electron'
 import { deleteFrames } from '../workspace-entities'
 import { pages, selectedPageId } from './runtime-context'
-import { workspaceViewMode } from '../ui-state'
-import { selectBrowserTab } from './runtime-core'
+import { focusedFrameId } from '../ui-state'
+import { setFocus } from './selection-state'
 import { checkForUpdatesManually } from '../auto-updater'
 import { showOnboardingWindow } from '../onboarding-window'
 import {
@@ -81,19 +81,19 @@ function buildTemplate(): Electron.MenuItemConstructorOptions[] {
             const frameId = selectedPageId()
             if (!frameId) return
 
-            const isBrowser = workspaceViewMode() === 'browser'
-            let nextTabId: string | null = null
-
-            if (isBrowser) {
+            // If we're focused on this frame, find a neighbor so we can switch focus after delete
+            const isFocusedOnThisFrame = focusedFrameId() === frameId
+            let nextFrameId: string | null = null
+            if (isFocusedOnThisFrame) {
               const idx = pages.findIndex((p) => p.id === frameId)
               const next = pages[idx + 1] ?? pages[idx - 1] ?? null
-              nextTabId = next?.id ?? null
+              nextFrameId = next?.id ?? null
             }
 
             deleteFrames({ frameIds: [frameId] })
 
-            if (isBrowser && nextTabId) {
-              selectBrowserTab(nextTabId)
+            if (isFocusedOnThisFrame && nextFrameId) {
+              setFocus(nextFrameId, 'frame')
             }
           },
         },