Merge remote-tracking branch 'origin/feat/mothership-revamp' into feat/mothership-revamp

# Conflicts:
#	apps/sim/lib/core/config/deployment-shape.test.ts

Author: Sg312

apps/desktop/e2e/password-autofill.spec.ts

@@ -122,21 +122,21 @@ test.describe('saved password autofill', () => {
     )
   })
 
-  async function seed(count: number) {
+  async function seed(count: number, prefix = 'account') {
     const ciphertext = await app.evaluate(
-      ({ safeStorage }, { site, count }) => {
+      ({ safeStorage }, { site, count, prefix }) => {
         const records = Array.from({ length: count }, (_, index) => ({
           id: `account-${index}`,
           origin: site,
-          username: `account${index + 1}@example.test`,
+          username: `${prefix}${index + 1}@example.test`,
           password: `fixture-secret-${index}`,
           createdAt: '2026-01-01T00:00:00.000Z',
           updatedAt: '2026-01-01T00:00:00.000Z',
           source: 'manual',
         }))
         return safeStorage.encryptString(JSON.stringify(records)).toString('base64')
       },
-      { site, count }
+      { site, count, prefix }
     )
     writeFileSync(
       join(userData, 'browser-credentials.json'),
@@ -319,13 +319,65 @@ test.describe('saved password autofill', () => {
       .toBe(false)
   })
 
+  for (const count of [1, 3]) {
+    test(`keeps full account tooltips inside a ${count}-account picker`, async () => {
+      const prefix = 'person.with.a.long.name.and.department.for.signin'
+      await seed(count, prefix)
+      await clickField()
+      const menu = await picker()
+      await menu.getByRole('menuitem').first().hover()
+      const tooltip = menu.locator('body > [data-native-surface-overlay][aria-hidden="true"]')
+      await expect(tooltip).toBeVisible()
+      await expect(tooltip).toHaveText(`${prefix}1@example.test`)
+      await expect
+        .poll(() =>
+          tooltip.evaluate((element) => {
+            const rect = element.getBoundingClientRect()
+            return (
+              rect.left >= 0 &&
+              rect.top >= 0 &&
+              rect.right <= innerWidth &&
+              rect.bottom <= innerHeight
+            )
+          })
+        )
+        .toBe(true)
+      if (SCREENSHOTS) {
+        await menu.screenshot({ path: join(SCREENSHOTS, `password-picker-long-${count}.png`) })
+      }
+      await app.evaluate(({ BrowserWindow }) => {
+        BrowserWindow.getAllWindows()
+          .find((window) => window.webContents.getURL().includes('credential-picker.html'))!
+          .setContentSize(800, 600)
+      })
+      await menu
+        .getByRole('menuitem')
+        .first()
+        .hover({ position: { x: 100, y: 14 } })
+      await expect
+        .poll(() =>
+          tooltip.evaluate((element) => {
+            const rect = element.getBoundingClientRect()
+            return (
+              rect.left >= 100 &&
+              rect.top >= 0 &&
+              rect.right <= innerWidth &&
+              rect.bottom <= innerHeight
+            )
+          })
+        )
+        .toBe(true)
+    })
+  }
+
   test('dismisses an inactive picker on outside input and hides it when its page disappears', async () => {
     await clickField()
     await picker()
     await host.getByRole('button', { name: 'Outside the browser' }).click()
     await expect
       .poll(() => app.windows().some((page) => page.url().includes('credential-picker.html')))
       .toBe(false)
+    await expect(host.getByRole('button', { name: 'Outside the browser' })).toBeFocused()
     await clickField()
     await picker()
     await host.evaluate((scope) => {
@@ -339,6 +391,45 @@ test.describe('saved password autofill', () => {
     expect(await pageScript('document.getElementById("pass").value')).toBe('')
   })
 
+  test('returns keyboard focus to the login after dismissal and selection', async () => {
+    await clickField()
+    await picker()
+    await app.evaluate(({ webContents }, site) => {
+      const page = webContents
+        .getAllWebContents()
+        .find((contents) => contents.getURL().startsWith(`${site}/login`))!
+      page.sendInputEvent({ type: 'keyDown', keyCode: 'Down' })
+      page.sendInputEvent({ type: 'keyUp', keyCode: 'Down' })
+    }, site)
+    await expect
+      .poll(() =>
+        app.evaluate(({ BrowserWindow }) =>
+          BrowserWindow.getFocusedWindow()?.webContents.getURL().includes('credential-picker.html')
+        )
+      )
+      .toBe(true)
+    await pickerKey('Escape')
+    await expect
+      .poll(() =>
+        app.evaluate(({ BrowserWindow, webContents }) => ({
+          window: BrowserWindow.getFocusedWindow()?.webContents.getURL(),
+          page: webContents.getFocusedWebContents()?.getURL(),
+        }))
+      )
+      .toEqual({ window: host.url(), page: `${site}/login` })
+    await app.evaluate(({ webContents }) => {
+      const page = webContents.getFocusedWebContents()!
+      page.sendInputEvent({ type: 'keyDown', keyCode: 'Tab' })
+      page.sendInputEvent({ type: 'keyUp', keyCode: 'Tab' })
+    })
+    await expect.poll(() => pageScript('document.activeElement.id')).toBe('pass')
+    const menu = await picker()
+    await menu.getByRole('menuitem').first().click()
+    await expect
+      .poll(() => app.evaluate(({ webContents }) => webContents.getFocusedWebContents()?.getURL()))
+      .toBe(`${site}/login`)
+  })
+
   test('rejects replaced fields and excludes account creation', async () => {
     await clickField()
     await picker()
@@ -354,11 +445,18 @@ test.describe('saved password autofill', () => {
   })
   test('offers a focused manual chooser with one account', async () => {
     await seed(1)
+    await host.evaluate(async (scope) => {
+      const api = (globalThis as typeof globalThis & { simDesktop: SimDesktopApi }).simDesktop
+      await api.browserAgent.capturePanelSnapshot(scope)
+      if (!(await api.browserAgent.setPanelOccluded(true, scope))) {
+        throw new Error('Could not open the toolbar overlay')
+      }
+    }, SCOPE)
     await host.evaluate((scope) => {
-      document.getElementById('outside')!.onclick = () => {
-        void (
-          globalThis as typeof globalThis & { simDesktop: SimDesktopApi }
-        ).simDesktop.browserCredentials.showChooser({ x: 20, y: 80 }, scope)
+      document.getElementById('outside')!.onclick = async () => {
+        const api = (globalThis as typeof globalThis & { simDesktop: SimDesktopApi }).simDesktop
+        await api.browserAgent.setPanelOccluded(false, scope)
+        await api.browserCredentials.showChooser({ x: 20, y: 80 }, scope)
       }
     }, SCOPE)
     await host.getByRole('button', { name: 'Outside the browser' }).click()

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

@@ -3,20 +3,27 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 vi.mock('electron', () => import('@/test/electron-mock'))
 
 import { sleep } from '@sim/utils/helpers'
-import type { BrowserWindow, WebContents } from 'electron'
-import { FillCoordinator } from '@/main/browser-credentials/fill'
+import { BrowserWindow, type WebContents } from 'electron'
+import { FillCoordinator, type FillCoordinatorDeps } from '@/main/browser-credentials/fill'
 import type { CredentialPicker } from '@/main/browser-credentials/picker'
 import type { CredentialVault } from '@/main/browser-credentials/vault'
 import type { CredentialFormReport } from '@/shared/browser-credentials'
 
 const ORIGIN = 'https://example.com'
 const SCOPE = 'chat-a'
-const WINDOW = {
-  getContentBounds: () => ({ x: 0, y: 0 }),
+const WINDOW = Object.assign(new BrowserWindow(), {
+  getContentBounds: () => ({ x: 0, y: 0, width: 1200, height: 800 }),
   isDestroyed: () => false,
-} as BrowserWindow
+  isVisible: () => true,
+  isMinimized: () => false,
+  isFocused: () => true,
+  focus: vi.fn(),
+})
 
-const { pickerOptions } = vi.hoisted(() => ({ pickerOptions: vi.fn() }))
+const { pickerOptions, pickerFocus } = vi.hoisted(() => ({
+  pickerOptions: vi.fn(),
+  pickerFocus: vi.fn(),
+}))
 vi.mock('@/main/browser-credentials/picker', () => ({
   CredentialPicker: class {
     constructor(private readonly options: ConstructorParameters<typeof CredentialPicker>[0]) {
@@ -26,7 +33,9 @@ vi.mock('@/main/browser-credentials/picker', () => ({
       this.options.closed()
     }
     position() {}
-    focus() {}
+    focus() {
+      pickerFocus()
+    }
   },
 }))
 
@@ -35,6 +44,7 @@ function fakeContents(url = `${ORIGIN}/login`) {
     getURL: vi.fn(() => url),
     isDestroyed: vi.fn(() => false),
     send: vi.fn(),
+    focus: vi.fn(),
   }
 }
 
@@ -58,7 +68,19 @@ function fakeVault(overrides: Partial<Record<string, unknown>> = {}) {
 
 type Contents = ReturnType<typeof fakeContents>
 
-function setup(contents: Contents = fakeContents(), vault = fakeVault()) {
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((done) => {
+    resolve = done
+  })
+  return { promise, resolve }
+}
+
+function setup(
+  contents: Contents = fakeContents(),
+  vault = fakeVault(),
+  pickerHost?: FillCoordinatorDeps['pickerHost']
+) {
   const onAvailabilityChanged = vi.fn()
   let active: Contents | null = contents
   let activeScope = SCOPE
@@ -70,6 +92,7 @@ function setup(contents: Contents = fakeContents(), vault = fakeVault()) {
       !scopeId || scopeId === activeScope ? (active as unknown as WebContents | null) : null,
     scopeOwnsContents: (scopeId, candidate) => contentsScopes.get(candidate) === scopeId,
     onAvailabilityChanged,
+    pickerHost,
   })
   return {
     coordinator,
@@ -124,6 +147,7 @@ async function settle(): Promise<void> {
 
 beforeEach(() => {
   pickerOptions.mockClear()
+  pickerFocus.mockClear()
 })
 
 describe('fill availability', () => {
@@ -259,6 +283,91 @@ describe('fill availability', () => {
 })
 
 describe('credential chooser', () => {
+  it.each(['hidden', 'minimized', 'unfocused'])(
+    'does not open when the parent becomes %s during a metadata lookup',
+    async (state) => {
+      const context = setup()
+      context.coordinator.noteFormState(
+        context.contents as unknown as WebContents,
+        loginFormState()
+      )
+      const matches = await context.vault.listForOrigin()
+      const pending = deferred<typeof matches>()
+      context.vault.listForOrigin.mockReturnValueOnce(pending.promise)
+      let available = true
+      const window = Object.assign(new BrowserWindow(), {
+        ...WINDOW,
+        isVisible: () => state !== 'hidden' || available,
+        isMinimized: () => state === 'minimized' && !available,
+        isFocused: () => state !== 'unfocused' || available,
+      })
+      const opened = context.coordinator.showChooser(window, { x: 0, y: 0 })
+      available = false
+      pending.resolve(matches)
+      await expect(opened).resolves.toBe(false)
+      expect(pickerOptions).not.toHaveBeenCalled()
+    }
+  )
+
+  it.each(['disappears', 'moves'])(
+    'rechecks the field host when it %s during a metadata lookup',
+    async (change) => {
+      const anchor = { x: 10, y: 20, width: 200, height: 30 }
+      const pickerHost = vi.fn<NonNullable<FillCoordinatorDeps['pickerHost']>>(() => ({
+        window: WINDOW,
+        anchor,
+      }))
+      const context = setup(fakeContents(), fakeVault(), pickerHost)
+      context.coordinator.noteFormState(
+        context.contents as unknown as WebContents,
+        loginFormState({ bounds: anchor })
+      )
+      const matches = await context.vault.listForOrigin()
+      const pending = deferred<typeof matches>()
+      context.vault.listForOrigin.mockReturnValueOnce(pending.promise)
+      const opened = context.coordinator.showChooser(WINDOW, { x: 0, y: 0 })
+      const moved = { ...anchor, x: 90, y: 100 }
+      pickerHost.mockReturnValue(change === 'disappears' ? null : { window: WINDOW, anchor: moved })
+      pending.resolve(matches)
+      await expect(opened).resolves.toBe(change === 'moves')
+      if (change === 'disappears') expect(pickerOptions).not.toHaveBeenCalled()
+      else expect(pickerOptions).toHaveBeenCalledWith(expect.objectContaining({ anchor: moved }))
+    }
+  )
+
+  it.each(['navigation', 'tab change'])('does not restore focus after %s', async (change) => {
+    const context = setup()
+    await openChooser(context)
+    const options = pickerOptions.mock.calls.at(-1)![0] as ConstructorParameters<
+      typeof CredentialPicker
+    >[0]
+    if (change === 'navigation') {
+      context.coordinator.noteNavigation(context.contents as unknown as WebContents)
+    } else context.setActive(fakeContents())
+    options.restoreFocus()
+    expect(context.contents.focus).not.toHaveBeenCalled()
+  })
+
+  it('does not let a superseded keyboard request focus a newer picker', async () => {
+    const anchor = { x: 0, y: 0, width: 200, height: 30 }
+    const context = setup(fakeContents(), fakeVault(), () => ({ window: WINDOW, anchor }))
+    const contents = context.contents as unknown as WebContents
+    context.coordinator.noteFormState(contents, loginFormState({ bounds: anchor }))
+    const matches = await context.vault.listForOrigin()
+    const pending = deferred<typeof matches>()
+    context.vault.listForOrigin.mockReturnValueOnce(pending.promise)
+    const first = context.coordinator.requestPicker(contents, 'focus')
+    context.coordinator.noteFormState(
+      contents,
+      loginFormState({ bounds: anchor, targetId: 'next' })
+    )
+    await context.coordinator.requestPicker(contents, 'open')
+    expect(pickerOptions).toHaveBeenCalledOnce()
+    pending.resolve(matches)
+    await first
+    expect(pickerFocus).not.toHaveBeenCalled()
+  })
+
   it('lists usernames without reading any password', async () => {
     const context = setup()
     const template = await openChooser(context)