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

package/src/dialogs/PersistentStorageDialog.ts

@@ -0,0 +1,146 @@
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("persistent-storage-dialog")
+export class PersistentStorageDialog extends DialogBase {
+	@state() private requesting = false;
+
+	private resolvePromise?: (userApproved: boolean) => void;
+
+	protected modalWidth = "min(500px, 90vw)";
+	protected modalHeight = "auto";
+
+	/**
+	 * Request persistent storage permission.
+	 * Returns true if browser granted persistent storage, false otherwise.
+	 */
+	static async request(): Promise<boolean> {
+		// Check if already persisted
+		if (navigator.storage?.persisted) {
+			const alreadyPersisted = await navigator.storage.persisted();
+			if (alreadyPersisted) {
+				console.log("✓ Persistent storage already granted");
+				return true;
+			}
+		}
+
+		// Show dialog and wait for user response
+		const dialog = new PersistentStorageDialog();
+		dialog.open();
+
+		const userApproved = await new Promise<boolean>((resolve) => {
+			dialog.resolvePromise = resolve;
+		});
+
+		if (!userApproved) {
+			console.warn("⚠ User declined persistent storage - sessions may be lost");
+			return false;
+		}
+
+		// User approved, request from browser
+		if (!navigator.storage?.persist) {
+			console.warn("⚠ Persistent storage API not available");
+			return false;
+		}
+
+		try {
+			const granted = await navigator.storage.persist();
+			if (granted) {
+				console.log("✓ Persistent storage granted - sessions will be preserved");
+			} else {
+				console.warn("⚠ Browser denied persistent storage - sessions may be lost under storage pressure");
+			}
+			return granted;
+		} catch (error) {
+			console.error("Failed to request persistent storage:", error);
+			return false;
+		}
+	}
+
+	private handleGrant() {
+		if (this.resolvePromise) {
+			this.resolvePromise(true);
+			this.resolvePromise = undefined;
+		}
+		this.close();
+	}
+
+	private handleDeny() {
+		if (this.resolvePromise) {
+			this.resolvePromise(false);
+			this.resolvePromise = undefined;
+		}
+		this.close();
+	}
+
+	override close() {
+		super.close();
+		if (this.resolvePromise) {
+			this.resolvePromise(false);
+		}
+	}
+
+	protected override renderContent() {
+		return html`
+			${DialogContent({
+				children: html`
+					${DialogHeader({
+						title: i18n("Storage Permission Required"),
+						description: i18n("This app needs persistent storage to save your conversations"),
+					})}
+
+					<div class="mt-4 flex flex-col gap-4">
+						<div class="flex gap-3 p-4 bg-warning/10 border border-warning/20 rounded-lg">
+							<div class="flex-shrink-0 text-warning">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path
+										d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+									></path>
+									<line x1="12" y1="9" x2="12" y2="13"></line>
+									<line x1="12" y1="17" x2="12.01" y2="17"></line>
+								</svg>
+							</div>
+							<div class="text-sm">
+								<p class="font-medium text-foreground mb-1">${i18n("Why is this needed?")}</p>
+								<p class="text-muted-foreground">
+									${i18n(
+										"Without persistent storage, your browser may delete saved conversations when it needs disk space. Granting this permission ensures your chat history is preserved.",
+									)}
+								</p>
+							</div>
+						</div>
+
+						<div class="text-sm text-muted-foreground">
+							<p class="mb-2">${i18n("What this means:")}</p>
+							<ul class="list-disc list-inside space-y-1 ml-2">
+								<li>${i18n("Your conversations will be saved locally in your browser")}</li>
+								<li>${i18n("Data will not be deleted automatically to free up space")}</li>
+								<li>${i18n("You can still manually clear data at any time")}</li>
+								<li>${i18n("No data is sent to external servers")}</li>
+							</ul>
+						</div>
+					</div>
+
+					<div class="mt-6 flex gap-3 justify-end">
+						${Button({
+							variant: "outline",
+							onClick: () => this.handleDeny(),
+							disabled: this.requesting,
+							children: i18n("Continue Anyway"),
+						})}
+						${Button({
+							variant: "default",
+							onClick: () => this.handleGrant(),
+							disabled: this.requesting,
+							children: this.requesting ? i18n("Requesting...") : i18n("Grant Permission"),
+						})}
+					</div>
+				`,
+			})}
+		`;
+	}
+}

