Ask for a name when adding another integration account

packages/worker/client/routes/account-integrations.tsx

@@ -39,9 +39,14 @@ import {
 } from '#client/routes/record-table.tsx'
 import { renderByokExplainer } from '#client/routes/byok-explainer.tsx'
 import {
+	addAccountAnchorId,
+	buildAddAccountHref,
 	buildCustomIntegrationSetupPrompt,
 	buildIntegrationSetupPrompt,
 	integrationProviderSuggestions,
+	isAddAccountFormOpen,
+	nextSuggestedConnectionName,
+	resolveAddAccountConnectionName,
 } from '#client/routes/integration-provider-catalog.ts'
 import { integrationDisplayName } from '#client/routes/integration-filter.ts'
 import { matchesSearchQuery } from '#client/search-filter.ts'
@@ -258,8 +263,11 @@ function buildConnectOauthHref(input: {
 	appSlug?: string
 }) {
 	const params = new URLSearchParams({ provider: input.name })
+	const appSlug = input.appSlug?.trim()
 	if (input.platform) {
-		params.set('platform', input.appSlug?.trim() || '1')
+		params.set('platform', appSlug || '1')
+	} else if (appSlug) {
+		params.set('app', appSlug)
 	}
 	return `/connect/oauth?${params.toString()}`
 }
@@ -268,6 +276,132 @@ function connectActionLabel(status: 'Connected' | 'Needs setup') {
 	return status === 'Connected' ? 'Reconnect' : 'Connect'
 }
 
+const addAccountLinkCss = {
+	...primaryLinkCss,
+	justifySelf: 'start',
+	width: 'fit-content',
+}
+
+function AddAccountForm(
+	handle: Handle<{
+		slug: string
+		platform: boolean
+		existingNames: ReadonlyArray<string>
+		open: boolean
+		openHref: string
+	}>,
+) {
+	let nameError: string | null = null
+	let editedName: string | null = null
+	let boundSlug = handle.props.slug
+
+	function connectHref(connectionName: string) {
+		return buildConnectOauthHref({
+			name: connectionName,
+			platform: handle.props.platform,
+			appSlug: handle.props.slug,
+		})
+	}
+
+	return () => {
+		if (handle.props.slug !== boundSlug) {
+			boundSlug = handle.props.slug
+			editedName = null
+			nameError = null
+		}
+		const suggested = nextSuggestedConnectionName(
+			handle.props.slug,
+			handle.props.existingNames,
+		)
+		const name = editedName ?? suggested
+		if (!handle.props.open) {
+			return (
+				<a
+					href={handle.props.openHref}
+					data-testid="add-account-open"
+					data-prevent-scroll-reset
+					mix={css(addAccountLinkCss)}
+				>
+					Add another account
+				</a>
+			)
+		}
+		return (
+			<form
+				id={addAccountAnchorId}
+				data-testid="add-account-form"
+				mix={[
+					on('submit', (event) => {
+						event.preventDefault()
+						const resolved = resolveAddAccountConnectionName({
+							name,
+							suggested,
+							existingNames: handle.props.existingNames,
+						})
+						if (!resolved.ok) {
+							nameError = resolved.error
+							handle.update()
+							return
+						}
+						nameError = null
+						window.location.assign(connectHref(resolved.name))
+					}),
+					css({
+						display: 'grid',
+						gap: spacing.sm,
+						justifyItems: 'start',
+						scrollMarginTop: '5.5rem',
+					}),
+				]}
+			>
+				<label mix={css(fieldCss)}>
+					<span mix={css(fieldLabelCss)}>Connection name</span>
+					<input
+						type="text"
+						name="connectionName"
+						data-field-ring
+						required
+						value={name}
+						aria-invalid={nameError ? 'true' : undefined}
+						aria-describedby={nameError ? 'add-account-name-error' : undefined}
+						{...passwordManagerIgnoreProps}
+						mix={[
+							on('input', (event) => {
+								editedName = event.currentTarget.value
+								nameError = null
+								handle.update()
+							}),
+							css(accountInputCss),
+						]}
+					/>
+					{nameError ? (
+						<p
+							id="add-account-name-error"
+							role="alert"
+							data-testid="add-account-name-error"
+							mix={css({
+								...descriptionCss,
+								color: colors.error,
+							})}
+						>
+							{nameError}
+						</p>
+					) : null}
+				</label>
+				<button
+					type="submit"
+					mix={css({
+						...getPillButtonCss({ size: 'sm' }),
+						display: 'inline-flex',
+					})}
+				>
+					Connect
+				</button>
+			</form>
+		)
+	}
+}
+
 function PlugIcon() {
 	return (
 		<svg
@@ -913,6 +1047,16 @@ export function AccountIntegrationsRoute(handle: Handle) {
 															</article>
 														)
 													})}
