@oh-my-pi/pi-web-ui 1.337.0

package/src/storage/backends/indexeddb-storage-backend.ts

@@ -0,0 +1,193 @@
+import type { IndexedDBConfig, StorageBackend, StorageTransaction } from "../types.js";
+
+/**
+ * IndexedDB implementation of StorageBackend.
+ * Provides multi-store key-value storage with transactions and quota management.
+ */
+export class IndexedDBStorageBackend implements StorageBackend {
+	private dbPromise: Promise<IDBDatabase> | null = null;
+
+	constructor(private config: IndexedDBConfig) {}
+
+	private async getDB(): Promise<IDBDatabase> {
+		if (!this.dbPromise) {
+			this.dbPromise = new Promise((resolve, reject) => {
+				const request = indexedDB.open(this.config.dbName, this.config.version);
+
+				request.onerror = () => reject(request.error);
+				request.onsuccess = () => resolve(request.result);
+
+				request.onupgradeneeded = (_event) => {
+					const db = request.result;
+
+					// Create object stores from config
+					for (const storeConfig of this.config.stores) {
+						if (!db.objectStoreNames.contains(storeConfig.name)) {
+							const store = db.createObjectStore(storeConfig.name, {
+								keyPath: storeConfig.keyPath,
+								autoIncrement: storeConfig.autoIncrement,
+							});
+
+							// Create indices
+							if (storeConfig.indices) {
+								for (const indexConfig of storeConfig.indices) {
+									store.createIndex(indexConfig.name, indexConfig.keyPath, {
+										unique: indexConfig.unique,
+									});
+								}
+							}
+						}
+					}
+				};
+			});
+		}
+
+		return this.dbPromise;
+	}
+
+	private promisifyRequest<T>(request: IDBRequest<T>): Promise<T> {
+		return new Promise((resolve, reject) => {
+			request.onsuccess = () => resolve(request.result);
+			request.onerror = () => reject(request.error);
+		});
+	}
+
+	async get<T = unknown>(storeName: string, key: string): Promise<T | null> {
+		const db = await this.getDB();
+		const tx = db.transaction(storeName, "readonly");
+		const store = tx.objectStore(storeName);
+		const result = await this.promisifyRequest(store.get(key));
+		return result ?? null;
+	}
+
+	async set<T = unknown>(storeName: string, key: string, value: T): Promise<void> {
+		const db = await this.getDB();
+		const tx = db.transaction(storeName, "readwrite");
+		const store = tx.objectStore(storeName);
+		// If store has keyPath, only pass value (in-line key)
+		// Otherwise pass both value and key (out-of-line key)
+		if (store.keyPath) {
+			await this.promisifyRequest(store.put(value));
+		} else {
+			await this.promisifyRequest(store.put(value, key));
+		}
+	}
+
+	async delete(storeName: string, key: string): Promise<void> {
+		const db = await this.getDB();
+		const tx = db.transaction(storeName, "readwrite");
+		const store = tx.objectStore(storeName);
+		await this.promisifyRequest(store.delete(key));
+	}
+
+	async keys(storeName: string, prefix?: string): Promise<string[]> {
+		const db = await this.getDB();
+		const tx = db.transaction(storeName, "readonly");
+		const store = tx.objectStore(storeName);
+
+		if (prefix) {
+			// Use IDBKeyRange for efficient prefix filtering
+			const range = IDBKeyRange.bound(prefix, `${prefix}\uffff`, false, false);
+			const keys = await this.promisifyRequest(store.getAllKeys(range));
+			return keys.map((k) => String(k));
+		} else {
+			const keys = await this.promisifyRequest(store.getAllKeys());
+			return keys.map((k) => String(k));
+		}
+	}
+
+	async getAllFromIndex<T = unknown>(
+		storeName: string,
+		indexName: string,
+		direction: "asc" | "desc" = "asc",
+	): Promise<T[]> {
+		const db = await this.getDB();
+		const tx = db.transaction(storeName, "readonly");
+		const store = tx.objectStore(storeName);
+		const index = store.index(indexName);
+
+		return new Promise((resolve, reject) => {
+			const results: T[] = [];
+			const request = index.openCursor(null, direction === "desc" ? "prev" : "next");
+
+			request.onsuccess = () => {
+				const cursor = request.result;
+				if (cursor) {
+					results.push(cursor.value as T);
+					cursor.continue();
+				} else {
+					resolve(results);
+				}
+			};
+
+			request.onerror = () => reject(request.error);
+		});
+	}
+
+	async clear(storeName: string): Promise<void> {
+		const db = await this.getDB();
+		const tx = db.transaction(storeName, "readwrite");
+		const store = tx.objectStore(storeName);
+		await this.promisifyRequest(store.clear());
+	}
+
+	async has(storeName: string, key: string): Promise<boolean> {
+		const db = await this.getDB();
+		const tx = db.transaction(storeName, "readonly");
+		const store = tx.objectStore(storeName);
+		const result = await this.promisifyRequest(store.getKey(key));
+		return result !== undefined;
+	}
+
+	async transaction<T>(
+		storeNames: string[],
+		mode: "readonly" | "readwrite",
+		operation: (tx: StorageTransaction) => Promise<T>,
+	): Promise<T> {
+		const db = await this.getDB();
+		const idbTx = db.transaction(storeNames, mode);
+
+		const storageTx: StorageTransaction = {
+			get: async <T>(storeName: string, key: string) => {
+				const store = idbTx.objectStore(storeName);
+				const result = await this.promisifyRequest(store.get(key));
+				return (result ?? null) as T | null;
+			},
+			set: async <T>(storeName: string, key: string, value: T) => {
+				const store = idbTx.objectStore(storeName);
+				// If store has keyPath, only pass value (in-line key)
+				// Otherwise pass both value and key (out-of-line key)
+				if (store.keyPath) {
+					await this.promisifyRequest(store.put(value));
+				} else {
+					await this.promisifyRequest(store.put(value, key));
+				}
+			},
+			delete: async (storeName: string, key: string) => {
+				const store = idbTx.objectStore(storeName);
+				await this.promisifyRequest(store.delete(key));
+			},
+		};
+
+		return operation(storageTx);
+	}
+
+	async getQuotaInfo(): Promise<{ usage: number; quota: number; percent: number }> {
+		if (navigator.storage?.estimate) {
+			const estimate = await navigator.storage.estimate();
+			return {
+				usage: estimate.usage || 0,
+				quota: estimate.quota || 0,
+				percent: estimate.quota ? ((estimate.usage || 0) / estimate.quota) * 100 : 0,
+			};
+		}
+		return { usage: 0, quota: 0, percent: 0 };
+	}
+
+	async requestPersistence(): Promise<boolean> {
+		if (navigator.storage?.persist) {
+			return await navigator.storage.persist();
+		}
+		return false;
+	}
+}

