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.

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')

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
   })
 }
 
@@ -4783,7 +4786,7 @@ export async function handlePanelAction(
     }
     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/session.ts

@@ -3152,7 +3152,12 @@ export function reopenClosedTab(): AgentTab | null {
   return tab
 }
 
-export function switchTab(tabId: string): AgentTab {
+/**
+ * Shows a tab. `claim` records the visible page as the user's own; a switch
+ * that only mirrors the renderer's strip selection passes false so the agent
+ * can still close or adopt the page as its own.
+ */
+export function switchTab(tabId: string, { claim = true }: { claim?: boolean } = {}): AgentTab {
   restoreBrowserSession()
   const tab = tabs.find((entry) => entry.id === tabId)
   if (!tab) throw new SessionError(`No tab with id ${tabId} — call browser_list_tabs.`)
@@ -3168,7 +3173,7 @@ export function switchTab(tabId: string): AgentTab {
     revokeTabMediaPermissions(previousActiveTab, false)
   }
   currentScope.activeTabId = tab.id
-  currentScope.visibleTabUserSelected = true
+  if (claim) currentScope.visibleTabUserSelected = true
   promotePendingTabRestore(tab)
   // Visible selection does not move the automation exemption; the user may
   // inspect another page while a tool continues in its background tab.
@@ -3192,7 +3197,15 @@ export function switchAutomationTab(tabId: string): AgentTab {
   return tab
 }
 
-export function closeTab(tabId: string): void {
+/**
+ * Closes a tab. When the agent closes its own working tab it moves on to the
+ * neighbour so its next page tool has a target; a close the user made leaves
+ * the agent cursor unset instead of announcing a page the agent never chose.
+ */
+export function closeTab(
+  tabId: string,
+  { adoptNeighborForAgent = false }: { adoptNeighborForAgent?: boolean } = {}
+): void {
   restoreBrowserSession()
   const index = tabs.findIndex((entry) => entry.id === tabId)
   if (index < 0) throw new SessionError(`No tab with id ${tabId} — call browser_list_tabs.`)
@@ -3221,7 +3234,9 @@ export function closeTab(tabId: string): void {
     }
   }
   if (currentScope.automationTabId === tab.id) {
-    currentScope.automationTabId = (tabs[index] ?? tabs[index - 1])?.id ?? null
+    currentScope.automationTabId = adoptNeighborForAgent
+      ? ((tabs[index] ?? tabs[index - 1])?.id ?? null)
+      : null
     applyActiveTabThrottling()
   }
   if (transferBrowserFocus) currentScope.focusedBrowserTabId = currentScope.activeTabId
@@ -3240,7 +3255,7 @@ export function closeAutomationTab(tabId: string): void {
       'That tab is currently being used by the user. Switch to another agent tab instead of closing it.'
     )
   }
-  closeTab(tabId)
+  closeTab(tabId, { adoptNeighborForAgent: true })
 }
 
 /** The live page whose browser surface owns a menu accelerator. */

apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-resource-panel.tsx

@@ -27,6 +27,7 @@ import {
   RESOURCE_HEADER_CLASSES,
   RESOURCE_TAB_ICON_BUTTON_CLASS,
   RESOURCE_TAB_ICON_CLASS,
+  resourceTabWidthClass,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
 
 export type HeroResourceId = 'workflow' | 'table' | 'brief'
@@ -155,7 +156,7 @@ export function HeroResourcePanel({
         onSelect={(id) => onActiveChange(id as HeroResourceId)}
         onClose={(id) => onCloseResource(id as HeroResourceId)}
         variant='floating'
-        className={RESOURCE_HEADER_CLASSES.stripGeometry}
+        className={cn(RESOURCE_HEADER_CLASSES.stripGeometry, resourceTabWidthClass(tabs.length))}
         newTabControl={
           <DropdownMenu>
             <Tooltip.Root>

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

@@ -653,9 +653,9 @@ export function BrowserSession({
 
   useEffect(() => onBrowserOmniboxFocus(focusOmnibox, scopeId), [focusOmnibox, scopeId])
 
-  // A fresh blank tab coming on screen — opened from the resource strip, by
-  // Cmd+T, or by the shell replacing a closed last tab — gets the omnibox, the
-  // way Chrome's new-tab page does. A tab with a page keeps its content.
+  // A fresh blank tab coming on screen — opened from the resource strip or by
+  // Cmd+T — gets the omnibox, the way Chrome's new-tab page does. A tab with a
+  // page keeps its content.
   const focusedBlankTabIdRef = useRef<string | null>(null)
   useEffect(() => {
     if (!visible || !activeTabId || !showEmptyState) return

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/browser-tab-icon.tsx

@@ -11,6 +11,8 @@ import { useBrowserSessionStore } from '@/stores/browser-session/store'
 interface BrowserTabIconProps {
   /** Native tab id, which is also the browser resource's id. */
   tabId: string
+  /** Desktop browser scope the tab lives in; without one the icon is a plain globe. */
+  scopeId?: string
   className?: string
 }
 
@@ -21,29 +23,32 @@ interface BrowserTabIconProps {
  * thinking loader, so the strip shows where the agent is without pulling the
  * user's selection there.
  */
-export function BrowserTabIcon({ tabId, className }: BrowserTabIconProps) {
-  const tab = useBrowserSessionStore((state) => {
-    const scopeId = state.activeScopeId
-    return scopeId
-      ? state.sessions[scopeId]?.tabs.find((entry) => entry.tabId === tabId)
-      : undefined
-  })
+export function BrowserTabIcon({ tabId, scopeId, className }: BrowserTabIconProps) {
+  const tab = useBrowserSessionStore((state) =>
+    scopeId ? state.sessions[scopeId]?.tabs.find((entry) => entry.tabId === tabId) : undefined
+  )
   const agentWorking = useBrowserSessionStore((state) => {
-    const scopeId = state.activeScopeId
     const session = scopeId ? state.sessions[scopeId] : undefined
     return Boolean(
       session &&
         session.automationTabId === tabId &&
         (session.automationActive || session.agentRunIds.length > 0)
     )
   })
-  const [loadedHostname, setLoadedHostname] = useState<string | null>(null)
-  const [failedHostname, setFailedHostname] = useState<string | null>(null)
+  /** Outcome of the favicon request for one hostname; the image remounts per host. */
+  const [favicon, setFavicon] = useState<{ hostname: string; status: 'loaded' | 'failed' } | null>(
+    null
+  )
 
   const hostname = tab ? browserTabHostname(tab.url) : null
-  const faviconLoaded = Boolean(hostname && loadedHostname === hostname)
-  const faviconFailed = Boolean(hostname && failedHostname === hostname)
-  const showSpinner = shouldShowBrowserTabSpinner(tab?.loading ?? false, hostname, loadedHostname)
+  const faviconStatus = hostname && favicon?.hostname === hostname ? favicon.status : null
+  const faviconLoaded = faviconStatus === 'loaded'
+  const faviconFailed = faviconStatus === 'failed'
+  const showSpinner = shouldShowBrowserTabSpinner(
+    tab?.loading ?? false,
+    hostname,
+    faviconLoaded ? hostname : null
+  )
 
   return (
     <span className={cn('relative flex items-center justify-center', className)}>
@@ -62,8 +67,8 @@ export function BrowserTabIcon({ tabId, className }: BrowserTabIconProps) {
                 'size-[16px] rounded-[3px]',
                 !faviconLoaded && 'pointer-events-none absolute opacity-0'
               )}
-              onLoad={() => setLoadedHostname(hostname)}
-              onError={() => setFailedHostname(hostname)}
+              onLoad={() => setFavicon({ hostname, status: 'loaded' })}
+              onError={() => setFavicon({ hostname, status: 'failed' })}
             />
           )}
           {showSpinner ? (

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

@@ -40,7 +40,12 @@ export interface ResourceTypeConfig {
   type: MothershipResourceType
   label: string
   icon: ElementType
-  renderTabIcon: (resource: MothershipResource, className: string) => ReactNode
+  /** `desktopScopeId` names the desktop browser scope a browser tab belongs to. */
+  renderTabIcon: (
+    resource: MothershipResource,
+    className: string,
+    desktopScopeId?: string
+  ) => ReactNode
   renderDropdownItem: (props: DropdownItemRenderProps) => ReactNode
   /**
    * How many of this family's candidates an unfiltered `@` list shows, overriding
@@ -234,8 +239,8 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
     type: 'browser',
     label: 'Browser',
     icon: Globe,
-    renderTabIcon: (resource, className) => (
-      <BrowserTabIcon tabId={resource.id} className={className} />
+    renderTabIcon: (resource, className, desktopScopeId) => (
+      <BrowserTabIcon tabId={resource.id} scopeId={desktopScopeId} className={className} />
     ),
     renderDropdownItem: (props) => <IconDropdownItem {...props} icon={Globe} />,
   },

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.test.ts

@@ -1,5 +1,8 @@
 import { describe, expect, it } from 'vitest'
-import { RESOURCE_HEADER_CLASSES } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
+import {
+  RESOURCE_HEADER_CLASSES,
+  resourceTabWidthClass,
+} from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
 
 describe('resource header geometry', () => {
   it('moves the action cluster beside the collapse target without moving the toggle', () => {
@@ -9,4 +12,13 @@ describe('resource header geometry', () => {
     expect(RESOURCE_HEADER_CLASSES.layout).toContain('[--resource-header-toggle-size:30px]')
     expect(RESOURCE_HEADER_CLASSES.endPosition).toBe('right-[var(--resource-header-end-inset)]')
   })
+
+  it('tightens the title cap one small step per added tab down to the floor', () => {
+    expect(RESOURCE_HEADER_CLASSES.stripGeometry).not.toContain('--tab-strip-max-tab-width')
+    expect(resourceTabWidthClass(1)).toBe('[--tab-strip-max-tab-width:200px]')
+    expect(resourceTabWidthClass(2)).toBe('[--tab-strip-max-tab-width:200px]')
+    expect(resourceTabWidthClass(3)).toBe('[--tab-strip-max-tab-width:180px]')
+    expect(resourceTabWidthClass(4)).toBe('[--tab-strip-max-tab-width:160px]')
+    expect(resourceTabWidthClass(9)).toBe('[--tab-strip-max-tab-width:160px]')
+  })
 })

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts

@@ -27,9 +27,13 @@ export const RESOURCE_HEADER_CLASSES = {
    * keeps: a tab paints a fill, so its box is visible and wants air around it,
    * where the toggle and the action buttons are bare glyphs whose box only shows
    * on hover.
+   *
+   * The tab width cap is chosen per strip from the tab count (see
+   * {@link resourceTabWidthClass}), so a title can breathe while the strip is
+   * roomy and only tightens once the tabs start competing for the width.
    */
   stripGeometry:
-    '[--tab-strip-height:calc(var(--resource-header-controls-height)_+_1px)] [--tab-strip-band:26px] [--tab-strip-max-tab-width:160px] [--tab-strip-inline-start:var(--resource-header-end-inset)] [--tab-strip-inline-end:var(--resource-header-fixed-reserve)]',
+    '[--tab-strip-height:calc(var(--resource-header-controls-height)_+_1px)] [--tab-strip-band:26px] [--tab-strip-inline-start:var(--resource-header-end-inset)] [--tab-strip-inline-end:var(--resource-header-fixed-reserve)]',
   /**
    * Centred, matching the `floating` strip: its tabs and controls sit centred in
    * the header band rather than hanging from the top, so an overlaid control has
@@ -45,3 +49,16 @@ export const RESOURCE_HEADER_CLASSES = {
     'right-[calc(var(--resource-header-end-inset)_+_var(--resource-header-toggle-hit-size)_+_1px)]',
   emptyAddOffset: '-translate-x-1.5',
 } as const
+
+/**
+ * Width cap for the strip's tabs, from the tab count. A couple of tabs have
+ * the room to show more of their titles; each added tab tightens the cap by a
+ * step small enough to pass unnoticed, down to the floor a full strip needs so
+ * every tab stays visible for longer before the strip scrolls. Only the
+ * ellipsis point moves — a title that already fits never changes width.
+ */
+export function resourceTabWidthClass(tabCount: number): string {
+  if (tabCount <= 2) return '[--tab-strip-max-tab-width:200px]'
+  if (tabCount === 3) return '[--tab-strip-max-tab-width:180px]'
+  return '[--tab-strip-max-tab-width:160px]'
+}

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

@@ -34,6 +34,7 @@ import {
   RESOURCE_HEADER_CLASSES,
   RESOURCE_TAB_ICON_BUTTON_CLASS,
   RESOURCE_TAB_ICON_CLASS,
+  resourceTabWidthClass,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
 import type {
   MothershipResource,
@@ -254,26 +255,25 @@ export function ResourceTabs({
 
   // A browser tab's title is the live page title, owned by the desktop app.
   const browserTabs = useBrowserSessionStore((state) => state.sessions[desktopScopeId]?.tabs)
-  const browserTitles = useMemo(
-    () => new Map(browserTabs?.map((tab) => [tab.tabId, browserTabTitle(tab)])),
-    [browserTabs]
-  )
 
-  const tabs = useMemo<TabStripItem[]>(
-    () =>
-      resources.map((resource) => ({
-        id: resource.id,
-        title:
-          (resource.type === 'browser'
-            ? browserTitles.get(resource.id)
-            : nameLookup.get(`${resource.type}:${resource.id}`)) ?? resource.title,
-        icon: getResourceConfig(resource.type).renderTabIcon(resource, 'size-[16px] shrink-0'),
-        active: activeId === resource.id,
-        selected: selectedIds.size > 1 && selectedIds.has(resource.id),
-        attention: activityIds?.has(resource.id) ?? false,
-      })),
-    [resources, nameLookup, browserTitles, activeId, selectedIds, activityIds]
-  )
+  const tabs = useMemo<TabStripItem[]>(() => {
+    const browserTitles = new Map(browserTabs?.map((tab) => [tab.tabId, browserTabTitle(tab)]))
+    return resources.map((resource) => ({
+      id: resource.id,
+      title:
+        (resource.type === 'browser'
+          ? browserTitles.get(resource.id)
+          : nameLookup.get(`${resource.type}:${resource.id}`)) ?? resource.title,
+      icon: getResourceConfig(resource.type).renderTabIcon(
+        resource,
+        'size-[16px] shrink-0',
+        desktopScopeId
+      ),
+      active: activeId === resource.id,
+      selected: selectedIds.size > 1 && selectedIds.has(resource.id),
+      attention: activityIds?.has(resource.id) ?? false,
+    }))
+  }, [resources, nameLookup, browserTabs, desktopScopeId, activeId, selectedIds, activityIds])
 
   const handleAdd = useCallback(
     (resource: MothershipResource) => {
@@ -478,7 +478,7 @@ export function ResourceTabs({
       onReorder={handleReorder}
       onTabDragStart={handleTabDragStart}
       variant='floating'
-      className={RESOURCE_HEADER_CLASSES.stripGeometry}
+      className={cn(RESOURCE_HEADER_CLASSES.stripGeometry, resourceTabWidthClass(resources.length))}
       newTabControl={
         // Offered before the chat exists too: a resource opened while composing
         // the first prompt is context for that prompt, and gating on a chat id