Refactor to Store-based architecture

- Create base Store class with private backend and protected getBackend()
- Add SettingsStore, ProviderKeysStore, SessionsStore
- Each store defines its own schema via getConfig()
- AppStorage now takes stores + backend in constructor
- Remove SessionsRepository (logic moved to SessionsStore)
- Update all consumers to use store API (storage.settings.get/set, storage.providerKeys.get/set)
- Update example app to follow new pattern: create stores, gather configs, create backend, wire
- Benefits: stores own their schema, no circular deps, cleaner separation

packages/web-ui/src/storage/stores/provider-keys-store.ts

@@ -0,0 +1,33 @@
+import { Store } from "../store.js";
+import type { StoreConfig } from "../types.js";
+
+/**
+ * Store for LLM provider API keys (Anthropic, OpenAI, etc.).
+ */
+export class ProviderKeysStore extends Store {
+	getConfig(): StoreConfig {
+		return {
+			name: "provider-keys",
+		};
+	}
+
+	async get(provider: string): Promise<string | null> {
+		return this.getBackend().get("provider-keys", provider);
+	}
+
+	async set(provider: string, key: string): Promise<void> {
+		await this.getBackend().set("provider-keys", provider, key);
+	}
+
+	async delete(provider: string): Promise<void> {
+		await this.getBackend().delete("provider-keys", provider);
+	}
+
+	async list(): Promise<string[]> {
+		return this.getBackend().keys("provider-keys");
+	}
+
+	async has(provider: string): Promise<boolean> {
+		return this.getBackend().has("provider-keys", provider);
+	}
+}

packages/web-ui/src/storage/stores/sessions-store.ts

@@ -0,0 +1,86 @@
+import { Store } from "../store.js";
+import type { SessionData, SessionMetadata, StoreConfig } from "../types.js";
+
+/**
+ * Store for chat sessions (data and metadata).
+ * Uses two object stores: sessions (full data) and sessions-metadata (lightweight).
+ */
+export class SessionsStore extends Store {
+	getConfig(): StoreConfig {
+		return {
+			name: "sessions",
+			keyPath: "id",
+			indices: [{ name: "lastModified", keyPath: "lastModified" }],
+		};
+	}
+
+	/**
+	 * Additional config for sessions-metadata store.
+	 * Must be included when creating the backend.
+	 */
+	static getMetadataConfig(): StoreConfig {
+		return {
+			name: "sessions-metadata",
+			keyPath: "id",
+			indices: [{ name: "lastModified", keyPath: "lastModified" }],
+		};
+	}
+
+	async save(data: SessionData, metadata: SessionMetadata): Promise<void> {
+		await this.getBackend().transaction(["sessions", "sessions-metadata"], "readwrite", async (tx) => {
+			await tx.set("sessions", data.id, data);
+			await tx.set("sessions-metadata", metadata.id, metadata);
+		});
+	}
+
+	async get(id: string): Promise<SessionData | null> {
+		return this.getBackend().get("sessions", id);
+	}
+
+	async getMetadata(id: string): Promise<SessionMetadata | null> {
+		return this.getBackend().get("sessions-metadata", id);
+	}
+
+	async getAllMetadata(): Promise<SessionMetadata[]> {
+		const keys = await this.getBackend().keys("sessions-metadata");
+		const metadata = await Promise.all(
+			keys.map((key) => this.getBackend().get<SessionMetadata>("sessions-metadata", key)),
+		);
+		return metadata.filter((m): m is SessionMetadata => m !== null);
+	}
+
+	async delete(id: string): Promise<void> {
+		await this.getBackend().transaction(["sessions", "sessions-metadata"], "readwrite", async (tx) => {
+			await tx.delete("sessions", id);
+			await tx.delete("sessions-metadata", id);
+		});
+	}
+
+	// Alias for backward compatibility
+	async deleteSession(id: string): Promise<void> {
+		return this.delete(id);
+	}
+
+	async updateTitle(id: string, title: string): Promise<void> {
+		const metadata = await this.getMetadata(id);
+		if (metadata) {
+			metadata.title = title;
+			await this.getBackend().set("sessions-metadata", id, metadata);
+		}
+
+		// Also update in full session data
+		const data = await this.get(id);
+		if (data) {
+			data.title = title;
+			await this.getBackend().set("sessions", id, data);
+		}
+	}
+
+	async getQuotaInfo(): Promise<{ usage: number; quota: number; percent: number }> {
+		return this.getBackend().getQuotaInfo();
+	}
+
+	async requestPersistence(): Promise<boolean> {
+		return this.getBackend().requestPersistence();
+	}
+}

packages/web-ui/src/storage/stores/settings-store.ts

@@ -0,0 +1,34 @@
+import { Store } from "../store.js";
+import type { StoreConfig } from "../types.js";
+
+/**
+ * Store for application settings (theme, proxy config, etc.).
+ */
+export class SettingsStore extends Store {
+	getConfig(): StoreConfig {
+		return {
+			name: "settings",
+			// No keyPath - uses out-of-line keys
+		};
+	}
+
+	async get<T>(key: string): Promise<T | null> {
+		return this.getBackend().get("settings", key);
+	}
+
+	async set<T>(key: string, value: T): Promise<void> {
+		await this.getBackend().set("settings", key, value);
+	}
+
+	async delete(key: string): Promise<void> {
+		await this.getBackend().delete("settings", key);
+	}
+
+	async list(): Promise<string[]> {
+		return this.getBackend().keys("settings");
+	}
+
+	async clear(): Promise<void> {
+		await this.getBackend().clear("settings");
+	}
+}