pi-usereq 0.48.0 → 0.50.0

package/pi.dev-src/pi-mono/web-ui/src/dialogs/PersistentStorageDialog.ts

@@ -1,144 +0,0 @@
-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/pi.dev-src/pi-mono/web-ui/src/dialogs/ProvidersModelsTab.ts

@@ -1,212 +0,0 @@
-import { i18n } from "@mariozechner/mini-lit";
-import { Select } from "@mariozechner/mini-lit/dist/Select.js";
-import { getProviders } from "@mariozechner/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/pi.dev-src/pi-mono/web-ui/src/dialogs/SessionListDialog.ts

@@ -1,150 +0,0 @@
-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>
-				`,
-			})}
-		`;
-	}
-}