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/browser-extension/src/sidepanel.ts

@@ -1,6 +1,14 @@
 import { Button, icon } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/ThemeToggle.js";
-import { ApiKeysDialog, ChromeStorageAdapter, LocalStorageKeyStore, setKeyStore } from "@mariozechner/pi-web-ui";
+import {
+	ApiKeyPromptDialog,
+	ApiKeysTab,
+	AppStorage,
+	ChromeStorageBackend,
+	ProxyTab,
+	SettingsDialog,
+	setAppStorage,
+} from "@mariozechner/pi-web-ui";
 import "@mariozechner/pi-web-ui"; // Import all web-ui components
 import { html, LitElement, render } from "lit";
 import { customElement, state } from "lit/decorators.js";
@@ -10,8 +18,12 @@ import "./utils/live-reload.js";
 
 declare const browser: any;
 
-// Initialize browser extension storage
-setKeyStore(new LocalStorageKeyStore(new ChromeStorageAdapter()));
+// Initialize browser extension storage using chrome.storage
+const storage = new AppStorage({
+	settings: new ChromeStorageBackend("settings"),
+	providerKeys: new ChromeStorageBackend("providerKeys"),
+});
+setAppStorage(storage);
 
 // Get sandbox URL for extension CSP restrictions
 const getSandboxUrl = () => {
@@ -68,7 +80,7 @@ export class Header extends LitElement {
 					size: "sm",
 					children: html`${icon(Settings, "sm")}`,
 					onClick: async () => {
-						ApiKeysDialog.open();
+						SettingsDialog.open([new ApiKeysTab(), new ProxyTab()]);
 					},
 				})}
 			</div>
@@ -98,6 +110,10 @@ class App extends LitElement {
 		return this;
 	}
 
+	private async handleApiKeyRequired(provider: string): Promise<boolean> {
+		return await ApiKeyPromptDialog.prompt(provider);
+	}
+
 	private handleNewSession() {
 		// Remove the old chat panel
 		const oldPanel = this.querySelector("pi-chat-panel");
@@ -111,6 +127,7 @@ class App extends LitElement {
 		newPanel.systemPrompt = systemPrompt;
 		newPanel.additionalTools = [browserJavaScriptTool];
 		newPanel.sandboxUrlProvider = getSandboxUrl;
+		newPanel.onApiKeyRequired = (provider: string) => this.handleApiKeyRequired(provider);
 
 		const container = this.querySelector(".w-full");
 		if (container) {
@@ -127,6 +144,7 @@ class App extends LitElement {
 				.systemPrompt=${systemPrompt}
 				.additionalTools=${[browserJavaScriptTool]}
 				.sandboxUrlProvider=${getSandboxUrl}
+				.onApiKeyRequired=${(provider: string) => this.handleApiKeyRequired(provider)}
 			></pi-chat-panel>
 		</div>
 		`;