Agentic UI: Add Anthropic API key form to AI settings

apps/cli/ai/auth.ts

@@ -1,3 +1,7 @@
+import {
+	persistSelectedAiProvider,
+	readSelectedAiProvider,
+} from '@studio/common/ai/settings-store';
 import {
 	AI_PROVIDER_PRIORITY,
 	DEFAULT_AI_PROVIDER,
@@ -6,7 +10,6 @@ import {
 	type AiProviderId,
 	type ResolveAiEnvironmentOptions,
 } from 'cli/ai/providers';
-import { readCliConfig, updateCliConfigWithPartial } from 'cli/lib/cli-config/core';
 
 async function getPreferredReadyProvider(
 	exclude?: AiProviderId
@@ -55,7 +58,7 @@ export async function resolveInitialAiProvider(): Promise< AiProviderId > {
 		return 'wpcom';
 	}
 
-	const { aiProvider: savedProvider } = await readCliConfig();
+	const savedProvider = await readSelectedAiProvider();
 	if ( savedProvider ) {
 		const definition = getAiProviderDefinition( savedProvider );
 		if (
@@ -79,7 +82,7 @@ export async function resolveInitialAiProvider(): Promise< AiProviderId > {
 }
 
 export async function saveSelectedAiProvider( provider: AiProviderId ): Promise< void > {
-	await updateCliConfigWithPartial( { aiProvider: provider } );
+	await persistSelectedAiProvider( provider );
 }
 
 export async function prepareAiProvider(

apps/cli/ai/providers.ts

@@ -1,25 +1,27 @@
 import { password } from '@inquirer/prompts';
 import { validateAnthropicApiKey } from '@studio/common/ai/anthropic-key';
+import { DEFAULT_MODEL, type AiModelId } from '@studio/common/ai/models';
 import {
-	AI_MODELS,
-	DEFAULT_MODEL,
-	type AiModelFamily,
-	type AiModelId,
-} from '@studio/common/ai/models';
+	AI_PROVIDER_IDS,
+	DEFAULT_AI_PROVIDER,
+	getAiProviderModels,
+	type AiProviderId,
+} from '@studio/common/ai/providers';
+import { persistAnthropicApiKey, readAnthropicApiKey } from '@studio/common/ai/settings-store';
 import { readAuthToken } from '@studio/common/lib/shared-config';
 import { __ } from '@wordpress/i18n';
-import { readCliConfig, updateCliConfigWithPartial } from 'cli/lib/cli-config/core';
 import { LoggerError } from 'cli/logger';
 
-export const AI_PROVIDERS = {
+export const AI_PROVIDERS: Record< AiProviderId, string > = {
 	wpcom: 'WordPress.com',
 	'anthropic-api-key': 'Anthropic · API key',
-} as const;
-
-export type AiProviderId = keyof typeof AI_PROVIDERS;
+};
 
-export const DEFAULT_AI_PROVIDER: AiProviderId = 'wpcom';
-export const AI_PROVIDER_PRIORITY: AiProviderId[] = [ 'wpcom', 'anthropic-api-key' ];
+export type { AiProviderId };
+export { DEFAULT_AI_PROVIDER };
+// Fallback order when the configured provider is unavailable; declaration
+// order of the canonical id list.
+export const AI_PROVIDER_PRIORITY: readonly AiProviderId[] = AI_PROVIDER_IDS;
 
 const DEFAULT_WPCOM_AI_GATEWAY_BASE_URL = 'https://public-api.wordpress.com/wpcom/v2/ai-api-proxy';
 // The wpcom AI proxy maps feature slugs to upstream providers. Historically
@@ -36,14 +38,9 @@ export interface ResolveAiEnvironmentOptions {
 export interface AiProviderDefinition {
 	id: AiProviderId;
 	autoFallbackWhenUnavailable: boolean;
-	/**
-	 * Which model families this provider can service. `wpcom` relays both
-	 * Anthropic and OpenAI wire formats through the same proxy; direct-API
-	 * providers are restricted to their own family. `availableModels` and
-	 * `defaultModel` are derived from this and kept on the definition so
-	 * callers don't have to filter AI_MODELS themselves.
-	 */
-	readonly supportedModelFamilies: readonly AiModelFamily[];
+	// Derived from the provider's model families (see
+	// `@studio/common/ai/providers`), kept on the definition so callers don't
+	// have to filter AI_MODELS themselves.
 	readonly availableModels: readonly AiModelId[];
 	readonly defaultModel: AiModelId;
 	supportsModel( model: AiModelId ): boolean;
@@ -53,17 +50,12 @@ export interface AiProviderDefinition {
 	resolveEnv: ( options?: ResolveAiEnvironmentOptions ) => Promise< Record< string, string > >;
 }
 
-/**
- * Fills in `availableModels`, `defaultModel`, and `supportsModel` from the
- * declared `supportedModelFamilies` so each provider literal below only has to
- * state its family allowlist.
- */
+// Fills in `availableModels`, `defaultModel`, and `supportsModel` from the
+// provider id's model families.
 function defineProvider(
 	partial: Omit< AiProviderDefinition, 'availableModels' | 'defaultModel' | 'supportsModel' >
 ): AiProviderDefinition {
-	const availableModels: AiModelId[] = AI_MODELS.filter( ( model ) =>
-		partial.supportedModelFamilies.includes( model.family )
-	).map( ( model ) => model.id );
+	const availableModels = getAiProviderModels( partial.id ).map( ( model ) => model.id );
 	return {
 		...partial,
 		availableModels,
@@ -77,7 +69,7 @@ function defineProvider(
 async function resolveAnthropicApiKey( options?: {
 	force?: boolean;
 } ): Promise< string | undefined > {
-	const { anthropicApiKey: savedKey } = await readCliConfig();
+	const savedKey = await readAnthropicApiKey();
 	if ( savedKey && ! options?.force ) {
 		// Re-prompt only when Anthropic definitively rejects the saved key;
 		// an unreachable API must not lock the user out of their provider.
@@ -101,7 +93,7 @@ async function resolveAnthropicApiKey( options?: {
 	} );
 
 	const trimmedKey = apiKey.trim();
-	await updateCliConfigWithPartial( { anthropicApiKey: trimmedKey } );
+	await persistAnthropicApiKey( trimmedKey );
 	return trimmedKey;
 }
 
@@ -152,7 +144,6 @@ const AI_PROVIDER_DEFINITIONS: Record< AiProviderId, AiProviderDefinition > = {
 	wpcom: defineProvider( {
 		id: 'wpcom',
 		autoFallbackWhenUnavailable: true,
-		supportedModelFamilies: [ 'anthropic', 'openai' ],
 		isVisible: async () => true,
 		isReady: async () => hasInlineWpcomAuth() || ( await hasValidWpcomAuth() ),
 		prepare: async () => {
@@ -205,17 +196,15 @@ const AI_PROVIDER_DEFINITIONS: Record< AiProviderId, AiProviderDefinition > = {
 	'anthropic-api-key': defineProvider( {
 		id: 'anthropic-api-key',
 		autoFallbackWhenUnavailable: false,
-		supportedModelFamilies: [ 'anthropic' ],
 		isVisible: async () => true,
 		isReady: async () => {
-			const { anthropicApiKey } = await readCliConfig();
-			return Boolean( anthropicApiKey );
+			return Boolean( await readAnthropicApiKey() );
 		},
 		prepare: async ( options ) => {
 			await resolveAnthropicApiKey( options );
 		},
 		resolveEnv: async () => {
-			const { anthropicApiKey: apiKey } = await readCliConfig();
+			const apiKey = await readAnthropicApiKey();
 			if ( ! apiKey ) {
 				throw new LoggerError(
 					__(

apps/cli/ai/sessions/context.ts

@@ -1,11 +1,8 @@
 import { resolveSessionModel, type AiModelId } from '@studio/common/ai/models';
+import { isAiProviderId } from '@studio/common/ai/providers';
 import { isStudioCustomEntryOfType } from '@studio/common/ai/sessions/entry-types';
-import { AI_PROVIDERS, type AiProviderId } from 'cli/ai/providers';
 import type { LoadedAiSession } from '@studio/common/ai/sessions/types';
-
-function isAiProviderId( value: string ): value is AiProviderId {
-	return Object.prototype.hasOwnProperty.call( AI_PROVIDERS, value );
-}
+import type { AiProviderId } from 'cli/ai/providers';
 
 export interface ResumeSessionContext {
 	sessionId?: string;

apps/cli/ai/tests/auth.test.ts

@@ -1,4 +1,9 @@
 import { password } from '@inquirer/prompts';
+import {
+	persistAnthropicApiKey,
+	readAnthropicApiKey,
+	readSelectedAiProvider,
+} from '@studio/common/ai/settings-store';
 import { readAuthToken } from '@studio/common/lib/shared-config';
 import { vi } from 'vitest';
 import {
@@ -9,7 +14,6 @@ import {
 	resolveInitialAiProvider,
 	resolveUnavailableAiProvider,
 } from 'cli/ai/auth';
-import { readCliConfig, updateCliConfigWithPartial } from 'cli/lib/cli-config/core';
 import { LoggerError } from 'cli/logger';
 
 vi.mock( '@inquirer/prompts', () => ( {
@@ -20,16 +24,17 @@ vi.mock( '@studio/common/lib/shared-config', () => ( {
 	readAuthToken: vi.fn(),
 } ) );
 
-vi.mock( 'cli/lib/cli-config/core', () => ( {
-	readCliConfig: vi.fn().mockResolvedValue( { version: 1, sites: [] } ),
-	updateCliConfigWithPartial: vi.fn(),
+vi.mock( '@studio/common/ai/settings-store', () => ( {
+	readAnthropicApiKey: vi.fn(),
+	readSelectedAiProvider: vi.fn(),
+	persistAnthropicApiKey: vi.fn(),
+	persistSelectedAiProvider: vi.fn(),
 } ) );
 
 describe( 'AI auth helpers', () => {
 	beforeEach( () => {
 		vi.resetAllMocks();
 		vi.stubGlobal( '__STUDIO_CLI_VERSION__', '1.2.3' );
-		vi.mocked( readCliConfig ).mockResolvedValue( { version: 1, sites: [], snapshots: [] } );
 		delete process.env.WPCOM_AI_PROXY_BASE_URL;
 	} );
 
@@ -38,23 +43,18 @@ describe( 'AI auth helpers', () => {
 	} );
 
 	it( 'uses the saved Anthropic API key when provider is Anthropic API key', async () => {
-		vi.mocked( readCliConfig ).mockResolvedValue( {
-			version: 1,
-			sites: [],
-			snapshots: [],
-			anthropicApiKey: 'saved-key',
-		} );
+		vi.mocked( readAnthropicApiKey ).mockResolvedValue( 'saved-key' );
 
 		const env = await resolveAiEnvironment( 'anthropic-api-key' );
 
 		expect( env.ANTHROPIC_API_KEY ).toBe( 'saved-key' );
 		expect( env.ANTHROPIC_BASE_URL ).toBeUndefined();
 		expect( env.ANTHROPIC_AUTH_TOKEN ).toBeUndefined();
-		expect( updateCliConfigWithPartial ).not.toHaveBeenCalled();
+		expect( persistAnthropicApiKey ).not.toHaveBeenCalled();
 	} );
 
 	it( 'requires a saved Anthropic API key in API key mode', async () => {
-		vi.mocked( readCliConfig ).mockResolvedValue( { version: 1, sites: [], snapshots: [] } );
+		vi.mocked( readAnthropicApiKey ).mockResolvedValue( undefined );
 
 		await expect( resolveAiEnvironment( 'anthropic-api-key' ) ).rejects.toBeInstanceOf(
 			LoggerError
@@ -63,30 +63,23 @@ describe( 'AI auth helpers', () => {
 	} );
 
 	it( 'prompts for the API key immediately when preparing the API key provider', async () => {
-		vi.mocked( readCliConfig ).mockResolvedValue( { version: 1, sites: [], snapshots: [] } );
+		vi.mocked( readAnthropicApiKey ).mockResolvedValue( undefined );
 		vi.mocked( password ).mockResolvedValue( 'prompted-key' );
 
 		await prepareAiProvider( 'anthropic-api-key' );
 
 		expect( password ).toHaveBeenCalledOnce();
-		expect( updateCliConfigWithPartial ).toHaveBeenCalledWith( {
-			anthropicApiKey: 'prompted-key',
-		} );
+		expect( persistAnthropicApiKey ).toHaveBeenCalledWith( 'prompted-key' );
 	} );
 
 	it( 'can force re-entering the API key even when one is already saved', async () => {
-		vi.mocked( readCliConfig ).mockResolvedValue( {
-			version: 1,
-			sites: [],
-			snapshots: [],
-			anthropicApiKey: 'saved-key',
-		} );
+		vi.mocked( readAnthropicApiKey ).mockResolvedValue( 'saved-key' );
 		vi.mocked( password ).mockResolvedValue( 'updated-key' );
 
 		await prepareAiProvider( 'anthropic-api-key', { force: true } );
 
 		expect( password ).toHaveBeenCalledOnce();
-		expect( updateCliConfigWithPartial ).toHaveBeenCalledWith( { anthropicApiKey: 'updated-key' } );
+		expect( persistAnthropicApiKey ).toHaveBeenCalledWith( 'updated-key' );
 	} );
 
 	it( 'lists available providers', async () => {
@@ -133,20 +126,15 @@ describe( 'AI auth helpers', () => {
 	} );
 
 	it( 'prefers the saved provider', async () => {
-		vi.mocked( readCliConfig ).mockResolvedValue( {
-			version: 1,
-			sites: [],
-			snapshots: [],
-			aiProvider: 'anthropic-api-key',
-			anthropicApiKey: 'key',
-		} );
+		vi.mocked( readSelectedAiProvider ).mockResolvedValue( 'anthropic-api-key' );
+		vi.mocked( readAnthropicApiKey ).mockResolvedValue( 'key' );
 
 		await expect( resolveInitialAiProvider() ).resolves.toBe( 'anthropic-api-key' );
 		expect( readAuthToken ).not.toHaveBeenCalled();
 	} );
 
 	it( 'defaults to WP.com when no provider is saved and a valid WP.com token exists', async () => {
-		vi.mocked( readCliConfig ).mockResolvedValue( { version: 1, sites: [], snapshots: [] } );
+		vi.mocked( readSelectedAiProvider ).mockResolvedValue( undefined );
 		vi.mocked( readAuthToken ).mockResolvedValue( {
 			accessToken: 'wpcom-token',
 			displayName: 'User',
@@ -160,7 +148,7 @@ describe( 'AI auth helpers', () => {
 	} );
 
 	it( 'falls back to default provider when no other auth is available', async () => {
-		vi.mocked( readCliConfig ).mockResolvedValue( { version: 1, sites: [], snapshots: [] } );
+		vi.mocked( readSelectedAiProvider ).mockResolvedValue( undefined );
 		vi.mocked( readAuthToken ).mockResolvedValue( null );
 
 		await expect( resolveInitialAiProvider() ).resolves.toBe( 'wpcom' );
@@ -184,12 +172,7 @@ describe( 'AI auth helpers', () => {
 
 	it( 'resolves a fallback provider only for providers that auto-fallback', async () => {
 		vi.mocked( readAuthToken ).mockResolvedValue( null );
-		vi.mocked( readCliConfig ).mockResolvedValue( {
-			version: 1,
-			sites: [],
-			snapshots: [],
-			anthropicApiKey: 'saved-key',
-		} );
+		vi.mocked( readAnthropicApiKey ).mockResolvedValue( 'saved-key' );
 
 		await expect( resolveUnavailableAiProvider( 'wpcom' ) ).resolves.toBe( 'anthropic-api-key' );
 		await expect( resolveUnavailableAiProvider( 'anthropic-api-key' ) ).resolves.toBeUndefined();

apps/cli/commands/ai/index.ts

@@ -12,6 +12,7 @@ import {
 	type AiModelId,
 } from '@studio/common/ai/models';
 import { getAgentEndTurnResult } from '@studio/common/ai/session-events';
+import { readAnthropicApiKey, readSelectedAiProvider } from '@studio/common/ai/settings-store';
 import {
 	buildSkillInvocationPrompt,
 	resolveSkillFromPrompt,
@@ -47,7 +48,6 @@ import { setLocalSiteSelectedCallback } from 'cli/ai/site-selection';
 import { getActiveSlashCommands, type SlashCommandContext } from 'cli/ai/slash-commands';
 import { AiChatUI } from 'cli/ai/ui';
 import { runCommand as runLoginCommand } from 'cli/commands/auth/login';
-import { readCliConfig } from 'cli/lib/cli-config/core';
 import { findSiteByFolder, findSiteById } from 'cli/lib/cli-config/sites';
 import { disconnectFromDaemon } from 'cli/lib/daemon-client';
 import { isSiteRunning } from 'cli/lib/site-utils';
@@ -368,8 +368,7 @@ export async function runCommand( options: {
 		}
 	}
 
-	const config = await readCliConfig();
-	let showCapabilitiesOnConnect = ! config.aiProvider;
+	let showCapabilitiesOnConnect = ( await readSelectedAiProvider() ) === undefined;
 
 	// Studio Code Desktop defaults to WordPress.com provider.
 	if ( isJsonMode && showCapabilitiesOnConnect ) {
@@ -457,7 +456,7 @@ export async function runCommand( options: {
 		} else {
 			ui.setStatusMessage( __( 'Use /login to authenticate to WordPress.com' ) );
 		}
-	} else if ( currentProvider === 'anthropic-api-key' && ! config.anthropicApiKey ) {
+	} else if ( currentProvider === 'anthropic-api-key' && ! ( await readAnthropicApiKey() ) ) {
 		ui.showInfo( __( 'No Anthropic API key saved. Use /api-key to enter one.' ) );
 	}