fix(desktop): reduce hidden panel background work

Author: Sg312

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

@@ -119,8 +119,22 @@ function pushPageState(contents: WebContents): void {
   driverCallbacks?.onPageState(pageStateFor(contents, active.id))
 }
 
+let lastTabsStateFingerprint: string | null = null
+
+/**
+ * Pushes the tab list to the renderer, skipping a push identical to the last.
+ *
+ * Every tab's load and title events call this, background tabs included, and a
+ * site that rewrites its title on a timer fires them continuously — each an
+ * unconditional broadcast that rebuilt the whole strip. The fingerprint drops
+ * the repeats, matching what the terminal side already does with emitTabs.
+ */
 function pushTabsState(): void {
-  driverCallbacks?.onTabsState(session.getTabsState())
+  const state = session.getTabsState()
+  const fingerprint = JSON.stringify(state)
+  if (fingerprint === lastTabsStateFingerprint) return
+  lastTabsStateFingerprint = fingerprint
+  driverCallbacks?.onTabsState(state)
 }
 
 /** Instruments a fresh tab: CDP dialog/chooser handling + page-state pushes. */

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

@@ -235,15 +235,42 @@ describe('browser-agent session', () => {
     expect(session.closeFocusedTab()).toBe(true)
   })
 
-  it('only disables hidden-page throttling while browser automation is active', () => {
-    const tab = session.ensureTab()
-    const contents = (tab.view as unknown as MockView).webContents
+  it('unthrottles only the active tab while automation is active', () => {
+    const active = session.ensureTab()
+    const activeContents = (active.view as unknown as MockView).webContents
+    const background = session.addTab()
+    const backgroundContents = (background.view as unknown as MockView).webContents
+    // addTab activated the second tab; put focus back on the first.
+    session.switchTab(active.id)
+    activeContents.setBackgroundThrottling.mockClear()
+    backgroundContents.setBackgroundThrottling.mockClear()
 
     session.setAutomationActive(true)
-    expect(contents.setBackgroundThrottling).toHaveBeenLastCalledWith(false)
+    // The waking is scoped to the active tab; the background tab stays throttled.
+    expect(activeContents.setBackgroundThrottling).toHaveBeenLastCalledWith(false)
+    expect(backgroundContents.setBackgroundThrottling).toHaveBeenLastCalledWith(true)
 
     session.setAutomationActive(false)
-    expect(contents.setBackgroundThrottling).toHaveBeenLastCalledWith(true)
+    expect(activeContents.setBackgroundThrottling).toHaveBeenLastCalledWith(true)
+  })
+
+  it('moves the automation exemption to whichever tab becomes active', () => {
+    const first = session.ensureTab()
+    const second = session.addTab()
+    session.switchTab(first.id)
+    const firstContents = (first.view as unknown as MockView).webContents
+    const secondContents = (second.view as unknown as MockView).webContents
+
+    session.setAutomationActive(true)
+    firstContents.setBackgroundThrottling.mockClear()
+    secondContents.setBackgroundThrottling.mockClear()
+
+    session.switchTab(second.id)
+
+    // The old active tab is re-throttled, the new one exempted — otherwise a
+    // mid-tool switch would strand the wake on a tab the agent left behind.
+    expect(firstContents.setBackgroundThrottling).toHaveBeenLastCalledWith(true)
+    expect(secondContents.setBackgroundThrottling).toHaveBeenLastCalledWith(false)
   })
 
   it('updates the native backdrop when Sim changes browser theme', () => {

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

@@ -291,9 +291,10 @@ function createTabView(): WebContentsView {
       sandbox: true,
       webSecurity: true,
       webviewTag: false,
-      // Visible pages remain full speed. Hidden pages may be throttled unless
-      // a browser tool is actively waiting on them.
-      backgroundThrottling: !automationActive,
+      // Throttled by default: a hidden tab should idle. The one exception is
+      // the active tab while a tool waits on it, applied explicitly by
+      // applyActiveTabThrottling — never blanket across every tab.
+      backgroundThrottling: true,
       spellcheck: false,
     },
   })
@@ -383,15 +384,33 @@ export function hasSession(): boolean {
 }
 
 /**
- * Keeps hidden pages responsive during an agent action, then returns them to
- * Chromium's normal background throttling so they cannot contend with Sim.
+ * Keeps the ACTIVE tab responsive during an agent action, then returns it to
+ * normal background throttling.
+ *
+ * Only the active tab, deliberately. The agent drives one tab at a time — the
+ * active one — possibly while the panel is hidden and even that view is
+ * detached, so it is the only tab that must not be throttled mid-tool. Waking
+ * every tab, as this once did, meant an agent run kept all N-1 background
+ * renderers at full speed for the length of the run, which is the browser
+ * side of the multi-tab lag. Nothing depends on a background tab staying
+ * awake: switching to one activates it (and re-applies this) before any tool
+ * touches it, and network loading is not throttled anyway.
  */
 export function setAutomationActive(active: boolean): void {
   automationActive = active
+  applyActiveTabThrottling()
+}
+
+/**
+ * Unthrottles the active tab while automation is active, and throttles every
+ * other tab. Call after anything that changes which tab is active, so the
+ * exemption follows the active tab rather than being stranded on the old one.
+ */
+function applyActiveTabThrottling(): void {
   for (const tab of tabs) {
-    if (!tab.view.webContents.isDestroyed()) {
-      tab.view.webContents.setBackgroundThrottling(!active)
-    }
+    if (tab.view.webContents.isDestroyed()) continue
+    const exempt = automationActive && tab.id === activeTabId
+    tab.view.webContents.setBackgroundThrottling(!exempt)
   }
 }
 
@@ -482,6 +501,7 @@ function addTabInternal({
   }
   if (activate || activeTabId === null) {
     activeTabId = tab.id
+    applyActiveTabThrottling()
     layout()
     if (transferBrowserFocus) focusedBrowserTabId = tab.id
     if (notify) events?.onActiveTabChanged(tab.view.webContents)
@@ -563,6 +583,9 @@ export function switchTab(tabId: string): AgentTab {
   const transferBrowserFocus =
     focusedBrowserTabId !== null || tabs.some((entry) => entry.view.webContents.isFocused())
   activeTabId = tab.id
+  // The automation exemption follows the active tab, so a mid-tool switch
+  // unthrottles the new one and re-throttles the old.
+  applyActiveTabThrottling()
   layout()
   if (transferBrowserFocus) focusedBrowserTabId = tab.id
   events?.onActiveTabChanged(tab.view.webContents)

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-panel-occlusion.ts

@@ -75,12 +75,26 @@ function mutationTouchesOverlay(mutation: MutationRecord): boolean {
  * Mutation and resize observers keep the tracked overlay set current, while
  * captured scroll handles poppers moving without changing their own DOM.
  */
-export function useBrowserPanelOcclusion(hostRef: RefObject<HTMLElement | null>): boolean {
+export function useBrowserPanelOcclusion(
+  hostRef: RefObject<HTMLElement | null>,
+  visible: boolean
+): boolean {
   const [occluded, setOccluded] = useState(false)
 
   useEffect(() => {
     const host = hostRef.current
     if (!host) return
+    // Occlusion of a hidden panel is meaningless — there is no native view on
+    // screen to be covered — so none of the machinery below runs while hidden.
+    // That machinery is a document-body MutationObserver plus capture-phase
+    // scroll/resize listeners, which otherwise fire on every DOM change and
+    // scroll anywhere in the app (the chat transcript streaming, most of all)
+    // for a panel nobody can see.
+    if (!visible) {
+      setOccluded(false)
+      resetBrowserPanelOcclusion()
+      return
+    }
 
     let disposed = false
     let checkQueued = false
@@ -154,7 +168,7 @@ export function useBrowserPanelOcclusion(hostRef: RefObject<HTMLElement | null>)
       window.removeEventListener('scroll', scheduleOcclusionCheck, true)
       resetBrowserPanelOcclusion()
     }
-  }, [hostRef])
+  }, [hostRef, visible])
 
   return occluded
 }

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx

@@ -110,7 +110,7 @@ function describeAnchor(panel: HTMLElement | null): BrowserPanelAnchor | null {
   }
 }
 
-export function BrowserSession() {
+export function BrowserSession({ visible }: { visible: boolean }) {
   const { theme } = useTheme()
   const pageState = useBrowserSessionStore((state) => state.pageState)
   const tabs = useBrowserSessionStore((state) => state.tabs)
@@ -123,7 +123,7 @@ export function BrowserSession() {
   const panelRef = useRef<HTMLDivElement>(null)
   const hostRef = useRef<HTMLDivElement>(null)
   const urlInputRef = useRef<HTMLInputElement>(null)
-  const panelOccluded = useBrowserPanelOcclusion(hostRef)
+  const panelOccluded = useBrowserPanelOcclusion(hostRef, visible)
   const pageUrlRef = useRef(pageState?.url ?? '')
   pageUrlRef.current = pageState?.url ?? ''
   /** Non-null while the user is editing the URL bar; otherwise it mirrors the page. */
@@ -182,6 +182,15 @@ export function BrowserSession() {
   useEffect(() => {
     const host = hostRef.current
     if (!host) return
+    // Hidden behind another resource: the native view has nowhere to sit, so
+    // report it gone once and install none of the scroll/resize/heartbeat
+    // machinery below — all of which would otherwise fire on every scroll and
+    // resize anywhere in the app, for a panel nobody can see.
+    if (!visible) {
+      setPanelVisible(false)
+      reportBrowserPanelBounds(null)
+      return
+    }
     // Resolved once: the panel is a stable ancestor for this effect's lifetime,
     // and only its inline width changes.
     const panel = host.closest<HTMLElement>('[data-mothership-panel]')
@@ -252,7 +261,7 @@ export function BrowserSession() {
       }
       reportBrowserPanelBounds(null)
     }
-  }, [])
+  }, [visible])
 
   const submitUrl = useCallback(() => {
     const raw = (urlDraft ?? '').trim()

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/terminal-session/terminal-session.tsx

@@ -182,21 +182,23 @@ const DARK_THEME = {
  * this addon ship in lockstep; adopting it would mean moving the core library
  * back a major version onto a renderer that is no longer published.
  */
-function attachWebglRenderer(terminal: Terminal): void {
+function attachWebglRenderer(terminal: Terminal): (() => void) | null {
   try {
     const webgl = new WebglAddon()
     webgl.onContextLoss(() => {
       logger.warn('Terminal WebGL context lost; falling back to the DOM renderer')
       webgl.dispose()
     })
     terminal.loadAddon(webgl)
+    return () => webgl.dispose()
   } catch (error) {
     // The DOM renderer stays in place. Logged rather than swallowed: it is a
     // large, silent performance cliff, and "the terminal feels slow" is
     // otherwise indistinguishable from every other cause of slowness.
     logger.warn('Terminal WebGL unavailable; using the slower DOM renderer', {
       error: (error as Error).message,
     })
+    return null
   }
 }
 
@@ -274,7 +276,6 @@ function TerminalView({
     terminal.unicode.activeVersion = '11'
 
     terminal.open(host)
-    attachWebglRenderer(terminal)
 
     terminalRef.current = terminal
     fitRef.current = fit
@@ -300,8 +301,7 @@ function TerminalView({
     // appear above the history it followed. Buffering keeps the order true.
     let painted = false
     let buffered = ''
-    const unsubscribeData = onTerminalData((id, data) => {
-      if (id !== terminalId) return
+    const unsubscribeData = onTerminalData(terminalId, (data) => {
       if (painted) terminal.write(data)
       else buffered += data
     })
@@ -381,6 +381,23 @@ function TerminalView({
     terminal.options.theme = resolvedTheme === 'dark' ? DARK_THEME : LIGHT_THEME
   }, [resolvedTheme])
 
+  // A GPU renderer only for the terminal on screen.
+  //
+  // Every open terminal keeps its emulator alive so switching is instant, but
+  // a hidden one is `display: none` and xterm has already paused painting it —
+  // a WebGL context for it buys nothing and costs plenty. Browsers cap how
+  // many contexts can be live and evict the oldest past that, so holding one
+  // per tab means tabs quietly knocking each other's renderers out and falling
+  // back to the DOM. Handing the renderer to whichever tab is visible keeps
+  // one context for the whole panel.
+  useEffect(() => {
+    if (!active) return
+    const terminal = terminalRef.current
+    if (!terminal) return
+    const disposeRenderer = attachWebglRenderer(terminal)
+    return () => disposeRenderer?.()
+  }, [active])
+
   useEffect(() => {
     if (!active) return
     // Measure after the browser has laid the newly shown terminal out.

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -85,6 +85,13 @@ interface ResourceContentProps {
   genericResourceData?: GenericResourceData
   previewContextKey?: string
   onNotFound?: (resourceId: string) => void
+  /**
+   * Whether this resource is the one on screen. Only the persistent panels
+   * (browser, terminal) read it — to stand down document-wide observers while
+   * hidden — so it defaults to visible for every other resource, which is only
+   * ever rendered when active.
+   */
+  visible?: boolean
 }
 
 /**
@@ -147,6 +154,7 @@ export const ResourceContent = memo(function ResourceContent({
   genericResourceData,
   previewContextKey,
   onNotFound,
+  visible = true,
 }: ResourceContentProps) {
   const streamFileName = previewSession?.fileName || 'file.md'
   const syntheticFile = useMemo(() => {
@@ -278,7 +286,7 @@ export const ResourceContent = memo(function ResourceContent({
       )
 
     case 'browser':
-      return <BrowserSession key={resource.id} />
+      return <BrowserSession key={resource.id} visible={visible} />
 
     case 'terminal':
       return <TerminalSession key={resource.id} />

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx

@@ -166,7 +166,18 @@ export const MothershipView = memo(
                 key={resource.id}
                 className={cn('absolute inset-0', resource.id !== active?.id && 'hidden')}
               >
-                <ResourceContent workspaceId={workspaceId} resource={resource} />
+                {/*
+                  A hidden persistent panel can otherwise only INFER it is off
+                  screen by measuring itself, which is enough to pause xterm and
+                  hide the native view but not to switch off document-wide
+                  observers the panel installs. The explicit flag lets it stand
+                  those down while hidden.
+                */}
+                <ResourceContent
+                  workspaceId={workspaceId}
+                  resource={resource}
+                  visible={resource.id === active?.id}
+                />
               </div>
             ))}
             {active && !isPersistentPanel(active) && (

apps/sim/lib/terminal/transport.ts

@@ -53,9 +53,30 @@ export function initTerminalTransport(): void {
     .catch(() => {})
 }
 
-/** Subscribes to raw PTY output for every terminal. */
-export function onTerminalData(callback: (terminalId: string, data: string) => void): () => void {
-  return bridge()?.onData(callback) ?? (() => {})
+/**
+ * One bridge subscription for all terminals, fanned out by id.
+ *
+ * Every mounted terminal view wants only its own bytes, but each PTY message
+ * crosses the context bridge once per registered listener — so a listener per
+ * view made a single terminal's output cost O(open tabs) crossings a message,
+ * most of them discarded by an id check. This keeps exactly one bridge
+ * listener and routes each message to the view that asked for that id.
+ */
+const dataHandlers = new Map<string, (data: string) => void>()
+let dataBridgeUnsubscribe: (() => void) | null = null
+
+function ensureDataBridge(): void {
+  if (dataBridgeUnsubscribe) return
+  dataBridgeUnsubscribe = bridge()?.onData((id, data) => dataHandlers.get(id)?.(data)) ?? (() => {})
+}
+
+/** Subscribes to raw PTY output for one terminal. */
+export function onTerminalData(terminalId: string, callback: (data: string) => void): () => void {
+  ensureDataBridge()
+  dataHandlers.set(terminalId, callback)
+  return () => {
+    if (dataHandlers.get(terminalId) === callback) dataHandlers.delete(terminalId)
+  }
 }
 
 /**