package/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;
+	}
+}

package/src/storage/stores/custom-providers-store.ts

@@ -0,0 +1,62 @@
+import type { Model } from "@oh-my-pi/pi-ai";
+import { Store } from "../store.js";
+import type { StoreConfig } from "../types.js";
+
+export type AutoDiscoveryProviderType = "ollama" | "llama.cpp" | "vllm" | "lmstudio";
+
+export type CustomProviderType =
+	| AutoDiscoveryProviderType // Auto-discovery - models fetched on-demand
+	| "openai-completions" // Manual models - stored in provider.models
+	| "openai-responses" // Manual models - stored in provider.models
+	| "anthropic-messages"; // Manual models - stored in provider.models
+
+export interface CustomProvider {
+	id: string; // UUID
+	name: string; // Display name, also used as Model.provider
+	type: CustomProviderType;
+	baseUrl: string;
+	apiKey?: string; // Optional, applies to all models
+
+	// For manual types ONLY - models stored directly on provider
+	// Auto-discovery types: models fetched on-demand, never stored
+	models?: Model<any>[];
+}
+
+/**
+ * Store for custom LLM providers (auto-discovery servers + manual providers).
+ */
+export class CustomProvidersStore extends Store {
+	getConfig(): StoreConfig {
+		return {
+			name: "custom-providers",
+		};
+	}
+
+	async get(id: string): Promise<CustomProvider | null> {
+		return this.getBackend().get("custom-providers", id);
+	}
+
+	async set(provider: CustomProvider): Promise<void> {
+		await this.getBackend().set("custom-providers", provider.id, provider);
+	}
+
+	async delete(id: string): Promise<void> {
+		await this.getBackend().delete("custom-providers", id);
+	}
+
+	async getAll(): Promise<CustomProvider[]> {
+		const keys = await this.getBackend().keys("custom-providers");
+		const providers: CustomProvider[] = [];
+		for (const key of keys) {
+			const provider = await this.get(key);
+			if (provider) {
+				providers.push(provider);
+			}
+		}
+		return providers;
+	}
+
+	async has(id: string): Promise<boolean> {
+		return this.getBackend().has("custom-providers", id);
+	}
+}

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

