fix(settings): show cookie import as available before skill setup (#34097)

src/renderer/src/components/browser-cookie-import-google-disclosure.test.tsx

@@ -86,7 +86,6 @@ describe('cookie-import Google disclosure footer', () => {
         <BrowserUseCookieImportStep
           cookiesImported={false}
           isImportingDefault={false}
-          disabled={false}
           sourceLabel={null}
         />
       )

src/renderer/src/components/settings/BrowserUseCookieImportStep.tsx

@@ -1,7 +1,6 @@
 import { Import, Loader2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { emitBrowserCookieImportToast } from '@/lib/browser-cookie-import-toast'
-import { cn } from '@/lib/utils'
 import { Button } from '../ui/button'
 import { BrowserCookieImportDisclosure } from '../BrowserCookieImportDisclosure'
 import { BrowserCookieImportMachineNotice } from '../BrowserCookieImportMachineNotice'
@@ -25,7 +24,6 @@ import { translate } from '@/i18n/i18n'
 type BrowserUseCookieImportStepProps = {
   cookiesImported: boolean
   isImportingDefault: boolean
-  disabled: boolean
   sourceLabel: string | null
   onConfigureMoreBrowsers?: () => void
 }
@@ -33,7 +31,6 @@ type BrowserUseCookieImportStepProps = {
 export function BrowserUseCookieImportStep({
   cookiesImported,
   isImportingDefault,
-  disabled,
   sourceLabel,
   onConfigureMoreBrowsers
 }: BrowserUseCookieImportStepProps): React.JSX.Element {
@@ -96,7 +93,7 @@ export function BrowserUseCookieImportStep({
         'Import cookies from Chrome, Edge, or other browsers so agents can reuse your logins.'
       )}
       keywords={getBrowserUsePaneSearchEntries()[1].keywords}
-      className={cn('rounded-xl border border-border/60 bg-card/50 p-4', disabled && 'opacity-60')}
+      className="rounded-xl border border-border/60 bg-card/50 p-4"
     >
       <div className="flex items-start gap-3">
         <StepBadge

src/renderer/src/components/settings/BrowserUsePane.test.tsx

@@ -0,0 +1,61 @@
+// @vitest-environment happy-dom
+
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, expect, it, vi } from 'vitest'
+import { BROWSER_USE_ENABLED_STORAGE_KEY } from '@/lib/browser-use-setup-state'
+import { BrowserUseSetup } from './BrowserUsePane'
+
+const state = vi.hoisted(
+  (): {
+    settingsSearchQuery: string
+    browserSessionProfiles: []
+    fetchBrowserSessionProfiles: () => void
+    browserSessionImportState: { profileId: string; status: 'importing' } | null
+    detectedBrowsers: []
+    fetchDetectedBrowsers: () => void
+  } => ({
+    settingsSearchQuery: '',
+    browserSessionProfiles: [],
+    fetchBrowserSessionProfiles: vi.fn(),
+    browserSessionImportState: null,
+    detectedBrowsers: [],
+    fetchDetectedBrowsers: vi.fn()
+  })
+)
+
+vi.mock('../../store', () => ({
+  useAppStore: (selector: (value: typeof state) => unknown) => selector(state)
+}))
+vi.mock('@/hooks/useActiveProjectSkillRuntime', () => ({
+  useActiveProjectSkillRuntime: () => ({ installDisabledReason: null })
+}))
+vi.mock('@/hooks/useInstalledAgentSkills', () => ({
+  GLOBAL_AGENT_SKILL_SOURCE_KINDS: ['home'],
+  useInstalledAgentSkill: () => ({
+    installed: false,
+    loading: false,
+    error: null,
+    refresh: vi.fn()
+  })
+}))
+vi.mock('./BrowserUseSkillStep', () => ({ BrowserUseSkillStep: () => null }))
+vi.mock('./BrowserUseExamples', () => ({ BrowserUseExamples: () => null }))
+
+afterEach(() => {
+  cleanup()
+  localStorage.removeItem(BROWSER_USE_ENABLED_STORAGE_KEY)
+  state.browserSessionImportState = null
+})
+
+it('shows cookie import as available before skill setup and disables it during import', () => {
+  localStorage.setItem(BROWSER_USE_ENABLED_STORAGE_KEY, '1')
+  const { rerender } = render(<BrowserUseSetup />)
+  const importButton = screen.getByRole('button', { name: 'Import' })
+
+  expect(importButton.hasAttribute('disabled')).toBe(false)
+  expect(importButton.closest('.opacity-60')).toBeNull()
+
+  state.browserSessionImportState = { profileId: 'default', status: 'importing' }
+  rerender(<BrowserUseSetup />)
+  expect(screen.getByRole('button', { name: 'Import' }).hasAttribute('disabled')).toBe(true)
+})

src/renderer/src/components/settings/BrowserUsePane.tsx

@@ -79,7 +79,6 @@ export function BrowserUseSetup({
   const steps = [skillDetected, cookiesImported]
   const completedCount = steps.filter(Boolean).length
   const skillDisabled = Boolean(activeSkillRuntime.installDisabledReason)
-  const cookieImportDisabled = !cookiesImported && !skillDetected
 
   const sourceLabel = defaultProfile?.source
     ? `${BROWSER_FAMILY_LABELS[defaultProfile.source.browserFamily] ?? defaultProfile.source.browserFamily}${defaultProfile.source.profileName ? ` (${defaultProfile.source.profileName})` : ''}`
@@ -175,7 +174,6 @@ export function BrowserUseSetup({
         <BrowserUseCookieImportStep
           cookiesImported={cookiesImported}
           isImportingDefault={isImportingDefault}
-          disabled={cookieImportDisabled}
           sourceLabel={sourceLabel}
           onConfigureMoreBrowsers={onConfigureMoreBrowsers}
         />