fix(cli-auth): wait for the workspace list before allowing approval

The picker fell back to "No workspace (personal key)" while the workspace query
was in flight, and Connect stayed live through that window. A fast click
approved a personal key with no default workspace — when the same click a moment
later would have issued a workspace-scoped key. The fallback read as an answer
rather than a pending state, so the card could promise one outcome and deliver
another.

Connect is now disabled until the list resolves, the trigger shows a loading
label (a placeholder would not show, since the fallback always counts as a
selection), and the explanatory line no longer asserts the personal-key outcome
before it is known.

Failure is treated as degraded rather than fatal: the picker disables but
Connect stays enabled and the copy says a personal key will be issued, so a
transient list failure cannot strand a waiting terminal.

Tests cover the pending, loaded, admin-binding, and error states; the two
loading assertions fail against the previous implementation.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EsThUPqZXjwuuyRjBbmVkj

Author: 2 people

apps/sim/app/cli/auth/cli-auth-view.test.tsx

@@ -0,0 +1,138 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockApprove, mockUseWorkspaces, mockPush } = vi.hoisted(() => ({
+  mockApprove: vi.fn(),
+  mockUseWorkspaces: vi.fn(),
+  mockPush: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+}))
+
+vi.mock('nuqs', () => ({
+  useQueryStates: () => [
+    {
+      request: 'a'.repeat(43),
+      challenge: 'b'.repeat(43),
+      pairing: 'ABCD-2345',
+      scope: 'platform',
+      workspace: null,
+    },
+  ],
+}))
+
+vi.mock('@/hooks/queries/cli-auth', () => ({
+  useApproveCliAuth: () => ({
+    mutate: mockApprove,
+    isPending: false,
+    isSuccess: false,
+    isError: false,
+    error: null,
+  }),
+}))
+
+vi.mock('@/hooks/queries/workspace', () => ({
+  useWorkspacesWithMetadata: mockUseWorkspaces,
+}))
+
+import { CliAuthView } from '@/app/cli/auth/cli-auth-view'
+
+let container: HTMLDivElement
+let root: Root
+
+function render() {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => {
+    root.render(<CliAuthView />)
+  })
+}
+
+/** The primary CTA is the only button whose label mentions connecting. */
+function connectButton(): HTMLButtonElement {
+  const buttons = [...container.querySelectorAll('button')] as HTMLButtonElement[]
+  const button = buttons.find((b) => /connect/i.test(b.textContent ?? ''))
+  if (!button) throw new Error('Connect button not found')
+  return button
+}
+
+const LOADED = {
+  isPending: false,
+  isError: false,
+  data: {
+    workspaces: [
+      { id: 'ws_admin', name: 'Acme', permissions: 'admin' },
+      { id: 'ws_member', name: 'Other', permissions: 'write' },
+    ],
+    lastActiveWorkspaceId: 'ws_admin',
+  },
+}
+
+describe('CliAuthView workspace loading', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('blocks Connect until the workspace list resolves', () => {
+    // The regression: while pending, the picker falls back to the personal
+    // option, so an early click approved a personal key when the same click a
+    // moment later would have bound the key to the user's workspace.
+    mockUseWorkspaces.mockReturnValue({ isPending: true, isError: false, data: undefined })
+    render()
+
+    expect(connectButton().disabled).toBe(true)
+    expect(container.textContent).toContain('Loading workspaces')
+    expect(container.textContent).not.toContain('No workspace (personal key)')
+  })
+
+  it('does not present the personal-key wording as the answer while loading', () => {
+    mockUseWorkspaces.mockReturnValue({ isPending: true, isError: false, data: undefined })
+    render()
+
+    expect(container.textContent).toContain('Checking which workspaces')
+    expect(container.textContent).not.toContain('Issues a personal key')
+  })
+
+  it('enables Connect and preselects the last active workspace once loaded', () => {
+    mockUseWorkspaces.mockReturnValue(LOADED)
+    render()
+
+    expect(connectButton().disabled).toBe(false)
+    expect(container.textContent).toContain('Acme')
+    expect(container.textContent).toContain('only reach Acme')
+  })
+
+  it('binds the key to the workspace when the approver is an admin', () => {
+    mockUseWorkspaces.mockReturnValue(LOADED)
+    render()
+    act(() => {
+      connectButton().click()
+    })
+
+    expect(mockApprove).toHaveBeenCalledWith(
+      expect.objectContaining({
+        scope: 'platform',
+        workspaceId: 'ws_admin',
+        bindKeyToWorkspace: true,
+      }),
+      expect.anything()
+    )
+  })
+
+  it('still lets the user connect when the workspace list fails', () => {
+    // A personal key is degraded but usable; blocking entirely would strand a
+    // terminal on a transient list failure.
+    mockUseWorkspaces.mockReturnValue({ isPending: false, isError: true, data: undefined })
+    render()
+
+    expect(connectButton().disabled).toBe(false)
+    expect(container.textContent).toContain('Could not load your workspaces')
+  })
+})

apps/sim/app/cli/auth/cli-auth-view.tsx

@@ -59,6 +59,18 @@ export function CliAuthView() {
 
   const { request } = resolution
 
+  /**
+   * Approval must wait for the workspace list.
+   *
+   * Until it arrives there is no selection to show, and the fallback would read
+   * as "No workspace (personal key)" — a real answer, not a pending one. Leaving
+   * Connect live through that window let a fast click approve a personal key
+   * with no default workspace, when a moment later the same click would have
+   * bound the key to the user's workspace. Blocking is the only way the card
+   * can promise what it is about to do.
+   */
+  const loadingWorkspaces = isPlatform && workspaces.isPending
+
   // The terminal's suggestion, then the user's last active workspace. Derived at
   // render rather than synced into state through an effect, so the first paint
   // after the list loads already shows the right row.
@@ -91,23 +103,32 @@ export function CliAuthView() {
               options={options}
               value={workspaceId ?? PERSONAL_VALUE}
               onChange={setSelected}
-              disabled={workspaces.isLoading}
+              disabled={loadingWorkspaces || workspaces.isError}
+              // A placeholder only shows when nothing is selected, and the
+              // fallback value always counts as a selection — so the loading
+              // state has to override the rendered label outright.
+              displayLabel={loadingWorkspaces ? 'Loading workspaces…' : undefined}
               placeholder='Select a workspace'
               searchable={options.length > 8}
               searchPlaceholder='Search workspaces'
               fullWidth
               dropdownWidth='trigger'
             />
             <p className='text-[var(--text-muted)] text-caption'>
-              {bindsToWorkspace
-                ? `Issues a key that can only reach ${chosen.name}.`
-                : 'Issues a personal key tied to your account, defaulting to this workspace. Workspace-scoped keys need admin.'}
+              {loadingWorkspaces
+                ? 'Checking which workspaces you can issue a key for…'
+                : workspaces.isError
+                  ? 'Could not load your workspaces. Connecting still works and issues a personal key; reload to pick a default workspace.'
+                  : bindsToWorkspace
+                    ? `Issues a key that can only reach ${chosen.name}.`
+                    : 'Issues a personal key tied to your account, defaulting to this workspace. Workspace-scoped keys need admin.'}
             </p>
           </div>
         )}
         <AuthSubmitButton
           type='button'
           loading={approve.isPending || approve.isSuccess}
+          disabled={loadingWorkspaces}
           loadingLabel='Connecting'
           onClick={() =>
             approve.mutate(