package/src/storage/stores/sessions-store.ts

@@ -0,0 +1,136 @@
+import type { AgentState } from "@oh-my-pi/pi-agent-core";
+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[]> {
+		// Use the lastModified index to get sessions sorted by most recent first
+		return this.getBackend().getAllFromIndex<SessionMetadata>("sessions-metadata", "lastModified", "desc");
+	}
+
+	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();
+	}
+
+	// Alias methods for backward compatibility
+	async saveSession(
+		id: string,
+		state: AgentState,
+		metadata: SessionMetadata | undefined,
+		title?: string,
+	): Promise<void> {
+		// If metadata is provided, use it; otherwise create it from state
+		const meta: SessionMetadata = metadata || {
+			id,
+			title: title || "",
+			createdAt: new Date().toISOString(),
+			lastModified: new Date().toISOString(),
+			messageCount: state.messages?.length || 0,
+			usage: {
+				input: 0,
+				output: 0,
+				cacheRead: 0,
+				cacheWrite: 0,
+				totalTokens: 0,
+				cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
+			},
+			thinkingLevel: state.thinkingLevel || "off",
+			preview: "",
+		};
+
+		const data: SessionData = {
+			id,
+			title: title || meta.title,
+			model: state.model,
+			thinkingLevel: state.thinkingLevel,
+			messages: state.messages || [],
+			createdAt: meta.createdAt,
+			lastModified: new Date().toISOString(),
+		};
+
+		await this.save(data, meta);
+	}
+
+	async loadSession(id: string): Promise<SessionData | null> {
+		return this.get(id);
+	}
+
+	async getLatestSessionId(): Promise<string | null> {
+		const allMetadata = await this.getAllMetadata();
+		if (allMetadata.length === 0) return null;
+
+		// Sort by lastModified descending
+		allMetadata.sort((a, b) => b.lastModified.localeCompare(a.lastModified));
+		return allMetadata[0].id;
+	}
+}

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

package/src/storage/types.ts

