Browser updates

Author: Sg312

apps/desktop/scripts/install-local.ts

@@ -98,7 +98,20 @@ if (originFlags.length > 1) {
 }
 
 console.log('• Packaging the app from the current checkout…')
-run('bun', ['run', 'package:dir'])
+run('bun', ['run', 'build'])
+// Same as package:dir, minus trusted timestamps: codesign's --timestamp does
+// a network round trip to Apple PER FILE (hundreds inside the Electron
+// framework), which turns local signing into a multi-minute stall. Local
+// installs don't need timestamped signatures — only notarized distribution
+// builds do.
+run('bunx', [
+  'electron-builder',
+  '--mac',
+  'dir',
+  '--publish',
+  'never',
+  '-c.mac.timestamp=none',
+])
 
 const builtApp = RELEASE_DIRS.map((dir) => join(dir, APP_NAME)).find(existsSync)
 if (!builtApp) {

apps/desktop/src/main/browser-agent/cdp.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('electron', () => import('@/test/electron-mock'))
+
+import { WebContentsView } from 'electron'
+import { setColorScheme } from '@/main/browser-agent/cdp'
+
+describe('browser-agent CDP theme', () => {
+  it('emulates explicit light and dark preferences', async () => {
+    const contents = new WebContentsView().webContents
+
+    await setColorScheme(contents, 'dark')
+    await setColorScheme(contents, 'light')
+
+    expect(vi.mocked(contents.debugger.sendCommand).mock.calls).toEqual([
+      [
+        'Emulation.setEmulatedMedia',
+        { features: [{ name: 'prefers-color-scheme', value: 'dark' }] },
+      ],
+      [
+        'Emulation.setEmulatedMedia',
+        { features: [{ name: 'prefers-color-scheme', value: 'light' }] },
+      ],
+    ])
+  })
+
+  it('clears the override for the system preference', async () => {
+    const contents = new WebContentsView().webContents
+
+    await setColorScheme(contents, 'system')
+
+    expect(contents.debugger.sendCommand).toHaveBeenCalledWith('Emulation.setEmulatedMedia', {
+      features: [],
+    })
+  })
+})

apps/desktop/src/main/browser-agent/cdp.ts

@@ -8,6 +8,7 @@
  * movement, character insertion) and is honored by code editors. The user
  * sees and drives the real embedded page, so there is no screencast.
  */
+import type { BrowserTheme } from '@sim/browser-protocol'
 import { createLogger } from '@sim/logger'
 import type { WebContents } from 'electron'
 
@@ -60,6 +61,16 @@ export async function ensureInstrumented(contents: WebContents, cb: CdpCallbacks
   await send(contents, 'Page.setInterceptFileChooserDialog', { enabled: true }).catch(() => {})
 }
 
