@mariozechner/pi-web-ui 0.5.44 → 0.5.46

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/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,130 @@
+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: any, 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: state.usage || {
+				input: 0,
+				output: 0,
+				cacheRead: 0,
+				cacheWrite: 0,
+				cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
+			},
+			modelId: state.model?.id || null,
+			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

@@ -1,48 +1,208 @@
+import type { Model } from "@mariozechner/pi-ai";
+import type { ThinkingLevel } from "../agent/agent.js";
+import type { AppMessage } from "../components/Messages.js";
+
+/**
+ * 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.
- * Provides a simple key-value storage abstraction that can be implemented
- * by localStorage, IndexedDB, chrome.storage, or remote APIs.
+ * 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. Returns null if key doesn't exist.
+	 * Get a value by key from a specific store. Returns null if key doesn't exist.
 	 */
-	get<T = unknown>(key: string): Promise<T | null>;
+	get<T = unknown>(storeName: string, key: string): Promise<T | null>;
 
 	/**
-	 * Set a value for a key.
+	 * Set a value for a key in a specific store.
 	 */
-	set<T = unknown>(key: string, value: T): Promise<void>;
+	set<T = unknown>(storeName: string, key: string, value: T): Promise<void>;
 
 	/**
-	 * Delete a key.
+	 * Delete a key from a specific store.
 	 */
-	delete(key: string): Promise<void>;
+	delete(storeName: string, key: string): Promise<void>;
 
 	/**
-	 * Get all keys.
+	 * Get all keys from a specific store, optionally filtered by prefix.
 	 */
-	keys(): Promise<string[]>;
+	keys(storeName: string, prefix?: string): Promise<string[]>;
 
 	/**
-	 * Clear all data.
+	 * 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")
 	 */
-	clear(): Promise<void>;
+	getAllFromIndex<T = unknown>(storeName: string, indexName: string, direction?: "asc" | "desc"): Promise<T[]>;
 
 	/**
-	 * Check if a key exists.
+	 * Clear all data from a specific store.
 	 */
-	has(key: string): Promise<boolean>;
+	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 cost breakdown */
+		cost: {
+			input: number;
+			output: number;
+			cacheRead: number;
+			cacheWrite: number;
+			total: number;
+		};
+	};
+
+	/** Last used model ID (e.g., "claude-sonnet-4") */
+	modelId: string | null;
+
+	/** 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: AppMessage[];
+
+	/** 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[];
 }
 
 /**
- * Options for configuring AppStorage.
+ * Configuration for an IndexedDB index.
  */
-export interface AppStorageConfig {
-	/** Backend for simple settings (proxy, theme, etc.) */
-	settings?: StorageBackend;
-	/** Backend for provider API keys */
-	providerKeys?: StorageBackend;
-	/** Backend for sessions (chat history, attachments) */
-	sessions?: StorageBackend;
+export interface IndexConfig {
+	/** Index name */
+	name: string;
+	/** Key path to index on */
+	keyPath: string;
+	/** Unique constraint (optional) */
+	unique?: boolean;
 }

package/src/tools/artifacts/ArtifactElement.ts

@@ -2,7 +2,6 @@ import { LitElement, type TemplateResult } from "lit";
 
 export abstract class ArtifactElement extends LitElement {
 	public filename = "";
-	public displayTitle = "";
 
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
 		return this; // light DOM for shared styles

package/src/tools/artifacts/ArtifactPill.ts

@@ -0,0 +1,25 @@
+import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
+import { FileCode2 } from "lucide";
+import type { ArtifactsPanel } from "./artifacts.js";
+
+export function ArtifactPill(filename: string, artifactsPanel?: ArtifactsPanel): TemplateResult {
+	const handleClick = (e: Event) => {
+		if (!artifactsPanel) return;
+		e.preventDefault();
+		e.stopPropagation();
+		// openArtifact will show the artifact and call onOpen() to open the panel if needed
+		artifactsPanel.openArtifact(filename);
+	};
+
+	return html`
+		<span
+			class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-muted/50 border border-border rounded ${
+				artifactsPanel ? "cursor-pointer hover:bg-muted transition-colors" : ""
+			}"
+			@click=${artifactsPanel ? handleClick : null}
+		>
+			${icon(FileCode2, "sm")}
+			<span class="text-foreground">${filename}</span>
+		</span>
+	`;
+}

package/src/tools/artifacts/Console.ts

@@ -0,0 +1,93 @@
+import { icon } from "@mariozechner/mini-lit";
+import "@mariozechner/mini-lit/dist/CopyButton.js";
+import { html, LitElement, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, type Ref, ref } from "lit/directives/ref.js";
+import { repeat } from "lit/directives/repeat.js";
+import { ChevronDown, ChevronRight, ChevronsDown, Lock } from "lucide";
+import { i18n } from "../../utils/i18n.js";
+
+interface LogEntry {
+	type: "log" | "error";
+	text: string;
+}
+
+@customElement("artifact-console")
+export class Console extends LitElement {
+	@property({ attribute: false }) logs: LogEntry[] = [];
+	@state() private expanded = false;
+	@state() private autoscroll = true;
+	private logsContainerRef: Ref<HTMLDivElement> = createRef();
+
+	protected createRenderRoot() {
+		return this; // light DOM
+	}
+
+	override updated() {
+		// Autoscroll to bottom when new logs arrive
+		if (this.autoscroll && this.expanded && this.logsContainerRef.value) {
+			this.logsContainerRef.value.scrollTop = this.logsContainerRef.value.scrollHeight;
+		}
+	}
+
+	private getLogsText(): string {
+		return this.logs.map((l) => `[${l.type}] ${l.text}`).join("\n");
+	}
+
+	override render(): TemplateResult {
+		const errorCount = this.logs.filter((l) => l.type === "error").length;
+		const summary =
+			errorCount > 0
+				? `${i18n("console")} (${errorCount} ${errorCount === 1 ? "error" : "errors"})`
+				: `${i18n("console")} (${this.logs.length})`;
+
+		return html`
+			<div class="border-t border-border p-2">
+				<div class="flex items-center gap-2 w-full">
+					<button
+						@click=${() => {
+							this.expanded = !this.expanded;
+						}}
+						class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors flex-1 text-left"
+					>
+						${icon(this.expanded ? ChevronDown : ChevronRight, "sm")}
+						<span>${summary}</span>
+					</button>
+					${
+						this.expanded
+							? html`
+							<button
+								@click=${() => {
+									this.autoscroll = !this.autoscroll;
+								}}
+								class="p-1 rounded transition-colors ${this.autoscroll ? "bg-accent text-accent-foreground" : "hover:bg-muted"}"
+								title=${this.autoscroll ? i18n("Autoscroll enabled") : i18n("Autoscroll disabled")}
+							>
+								${icon(this.autoscroll ? ChevronsDown : Lock, "sm")}
+							</button>
+							<copy-button .text=${this.getLogsText()} title=${i18n("Copy logs")} .showText=${false} class="!bg-transparent hover:!bg-accent"></copy-button>
+						`
+							: ""
+					}
+				</div>
+				${
+					this.expanded
+						? html`
+						<div class="max-h-48 overflow-y-auto space-y-1 mt-2" ${ref(this.logsContainerRef)}>
+							${repeat(
+								this.logs,
+								(_log, index) => index,
+								(log) => html`
+									<div class="text-xs font-mono ${log.type === "error" ? "text-destructive" : "text-muted-foreground"}">
+										[${log.type}] ${log.text}
+									</div>
+								`,
+							)}
+						</div>
+					`
+						: ""
+				}
+			</div>
+		`;
+	}
+}