feat(desktop): browser pages as resource tabs, agent works in a background tab (#7745)

* feat(desktop): browser pages as resource tabs, agent works in the background

Each live desktop browser page is now its own resource tab in the Chat
panel, derived from the desktop app's tab list instead of a persisted
singleton "Browser" resource with a second tab strip inside it. The inner
browser tab strip, tab pinning, duplicate, reorder, the native tab context
menu, and the auto-replacement of a closed last tab are removed.

The agent drives its own tab (the desktop's automation cursor) without
moving the user's visible page: the renderer no longer force-activates the
browser on every tool call nor auto-switches the panel to the agent's tab.
The agent's tab is announced as resource activity, so the existing view
policy shows it or badges it depending on whether the user has taken over
selection. Mentions and attachments point at exact tabs; the chat row never
stores browser resources, and legacy rows are dropped on read.

* fix(desktop): settle browser tab sync edge cases and ease the tab width cap

Review and in-app verification of the resource-tab browser model found
five problems, all fixed here with tests:

- The strip's switch and follow effects could trade `switch-tab` calls
  forever after a native switch; the switch effect is now keyed on the
  selection alone and ignores the switch it requested itself.
- Migrating a pending chat onto its durable id briefly removed and re-added
  every browser tab; a missing store bucket is no longer read as closed.
- Chat hydration could replace the resource list underneath a fresh add,
  dropping restored tabs on return; a tab stays projected until its
  resource is seen. Hydration also falls back to the last server-held
  resource instead of whichever tab happened to land first.
- Strip-driven `switch-tab` no longer claims the page for the user
  (`claim: false`), so the agent can still close or adopt it; a user
  closing the agent's tab leaves the agent cursor unset rather than
  announcing the neighbour as agent activity.
- The driver marked every restored scope as material, refusing pending
  chat migration after an empty restore; only a restore that yields pages
  does now, matching the session layer. The bridge snapshot is regenerated
  with the documented `'new-tab'` fallback.

Resource tab titles ellipsize at 200px for one or two tabs, 180px for
three, and 160px from four on, one small step at a time.

* fix(desktop): mirror strip order into native tabs and drag live tab titles

Reordering a browser tab in the resource strip now reorders the desktop's
native tab list too, so restore and the agent's tab list keep the strip's
order (`reorderTab` returns as an optional bridge method). Dragging a tab
into the chat carries the strip's live title rather than the title captured
when the tab was added. The fork route test follows the new policy that
stored browser rows are dropped.

* fix(emcn): drive the loader spin period from a CSS variable instead of an inline style

Author: waleedlatif1

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

@@ -1277,6 +1277,18 @@ describe('executeTool', () => {
     expect(driver.migrateBrowserScope('pending:other-chat', 'chat-occupied')).toBe(false)
   })
 
+  it('keeps a durable destination adoptable after an empty restore', async () => {
+    await driver.executeTool('pending:new-chat', 'browser_open_tab', {})
+    driver.activateBrowserScope('chat-real')
+    expect(driver.restoreBrowserScope('chat-real')).toMatchObject({ tabs: [] })
+
+    expect(driver.migrateBrowserScope('pending:new-chat', 'chat-real')).toBe(true)
+    await expect(driver.executeTool('chat-real', 'browser_list_tabs', {})).resolves.toMatchObject({
+      ok: true,
+      result: { scopeId: 'chat-real', tabs: [{ tabId: '1' }] },
+    })
+  })
+
   it('cancels only the replaced destination authorizations during migration', async () => {
     await driver.executeTool('pending:new-chat', 'browser_open_tab', {})
     driver.activateBrowserScope('chat-real')
@@ -1395,7 +1407,7 @@ describe('executeTool', () => {
   it('keeps activation lazy, then restores and disposes through the driver API', async () => {
     const snapshot: BrowserSessionSnapshot = {
       v: 1,
-      tabs: [{ url: 'https://restored.example/', pinned: false }],
+      tabs: [{ url: 'https://restored.example/' }],
       activeIndex: 0,
       downloads: [],
     }

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

@@ -794,10 +794,13 @@ export function restoreBrowserScope(scopeId: string): BrowserTabsState {
     return session.withBrowserScope(resolved, () => session.peekTabsState())
   }
   const state = driverScopeState(resolved)
-  state.activationOnly = false
   return session.withBrowserScope(resolved, () => {
     session.restoreBrowserSession()
-    return session.peekTabsState()
+    const tabs = session.peekTabsState()
+    // Only a scope that actually holds pages is material; one restored empty
+    // stays adoptable by a pending chat migrating onto its id.
+    if (tabs.tabs.length > 0) state.activationOnly = false
+    return tabs
   })
 }
 
@@ -905,7 +908,7 @@ export async function clearBrowserProfile(
   retireAllDriverScopeStates()
   const settingsCleared = knownSessions?.clear() !== false
   const outcomes = await Promise.allSettled([session.clearProfileStorage(), clearCredentials()])
-  // Last, covering the pinned-tab list `clearProfileStorage` just emptied.
+  // Last, covering the saved tab list `clearProfileStorage` just emptied.
   // Settings writes coalesce, and an erasure that is still sitting in that
   // window when the process dies leaves the previous account's data on disk
   // after sign-out already told the user it was gone.
@@ -2368,8 +2371,7 @@ async function executeToolInner(
         }
       }
       assertCurrentExecution()
-      // The agent chose to open this page to work in, so the panel follows it.
-      const tab = session.addAutomationTab({ reveal: true })
+      const tab = session.addAutomationTab()
       const contents = tab.view.webContents
       if (url) {
         assertCurrentExecution()
@@ -4782,19 +4784,9 @@ export async function handlePanelAction(
       }
       return
     }
-    if (action.action === 'new-tab') {
-      session.addTab()
-      return
-    }
-    if (action.action === 'duplicate-tab') {
-      if (typeof action.tabId === 'string') {
-        session.duplicateTab(action.tabId)
-      }
-      return
-    }
     if (action.action === 'switch-tab') {
       if (typeof action.tabId === 'string') {
-        session.switchTab(action.tabId)
+        session.switchTab(action.tabId, { claim: action.claim !== false })
       }
       return
     }

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

@@ -20,7 +20,7 @@ function freshPanel(): PanelModule {
     getMainWindow: () => null,
     activeTab: () => null,
     backgroundColor: () => '#ffffff',
-    ensureInitialTab: () => {},
+    restoreActiveScope: () => {},
     onViewDetached: () => {},
   })
   panelModule.activatePanelScope('chat-test')
@@ -33,12 +33,12 @@ const PANEL_RECT = { x: 400, y: 64, width: 600, height: 800 }
 function showPanel(panel: PanelModule) {
   const win = new BrowserWindow()
   const view = new WebContentsView()
-  const active = { id: 'tab-1', scopeId: 'chat-test', view, pinned: false }
+  const active = { id: 'tab-1', scopeId: 'chat-test', view }
   panel.initPanel({
     getMainWindow: () => win,
     activeTab: () => active,
     backgroundColor: () => '#0c0c0c',
-    ensureInitialTab: () => {},
+    restoreActiveScope: () => {},
     onViewDetached: () => {},
   })
   panel.activatePanelScope('chat-test')
@@ -56,13 +56,13 @@ describe('panel chat scope', () => {
   it('returns keyboard focus to the renderer when attaching a view steals it mid-typing', () => {
     const win = new BrowserWindow()
     const view = new WebContentsView()
-    const active = { id: 'tab-1', scopeId: 'chat-test', view, pinned: false }
+    const active = { id: 'tab-1', scopeId: 'chat-test', view }
     vi.mocked(win.webContents.isFocused).mockReturnValue(true)
     panel.initPanel({
       getMainWindow: () => win,
       activeTab: () => active,
       backgroundColor: () => '#0c0c0c',
-      ensureInitialTab: () => {},
+      restoreActiveScope: () => {},
       onViewDetached: () => {},
     })
     panel.activatePanelScope('chat-test')
@@ -327,12 +327,12 @@ describe('panel chat scope', () => {
   it('applies a forced hide before the panel reports its first bounds', () => {
     const win = new BrowserWindow()
     const view = new WebContentsView()
-    const active = { id: 'tab-1', scopeId: 'chat-test', view, pinned: false }
+    const active = { id: 'tab-1', scopeId: 'chat-test', view }
     panel.initPanel({
       getMainWindow: () => win,
       activeTab: () => active,
       backgroundColor: () => '#0c0c0c',
-      ensureInitialTab: () => {},
+      restoreActiveScope: () => {},
       onViewDetached: () => {},
     })
     panel.activatePanelScope('chat-test')

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

@@ -41,12 +41,8 @@ export interface PanelHost {
   activeTab: () => AgentTab | null
   /** Native backdrop used by a blank tab before its first page paint. */
   backgroundColor: () => string
-  /**
-   * Materializes the initial tab when the panel first becomes visible: a
-   * visible browser resource always represents one open browser window, and
-   * the tab strip, omnibox, and native session must not disagree about that.
-   */
-  ensureInitialTab: () => void
+  /** Hydrates the active scope's saved pages when the panel first becomes visible. */
+  restoreActiveScope: () => void
   /** Lets the session drop focus tracking for a view that is no longer attached. */
   onViewDetached: (view: WebContentsView | null) => void
 }
@@ -55,7 +51,7 @@ let host: PanelHost = {
   getMainWindow: () => null,
   activeTab: () => null,
   backgroundColor: () => '#ffffff',
-  ensureInitialTab: () => {},
+  restoreActiveScope: () => {},
   onViewDetached: () => {},
 }
 
@@ -834,7 +830,7 @@ export function setPanelBounds(
   panelBounds = bounds
   panelAnchor = bounds === null ? null : (anchor ?? null)
   if (bounds !== null) {
-    host.ensureInitialTab()
+    host.restoreActiveScope()
   } else {
     resetOcclusion()
   }