fix(desktop): preserve resource rendering continuity

Author: Sg312

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

@@ -225,6 +225,26 @@ export function detachAttachedView(): void {
   }
 }
 
+/**
+ * Stops the attached view painting without giving up its compositor surface,
+ * so showing it again is immediate. A hidden view takes no input either, which
+ * is what lets renderer UI sit where it used to be.
+ */
+function hideAttachedView(): void {
+  const view = attachedView
+  if (!view || lastAppliedVisibility === false) return
+  lastAppliedVisibility = false
+  // Nothing to re-lay-out while hidden; the showing path rebinds.
+  unbindHostResize()
+  try {
+    if (!view.webContents.isDestroyed()) view.setVisible(false)
+  } catch (error) {
+    logger.warn('Could not hide embedded browser view', {
+      error: getErrorMessage(error, 'unknown'),
+    })
+  }
+}
+
 /**
  * Detaches only when this exact view is the attached one. Closing a background
  * tab must not pull the visible tab out of the window.
@@ -297,12 +317,22 @@ export function layout(): void {
   const showing = active !== null && panelBounds !== null && win !== null
   const activeViewChanged = showing && attachedView !== active?.view
 
-  if (!showing || hostedWindow !== win || attachedView !== active?.view) {
-    if (attachedView) {
-      detachAttachedView()
-    }
+  // Detach only when the attached view cannot stay where it is: no tab is
+  // active, a different tab took over, or the hosting window changed.
+  //
+  // A panel that is merely hidden keeps its view attached and invisible, for
+  // the same reason occlusion does (see setPanelOccluded): removing the view
+  // gives up its compositor surface, and rebuilding that on the way back is a
+  // blank repaint that reads as the page having reloaded. Every switch to
+  // another resource and back hides the panel, so that was every switch.
+  if (
+    attachedView !== null &&
+    (active === null || win === null || hostedWindow !== win || attachedView !== active.view)
+  ) {
+    detachAttachedView()
   }
   if (!showing || !active || !win || panelBounds === null) {
+    hideAttachedView()
     return
   }
 

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

@@ -434,12 +434,45 @@ describe('browser-agent session', () => {
     expect(content.addChildView).toHaveBeenCalledWith(tab.view)
     expect(view.setBounds).toHaveBeenCalledWith({ x: 100, y: 50, width: 800, height: 600 })
 
-    // Panel hidden: the view detaches.
+    // Panel hidden: the view stops painting but stays attached. Detaching
+    // would give up its compositor surface, and rebuilding that on the way
+    // back is the blank repaint that reads as the page having reloaded —
+    // which is every switch to another resource and back.
     const removeChildView = (
       win as unknown as { contentView: { removeChildView: ReturnType<typeof vi.fn> } }
     ).contentView.removeChildView
+    view.setVisible.mockClear()
     panel.setPanelBounds(null)
-    expect(removeChildView).toHaveBeenCalledWith(tab.view)
+    expect(view.setVisible).toHaveBeenCalledWith(false)
+    expect(removeChildView).not.toHaveBeenCalled()
+
+    // Showing it again reuses the attached view rather than re-adding it.
+    content.addChildView.mockClear()
+    panel.setPanelBounds({ x: 100, y: 50, width: 800, height: 600 })
+    expect(view.setVisible).toHaveBeenLastCalledWith(true)
+    expect(content.addChildView).not.toHaveBeenCalled()
+  })
+
+  it('detaches the previous view when another tab becomes active', () => {
+    const first = session.ensureTab()
+    panel.setPanelBounds({ x: 0, y: 0, width: 800, height: 600 })
+    const content = (
+      win as unknown as {
+        contentView: {
+          addChildView: ReturnType<typeof vi.fn>
+          removeChildView: ReturnType<typeof vi.fn>
+        }
+      }
+    ).contentView
+    content.addChildView.mockClear()
+    content.removeChildView.mockClear()
+
+    const second = session.addTab()
+
+    // Hiding keeps a view attached, but a tab switch still has to detach:
+    // two native views stacked in the window would composite over each other.
+    expect(content.removeChildView).toHaveBeenCalledWith(first.view)
+    expect(content.addChildView).toHaveBeenCalledWith(second.view)
   })
 
   // The measured report is the sole writer of bounds. A main-process
@@ -560,7 +593,7 @@ describe('browser-agent session', () => {
     expect(view.setBounds).toHaveBeenLastCalledWith({ x: 500, y: 40, width: 500, height: 760 })
   })
 
-  it('drops the resize listener when the view detaches', () => {
+  it('drops the resize listener while the panel is hidden', () => {
     session.ensureTab()
     panel.setPanelBounds({ x: 100, y: 50, width: 800, height: 600 })
     const onResize = hostResizeHandler(win)
@@ -835,12 +868,14 @@ describe('browser-agent session', () => {
         win as unknown as { contentView: { removeChildView: ReturnType<typeof vi.fn> } }
       ).contentView
       contentView.removeChildView.mockClear()
+      const view = session.requireTab().view as unknown as MockView
+      view.setVisible.mockClear()
 
       // The renderer goes silent — crashed, unmounted, or wedged. Without the
       // lease the native view keeps floating over whatever replaced the panel.
       await vi.advanceTimersByTimeAsync(6_000)
 
-      expect(contentView.removeChildView).toHaveBeenCalled()
+      expect(view.setVisible).toHaveBeenCalledWith(false)
     } finally {
       vi.useRealTimers()
     }

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

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { cn, TabStrip, type TabStripItem } from '@sim/emcn'
 import { Loader, TerminalWindow } from '@sim/emcn/icons'
+import { createLogger } from '@sim/logger'
 import { FitAddon } from '@xterm/addon-fit'
 import { Unicode11Addon } from '@xterm/addon-unicode11'
 import { WebLinksAddon } from '@xterm/addon-web-links'
@@ -25,6 +26,8 @@ import {
 import { useMothershipResources } from '@/app/workspace/[workspaceId]/home/components/mothership-resources-context'
 import { useCopilotTerminalStore } from '@/stores/copilot-terminal/store'
 
+const logger = createLogger('TerminalSession')
+
 /**
  * How long the panel must stop changing size before the PTY is told about it.
  * Long enough to cover a divider drag, short enough that a deliberate resize
@@ -89,16 +92,26 @@ const DARK_THEME = {
  * what makes rows freeze or tear mid-scroll. Disposing falls back to xterm's
  * DOM renderer: slower, but it cannot go stale.
  *
- * There is no canvas tier because `@xterm/addon-canvas` has no release for
- * xterm 6 — every published version, latest beta included, peers on xterm 5.
+ * There is deliberately no canvas tier in between. `@xterm/addon-canvas` has
+ * had no release since 2024 and none at all for xterm 6, while core xterm and
+ * 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 {
   try {
     const webgl = new WebglAddon()
-    webgl.onContextLoss(() => webgl.dispose())
+    webgl.onContextLoss(() => {
+      logger.warn('Terminal WebGL context lost; falling back to the DOM renderer')
+      webgl.dispose()
+    })
     terminal.loadAddon(webgl)
-  } catch {
-    // No usable WebGL on this machine; the DOM renderer stays in place.
+  } 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,
+    })
   }
 }