Add Anthropic prompt caching, pluggable storage, and CORS proxy support

Storage Architecture:
- New pluggable storage system with backends (LocalStorage, ChromeStorage, IndexedDB)
- SettingsRepository for app settings (proxy config, etc.)
- ProviderKeysRepository for API key management
- AppStorage with global accessors (getAppStorage, setAppStorage, initAppStorage)

Transport Refactoring:
- Renamed DirectTransport → ProviderTransport (calls LLM providers with optional CORS proxy)
- Renamed ProxyTransport → AppTransport (uses app server with user auth)
- Updated TransportMode: "direct" → "provider", "proxy" → "app"

CORS Proxy Integration:
- ProviderTransport checks proxy.enabled/proxy.url from storage
- When enabled, modifies model baseUrl to route through proxy: {proxyUrl}/?url={originalBaseUrl}
- ProviderKeyInput test function also honors proxy settings
- Settings dialog with Proxy tab (Switch toggle, URL input, explanatory description)

Anthropic Prompt Caching:
- System prompt cached with cache_control markers (both OAuth and regular API keys)
- Last user message cached to cache conversation history
- Saves 90% on input tokens for cached content (10x cost reduction)

Settings Dialog Improvements:
- Configurable tab system with SettingsTab base class
- ApiKeysTab and ProxyTab as custom elements
- Switch toggle for proxy enable (instead of Checkbox)
- Explanatory paragraphs for each tab
- ApiKeyPromptDialog reuses ProviderKeyInput component

Removed:
- Deprecated ApiKeysDialog (replaced by ProviderKeyInput in SettingsDialog)
- Old storage-adapter and key-store (replaced by new storage architecture)

packages/web-ui/src/components/AgentInterface.ts

@@ -2,14 +2,13 @@ import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage, Usage } from "@mariozechner/pi-ai";
 import { LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import { ApiKeysDialog } from "../dialogs/ApiKeysDialog.js";
 import { ModelSelector } from "../dialogs/ModelSelector.js";
 import type { MessageEditor } from "./MessageEditor.js";
 import "./MessageEditor.js";
 import "./MessageList.js";
 import "./Messages.js"; // Import for side effects to register the custom elements
 import type { AgentSession, AgentSessionEvent } from "../state/agent-session.js";
-import { getKeyStore } from "../state/key-store.js";
+import { getAppStorage } from "../storage/app-storage.js";
 import "./StreamingMessageContainer.js";
 import type { Attachment } from "../utils/attachment-utils.js";
 import { formatUsage } from "../utils/format.js";
@@ -25,6 +24,8 @@ export class AgentInterface extends LitElement {
 	@property() enableThinking = true;
 	@property() showThemeToggle = false;
 	@property() showDebugToggle = false;
+	// Optional custom API key prompt handler - if not provided, uses default dialog
+	@property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise<boolean>;
 
 	// References
 	@query("message-editor") private _messageEditor!: MessageEditor;
@@ -126,8 +127,7 @@ export class AgentInterface extends LitElement {
 			} else if (ev.type === "error-no-model") {
 				// TODO show some UI feedback
 			} else if (ev.type === "error-no-api-key") {
-				// Open API keys dialog to configure the missing key
-				ApiKeysDialog.open();
+				// Handled by onApiKeyRequired callback
 			}
 		});
 	}
@@ -166,15 +166,19 @@ export class AgentInterface extends LitElement {
 
 		// Check if API key exists for the provider (only needed in direct mode)
 		const provider = session.state.model.provider;
-		let apiKey = await getKeyStore().getKey(provider);
+		const apiKey = await getAppStorage().providerKeys.getKey(provider);
 
-		// If no API key, open the API keys dialog
+		// If no API key, prompt for it
 		if (!apiKey) {
-			await ApiKeysDialog.open();
-			// Check again after dialog closes
-			apiKey = await getKeyStore().getKey(provider);
+			if (!this.onApiKeyRequired) {
+				console.error("No API key configured and no onApiKeyRequired handler set");
+				return;
+			}
+
+			const success = await this.onApiKeyRequired(provider);
+
 			// If still no API key, abort the send
-			if (!apiKey) {
+			if (!success) {
 				return;
 			}
 		}