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/app-storage.ts

@@ -1,54 +1,30 @@
-import { SessionsRepository } from "./sessions-repository.js";
+import type { ProviderKeysStore } from "./stores/provider-keys-store.js";
+import type { SessionsStore } from "./stores/sessions-store.js";
+import type { SettingsStore } from "./stores/settings-store.js";
 import type { StorageBackend } from "./types.js";
 
 /**
  * High-level storage API providing access to all storage operations.
- * Subclasses can extend this to add domain-specific repositories.
+ * Subclasses can extend this to add domain-specific stores.
  */
 export class AppStorage {
 	readonly backend: StorageBackend;
-	readonly sessions: SessionsRepository;
+	readonly settings: SettingsStore;
+	readonly providerKeys: ProviderKeysStore;
+	readonly sessions: SessionsStore;
 
-	constructor(backend: StorageBackend) {
+	constructor(
+		settings: SettingsStore,
+		providerKeys: ProviderKeysStore,
+		sessions: SessionsStore,
+		backend: StorageBackend,
+	) {
+		this.settings = settings;
+		this.providerKeys = providerKeys;
+		this.sessions = sessions;
 		this.backend = backend;
-		this.sessions = new SessionsRepository(backend);
 	}
 
-	// Settings access (delegates to "settings" store)
-	async getSetting<T>(key: string): Promise<T | null> {
-		return this.backend.get("settings", key);
-	}
-
-	async setSetting<T>(key: string, value: T): Promise<void> {
-		await this.backend.set("settings", key, value);
-	}
-
-	async deleteSetting(key: string): Promise<void> {
-		await this.backend.delete("settings", key);
-	}
-
-	async listSettings(): Promise<string[]> {
-		return this.backend.keys("settings");
-	}
-
-	// Provider keys access (delegates to "provider-keys" store)
-	async getProviderKey(provider: string): Promise<string | null> {
-		return this.backend.get("provider-keys", provider);
-	}
-
-	async setProviderKey(provider: string, key: string): Promise<void> {
-		await this.backend.set("provider-keys", provider, key);
-	}
-
-	async deleteProviderKey(provider: string): Promise<void> {
-		await this.backend.delete("provider-keys", provider);
-	}
-
-	async listProviderKeys(): Promise<string[]> {
-		return this.backend.keys("provider-keys");
-	}
-
-	// Quota management
 	async getQuotaInfo(): Promise<{ usage: number; quota: number; percent: number }> {
 		return this.backend.getQuotaInfo();
 	}

packages/web-ui/src/storage/sessions-repository.ts

@@ -1,62 +0,0 @@
-import type { SessionData, SessionMetadata, StorageBackend } from "./types.js";
-
-/**
- * Repository for managing sessions using a multi-store backend.
- * Handles session data and metadata with atomic operations.
- */
-export class SessionsRepository {
-	constructor(private backend: StorageBackend) {}
-
-	async saveSession(data: SessionData, metadata: SessionMetadata): Promise<void> {
-		await this.backend.transaction(["sessions-metadata", "sessions-data"], "readwrite", async (tx) => {
-			await tx.set("sessions-metadata", metadata.id, metadata);
-			await tx.set("sessions-data", data.id, data);
-		});
-	}
-
-	async getSession(id: string): Promise<SessionData | null> {
-		return this.backend.get("sessions-data", id);
-	}
-
-	async getMetadata(id: string): Promise<SessionMetadata | null> {
-		return this.backend.get("sessions-metadata", id);
-	}
-
-	async getAllMetadata(): Promise<SessionMetadata[]> {
-		const keys = await this.backend.keys("sessions-metadata");
-		const metadata = await Promise.all(
-			keys.map((key) => this.backend.get<SessionMetadata>("sessions-metadata", key)),
-		);
-		return metadata.filter((m): m is SessionMetadata => m !== null);
-	}
-
-	async deleteSession(id: string): Promise<void> {
-		await this.backend.transaction(["sessions-metadata", "sessions-data"], "readwrite", async (tx) => {
-			await tx.delete("sessions-metadata", id);
-			await tx.delete("sessions-data", id);
-		});
-	}
-
-	async updateTitle(id: string, title: string): Promise<void> {
-		const metadata = await this.getMetadata(id);
-		if (metadata) {
-			metadata.title = title;
-			await this.backend.set("sessions-metadata", id, metadata);
-		}
-
-		// Also update in full session data
-		const data = await this.getSession(id);
-		if (data) {
-			data.title = title;
-			await this.backend.set("sessions-data", id, data);
-		}
-	}
-
-	async getQuotaInfo(): Promise<{ usage: number; quota: number; percent: number }> {
-		return this.backend.getQuotaInfo();
-	}
-
-	async requestPersistence(): Promise<boolean> {
-		return this.backend.requestPersistence();
-	}
-}

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

@@ -0,0 +1,33 @@
+import type { StorageBackend, StoreConfig } from "./types.js";
+
+/**
+ * Base class for all storage stores.
+ * Each store defines its IndexedDB schema and provides domain-specific methods.
+ */
+export abstract class Store {
+	private backend: StorageBackend | null = null;
+
+	/**
+	 * Returns the IndexedDB configuration for this store.
+	 * Defines store name, key path, and indices.
+	 */
+	abstract getConfig(): StoreConfig;
+
+	/**
+	 * Sets the storage backend. Called by AppStorage after backend creation.
+	 */
+	setBackend(backend: StorageBackend): void {
+		this.backend = backend;
+	}
+
+	/**
+	 * Gets the storage backend. Throws if backend not set.
+	 * Concrete stores must use this to access the backend.
+	 */
+	protected getBackend(): StorageBackend {
+		if (!this.backend) {
+			throw new Error(`Backend not set on ${this.constructor.name}`);
+		}
+		return this.backend;
+	}
+}

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");
+	}
+}