package/src/dialogs/ProvidersModelsTab.ts

@@ -0,0 +1,212 @@
+import { i18n } from "@mariozechner/mini-lit";
+import { Select } from "@mariozechner/mini-lit/dist/Select.js";
+import { getProviders } from "@oh-my-pi/pi-ai";
+import { html, type TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import "../components/CustomProviderCard.js";
+import "../components/ProviderKeyInput.js";
+import { getAppStorage } from "../storage/app-storage.js";
+import type {
+	AutoDiscoveryProviderType,
+	CustomProvider,
+	CustomProviderType,
+} from "../storage/stores/custom-providers-store.js";
+import { discoverModels } from "../utils/model-discovery.js";
+import { CustomProviderDialog } from "./CustomProviderDialog.js";
+import { SettingsTab } from "./SettingsDialog.js";
+
+@customElement("providers-models-tab")
+export class ProvidersModelsTab extends SettingsTab {
+	@state() private customProviders: CustomProvider[] = [];
+	@state() private providerStatus: Map<
+		string,
+		{ modelCount: number; status: "connected" | "disconnected" | "checking" }
+	> = new Map();
+
+	override async connectedCallback() {
+		super.connectedCallback();
+		await this.loadCustomProviders();
+	}
+
+	private async loadCustomProviders() {
+		try {
+			const storage = getAppStorage();
+			this.customProviders = await storage.customProviders.getAll();
+
+			// Check status for auto-discovery providers
+			for (const provider of this.customProviders) {
+				const isAutoDiscovery =
+					provider.type === "ollama" ||
+					provider.type === "llama.cpp" ||
+					provider.type === "vllm" ||
+					provider.type === "lmstudio";
+				if (isAutoDiscovery) {
+					this.checkProviderStatus(provider);
+				}
+			}
+		} catch (error) {
+			console.error("Failed to load custom providers:", error);
+		}
+	}
+
+	getTabName(): string {
+		return "Providers & Models";
+	}
+
+	private async checkProviderStatus(provider: CustomProvider) {
+		this.providerStatus.set(provider.id, { modelCount: 0, status: "checking" });
+		this.requestUpdate();
+
+		try {
+			const models = await discoverModels(
+				provider.type as AutoDiscoveryProviderType,
+				provider.baseUrl,
+				provider.apiKey,
+			);
+
+			this.providerStatus.set(provider.id, { modelCount: models.length, status: "connected" });
+		} catch (_error) {
+			this.providerStatus.set(provider.id, { modelCount: 0, status: "disconnected" });
+		}
+		this.requestUpdate();
+	}
+
+	private renderKnownProviders(): TemplateResult {
+		const providers = getProviders();
+
+		return html`
+			<div class="flex flex-col gap-6">
+				<div>
+					<h3 class="text-sm font-semibold text-foreground mb-2">Cloud Providers</h3>
+					<p class="text-sm text-muted-foreground mb-4">
+						Cloud LLM providers with predefined models. API keys are stored locally in your browser.
+					</p>
+				</div>
+				<div class="flex flex-col gap-6">
+					${providers.map((provider) => html` <provider-key-input .provider=${provider}></provider-key-input> `)}
+				</div>
+			</div>
+		`;
+	}
+
+	private renderCustomProviders(): TemplateResult {
+		const isAutoDiscovery = (type: string) =>
+			type === "ollama" || type === "llama.cpp" || type === "vllm" || type === "lmstudio";
+
+		return html`
+			<div class="flex flex-col gap-6">
+				<div class="flex items-center justify-between">
+					<div>
+						<h3 class="text-sm font-semibold text-foreground mb-2">Custom Providers</h3>
+						<p class="text-sm text-muted-foreground">
+							User-configured servers with auto-discovered or manually defined models.
+						</p>
+					</div>
+					${Select({
+						placeholder: i18n("Add Provider"),
+						options: [
+							{ value: "ollama", label: "Ollama" },
+							{ value: "llama.cpp", label: "llama.cpp" },
+							{ value: "vllm", label: "vLLM" },
+							{ value: "lmstudio", label: "LM Studio" },
+							{ value: "openai-completions", label: i18n("OpenAI Completions Compatible") },
+							{ value: "openai-responses", label: i18n("OpenAI Responses Compatible") },
+							{ value: "anthropic-messages", label: i18n("Anthropic Messages Compatible") },
+						],
+						onChange: (value: string) => this.addCustomProvider(value as CustomProviderType),
+						variant: "outline",
+						size: "sm",
+					})}
+				</div>
+
+				${
+					this.customProviders.length === 0
+						? html`
+							<div class="text-sm text-muted-foreground text-center py-8">
+								No custom providers configured. Click 'Add Provider' to get started.
+							</div>
+					  `
+						: html`
+							<div class="flex flex-col gap-4">
+								${this.customProviders.map(
+									(provider) => html`
+										<custom-provider-card
+											.provider=${provider}
+											.isAutoDiscovery=${isAutoDiscovery(provider.type)}
+											.status=${this.providerStatus.get(provider.id)}
+											.onRefresh=${(p: CustomProvider) => this.refreshProvider(p)}
+											.onEdit=${(p: CustomProvider) => this.editProvider(p)}
+											.onDelete=${(p: CustomProvider) => this.deleteProvider(p)}
+										></custom-provider-card>
+									`,
+								)}
+							</div>
+					  `
+				}
+			</div>
+		`;
+	}
+
+	private async addCustomProvider(type: CustomProviderType) {
+		await CustomProviderDialog.open(undefined, type, async () => {
+			await this.loadCustomProviders();
+			this.requestUpdate();
+		});
+	}
+
+	private async editProvider(provider: CustomProvider) {
+		await CustomProviderDialog.open(provider, undefined, async () => {
+			await this.loadCustomProviders();
+			this.requestUpdate();
+		});
+	}
+
+	private async refreshProvider(provider: CustomProvider) {
+		this.providerStatus.set(provider.id, { modelCount: 0, status: "checking" });
+		this.requestUpdate();
+
+		try {
+			const models = await discoverModels(
+				provider.type as AutoDiscoveryProviderType,
+				provider.baseUrl,
+				provider.apiKey,
+			);
+
+			this.providerStatus.set(provider.id, { modelCount: models.length, status: "connected" });
+			this.requestUpdate();
+
+			console.log(`Refreshed ${models.length} models from ${provider.name}`);
+		} catch (error) {
+			this.providerStatus.set(provider.id, { modelCount: 0, status: "disconnected" });
+			this.requestUpdate();
+
+			console.error(`Failed to refresh provider ${provider.name}:`, error);
+			alert(`Failed to refresh provider: ${error instanceof Error ? error.message : String(error)}`);
+		}
+	}
+
+	private async deleteProvider(provider: CustomProvider) {
+		if (!confirm("Are you sure you want to delete this provider?")) {
+			return;
+		}
+
+		try {
+			const storage = getAppStorage();
+			await storage.customProviders.delete(provider.id);
+			await this.loadCustomProviders();
+			this.requestUpdate();
+		} catch (error) {
+			console.error("Failed to delete provider:", error);
+		}
+	}
+
+	render(): TemplateResult {
+		return html`
+			<div class="flex flex-col gap-8">
+				${this.renderKnownProviders()}
+				<div class="border-t border-border"></div>
+				${this.renderCustomProviders()}
+			</div>
+		`;
+	}
+}

package/src/dialogs/SessionListDialog.ts

@@ -0,0 +1,157 @@
+import { DialogContent, DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
+import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { getAppStorage } from "../storage/app-storage.js";
+import type { SessionMetadata } from "../storage/types.js";
+import { formatUsage } from "../utils/format.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("session-list-dialog")
+export class SessionListDialog extends DialogBase {
+	@state() private sessions: SessionMetadata[] = [];
+	@state() private loading = true;
+
+	private onSelectCallback?: (sessionId: string) => void;
+	private onDeleteCallback?: (sessionId: string) => void;
+	private deletedSessions = new Set<string>();
+	private closedViaSelection = false;
+
+	protected modalWidth = "min(600px, 90vw)";
+	protected modalHeight = "min(700px, 90vh)";
+
+	static async open(onSelect: (sessionId: string) => void, onDelete?: (sessionId: string) => void) {
+		const dialog = new SessionListDialog();
+		dialog.onSelectCallback = onSelect;
+		dialog.onDeleteCallback = onDelete;
+		dialog.open();
+		await dialog.loadSessions();
+	}
+
+	private async loadSessions() {
+		this.loading = true;
+		try {
+			const storage = getAppStorage();
+			this.sessions = await storage.sessions.getAllMetadata();
+		} catch (err) {
+			console.error("Failed to load sessions:", err);
+			this.sessions = [];
+		} finally {
+			this.loading = false;
+		}
+	}
+
+	private async handleDelete(sessionId: string, event: Event) {
+		event.stopPropagation();
+
+		if (!confirm(i18n("Delete this session?"))) {
+			return;
+		}
+
+		try {
+			const storage = getAppStorage();
+			if (!storage.sessions) return;
+
+			await storage.sessions.deleteSession(sessionId);
+			await this.loadSessions();
+
+			// Track deleted session
+			this.deletedSessions.add(sessionId);
+		} catch (err) {
+			console.error("Failed to delete session:", err);
+		}
+	}
+
+	override close() {
+		super.close();
+
+		// Only notify about deleted sessions if dialog wasn't closed via selection
+		if (!this.closedViaSelection && this.onDeleteCallback && this.deletedSessions.size > 0) {
+			for (const sessionId of this.deletedSessions) {
+				this.onDeleteCallback(sessionId);
+			}
+		}
+	}
+
+	private handleSelect(sessionId: string) {
+		this.closedViaSelection = true;
+		if (this.onSelectCallback) {
+			this.onSelectCallback(sessionId);
+		}
+		this.close();
+	}
+
+	private formatDate(isoString: string): string {
+		const date = new Date(isoString);
+		const now = new Date();
+		const diff = now.getTime() - date.getTime();
+		const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+		if (days === 0) {
+			return i18n("Today");
+		} else if (days === 1) {
+			return i18n("Yesterday");
+		} else if (days < 7) {
+			return i18n("{days} days ago").replace("{days}", days.toString());
+		} else {
+			return date.toLocaleDateString();
+		}
+	}
+
+	protected override renderContent() {
+		return html`
+			${DialogContent({
+				className: "h-full flex flex-col",
+				children: html`
+					${DialogHeader({
+						title: i18n("Sessions"),
+						description: i18n("Load a previous conversation"),
+					})}
+
+					<div class="flex-1 overflow-y-auto mt-4 space-y-2">
+						${
+							this.loading
+								? html`<div class="text-center py-8 text-muted-foreground">${i18n("Loading...")}</div>`
+								: this.sessions.length === 0
+									? html`<div class="text-center py-8 text-muted-foreground">${i18n("No sessions yet")}</div>`
+									: this.sessions.map(
+											(session) => html`
+										<div
+											class="group flex items-start gap-3 p-3 rounded-lg border border-border hover:bg-secondary/50 cursor-pointer transition-colors"
+											@click=${() => this.handleSelect(session.id)}
+										>
+											<div class="flex-1 min-w-0">
+												<div class="font-medium text-sm text-foreground truncate">${session.title}</div>
+												<div class="text-xs text-muted-foreground mt-1">${this.formatDate(session.lastModified)}</div>
+												<div class="text-xs text-muted-foreground mt-1">
+													${session.messageCount} ${i18n("messages")} · ${formatUsage(session.usage)}
+												</div>
+											</div>
+											<button
+												class="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-destructive/10 text-destructive transition-opacity"
+												@click=${(e: Event) => this.handleDelete(session.id, e)}
+												title=${i18n("Delete")}
+											>
+												<svg
+													width="16"
+													height="16"
+													viewBox="0 0 24 24"
+													fill="none"
+													stroke="currentColor"
+													stroke-width="2"
+												>
+													<path d="M3 6h18"></path>
+													<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+													<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+												</svg>
+											</button>
+										</div>
+									`,
+										)
+						}
+					</div>
+				`,
+			})}
+		`;
+	}
+}