onboarding: add endpoint selection UI for non-VSCode IDEs

vscode/.storybook/main.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 import type { StorybookConfig } from '@storybook/react-vite'
 import { defineProjectWithDefaults } from '../../.config/viteShared'
 
@@ -33,6 +34,14 @@ const config: StorybookConfig = {
             css: {
                 postcss: __dirname + '/../webviews',
             },
+            resolve: {
+                alias: [
+                    {
+                        find: 'env-paths',
+                        replacement: resolve(__dirname, '../../web/lib/agent/shims/env-paths.ts'),
+                    },
+                ],
+            },
         }),
     staticDirs: ['./static'],
 }

vscode/package.json

@@ -1380,6 +1380,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-form": "^0.1.0",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",

vscode/src/chat/chat-view/ChatController.ts

@@ -135,6 +135,7 @@ import { InitDoer } from './InitDoer'
 import { getChatPanelTitle } from './chat-helpers'
 import { type HumanInput, getPriorityContext } from './context'
 import { DefaultPrompter, type PromptInfo } from './prompt'
+import {secretStorage} from "../../services/SecretStorageProvider";
 
 export interface ChatControllerOptions {
     extensionUri: vscode.Uri
@@ -438,11 +439,17 @@ export class ChatController implements vscode.Disposable, vscode.WebviewViewProv
                     }
                     break
                 }