+													<AddAccountForm
+														slug={selectedApp.slug}
+														platform={isBuiltInApp(selectedApp)}
+														existingNames={[
+															...integrations.map((entry) => entry.name),
+															...apps.map((app) => app.slug),
+														]}
+														open={isAddAccountFormOpen(getCurrentHref())}
+														openHref={buildAddAccountHref(getCurrentHref())}
+													/>
 												</div>
 											)}
 										</section>

packages/worker/client/routes/connect-oauth.tsx

@@ -105,6 +105,18 @@ const emptyConnectOauthLoaderData: ConnectOauthLoaderData = {
 	integration: null,
 }
 
+function buildConnectOauthIntegrationLookupHref(
+	providerKey: string,
+	searchParams: URLSearchParams,
+) {
+	const params = new URLSearchParams({ name: providerKey })
+	const platform = searchParams.get('platform')?.trim()
+	if (platform) params.set('platform', platform)
+	const app = searchParams.get('app')?.trim()
+	if (app) params.set('app', app)
+	return `/account/integrations.json?${params.toString()}`
+}
+
 /**
  * SPA-navigation prefetch mirroring the server handler's SSR embed: the
  * stored or built-in record for `?provider=` visits, resolved before the
@@ -125,9 +137,8 @@ export async function connectOauthRouteLoader(
 	if (!providerKey) {
 		return { connectOauth: emptyConnectOauthLoaderData }
 	}
-	const platformParam = params.get('platform')?.trim()
 	const response = await fetch(
-		`/account/integrations.json?name=${encodeURIComponent(providerKey)}${platformParam ? `&platform=${encodeURIComponent(platformParam)}` : ''}`,
+		buildConnectOauthIntegrationLookupHref(providerKey, params),
 		{
 			headers: { Accept: 'application/json' },
 			credentials: 'include',
@@ -521,14 +532,15 @@ export function ConnectOauthRoute(handle: Handle) {
 	const readExistingIntegrationConfig = async (
 		queryConfig: ConnectOauthQueryConfig,
 	): Promise<StoredIntegrationConfig | null> => {
-		const platformParam =
+		const lookupSearch =
 			typeof window !== 'undefined'
-				? (new URLSearchParams(window.location.search)
-						.get('platform')
-						?.trim() ?? '')
-				: ''
+				? new URLSearchParams(window.location.search)
+				: new URLSearchParams()
 		const response = await fetch(
-			`/account/integrations.json?name=${encodeURIComponent(queryConfig.providerKey)}${platformParam ? `&platform=${encodeURIComponent(platformParam)}` : ''}`,
+			buildConnectOauthIntegrationLookupHref(
+				queryConfig.providerKey,
+				lookupSearch,
+			),
 			{
 				method: 'GET',
 				headers: { Accept: 'application/json' },

packages/worker/client/routes/integration-provider-catalog.node.test.ts

@@ -1,8 +1,13 @@
 import { expect, test } from 'vitest'
 import { getGuideBySlug } from '#worker/guides/catalog.ts'
 import {
+	buildAddAccountHref,
 	buildIntegrationSetupPrompt,
 	integrationProviderSuggestions,
+	isAddAccountFormOpen,
+	isTakenConnectionName,
+	nextSuggestedConnectionName,
+	resolveAddAccountConnectionName,
 } from './integration-provider-catalog.ts'
 
 test('integration provider suggestions resolve guide-backed prompts and keep a generic fallback', () => {
@@ -36,3 +41,66 @@ test('integration provider suggestions resolve guide-backed prompts and keep a g
 	expect(prompt.length).toBeGreaterThan(0)
 	expect(prompt).not.toContain('coding_guide_get')
 })
+
+test('next suggested connection name skips taken {slug}-{n} keys', () => {
+	expect(nextSuggestedConnectionName('google', ['google'])).toBe('google-2')
+	expect(nextSuggestedConnectionName('google', ['google', 'google-2'])).toBe(
+		'google-3',
+	)
+	expect(nextSuggestedConnectionName('google', ['google', 'google-work'])).toBe(
+		'google-2',
+	)
+	expect(
+		nextSuggestedConnectionName('google', [
+			'google',
+			'linear',
+			'Google-2',
+			'google-personal',
+		]),
+	).toBe('google-3')
+})
+
+test('add-account name resolution rejects names already used by any connection or app', () => {
+	const existingNames = ['google', 'linear', 'google-2', 'Google Work']
+	expect(isTakenConnectionName('google-2', existingNames)).toBe(true)
+	expect(isTakenConnectionName('Google-2', existingNames)).toBe(true)
+	expect(isTakenConnectionName('google-work', existingNames)).toBe(true)
+	expect(isTakenConnectionName('google-3', existingNames)).toBe(false)
+
+	const duplicate = resolveAddAccountConnectionName({
+		name: 'google-2',
+		suggested: 'google-3',
+		existingNames,
+	})
+	expect(duplicate.ok).toBe(false)
+	if (!duplicate.ok) {
+		expect(duplicate.error.length).toBeGreaterThan(0)
+	}
+	expect(
+		resolveAddAccountConnectionName({
+			name: '  Google-3  ',
+			suggested: 'google-3',
+			existingNames,
+		}),
+	).toEqual({ ok: true, name: 'google-3' })
+	expect(
+		resolveAddAccountConnectionName({
+			name: '   ',
+			suggested: 'google-3',
+			existingNames,
+		}),
+	).toEqual({ ok: true, name: 'google-3' })
+})
+
+test('add-account href keeps the current path and search, then opens the form anchor', () => {
+	expect(isAddAccountFormOpen('/account/integrations/google')).toBe(false)
+	expect(
+		isAddAccountFormOpen('/account/integrations/google?add-account=1'),
+	).toBe(true)
+	expect(buildAddAccountHref('/account/integrations/google?q=goo')).toBe(
+		'/account/integrations/google?q=goo&add-account=1#add-account',
+	)
+	expect(buildAddAccountHref('/account/integrations/apps/google')).toBe(
+		'/account/integrations/apps/google?add-account=1#add-account',
+	)
+})

packages/worker/client/routes/integration-provider-catalog.ts

@@ -1,3 +1,5 @@
+import { normalizeProviderKey } from '@kody-internal/shared/url-hosts.ts'
+
 /**
  * Suggested providers for the integrations page. Kody intentionally has no
  * built-in OAuth apps ("bring your own keys"), so each suggestion carries a
@@ -96,3 +98,63 @@ export function buildCustomIntegrationSetupPrompt() {
 		'and completing the OAuth authorization flow.',
 	].join(' ')
 }
+
+function takenConnectionNameSet(existingNames: ReadonlyArray<string>) {
+	return new Set(
+		existingNames
+			.map((name) => normalizeProviderKey(name))
+			.filter((name) => name.length > 0),
+	)
+}
+
+export function isTakenConnectionName(
+	name: string,
+	existingNames: ReadonlyArray<string>,
+) {
+	const key = normalizeProviderKey(name)
+	return Boolean(key && takenConnectionNameSet(existingNames).has(key))
+}
+
+export function resolveAddAccountConnectionName(input: {
+	name: string
+	suggested: string
+	existingNames: ReadonlyArray<string>
+}): { ok: true; name: string } | { ok: false; error: string } {
+	const next = normalizeProviderKey(input.name.trim()) || input.suggested
+	if (isTakenConnectionName(next, input.existingNames)) {
+		return {
+			ok: false,
+			error: 'That name is already used by another connection.',
+		}
+	}
+	return { ok: true, name: next }
+}
+
+export function nextSuggestedConnectionName(
+	slug: string,
+	existingNames: ReadonlyArray<string>,
+) {
+	const taken = takenConnectionNameSet(existingNames)
+	const slugKey = normalizeProviderKey(slug)
+	if (!slugKey) return slug
+	if (!taken.has(slugKey)) return slugKey
+	let n = 2
+	while (taken.has(`${slugKey}-${n}`)) n += 1
+	return `${slugKey}-${n}`
+}
+
+export const addAccountQueryParam = 'add-account'
+export const addAccountAnchorId = 'add-account'
+
+export function isAddAccountFormOpen(href: string) {
+	return new URL(href, 'http://localhost').searchParams.has(
+		addAccountQueryParam,
+	)
+}
+
+export function buildAddAccountHref(href: string) {
+	const url = new URL(href, 'http://localhost')
+	url.searchParams.set(addAccountQueryParam, '1')
+	url.hash = addAccountAnchorId
+	return `${url.pathname}${url.search}${url.hash}`
+}