fix(browser): polish new tabs and local password imports

Author: waleedlatif1

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

@@ -4661,12 +4661,14 @@ describe('reopening a closed tab', () => {
 })
 
 describe('importAgentCookies', () => {
-  /** Points the mocked partition at a cookie jar and returns its `set` spy. */
-  function withCookieJar(set: ReturnType<typeof vi.fn>): SessionModule {
+  function withCookieJar(
+    set: ReturnType<typeof vi.fn>,
+    flushStore = vi.fn(async () => {})
+  ): SessionModule {
     // The partition is resolved per call, not captured at module load, so
     // re-mocking it here is enough — no module reload required.
     vi.mocked(electronSession.fromPartition).mockReturnValue({
-      cookies: { set },
+      cookies: { set, flushStore },
     } as unknown as ReturnType<typeof electronSession.fromPartition>)
     return sessionModule
   }
@@ -4683,14 +4685,17 @@ describe('importAgentCookies', () => {
 
   it('writes every cookie into the dedicated browser profile', async () => {
     const set = vi.fn(async () => {})
-    const session = withCookieJar(set)
+    const flushStore = vi.fn(async () => {})
+    const session = withCookieJar(set, flushStore)
 
     const result = await session.importAgentCookies([cookie('a'), cookie('b')])
 
     expect(result).toEqual({ imported: 2, failed: 0 })
     expect(electronSession.fromPartition).toHaveBeenCalledWith('persist:sim-browser-agent')
     expect(set).toHaveBeenCalledTimes(2)
     expect(set).toHaveBeenNthCalledWith(1, cookie('a'))
+    expect(flushStore).toHaveBeenCalledOnce()
+    expect(flushStore.mock.invocationCallOrder[0]).toBeGreaterThan(set.mock.invocationCallOrder[1])
   })
 
   it('counts a rejected cookie without losing the rest', async () => {
@@ -4709,9 +4714,22 @@ describe('importAgentCookies', () => {
 
   it('does nothing when there is nothing to import', async () => {
     const set = vi.fn(async () => {})
-    const session = withCookieJar(set)
+    const flushStore = vi.fn(async () => {})
+    const session = withCookieJar(set, flushStore)
 
     await expect(session.importAgentCookies([])).resolves.toEqual({ imported: 0, failed: 0 })
     expect(set).not.toHaveBeenCalled()
+    expect(flushStore).not.toHaveBeenCalled()
+  })
+
+  it('does not report a durable import when flushing to disk fails', async () => {
+    const session = withCookieJar(
+      vi.fn(async () => {}),
+      vi.fn(async () => {
+        throw new Error('Disk unavailable')
+      })
+    )
+
+    await expect(session.importAgentCookies([cookie('a')])).rejects.toThrow('Disk unavailable')
   })
 })

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

@@ -1196,6 +1196,7 @@ export async function importAgentCookies(
       failed += 1
     }
   }
+  if (imported > 0) await jar.flushStore()
   return { imported, failed }
 }
 

apps/desktop/src/main/browser-credentials/vault.test.ts

@@ -39,6 +39,25 @@ const CANDIDATES = [
 ]
 
 describe('CredentialVault', () => {
+  it('retains imported logins when the vault is reopened and does not duplicate a re-import', async () => {
+    const original = new CredentialVault(vaultPath, encryption())
+    await original.importCredentials(CANDIDATES, 'replace')
+    const metadata = await original.list()
+
+    const reopened = new CredentialVault(vaultPath, encryption())
+    expect(await reopened.list()).toEqual(metadata)
+    expect(await reopened.readForFill(metadata[0].id, metadata[0].origin)).toEqual({
+      username: 'ada',
+      password: 'hunter2',
+    })
+    expect(await reopened.importCredentials(CANDIDATES, 'replace')).toEqual({
+      added: 0,
+      updated: 0,
+      skipped: 2,
+    })
+    expect(await reopened.list()).toEqual(metadata)
+  })
+
   it('stores and lists credentials without their passwords', async () => {
     const vault = new CredentialVault(vaultPath, encryption())
 

apps/desktop/src/main/browser-import/import-service.test.ts

@@ -616,26 +616,33 @@ describe('importChromePasswords', () => {
     expect(importCredentials).toHaveBeenCalledWith([expect.any(Object)], 'replace')
   })
 
-  it('keeps credentials from one password store when the other is unreadable', async () => {
-    const localPath = '/arc/Default/Login Data'
-    const accountPath = '/arc/Default/Login Data For Account'
-    const deps = createDeps({
-      listProfiles: async () => [
-        { ...PROFILES[1], id: 'arc:Default', loginDataPaths: [localPath, accountPath] },
-      ],
-      readPasswords: async (path) => {
-        if (path === accountPath) {
-          throw new ImportFailure('unsupported-schema', 'unknown account-store schema')
-        }
-        return readPasswords()
-      },
-    })
+  it.each(['local', 'account'])(
+    'reports a partial import when the %s password store is unreadable',
+    async (failedStore) => {
+      const localPath = '/arc/Default/Login Data'
+      const accountPath = '/arc/Default/Login Data For Account'
+      const deps = createDeps({
+        listProfiles: async () => [
+          { ...PROFILES[1], id: 'arc:Default', loginDataPaths: [localPath, accountPath] },
+        ],
+        readPasswords: async (path) => {
+          if (path === (failedStore === 'local' ? localPath : accountPath)) {
+            throw new ImportFailure('unsupported-schema', 'unknown account-store schema')
+          }
+          return readPasswords()
+        },
+      })
 
-    await expect(importChromePasswords('arc:Default', 'replace', deps)).resolves.toMatchObject({
-      passwordsAdded: 1,
-      passwordsSkipped: 0,
-    })
-  })
+      await expect(importChromeData('arc:Default', 'replace', deps)).resolves.toMatchObject({
+        cookies: { cookiesImported: 1 },
+        passwords: {
+          passwordsAdded: 1,
+          passwordsSkipped: 0,
+          error: 'unsupported-schema',
+        },
+      })
+    }
+  )
 
   it('surfaces a failed password store when the other store only has unreadable rows', async () => {
     const localPath = '/arc/Default/Login Data'

apps/desktop/src/main/browser-import/import-service.ts

@@ -302,6 +302,7 @@ async function runPasswordImport(
     passwordsAdded: outcome.added,
     passwordsUpdated: outcome.updated,
     passwordsSkipped: outcome.skipped + read.skipped,
+    ...(read.error ? { error: read.error } : {}),
   }
   logger.info('Chrome password import finished', {
     added: result.passwordsAdded,
@@ -321,14 +322,15 @@ async function runPasswordImport(
  * source order breaks ties deterministically before applying the vault policy.
  *
  * One damaged store does not discard credentials already read from the other.
+ * A partial read carries its failure to the UI alongside the imported counts.
  * If no store can produce any useful signal, the first concrete reader error
  * is surfaced instead of reporting a misleading successful import of zero.
  */
 async function readProfilePasswords(
   paths: readonly string[],
   key: Buffer,
   deps: ImportServiceDeps
-): Promise<ReadPasswordsResult> {
+): Promise<ReadPasswordsResult & { error?: BrowserPasswordImportResult['error'] }> {
   const combined: ReadPasswordsResult = { credentials: [], skipped: 0, rowsSeen: 0 }
   const credentialIndexes = new Map<string, number>()
   let successfulReads = 0
@@ -379,6 +381,7 @@ async function readProfilePasswords(
   if (firstFailure !== undefined) {
     // Category only: database names and paths are deliberately absent.
     logger.warn('Could not read every password store in the selected browser profile')
+    return { ...combined, error: categorize(firstFailure, 'password') }
   }
   return combined
 }

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

@@ -0,0 +1,14 @@
+import { Globe } from '@sim/emcn/icons'
+import { EmptyState } from '@/components/empty-state/empty-state'
+
+export function BrowserEmptyState() {
+  return (
+    <section aria-label='New tab' className='absolute inset-0 flex overflow-auto bg-[var(--bg)]'>
+      <EmptyState
+        graphic={<Globe className='size-5 text-[var(--text-icon)]' aria-hidden='true' />}
+        title='Browse the web'
+        description='Search or enter a website in the address bar above.'
+      />
+    </section>
+  )
+}

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

@@ -0,0 +1,163 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import type { BrowserPageState } from '@sim/browser-protocol'
+import type { BrowserToolbarCommand } from '@sim/desktop-bridge'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { desktop, navigateToSettings, removeResource } = vi.hoisted(() => ({
+  navigateToSettings: vi.fn(),
+  removeResource: vi.fn(),
+  desktop: {
+    settings: { getPreferences: vi.fn(async () => ({ browserTheme: 'app' })) },
+    browserCredentials: { list: vi.fn(async () => []), onFillAvailability: vi.fn(() => () => {}) },
+    browserImport: {
+      listChromeProfiles: vi.fn(async () => []),
+      listSites: vi.fn(async () => []),
+      importFromChrome: vi.fn(),
+    },
+    browserAgent: {
+      supportsAtomicPanelOcclusion: true,
+      setTheme: vi.fn(),
+      setPanelBounds: vi.fn(),
+      setPanelFocused: vi.fn(),
+      setPanelOccluded: vi.fn(async () => true),
+      capturePanelSnapshot: vi.fn(async () => null),
+      getKnownSessions: vi.fn(async () => ({ sessions: [] })),
+      getDownloadsState: vi.fn(async () => ({ downloads: [] })),
+      onAppearanceThemeChanged: vi.fn(() => () => {}),
+      onToolbarCommand: vi.fn(
+        (_callback: (command: BrowserToolbarCommand, scopeId: string) => void) => () => {}
+      ),
+      onAddToChat: vi.fn(() => () => {}),
+      onFocusOmnibox: vi.fn(() => () => {}),
+      onOpenFind: vi.fn(() => () => {}),
+      onCloseFind: vi.fn(() => () => {}),
+      onDownloadsState: vi.fn(() => () => {}),
+    },
+  },
+}))
+
+vi.mock('@/lib/desktop', () => ({ getDesktopBridge: () => desktop }))
+vi.mock('@/hooks/use-settings-navigation', () => ({
+  useSettingsNavigation: () => ({ navigateToSettings }),
+}))
+vi.mock('@/app/workspace/[workspaceId]/home/components/mothership-resources-context', () => ({
+  useMothershipResources: () => ({ removeResource }),
+}))
+
+import { BrowserSession } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session'
+import { useBrowserSessionStore } from '@/stores/browser-session/store'
+
+const PAGE: BrowserPageState = {
+  scopeId: 'browser-ui-test',
+  tabId: 'tab-1',
+  url: 'about:blank',
+  title: '',
+  loading: false,
+  canGoBack: false,
+  canGoForward: false,
+}
+let container: HTMLDivElement
+let root: Root
+
+async function render(page: BrowserPageState = PAGE, visible = true) {
+  await act(async () => {
+    useBrowserSessionStore.getState().setPageState(page)
+    root.render(<BrowserSession visible={visible} scopeId={PAGE.scopeId} />)
+  })
+  await act(async () => vi.advanceTimersByTime(20))
+}
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.useFakeTimers()
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      disconnect() {}
+      unobserve() {}
+    }
+  )
+  vi.clearAllMocks()
+  useBrowserSessionStore.setState({ sessions: {} })
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+    x: 0,
+    y: 0,
+    width: 700,
+    height: 600,
+    top: 0,
+    bottom: 600,
+    left: 0,
+    right: 700,
+    toJSON: () => ({}),
+  })
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.useRealTimers()
+  vi.restoreAllMocks()
+})
+
+describe('browser empty state and in-place import', () => {
+  it('replaces the native blank page with shared guidance and no extra actions', async () => {
+    await render()
+    const emptyState = container.querySelector('section[aria-label="New tab"]')
+    expect(emptyState?.textContent).toContain('Browse the web')
+    expect(emptyState?.textContent).toContain('Search or enter a website in the address bar above.')
+    expect(emptyState?.querySelector('button')).toBeNull()
+    expect(desktop.browserAgent.setPanelBounds).toHaveBeenLastCalledWith(null, null, PAGE.scopeId)
+    expect(container.querySelector('input')).not.toBeNull()
+  })
+
+  it('hands the surface back to the native page for navigation and restores it on a blank tab', async () => {
+    await render()
+    await render({ ...PAGE, loading: true })
+    expect(container.querySelector('section[aria-label="New tab"]')).toBeNull()
+    expect(desktop.browserAgent.setPanelBounds.mock.calls.at(-1)?.[0]).toEqual(
+      expect.objectContaining({ width: 700, height: 600 })
+    )
+    await render({ ...PAGE, url: 'https://example.com' })
+    expect(container.querySelector('section[aria-label="New tab"]')).toBeNull()
+    await render()
+    expect(container.querySelector('section[aria-label="New tab"]')).not.toBeNull()
+    expect(desktop.browserAgent.setPanelBounds).toHaveBeenLastCalledWith(null, null, PAGE.scopeId)
+  })
+
+  it('does not replace load errors with the new-tab state', async () => {
+    await render({
+      ...PAGE,
+      issue: {
+        kind: 'load-error',
+        url: 'https://missing.example',
+        code: -105,
+        description: 'ERR_NAME_NOT_RESOLVED',
+      },
+    })
+    expect(container.textContent).toContain("This site can't be reached")
+    expect(container.querySelector('section[aria-label="New tab"]')).toBeNull()
+  })
+
+  it('opens import in place from the native toolbar command', async () => {
+    await render()
+    const callback = desktop.browserAgent.onToolbarCommand.mock.calls[0][0]
+    await act(async () => callback('import', PAGE.scopeId))
+    expect(document.querySelector('[role="dialog"]')?.textContent).toContain(
+      'Import from your browser'
+    )
+    expect(navigateToSettings).not.toHaveBeenCalled()
+    expect(desktop.browserImport.listChromeProfiles).toHaveBeenCalledOnce()
+    expect(document.querySelector<HTMLElement>('[role="dialog"]')?.style.visibility).not.toBe(
+      'hidden'
+    )
+    expect(desktop.browserAgent.setPanelOccluded).toHaveBeenCalledWith(true, PAGE.scopeId, true)
+  })
+})