-                if (message.authKind === 'signin' && message.endpoint && message.value) {
-                    await localStorage.saveEndpointAndToken({
-                        serverEndpoint: message.endpoint,
-                        accessToken: message.value,
-                    })
+                if (message.authKind === 'signin' && message.endpoint) {
+                    const serverEndpoint = message.endpoint
+                    const accessToken = message.value ? message.value : (await secretStorage.getToken(serverEndpoint)) ?? ''
+                    const tokenSource = message.value ? 'paste' : await secretStorage.getTokenSource(serverEndpoint)
+                    const validationResult = await authProvider.validateAndStoreCredentials(
+                        { serverEndpoint, accessToken, tokenSource },
+                        'always-store'
+                    )
+                    if (!validationResult.authStatus.authenticated) {
+                        await showSignInMenu()
+                    }
                     break
                 }
                 if (message.authKind === 'signout') {
@@ -505,10 +512,13 @@ export class ChatController implements vscode.Disposable, vscode.WebviewViewProv
         const sidebarViewOnly = this.extensionClient.capabilities?.webviewNativeConfig?.view === 'single'
         const isEditorViewType = this.webviewPanelOrView?.viewType === 'cody.editorPanel'
         const webviewType = isEditorViewType && !sidebarViewOnly ? 'editor' : 'sidebar'
+        const endpoints = localStorage.getEndpointHistory() ?? []
+
         const uiKindIsWeb = (cenv.CODY_OVERRIDE_UI_KIND ?? vscode.env.uiKind) === vscode.UIKind.Web
         return {
             uiKindIsWeb,
             serverEndpoint: auth.serverEndpoint,
+            endpointHistory: [...endpoints].reverse(),
             experimentalNoodle: configuration.experimentalNoodle,
             smartApply: this.isSmartApplyEnabled(),
             webviewType,

vscode/src/chat/protocol.ts

@@ -229,6 +229,7 @@ export interface ConfigurationSubsetForWebview
     webviewType?: WebviewType | undefined | null
     // Whether support running multiple webviews (e.g. sidebar w/ multiple editor panels).
     multipleWebviewsEnabled?: boolean | undefined | null
+    endpointHistory?: string[] | undefined | null
 }
 
 /**

vscode/webviews/App.tsx

@@ -169,7 +169,9 @@ export const App: React.FunctionComponent<{ vscodeAPI: VSCodeWrapper }> = ({ vsc
                     <AuthPage
                         simplifiedLoginRedirect={loginRedirect}
                         uiKindIsWeb={config.config.uiKindIsWeb}
+                        authStatus={config.authStatus}
                         vscodeAPI={vscodeAPI}
+                        endpoints={config.config.endpointHistory ?? []}
                         codyIDE={config.clientCapabilities.agentIDE}
                     />
                 </div>

vscode/webviews/AuthPage.story.tsx

@@ -21,6 +21,12 @@ const meta: Meta<typeof AuthPage> = {
         uiKindIsWeb: false,
         vscodeAPI: vscodeAPI,
         codyIDE: CodyIDE.VSCode,
+        authStatus: {
+            authenticated: false,
+            endpoint: '',
+            pendingValidation: false,
+            showInvalidAccessTokenError: true,
+        },
     },
 }
 

vscode/webviews/AuthPage.tsx

@@ -12,8 +12,15 @@ import { GlobeIcon, LockKeyholeIcon } from 'lucide-react'
 import { useCallback, useState } from 'react'
 import { Button } from './components/shadcn/ui/button'
 import { Form, FormControl, FormField, FormLabel, FormMessage } from './components/shadcn/ui/form'
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from './components/shadcn/ui/select'
 import { useTelemetryRecorder } from './utils/telemetry'
-import { useConfig } from './utils/useConfig'
 
 /**
  * A component that shows the available ways for the user to sign in or sign up.
@@ -23,8 +30,9 @@ export const AuthPage: React.FunctionComponent<React.PropsWithoutRef<LoginProps>
     uiKindIsWeb,
     vscodeAPI,
     codyIDE,
+    endpoints,
+    authStatus,
 }) => {
-    const authStatus = useConfig().authStatus
     const telemetryRecorder = useTelemetryRecorder()
     const otherSignInClick = (): void => {
         vscodeAPI.postMessage({ command: 'auth', authKind: 'signin' })
@@ -43,7 +51,11 @@ export const AuthPage: React.FunctionComponent<React.PropsWithoutRef<LoginProps>
                         <Button onClick={otherSignInClick}>Sign In to Your Enterprise Instance</Button>
                     </div>
                 ) : (
-                    <ClientSignInForm authStatus={authStatus} vscodeAPI={vscodeAPI} />
+                    <ClientSignInForm
+                        authStatus={authStatus}
+                        vscodeAPI={vscodeAPI}
+                        endpoints={endpoints}
+                    />
                 )}
                 <p className="tw-mt-4 tw-mb-0 tw-text-muted-foreground">
                     Learn more about <a href="https://sourcegraph.com/cloud">Sourcegraph Enterprise</a>.
@@ -101,6 +113,14 @@ export const AuthPage: React.FunctionComponent<React.PropsWithoutRef<LoginProps>
                     )}
                 </div>
             </section>
+            {endpoints?.length && (
+                <section className="tw-bg-sidebar-background tw-text-sidebar-foreground tw-border tw-border-border tw-rounded-lg tw-p-6 tw-w-full tw-max-w-md">
+                    <h2 className="tw-font-semibold tw-text-lg tw-mb-4">Account History</h2>
+                    <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
+                        <EndpointSelection authStatus={authStatus} endpoints={endpoints} />
+                    </div>
+                </section>
+            )}
             <footer className="tw-text-sm tw-text-muted-foreground">
                 Cody is proudly built by Sourcegraph. By signing in to Cody, you agree to our{' '}
                 <a target="_blank" rel="noopener noreferrer" href="https://about.sourcegraph.com/terms">
@@ -125,6 +145,8 @@ interface LoginProps {
     uiKindIsWeb: boolean
     vscodeAPI: VSCodeWrapper
     codyIDE: CodyIDE
+    endpoints: string[]
+    authStatus: AuthStatus
 }
 
 const WebLogin: React.FunctionComponent<
@@ -171,6 +193,7 @@ const WebLogin: React.FunctionComponent<
 
 interface ClientSignInFormProps {
     vscodeAPI: VSCodeWrapper
+    endpoints: string[]
     authStatus?: AuthStatus
     className?: string
 }
@@ -182,9 +205,9 @@ interface ClientSignInFormProps {
  * It validates the input and sends the authentication information to the VSCode extension
  * when the user clicks the "Sign In with Access Token" button.
  */
-const ClientSignInForm: React.FC<ClientSignInFormProps> = ({ className, authStatus }) => {
+const ClientSignInForm: React.FC<ClientSignInFormProps> = ({ className, authStatus, endpoints }) => {
     const [formData, setFormData] = useState({
-        endpoint: authStatus?.endpoint ?? '',
+        endpoint: authStatus?.endpoint ?? endpoints?.[0] ?? '',
         accessToken: '',
     })
 
@@ -218,6 +241,14 @@ const ClientSignInForm: React.FC<ClientSignInFormProps> = ({ className, authStat
         }
     }, [formData.accessToken, onAccessTokenSignInClick, onBrowserSignInClick])
 
+    const serverInvalid =
+        authStatus &&
+        !authStatus.authenticated &&
+        !authStatus.pendingValidation &&
+        (authStatus.showNetworkError || authStatus.showInvalidAccessTokenError)
+    const showNetworkError = serverInvalid && authStatus.showNetworkError
+    const invalidToken = (serverInvalid && authStatus.showInvalidAccessTokenError) || false
+
     return (
         <Form className={className} onSubmit={onSubmit}>
             <FormField name="endpoint">
@@ -237,10 +268,7 @@ const ClientSignInForm: React.FC<ClientSignInFormProps> = ({ className, authStat
                 <GlobeIcon size={16} /> Sign In with Browser
             </Button>
 
-            <FormField
-                name="accessToken"
-                serverInvalid={authStatus && !authStatus.authenticated && authStatus.showNetworkError}
-            >
+            <FormField name="accessToken" serverInvalid={serverInvalid}>
                 <FormLabel title="Access Token" />
                 <FormControl
                     type="password"
@@ -251,9 +279,15 @@ const ClientSignInForm: React.FC<ClientSignInFormProps> = ({ className, authStat
                     autoComplete="current-password"
                     required
                 />
-                <FormMessage match={() => !isSourcegraphToken(formData.accessToken)}>
+                <FormMessage
+                    match={() => !isSourcegraphToken(formData.accessToken)}
+                    forceMatch={invalidToken}
+                >
                     Invalid access token.
                 </FormMessage>
+                {showNetworkError && (
+                    <FormMessage>Network error. Please check your connection and try again.</FormMessage>
+                )}
                 <FormMessage match="valueMissing">Access token is required.</FormMessage>
             </FormField>
             <Button
@@ -267,3 +301,57 @@ const ClientSignInForm: React.FC<ClientSignInFormProps> = ({ className, authStat
         </Form>
     )
 }
+
+export const EndpointSelection: React.FunctionComponent<
+    React.PropsWithoutRef<{
+        authStatus: AuthStatus
+        endpoints: string[]
+    }>
+> = ({ authStatus, endpoints }) => {
+    // No endpoint history to show.
+    if (!endpoints.length) {
+        return null
+    }
+
+    const [selectedEndpoint, setSelectedEndpoint] = useState<string | undefined>(authStatus.endpoint)
+
+    const onChange = useCallback(
+        (endpoint: string) => {
+            setSelectedEndpoint(endpoint)
+            // The user was already authenticated with an invalid token. Let's not send another auth request.
+            if (endpoint === authStatus?.endpoint) {
+                return
+            }
+            getVSCodeAPI().postMessage({
+                command: 'auth',
+                authKind: 'signin',
+                endpoint: endpoint,
+            })
+        },
+        [authStatus]
+    )
+
+    return (
+        <div className="tw-flex tw-flex-col tw-gap-6 tw-w-full">
+            <Select onValueChange={(v: string) => onChange(v)} value="">
+                <SelectTrigger className="tw-w-full">
+                    <SelectValue className="tw-w-full" placeholder={selectedEndpoint} />
+                </SelectTrigger>
+                <SelectContent position="item-aligned" className="tw-w-full tw-m-2 tw-bg-muted">
+                    <SelectGroup className="tw-w-full" key="instances">
+                        {endpoints?.map(endpoint => (
+                            <SelectItem key={endpoint} value={endpoint} className="tw-w-full tw-p-3">
+                                {endpoint}
+                            </SelectItem>
+                        ))}
+                    </SelectGroup>
+                </SelectContent>
+            </Select>
+            {!authStatus.authenticated && authStatus.endpoint === selectedEndpoint && (
+                <p className="tw-mt-2 tw-mb-0 tw-text-red-500">
+                    Sign in failed. Try re-authenticate again with the forms above.
+                </p>
+            )}
+        </div>
+    )
+}

vscode/webviews/CodyPanel.tsx

@@ -106,7 +106,9 @@ export const CodyPanel: FunctionComponent<
                         />
                     )}
                     {view === View.Prompts && <PromptsTab setView={setView} />}
-                    {view === View.Account && <AccountTab setView={setView} />}
+                    {view === View.Account && !clientCapabilities.isVSCode && (
+                        <AccountTab setView={setView} endpointHistory={config.endpointHistory || []} />
+                    )}
                     {view === View.Settings && <SettingsTab />}
                 </TabContainer>
                 <StateDebugOverlay />

vscode/webviews/components/shadcn/ui/select.tsx

@@ -0,0 +1,44 @@
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon } from 'lucide-react'
+import React from 'react'
+import { cn } from '../utils'
+
+const Select = SelectPrimitive.Select
+const SelectContent = SelectPrimitive.Content
+const SelectGroup = SelectPrimitive.Group
+const SelectLabel = SelectPrimitive.Label
+const SelectValue = SelectPrimitive.Value
+const SelectIcon = SelectPrimitive.Icon
+
+const SelectTrigger = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            'tw-flex tw-w-full tw-items-center tw-justify-between tw-rounded-md tw-border tw-border-border tw-bg-muted',
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <SelectIcon asChild>
+            <ChevronDownIcon />
+        </SelectIcon>
+    </SelectPrimitive.Trigger>
+))
+
+const SelectItem = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item ref={ref} className={cn('tw-w-full tw-bg-muted', className)} {...props}>
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        <SelectPrimitive.ItemIndicator className="tw-w-full tw-bg-muted">
+            <CheckIcon />
+        </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+))
+
+export { Select, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectTrigger, SelectValue }

vscode/webviews/tabs/AccountTab.story.tsx

@@ -20,6 +20,7 @@ const meta: Meta<typeof AccountTab> = {
         setView: () => {
             console.log('setView called')
         },
+        endpointHistory: [],
     },
 }
 
@@ -98,7 +99,10 @@ export const EnterpriseUser: Story = {
                 } as AuthenticatedAuthStatus,
             })}
         >
-            <AccountTab {...args} />
+            <AccountTab
+                {...args}
+                endpointHistory={['https://int1.sg.bigcorp.com', 'https://int2.sg.bigcorp.com']}
+            />
         </ConfigProvider>
     ),
 }