refactor: improve API configuration management

- Rename onUpsertConfig to onDuplicateConfig for clarity
- Add dedicated functions in ExtensionStateContext for API config operations
- Update tests to match new function names and behavior
- Add initial memory bank documentation structure

Author: samhvw8

webview-ui/src/components/settings/ApiConfigManager.tsx

@@ -8,7 +8,7 @@ interface ApiConfigManagerProps {
 	onSelectConfig: (configName: string) => void
 	onDeleteConfig: (configName: string) => void
 	onRenameConfig: (oldName: string, newName: string) => void
-	onUpsertConfig: (configName: string) => void
+	onDuplicateConfig: (configName: string) => void
 }
 
 const ApiConfigManager = ({
@@ -17,7 +17,7 @@ const ApiConfigManager = ({
 	onSelectConfig,
 	onDeleteConfig,
 	onRenameConfig,
-	onUpsertConfig,
+	onDuplicateConfig,
 }: ApiConfigManagerProps) => {
 	const [editState, setEditState] = useState<"new" | "rename" | null>(null)
 	const [inputValue, setInputValue] = useState("")
@@ -36,9 +36,9 @@ const ApiConfigManager = ({
 		setInputValue("")
 	}, [currentApiConfigName])
 
-	const handleAdd = () => {
+	const handleDuplicate = () => {
 		const newConfigName = currentApiConfigName + " (copy)"
-		onUpsertConfig(newConfigName)
+		onDuplicateConfig(newConfigName)
 	}
 
 	const handleStartRename = () => {
@@ -56,7 +56,7 @@ const ApiConfigManager = ({
 		if (!trimmedValue) return
 
 		if (editState === "new") {
-			onUpsertConfig(trimmedValue)
+			onDuplicateConfig(trimmedValue)
 		} else if (editState === "rename" && currentApiConfigName) {
 			if (currentApiConfigName !== trimmedValue) {
 				onRenameConfig(currentApiConfigName, trimmedValue)
@@ -159,7 +159,7 @@ const ApiConfigManager = ({
 							</select>
 							<VSCodeButton
 								appearance="icon"
-								onClick={handleAdd}
+								onClick={handleDuplicate}
 								title="Add profile"
 								style={{
 									padding: 0,

webview-ui/src/components/settings/SettingsView.tsx

@@ -53,6 +53,8 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		listApiConfigMeta,
 		experimentalDiffStrategy,
 		setExperimentalDiffStrategy,
+		renameApiConfiguration,
+		duplicateApiConfig,
 	} = useExtensionState()
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [modelIdErrorMessage, setModelIdErrorMessage] = useState<string | undefined>(undefined)
@@ -172,18 +174,10 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 								})
 							}}
 							onRenameConfig={(oldName: string, newName: string) => {
-								vscode.postMessage({
-									type: "renameApiConfiguration",
-									values: { oldName, newName },
-									apiConfiguration,
-								})
+								renameApiConfiguration(oldName, newName)
 							}}
-							onUpsertConfig={(configName: string) => {
-								vscode.postMessage({
-									type: "upsertApiConfiguration",
-									text: configName,
-									apiConfiguration,
-								})
+							onDuplicateConfig={(configName: string) => {
+								duplicateApiConfig(configName)
 							}}
 						/>
 						<ApiOptions apiErrorMessage={apiErrorMessage} modelIdErrorMessage={modelIdErrorMessage} />

webview-ui/src/components/settings/__tests__/ApiConfigManager.test.tsx

@@ -23,15 +23,18 @@ describe("ApiConfigManager", () => {
 	const mockOnSelectConfig = jest.fn()
 	const mockOnDeleteConfig = jest.fn()
 	const mockOnRenameConfig = jest.fn()
-	const mockOnUpsertConfig = jest.fn()
+	const mockOnDuplicateConfig = jest.fn()
 
 	const defaultProps = {
 		currentApiConfigName: "Default Config",
-		listApiConfigMeta: [{ name: "Default Config" }, { name: "Another Config" }],
+		listApiConfigMeta: [
+			{ name: "Default Config", id: "default" },
+			{ name: "Another Config", id: "another" },
+		],
 		onSelectConfig: mockOnSelectConfig,
 		onDeleteConfig: mockOnDeleteConfig,
 		onRenameConfig: mockOnRenameConfig,
-		onUpsertConfig: mockOnUpsertConfig,
+		onDuplicateConfig: mockOnDuplicateConfig,
 	}
 
 	beforeEach(() => {
@@ -45,9 +48,9 @@ describe("ApiConfigManager", () => {
 		const addButton = screen.getByTitle("Add profile")
 		fireEvent.click(addButton)
 
-		// Verify that onUpsertConfig was called with the correct name
-		expect(mockOnUpsertConfig).toHaveBeenCalledTimes(1)
-		expect(mockOnUpsertConfig).toHaveBeenCalledWith("Default Config (copy)")
+		// Verify that onDuplicateConfig was called with the correct name
+		expect(mockOnDuplicateConfig).toHaveBeenCalledTimes(1)
+		expect(mockOnDuplicateConfig).toHaveBeenCalledWith("Default Config (copy)")
 	})
 
 	it("creates copy with correct name when current config has spaces", () => {
@@ -56,7 +59,7 @@ describe("ApiConfigManager", () => {
 		const addButton = screen.getByTitle("Add profile")
 		fireEvent.click(addButton)
 
-		expect(mockOnUpsertConfig).toHaveBeenCalledWith("My Test Config (copy)")
+		expect(mockOnDuplicateConfig).toHaveBeenCalledWith("My Test Config (copy)")
 	})
 
 	it("handles empty current config name gracefully", () => {
@@ -65,7 +68,7 @@ describe("ApiConfigManager", () => {
 		const addButton = screen.getByTitle("Add profile")
 		fireEvent.click(addButton)
 
-		expect(mockOnUpsertConfig).toHaveBeenCalledWith(" (copy)")
+		expect(mockOnDuplicateConfig).toHaveBeenCalledWith(" (copy)")
 	})
 
 	it("allows renaming the current config", () => {
@@ -106,7 +109,7 @@ describe("ApiConfigManager", () => {
 	})
 
 	it("disables delete button when only one config exists", () => {
-		render(<ApiConfigManager {...defaultProps} listApiConfigMeta={[{ name: "Default Config" }]} />)
+		render(<ApiConfigManager {...defaultProps} listApiConfigMeta={[{ name: "Default Config", id: "default" }]} />)
 
 		const deleteButton = screen.getByTitle("Cannot delete the only profile")
 		expect(deleteButton).toHaveAttribute("disabled")

webview-ui/src/context/ExtensionStateContext.tsx

@@ -26,6 +26,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	mcpServers: McpServer[]
 	filePaths: string[]
 	setApiConfiguration: (config: ApiConfiguration) => void
+	renameApiConfiguration: (oldName: string, newName: string) => void
+	duplicateApiConfig: (configName: string) => void
 	setCustomInstructions: (value?: string) => void
 	setAlwaysAllowReadOnly: (value: boolean) => void
 	setAlwaysAllowWrite: (value: boolean) => void
@@ -114,8 +116,26 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 	const [openAiModels, setOpenAiModels] = useState<string[]>([])
 	const [mcpServers, setMcpServers] = useState<McpServer[]>([])
 
+	const renameApiConfiguration = useCallback(
+		(oldName: string, newName: string) =>
+			setState((currentState) => {
+				vscode.postMessage({
+					type: "renameApiConfiguration",
+					values: { oldName, newName },
+					apiConfiguration: currentState.apiConfiguration,
+				})
+
+				return currentState
+			}),
+		[],
+	)
+
 	const setListApiConfigMeta = useCallback(
-		(value: ApiConfigMeta[]) => setState((prevState) => ({ ...prevState, listApiConfigMeta: value })),
+		(value: ApiConfigMeta[]) =>
+			setState((prevState) => ({
+				...prevState,
+				listApiConfigMeta: value,
+			})),
 		[],
 	)
 
@@ -126,7 +146,18 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 				text: currentState.currentApiConfigName,
 				apiConfiguration: apiConfig,
 			})
-			return currentState // No state update needed
+			return currentState
+		})
+	}, [])
+
+	const duplicateApiConfig = useCallback((configName: string) => {
+		setState((currentState) => {
+			vscode.postMessage({
+				type: "upsertApiConfiguration",
+				text: configName,
+				apiConfiguration: currentState.apiConfiguration,
+			})
+			return currentState
 		})
 	}, [])
 
@@ -138,7 +169,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					text: currentState.currentApiConfigName,
 					apiConfiguration: { ...currentState.apiConfiguration, [field]: event.target.value },
 				})
-				return currentState // No state update needed
+
+				return currentState
 			})
 		},
 		[],
@@ -278,6 +310,8 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setAutoApprovalEnabled: (value) => setState((prevState) => ({ ...prevState, autoApprovalEnabled: value })),
 		handleInputChange,
 		setCustomModes: (value) => setState((prevState) => ({ ...prevState, customModes: value })),
+		renameApiConfiguration,
+		duplicateApiConfig,
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>