@@ -0,0 +1,206 @@
+import type { AgentMessage, ThinkingLevel } from "@oh-my-pi/pi-agent-core";
+import type { Model } from "@oh-my-pi/pi-ai";
+
+/**
+ * Transaction interface for atomic operations across stores.
+ */
+export interface StorageTransaction {
+	/**
+	 * Get a value by key from a specific store.
+	 */
+	get<T = unknown>(storeName: string, key: string): Promise<T | null>;
+
+	/**
+	 * Set a value for a key in a specific store.
+	 */
+	set<T = unknown>(storeName: string, key: string, value: T): Promise<void>;
+
+	/**
+	 * Delete a key from a specific store.
+	 */
+	delete(storeName: string, key: string): Promise<void>;
+}
+
+/**
+ * Base interface for all storage backends.
+ * Multi-store key-value storage abstraction that can be implemented
+ * by IndexedDB, remote APIs, or any other multi-collection storage system.
+ */
+export interface StorageBackend {
+	/**
+	 * Get a value by key from a specific store. Returns null if key doesn't exist.
+	 */
+	get<T = unknown>(storeName: string, key: string): Promise<T | null>;
+
+	/**
+	 * Set a value for a key in a specific store.
+	 */
+	set<T = unknown>(storeName: string, key: string, value: T): Promise<void>;
+
+	/**
+	 * Delete a key from a specific store.
+	 */
+	delete(storeName: string, key: string): Promise<void>;
+
+	/**
+	 * Get all keys from a specific store, optionally filtered by prefix.
+	 */
+	keys(storeName: string, prefix?: string): Promise<string[]>;
+
+	/**
+	 * Get all values from a specific store, ordered by an index.
+	 * @param storeName - The store to query
+	 * @param indexName - The index to use for ordering
+	 * @param direction - Sort direction ("asc" or "desc")
+	 */
+	getAllFromIndex<T = unknown>(storeName: string, indexName: string, direction?: "asc" | "desc"): Promise<T[]>;
+
+	/**
+	 * Clear all data from a specific store.
+	 */
+	clear(storeName: string): Promise<void>;
+
+	/**
+	 * Check if a key exists in a specific store.
+	 */
+	has(storeName: string, key: string): Promise<boolean>;
+
+	/**
+	 * Execute atomic operations across multiple stores.
+	 */
+	transaction<T>(
+		storeNames: string[],
+		mode: "readonly" | "readwrite",
+		operation: (tx: StorageTransaction) => Promise<T>,
+	): Promise<T>;
+
+	/**
+	 * Get storage quota information.
+	 * Used for warning users when approaching limits.
+	 */
+	getQuotaInfo(): Promise<{ usage: number; quota: number; percent: number }>;
+
+	/**
+	 * Request persistent storage (prevents eviction).
+	 * Returns true if granted, false otherwise.
+	 */
+	requestPersistence(): Promise<boolean>;
+}
+
+/**
+ * Lightweight session metadata for listing and searching.
+ * Stored separately from full session data for performance.
+ */
+export interface SessionMetadata {
+	/** Unique session identifier (UUID v4) */
+	id: string;
+
+	/** User-defined title or auto-generated from first message */
+	title: string;
+
+	/** ISO 8601 UTC timestamp of creation */
+	createdAt: string;
+
+	/** ISO 8601 UTC timestamp of last modification */
+	lastModified: string;
+
+	/** Total number of messages (user + assistant + tool results) */
+	messageCount: number;
+
+	/** Cumulative usage statistics */
+	usage: {
+		/** Total input tokens */
+		input: number;
+		/** Total output tokens */
+		output: number;
+		/** Total cache read tokens */
+		cacheRead: number;
+		/** Total cache write tokens */
+		cacheWrite: number;
+		/** Total tokens processed */
+		totalTokens: number;
+		/** Total cost breakdown */
+		cost: {
+			input: number;
+			output: number;
+			cacheRead: number;
+			cacheWrite: number;
+			total: number;
+		};
+	};
+
+	/** Last used thinking level */
+	thinkingLevel: ThinkingLevel;
+
+	/**
+	 * Preview text for search and display.
+	 * First 2KB of conversation text (user + assistant messages in sequence).
+	 * Tool calls and tool results are excluded.
+	 */
+	preview: string;
+}
+
+/**
+ * Full session data including all messages.
+ * Only loaded when user opens a specific session.
+ */
+export interface SessionData {
+	/** Unique session identifier (UUID v4) */
+	id: string;
+
+	/** User-defined title or auto-generated from first message */
+	title: string;
+
+	/** Last selected model */
+	model: Model<any>;
+
+	/** Last selected thinking level */
+	thinkingLevel: ThinkingLevel;
+
+	/** Full conversation history (with attachments inline) */
+	messages: AgentMessage[];
+
+	/** ISO 8601 UTC timestamp of creation */
+	createdAt: string;
+
+	/** ISO 8601 UTC timestamp of last modification */
+	lastModified: string;
+}
+
+/**
+ * Configuration for IndexedDB backend.
+ */
+export interface IndexedDBConfig {
+	/** Database name */
+	dbName: string;
+	/** Database version */
+	version: number;
+	/** Object stores to create */
+	stores: StoreConfig[];
+}
+
+/**
+ * Configuration for an IndexedDB object store.
+ */
+export interface StoreConfig {
+	/** Store name */
+	name: string;
+	/** Key path (optional, for auto-extracting keys from objects) */
+	keyPath?: string;
+	/** Auto-increment keys (optional) */
+	autoIncrement?: boolean;
+	/** Indices to create on this store */
+	indices?: IndexConfig[];
+}
+
+/**
+ * Configuration for an IndexedDB index.
+ */
+export interface IndexConfig {
+	/** Index name */
+	name: string;
+	/** Key path to index on */
+	keyPath: string;
+	/** Unique constraint (optional) */
+	unique?: boolean;
+}