fix(webview): persist per-view selections through registered global state

Author: easonliang28

packages/types/src/__tests__/index.test.ts

@@ -3,6 +3,10 @@
 import { GLOBAL_STATE_KEYS } from "../index.js"
 
 describe("GLOBAL_STATE_KEYS", () => {
+	it("should contain registered durable per-view state", () => {
+		expect(GLOBAL_STATE_KEYS).toContain("viewStates")
+	})
+
 	it("should contain provider settings keys", () => {
 		expect(GLOBAL_STATE_KEYS).toContain("autoApprovalEnabled")
 	})
@@ -13,6 +17,7 @@ describe("GLOBAL_STATE_KEYS", () => {
 
 	it("should not contain secret state keys", () => {
 		expect(GLOBAL_STATE_KEYS).not.toContain("openRouterApiKey")
+		expect(GLOBAL_STATE_KEYS).not.toContain("apiKey")
 	})
 
 	it("should contain OpenAI Compatible base URL setting", () => {

packages/types/src/global-settings.ts

@@ -97,6 +97,15 @@ export const MAX_CHECKPOINT_TIMEOUT_SECONDS = 60
  */
 export const DEFAULT_CHECKPOINT_TIMEOUT_SECONDS = 15
 
+/**
+ * Persisted non-secret selections for a stable webview instance.
+ */
+export const viewStateSchema = z.object({
+	mode: z.string().optional(),
+	currentApiConfigName: z.string().optional(),
+	updatedAt: z.number().optional(),
+})
+
 /**
  * GlobalSettings
  */
@@ -105,6 +114,7 @@ export const globalSettingsSchema = z.object({
 	currentApiConfigName: z.string().optional(),
 	listApiConfigMeta: z.array(providerSettingsEntrySchema).optional(),
 	pinnedApiConfigs: z.record(z.string(), z.boolean()).optional(),
+	viewStates: z.record(z.string(), viewStateSchema).optional(),
 
 	lastShownAnnouncementId: z.string().optional(),
 	customInstructions: z.string().optional(),

src/core/webview/ClineProvider.ts

@@ -117,6 +117,8 @@ import { REQUESTY_BASE_URL } from "../../shared/utils/requesty"
 import { validateAndFixToolResultIds } from "../task/validateToolResultIds"
 import { PendingEditOperationStore, type PendingEditOperationInput } from "./PendingEditOperationStore"
 
+type PersistedViewState = NonNullable<GlobalState["viewStates"]>[string]
+
 /**
  * https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
  * https://github.com/KumarVariable/vscode-extension-sidebar-html/blob/master/src/customSidebarViewProvider.ts
@@ -163,6 +165,7 @@ export class ClineProvider
 	public static readonly tabPanelId = `${Package.name}.TabPanelProvider`
 	private static activeInstances: Set<ClineProvider> = new Set()
 	private static nextViewId = 0
+	private static readonly MAX_PERSISTED_VIEW_STATES = 50
 	private disposables: vscode.Disposable[] = []
 	private webviewDisposables: vscode.Disposable[] = []
 	private view?: vscode.WebviewView | vscode.WebviewPanel
@@ -425,13 +428,59 @@ export class ClineProvider
 		}
 	}
 
-	/**
-	 * Derive a view-specific ContextProxy key for persisting view-local state.
-	 * Uses a stable per-view id so each restored tab reads and writes its own values
-	 * independent of provider construction order.
-	 */
-	private viewStateKeyFor(key: "mode" | "currentApiConfigName" | "apiConfiguration"): string {
-		return `__view_state_${this.viewStateId}_${key}`
+	private getPersistedViewStates(): Record<string, PersistedViewState> {
+		const viewStates = this.contextProxy.getValue("viewStates")
+
+		if (!viewStates || typeof viewStates !== "object" || Array.isArray(viewStates)) {
+			return {}
+		}
+
+		return viewStates
+	}
+
+	private async savePersistedViewState(values: Partial<PersistedViewState>): Promise<void> {
+		const states = this.getPersistedViewStates()
+		const current = states[this.viewStateId] ?? {}
+		const next: PersistedViewState = { ...current }
+
+		if ("mode" in values) {
+			if (values.mode === undefined || values.mode === null) {
+				delete next.mode
+			} else {
+				next.mode = values.mode
+			}
+		}
+
+		if ("currentApiConfigName" in values) {
+			if (values.currentApiConfigName === undefined || values.currentApiConfigName === null) {
+				delete next.currentApiConfigName
+			} else {
+				next.currentApiConfigName = values.currentApiConfigName
+			}
+		}
+
+		if (!next.mode && !next.currentApiConfigName) {
+			delete states[this.viewStateId]
+		} else {
+			next.updatedAt = values.updatedAt ?? Date.now()
+			states[this.viewStateId] = next
+		}
+
+		await this.contextProxy.setValue("viewStates", this.prunePersistedViewStates(states))
+	}
+
+	private async clearPersistedViewState(viewStateId = this.viewStateId): Promise<void> {
+		const states = this.getPersistedViewStates()
+		delete states[viewStateId]
+		await this.contextProxy.setValue("viewStates", states)
+	}
+
+	private prunePersistedViewStates(states: Record<string, PersistedViewState>): Record<string, PersistedViewState> {
+		return Object.fromEntries(
+			Object.entries(states)
+				.sort(([, a], [, b]) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0))
+				.slice(0, ClineProvider.MAX_PERSISTED_VIEW_STATES),
+		)
 	}
 
 	public async setViewStateId(viewStateId: string | undefined): Promise<void> {
@@ -446,18 +495,30 @@ export class ClineProvider
 	}
 
 	/**
-	 * Loads persisted values from stable per-view keys into the view-local state buffer.
-	 * Missing keys are intentionally left unset so getState() falls back to shared ContextProxy values.
+	 * Loads non-secret persisted selections from the registered viewStates map.
+	 * Missing entries are intentionally left unset so getState() falls back to shared ContextProxy values.
 	 */
 	private async loadViewState(): Promise<void> {
 		try {
+			const persisted = this.getPersistedViewStates()[this.viewStateId]
 			const loadedState: Partial<ExtensionState> = {}
 
-			for (const key of ["mode", "currentApiConfigName", "apiConfiguration"] as const) {
-				const value = this.contextProxy.getValue(this.viewStateKeyFor(key) as any)
+			if (persisted?.mode) {
+				loadedState.mode = persisted.mode as Mode
+			}
+
+			if (persisted?.currentApiConfigName) {
+				loadedState.currentApiConfigName = persisted.currentApiConfigName
 
-				if (value !== undefined && value !== null) {
-					loadedState[key] = value as any
+				try {
+					const { name: _name, ...apiConfiguration } = await this.providerSettingsManager.getProfile({
+						name: persisted.currentApiConfigName,
+					})
+					loadedState.apiConfiguration = apiConfiguration as ProviderSettings
+				} catch (error) {
+					this.log(
+						`[loadViewState] Unable to resolve API profile '${persisted.currentApiConfigName}' for viewId ${this.viewId}: ${error instanceof Error ? error.message : String(error)}`,
+					)
 				}
 			}
 
@@ -471,22 +532,19 @@ export class ClineProvider
 	}
 
 	/**
-	 * Save a single view-local state value and sync to global state using a view-specific key.
-	 * This allows each Provider instance to have its own mode/apiConfig for parallel mode support.
+	 * Save a single view-local state value. Only non-secret selections are persisted durably.
 	 */
 	private async saveViewState(key: keyof ExtensionState, value: any): Promise<void> {
-		// Update local cache first. Undefined/null clears should not leave a local override behind.
 		if (value === undefined || value === null) {
 			delete this.viewLocalState[key]
 		} else {
 			this.viewLocalState[key] = value
 		}
 
-		// Persist to view-specific ContextProxy key for mode/currentApiConfigName/apiConfiguration,
-		// so recreated views restore their own values instead of the last writer's shared state.
-		if (key === "mode" || key === "currentApiConfigName" || key === "apiConfiguration") {
-			const viewKey = this.viewStateKeyFor(key as "mode" | "currentApiConfigName" | "apiConfiguration")
-			await this.contextProxy.setValue(viewKey as any, value)
+		if (key === "mode") {
+			await this.savePersistedViewState({ mode: value })
+		} else if (key === "currentApiConfigName") {
+			await this.savePersistedViewState({ currentApiConfigName: value })
 		}
 
 		this.log(`[saveViewState] Saved ${String(key)} for viewId ${this.viewId}`)

src/core/webview/__tests__/ClineProvider.parallelMode.spec.ts

@@ -736,45 +736,60 @@ describe("ClineProvider - Parallel Mode Support", () => {
 	})
 
 	describe("saveViewState", () => {
-		it("should update viewLocalState when saveViewState is called", async () => {
+		it("should update viewLocalState and persist mode through registered viewStates", async () => {
 			const provider = new ClineProvider(mockContext, mockOutputChannel, "sidebar", new ContextProxy(mockContext))
 
 			const contextProxySpy = vi.spyOn(provider.contextProxy, "setValue")
 			await (provider as any).setViewStateId("stable-sidebar-view")
 
 			await (provider as any).saveViewState("mode", "architect")
 
-			// Verify viewLocalState was updated
 			expect((provider as any).viewLocalState.mode).toBe("architect")
-
-			// saveViewState uses the stable per-view id, not the construction-order viewId suffix.
-			expect(contextProxySpy).toHaveBeenCalledWith("__view_state_stable-sidebar-view_mode", "architect")
-			expect(contextProxySpy).not.toHaveBeenCalledWith(`__view_state_${provider.viewId}_mode`, expect.anything())
+			expect(provider.contextProxy.getValue("viewStates" as any)).toMatchObject({
+				"stable-sidebar-view": { mode: "architect" },
+			})
+			expect(contextProxySpy).toHaveBeenCalledWith(
+				"viewStates",
+				expect.objectContaining({
+					"stable-sidebar-view": expect.objectContaining({
+						mode: "architect",
+						updatedAt: expect.any(Number),
+					}),
+				}),
+			)
+			expect(contextProxySpy).not.toHaveBeenCalledWith("__view_state_stable-sidebar-view_mode", expect.anything())
 
 			await provider.dispose()
 		})
 
-		it("should update viewLocalState for currentApiConfigName", async () => {
+		it("should update viewLocalState and persist currentApiConfigName through registered viewStates", async () => {
 			const provider = new ClineProvider(mockContext, mockOutputChannel, "sidebar", new ContextProxy(mockContext))
 
+			await (provider as any).setViewStateId("stable-sidebar-view")
 			await (provider as any).saveViewState("currentApiConfigName", "my-profile")
 
 			expect((provider as any).viewLocalState.currentApiConfigName).toBe("my-profile")
+			expect(provider.contextProxy.getValue("viewStates" as any)).toMatchObject({
+				"stable-sidebar-view": { currentApiConfigName: "my-profile" },
+			})
 
 			await provider.dispose()
 		})
 
-		it("should update viewLocalState for apiConfiguration", async () => {
+		it("should update viewLocalState for apiConfiguration without persisting provider settings or secrets", async () => {
 			const provider = new ClineProvider(mockContext, mockOutputChannel, "sidebar", new ContextProxy(mockContext))
 
 			const testApiConfig = {
 				apiProvider: "openrouter" as const,
 				openRouterModelId: "claude-3.5-sonnet",
+				openRouterApiKey: "secret-key",
 			}
 
+			await (provider as any).setViewStateId("stable-sidebar-view")
 			await (provider as any).saveViewState("apiConfiguration", testApiConfig)
 
 			expect((provider as any).viewLocalState.apiConfiguration).toEqual(testApiConfig)
+			expect(provider.contextProxy.getValue("viewStates" as any)).toBeUndefined()
 
 			await provider.dispose()
 		})
@@ -823,15 +838,13 @@ describe("ClineProvider - Parallel Mode Support", () => {
 			await provider.dispose()
 		})
 
-		it("should update viewLocalState when stable per-view values are loaded manually", async () => {
+		it("should restore mode and currentApiConfigName from hydrated viewStates after extension reload", async () => {
 			const provider = new ClineProvider(mockContext, mockOutputChannel, "sidebar", new ContextProxy(mockContext))
 			const stableViewId = "stable-sidebar-view"
 
-			await provider.contextProxy.setValue(`__view_state_${stableViewId}_mode` as any, "architect")
-			await provider.contextProxy.setValue(
-				`__view_state_${stableViewId}_currentApiConfigName` as any,
-				"new-profile",
-			)
+			await provider.contextProxy.setValue("viewStates" as any, {
+				[stableViewId]: { mode: "architect", currentApiConfigName: "new-profile", updatedAt: 123 },
+			})
 
 			await (provider as any).setViewStateId(stableViewId)
 
@@ -842,33 +855,52 @@ describe("ClineProvider - Parallel Mode Support", () => {
 			await provider.dispose()
 		})
 
-		it("should restore mode, current API config name, and API configuration from stable per-view state", async () => {
+		it("should resolve API configuration from the persisted profile selection", async () => {
 			const provider = new ClineProvider(mockContext, mockOutputChannel, "editor", new ContextProxy(mockContext))
 			const stableViewId = "stable-editor-tab-a"
-			const persistedApiConfiguration = {
-				apiProvider: "openrouter" as const,
+			const getProfileSpy = vi.spyOn(provider.providerSettingsManager, "getProfile").mockResolvedValue({
+				name: "profile-a",
+				id: "profile-a-id",
+				apiProvider: "openrouter",
 				openRouterModelId: "openrouter/anthropic/claude-sonnet-4",
-			}
+			} as any)
 
-			await provider.contextProxy.setValue(`__view_state_${stableViewId}_mode` as any, "architect")
-			await provider.contextProxy.setValue(
-				`__view_state_${stableViewId}_currentApiConfigName` as any,
-				"profile-a",
-			)
-			await provider.contextProxy.setValue(
-				`__view_state_${stableViewId}_apiConfiguration` as any,
-				persistedApiConfiguration,
-			)
+			await provider.contextProxy.setValue("viewStates" as any, {
+				[stableViewId]: { mode: "architect", currentApiConfigName: "profile-a", updatedAt: 123 },
+			})
 			await provider.contextProxy.setValue("mode" as any, "debugger")
 			await provider.contextProxy.setValue("currentApiConfigName" as any, "profile-b")
 			await provider.contextProxy.setValue("apiConfiguration" as any, { apiProvider: "anthropic" })
 
 			await (provider as any).setViewStateId(stableViewId)
 			const state = await provider.getState()
 
+			expect(getProfileSpy).toHaveBeenCalledWith({ name: "profile-a" })
 			expect(state.mode).toBe("architect")
 			expect(state.currentApiConfigName).toBe("profile-a")
-			expect(state.apiConfiguration).toMatchObject(persistedApiConfiguration)
+			expect(state.apiConfiguration).toMatchObject({
+				apiProvider: "openrouter",
+				openRouterModelId: "openrouter/anthropic/claude-sonnet-4",
+			})
+
+			await provider.dispose()
+		})
+
+		it("should not throw when a persisted profile selection cannot be resolved", async () => {
+			const provider = new ClineProvider(mockContext, mockOutputChannel, "editor", new ContextProxy(mockContext))
+			const stableViewId = "stable-editor-tab-a"
+			vi.spyOn(provider.providerSettingsManager, "getProfile").mockRejectedValue(new Error("missing profile"))
+
+			await provider.contextProxy.setValue("viewStates" as any, {
+				[stableViewId]: { mode: "architect", currentApiConfigName: "deleted-profile", updatedAt: 123 },
+			})
+
+			await expect((provider as any).setViewStateId(stableViewId)).resolves.toBeUndefined()
+			const state = await provider.getState()
+
+			expect(state.mode).toBe("architect")
+			expect(state.currentApiConfigName).toBe("deleted-profile")
+			expect(state.apiConfiguration.apiProvider).toBe("anthropic")
 
 			await provider.dispose()
 		})
@@ -891,6 +923,27 @@ describe("ClineProvider - Parallel Mode Support", () => {
 		})
 	})
 
+	describe("persisted view state pruning", () => {
+		it("should keep the newest 50 persisted view states", async () => {
+			const provider = new ClineProvider(mockContext, mockOutputChannel, "sidebar", new ContextProxy(mockContext))
+			const states = Object.fromEntries(
+				Array.from({ length: 55 }, (_, index) => [
+					`view-${index}`,
+					{ mode: `mode-${index}`, updatedAt: index },
+				]),
+			)
+
+			const pruned = (provider as any).prunePersistedViewStates(states)
+
+			expect(Object.keys(pruned)).toHaveLength(50)
+			expect(pruned["view-54"]).toBeDefined()
+			expect(pruned["view-5"]).toBeDefined()
+			expect(pruned["view-4"]).toBeUndefined()
+
+			await provider.dispose()
+		})
+	})
+
 	describe("getState merging", () => {
 		it("should merge viewLocalState on top of global state", async () => {
 			const provider = new ClineProvider(mockContext, mockOutputChannel, "sidebar", new ContextProxy(mockContext))