+/**
+ * Mirrors Sim's theme into the page's `prefers-color-scheme` media query.
+ * `system` removes the per-tab override so Chromium continues following the OS.
+ */
+export async function setColorScheme(contents: WebContents, theme: BrowserTheme): Promise<void> {
+  await send(contents, 'Emulation.setEmulatedMedia', {
+    features: theme === 'system' ? [] : [{ name: 'prefers-color-scheme', value: theme }],
+  })
+}
+
 function handleDebuggerEvent(
   contents: WebContents,
   method: string,

apps/desktop/src/main/browser-agent/driver.ts

@@ -15,7 +15,12 @@
  * is bounded by a watchdog so the Sim side always gets a response instead of
  * waiting out its own timeout against silence.
  */
-import type { BrowserPageState, BrowserPanelAction, BrowserToolName } from '@sim/browser-protocol'
+import type {
+  BrowserPageState,
+  BrowserPanelAction,
+  BrowserTabsState,
+  BrowserToolName,
+} from '@sim/browser-protocol'
 import { createLogger } from '@sim/logger'
 import type { BrowserWindow, WebContents } from 'electron'
 import * as cdp from '@/main/browser-agent/cdp'
@@ -54,6 +59,7 @@ const TOOL_WATCHDOG_MS = 150_000
 
 export interface DriverCallbacks {
   onPageState: (state: BrowserPageState) => void
+  onTabsState: (state: BrowserTabsState) => void
   onSessionStatus: (alive: boolean) => void
 }
 
@@ -79,8 +85,9 @@ function recordNotice(notice: string): void {
 let takeoverActive = false
 let takeoverDone = false
 
-function pageStateFor(contents: WebContents): BrowserPageState {
+function pageStateFor(contents: WebContents, tabId: string): BrowserPageState {
   return {
+    tabId,
     url: contents.getURL(),
     title: contents.getTitle(),
     loading: contents.isLoading(),
@@ -91,8 +98,13 @@ function pageStateFor(contents: WebContents): BrowserPageState {
 
 function pushPageState(contents: WebContents): void {
   if (contents.isDestroyed()) return
-  if (session.activeTab()?.view.webContents !== contents) return
-  driverCallbacks?.onPageState(pageStateFor(contents))
+  const active = session.activeTab()
+  if (active?.view.webContents !== contents) return
+  driverCallbacks?.onPageState(pageStateFor(contents, active.id))
+}
+
+function pushTabsState(): void {
+  driverCallbacks?.onTabsState(session.getTabsState())
 }
 
 /** Instruments a fresh tab: CDP dialog/chooser handling + page-state pushes. */
@@ -111,6 +123,7 @@ function instrumentTab(contents: WebContents): void {
         )
       },
     })
+    .then(() => cdp.setColorScheme(contents, session.getBrowserTheme()))
     .catch((error) => {
       logger.warn('CDP instrumentation failed', {
         error: error instanceof Error ? error.message : String(error),
@@ -123,7 +136,10 @@ function instrumentTab(contents: WebContents): void {
     'did-start-loading',
     'did-stop-loading',
   ] as const) {
-    contents.on(event as 'did-navigate', () => pushPageState(contents))
+    contents.on(event as 'did-navigate', () => {
+      pushPageState(contents)
+      pushTabsState()
+    })
   }
   driverCallbacks?.onSessionStatus(true)
 }
@@ -140,6 +156,14 @@ export function initDriver(
       },
       onTabCreated: instrumentTab,
       onActiveTabChanged: pushPageState,
+      onTabsChanged: pushTabsState,
+      onTabThemeChanged: (contents, theme) => {
+        void cdp.setColorScheme(contents, theme).catch((error) => {
+          logger.warn('Could not update browser tab theme', {
+            error: error instanceof Error ? error.message : String(error),
+          })
+        })
+      },
       onDownloadBlocked: (filename) => {
         recordNotice(
           `The page tried to download "${filename}"; downloads are not supported in the agent browser, so it was blocked.`
@@ -380,7 +404,7 @@ async function executeToolInner(
     }
 
     case 'browser_list_tabs': {
-      return { tabs: session.listTabs() }
+      return session.getTabsState()
     }
 
     case 'browser_wait_for': {
@@ -605,6 +629,10 @@ export async function executeTool(
   }
 }
 
+export function getTabsState(): BrowserTabsState {
+  return session.getTabsState()
+}
+
 /** Browser-chrome commands from the panel header; fire-and-forget. */
 export async function handlePanelAction(action: BrowserPanelAction): Promise<void> {
   // The Done chip on the chat's takeover tool row: hands control back to the
@@ -623,6 +651,22 @@ export async function handlePanelAction(action: BrowserPanelAction): Promise<voi
     }
     return
   }
+  if (action.action === 'new-tab') {
+    session.addTab()
+    return
+  }
+  if (action.action === 'switch-tab') {
+    if (typeof action.tabId === 'string') {
+      session.switchTab(action.tabId)
+    }
+    return
+  }
+  if (action.action === 'close-tab') {
+    if (typeof action.tabId === 'string') {
+      session.closeTab(action.tabId)
+    }
+    return
+  }
   const tab = session.activeTab()
   if (!tab) return
   const contents = tab.view.webContents

apps/desktop/src/main/browser-agent/session.test.ts

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 vi.mock('electron', () => import('@/test/electron-mock'))
 
+import { MAX_BROWSER_TABS } from '@sim/browser-protocol'
 import { BrowserWindow } from 'electron'
 
 type SessionModule = typeof import('@/main/browser-agent/session')
@@ -15,7 +16,9 @@ interface MockView {
     setWindowOpenHandler: ReturnType<typeof vi.fn>
     loadURL: ReturnType<typeof vi.fn>
     setBackgroundThrottling: ReturnType<typeof vi.fn>
+    capturePage: ReturnType<typeof vi.fn>
   }
+  setBackgroundColor: ReturnType<typeof vi.fn>
   setBounds: ReturnType<typeof vi.fn>
   setVisible: ReturnType<typeof vi.fn>
 }
@@ -32,15 +35,21 @@ function mainWindowMock() {
   return win as unknown as BrowserWindow
 }
 
-async function freshSession(win: BrowserWindow | null): Promise<SessionModule> {
+async function freshSession(
+  win: BrowserWindow | null,
+  eventOverrides: Partial<import('@/main/browser-agent/session').AgentSessionEvents> = {}
+): Promise<SessionModule> {
   vi.resetModules()
   const session = await import('@/main/browser-agent/session')
   session.initSession(
     {
       onSessionClosed: vi.fn(),
       onTabCreated: vi.fn(),
       onActiveTabChanged: vi.fn(),
+      onTabsChanged: vi.fn(),
+      onTabThemeChanged: vi.fn(),
       onDownloadBlocked: vi.fn(),
+      ...eventOverrides,
     },
     () => win
   )
@@ -76,6 +85,32 @@ describe('browser-agent session', () => {
     expect(contents.setBackgroundThrottling).toHaveBeenLastCalledWith(true)
   })
 
+  it('updates the native backdrop when Sim changes browser theme', () => {
+    const tab = session.ensureTab()
+    const view = tab.view as unknown as MockView
+
+    session.setBrowserTheme('dark')
+    expect(session.getBrowserTheme()).toBe('dark')
+    expect(view.setBackgroundColor).toHaveBeenLastCalledWith('#0c0c0c')
+
+    session.setBrowserTheme('light')
+    expect(view.setBackgroundColor).toHaveBeenLastCalledWith('#ffffff')
+  })
+
+  it('propagates theme changes to every existing tab', async () => {
+    const onTabThemeChanged = vi.fn()
+    const themedSession = await freshSession(win, { onTabThemeChanged })
+    const first = themedSession.ensureTab()
+    const second = themedSession.addTab()
+
+    themedSession.setBrowserTheme('dark')
+
+    expect(onTabThemeChanged.mock.calls).toEqual([
+      [first.view.webContents, 'dark'],
+      [second.view.webContents, 'dark'],
+    ])
+  })
+
   it('requireTab refuses when no page is open yet', () => {
     expect(() => session.requireTab()).toThrow(/No page is open yet/)
   })
@@ -98,6 +133,18 @@ describe('browser-agent session', () => {
     expect(() => session.closeTab('999')).toThrow(/No tab with id 999/)
   })
 
+  it('limits the browser session to five open tabs', () => {
+    session.ensureTab()
+    for (let index = 1; index < MAX_BROWSER_TABS; index++) {
+      session.addTab()
+    }
+
+    expect(session.listTabs()).toHaveLength(MAX_BROWSER_TABS)
+    expect(() => session.addTab()).toThrow(
+      `The browser supports up to ${MAX_BROWSER_TABS} open tabs.`
+    )
+  })
+
   it('embeds the active view in the MAIN window only while panel bounds are reported', () => {
     const tab = session.ensureTab()
     const view = tab.view as unknown as MockView
@@ -136,7 +183,37 @@ describe('browser-agent session', () => {
     })
   })
 
-  it('hardens every tab: agent partition default-denies permissions and popups collapse into the same view', () => {
+  it('keeps an occluded view attached, captures its frame, and toggles visibility', async () => {
+    const tab = session.ensureTab()
+    const view = tab.view as unknown as MockView
+    const content = (
+      win as unknown as {
+        contentView: {
+          addChildView: ReturnType<typeof vi.fn>
+          removeChildView: ReturnType<typeof vi.fn>
+        }
+      }
+    ).contentView
+    session.setPanelBounds({ x: 100, y: 50, width: 800, height: 600 })
+    content.removeChildView.mockClear()
+    view.setVisible.mockClear()
+
+    session.setPanelOccluded(true)
+
+    expect(content.removeChildView).not.toHaveBeenCalled()
+    expect(view.setVisible).toHaveBeenLastCalledWith(false)
+    await vi.waitFor(() => {
+      expect(win.webContents.send).toHaveBeenCalledWith('browser-agent:panel-snapshot', {
+        dataUrl: 'data:image/png;base64,c2lt',
+        tabId: tab.id,
+      })
+    })
+
+    session.setPanelOccluded(false)
+    expect(view.setVisible).toHaveBeenLastCalledWith(true)
+  })
+
+  it('hardens every tab and keeps http popups inside a new internal tab', () => {
     const tab = session.ensureTab()
     const contents = (tab.view as unknown as MockView).webContents
     expect(contents.session.setPermissionRequestHandler).toHaveBeenCalled()
@@ -146,7 +223,11 @@ describe('browser-agent session', () => {
       url: string
     }) => { action: string }
     expect(openHandler({ url: 'https://example.com/popup' })).toEqual({ action: 'deny' })
-    expect(contents.loadURL).toHaveBeenCalledWith('https://example.com/popup')
+    expect(session.listTabs()).toHaveLength(2)
+    const popupContents = (session.activeTab()?.view as unknown as MockView | undefined)
+      ?.webContents
+    expect(popupContents?.loadURL).toHaveBeenCalledWith('https://example.com/popup')
+    expect(contents.loadURL).not.toHaveBeenCalledWith('https://example.com/popup')
     // Non-http(s) popups are denied without navigating anywhere.
     contents.loadURL.mockClear()
     expect(openHandler({ url: 'file:///etc/passwd' })).toEqual({ action: 'deny' })