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

package/src/components/AgentInterface.ts

@@ -0,0 +1,390 @@
+import { streamSimple, type ToolResultMessage, type Usage } from "@oh-my-pi/pi-ai";
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ModelSelector } from "../dialogs/ModelSelector.js";
+import type { MessageEditor } from "./MessageEditor.js";
+import "./MessageEditor.js";
+import "./MessageList.js";
+import "./Messages.js"; // Import for side effects to register the custom elements
+import { getAppStorage } from "../storage/app-storage.js";
+import "./StreamingMessageContainer.js";
+import type { Agent, AgentEvent } from "@oh-my-pi/pi-agent-core";
+import type { Attachment } from "../utils/attachment-utils.js";
+import { formatUsage } from "../utils/format.js";
+import { i18n } from "../utils/i18n.js";
+import { createStreamFn } from "../utils/proxy-utils.js";
+import type { UserMessageWithAttachments } from "./Messages.js";
+import type { StreamingMessageContainer } from "./StreamingMessageContainer.js";
+
+@customElement("agent-interface")
+export class AgentInterface extends LitElement {
+	// Optional external session: when provided, this component becomes a view over the session
+	@property({ attribute: false }) session?: Agent;
+	@property({ type: Boolean }) enableAttachments = true;
+	@property({ type: Boolean }) enableModelSelector = true;
+	@property({ type: Boolean }) enableThinkingSelector = true;
+	@property({ type: Boolean }) showThemeToggle = false;
+	// Optional custom API key prompt handler - if not provided, uses default dialog
+	@property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise<boolean>;
+	// Optional callback called before sending a message
+	@property({ attribute: false }) onBeforeSend?: () => void | Promise<void>;
+	// Optional callback called before executing a tool call - return false to prevent execution
+	@property({ attribute: false }) onBeforeToolCall?: (toolName: string, args: any) => boolean | Promise<boolean>;
+	// Optional callback called when cost display is clicked
+	@property({ attribute: false }) onCostClick?: () => void;
+
+	// References
+	@query("message-editor") private _messageEditor!: MessageEditor;
+	@query("streaming-message-container") private _streamingContainer!: StreamingMessageContainer;
+
+	private _autoScroll = true;
+	private _lastScrollTop = 0;
+	private _lastClientHeight = 0;
+	private _scrollContainer?: HTMLElement;
+	private _resizeObserver?: ResizeObserver;
+	private _unsubscribeSession?: () => void;
+
+	public setInput(text: string, attachments?: Attachment[]) {
+		const update = () => {
+			if (!this._messageEditor) requestAnimationFrame(update);
+			else {
+				this._messageEditor.value = text;
+				this._messageEditor.attachments = attachments || [];
+			}
+		};
+		update();
+	}
+
+	public setAutoScroll(enabled: boolean) {
+		this._autoScroll = enabled;
+	}
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override willUpdate(changedProperties: Map<string, any>) {
+		super.willUpdate(changedProperties);
+
+		// Re-subscribe when session property changes
+		if (changedProperties.has("session")) {
+			this.setupSessionSubscription();
+		}
+	}
+
+	override async connectedCallback() {
+		super.connectedCallback();
+
+		this.style.display = "flex";
+		this.style.flexDirection = "column";
+		this.style.height = "100%";
+		this.style.minHeight = "0";
+
+		// Wait for first render to get scroll container
+		await this.updateComplete;
+		this._scrollContainer = this.querySelector(".overflow-y-auto") as HTMLElement;
+
+		if (this._scrollContainer) {
+			// Set up ResizeObserver to detect content changes
+			this._resizeObserver = new ResizeObserver(() => {
+				if (this._autoScroll && this._scrollContainer) {
+					this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight;
+				}
+			});
+
+			// Observe the content container inside the scroll container
+			const contentContainer = this._scrollContainer.querySelector(".max-w-3xl");
+			if (contentContainer) {
+				this._resizeObserver.observe(contentContainer);
+			}
+
+			// Set up scroll listener with better detection
+			this._scrollContainer.addEventListener("scroll", this._handleScroll);
+		}
+
+		// Subscribe to external session if provided
+		this.setupSessionSubscription();
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+
+		// Clean up observers and listeners
+		if (this._resizeObserver) {
+			this._resizeObserver.disconnect();
+			this._resizeObserver = undefined;
+		}
+
+		if (this._scrollContainer) {
+			this._scrollContainer.removeEventListener("scroll", this._handleScroll);
+		}
+
+		if (this._unsubscribeSession) {
+			this._unsubscribeSession();
+			this._unsubscribeSession = undefined;
+		}
+	}
+
+	private setupSessionSubscription() {
+		if (this._unsubscribeSession) {
+			this._unsubscribeSession();
+			this._unsubscribeSession = undefined;
+		}
+		if (!this.session) return;
+
+		// Set default streamFn with proxy support if not already set
+		if (this.session.streamFn === streamSimple) {
+			this.session.streamFn = createStreamFn(async () => {
+				const enabled = await getAppStorage().settings.get<boolean>("proxy.enabled");
+				return enabled ? (await getAppStorage().settings.get<string>("proxy.url")) || undefined : undefined;
+			});
+		}
+
+		// Set default getApiKey if not already set
+		if (!this.session.getApiKey) {
+			this.session.getApiKey = async (provider: string) => {
+				const key = await getAppStorage().providerKeys.get(provider);
+				return key ?? undefined;
+			};
+		}
+
+		this._unsubscribeSession = this.session.subscribe(async (ev: AgentEvent) => {
+			switch (ev.type) {
+				case "message_start":
+				case "message_end":
+				case "turn_start":
+				case "turn_end":
+				case "agent_start":
+					this.requestUpdate();
+					break;
+				case "agent_end":
+					// Clear streaming container when agent finishes
+					if (this._streamingContainer) {
+						this._streamingContainer.isStreaming = false;
+						this._streamingContainer.setMessage(null, true);
+					}
+					this.requestUpdate();
+					break;
+				case "message_update":
+					if (this._streamingContainer) {
+						const isStreaming = this.session?.state.isStreaming || false;
+						this._streamingContainer.isStreaming = isStreaming;
+						this._streamingContainer.setMessage(ev.message, !isStreaming);
+					}
+					this.requestUpdate();
+					break;
+			}
+		});
+	}
+
+	private _handleScroll = (_ev: any) => {
+		if (!this._scrollContainer) return;
+
+		const currentScrollTop = this._scrollContainer.scrollTop;
+		const scrollHeight = this._scrollContainer.scrollHeight;
+		const clientHeight = this._scrollContainer.clientHeight;
+		const distanceFromBottom = scrollHeight - currentScrollTop - clientHeight;
+
+		// Ignore relayout due to message editor getting pushed up by stats
+		if (clientHeight < this._lastClientHeight) {
+			this._lastClientHeight = clientHeight;
+			return;
+		}
+
+		// Only disable auto-scroll if user scrolled UP or is far from bottom
+		if (currentScrollTop !== 0 && currentScrollTop < this._lastScrollTop && distanceFromBottom > 50) {
+			this._autoScroll = false;
+		} else if (distanceFromBottom < 10) {
+			// Re-enable if very close to bottom
+			this._autoScroll = true;
+		}
+
+		this._lastScrollTop = currentScrollTop;
+		this._lastClientHeight = clientHeight;
+	};
+
+	public async sendMessage(input: string, attachments?: Attachment[]) {
+		if ((!input.trim() && attachments?.length === 0) || this.session?.state.isStreaming) return;
+		const session = this.session;
+		if (!session) throw new Error("No session set on AgentInterface");
+		if (!session.state.model) throw new Error("No model set on AgentInterface");
+
+		// Check if API key exists for the provider (only needed in direct mode)
+		const provider = session.state.model.provider;
+		const apiKey = await getAppStorage().providerKeys.get(provider);
+
+		// If no API key, prompt for it
+		if (!apiKey) {
+			if (!this.onApiKeyRequired) {
+				console.error("No API key configured and no onApiKeyRequired handler set");
+				return;
+			}
+
+			const success = await this.onApiKeyRequired(provider);
+
+			// If still no API key, abort the send
+			if (!success) {
+				return;
+			}
+		}
+
+		// Call onBeforeSend hook before sending
+		if (this.onBeforeSend) {
+			await this.onBeforeSend();
+		}
+
+		// Only clear editor after we know we can send
+		this._messageEditor.value = "";
+		this._messageEditor.attachments = [];
+		this._autoScroll = true; // Enable auto-scroll when sending a message
+
+		// Compose message with attachments if any
+		if (attachments && attachments.length > 0) {
+			const message: UserMessageWithAttachments = {
+				role: "user-with-attachments",
+				content: input,
+				attachments,
+				timestamp: Date.now(),
+			};
+			await this.session?.prompt(message);
+		} else {
+			await this.session?.prompt(input);
+		}
+	}
+
+	private renderMessages() {
+		if (!this.session)
+			return html`<div class="p-4 text-center text-muted-foreground">${i18n("No session available")}</div>`;
+		const state = this.session.state;
+		// Build a map of tool results to allow inline rendering in assistant messages
+		const toolResultsById = new Map<string, ToolResultMessage<any>>();
+		for (const message of state.messages) {
+			if (message.role === "toolResult") {
+				toolResultsById.set(message.toolCallId, message);
+			}
+		}
+		return html`
+			<div class="flex flex-col gap-3">
+				<!-- Stable messages list - won't re-render during streaming -->
+				<message-list
+					.messages=${this.session.state.messages}
+					.tools=${state.tools}
+					.pendingToolCalls=${this.session ? this.session.state.pendingToolCalls : new Set<string>()}
+					.isStreaming=${state.isStreaming}
+					.onCostClick=${this.onCostClick}
+				></message-list>
+
+				<!-- Streaming message container - manages its own updates -->
+				<streaming-message-container
+					class="${state.isStreaming ? "" : "hidden"}"
+					.tools=${state.tools}
+					.isStreaming=${state.isStreaming}
+					.pendingToolCalls=${state.pendingToolCalls}
+					.toolResultsById=${toolResultsById}
+					.onCostClick=${this.onCostClick}
+				></streaming-message-container>
+			</div>
+		`;
+	}
+
+	private renderStats() {
+		if (!this.session) return html`<div class="text-xs h-5"></div>`;
+
+		const state = this.session.state;
+		const totals = state.messages
+			.filter((m) => m.role === "assistant")
+			.reduce(
+				(acc, msg: any) => {
+					const usage = msg.usage;
+					if (usage) {
+						acc.input += usage.input;
+						acc.output += usage.output;
+						acc.cacheRead += usage.cacheRead;
+						acc.cacheWrite += usage.cacheWrite;
+						acc.cost.total += usage.cost.total;
+					}
+					return acc;
+				},
+				{
+					input: 0,
+					output: 0,
+					cacheRead: 0,
+					cacheWrite: 0,
+					totalTokens: 0,
+					cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
+				} satisfies Usage,
+			);
+
+		const hasTotals = totals.input || totals.output || totals.cacheRead || totals.cacheWrite;
+		const totalsText = hasTotals ? formatUsage(totals) : "";
+
+		return html`
+			<div class="text-xs text-muted-foreground flex justify-between items-center h-5">
+				<div class="flex items-center gap-1">
+					${this.showThemeToggle ? html`<theme-toggle></theme-toggle>` : html``}
+				</div>
+				<div class="flex ml-auto items-center gap-3">
+					${
+						totalsText
+							? this.onCostClick
+								? html`<span class="cursor-pointer hover:text-foreground transition-colors" @click=${this.onCostClick}
+									>${totalsText}</span
+							  >`
+								: html`<span>${totalsText}</span>`
+							: ""
+					}
+				</div>
+			</div>
+		`;
+	}
+
+	override render() {
+		if (!this.session)
+			return html`<div class="p-4 text-center text-muted-foreground">${i18n("No session set")}</div>`;
+
+		const session = this.session;
+		const state = this.session.state;
+		return html`
+			<div class="flex flex-col h-full bg-background text-foreground">
+				<!-- Messages Area -->
+				<div class="flex-1 overflow-y-auto">
+					<div class="max-w-3xl mx-auto p-4 pb-0">${this.renderMessages()}</div>
+				</div>
+
+				<!-- Input Area -->
+				<div class="shrink-0">
+					<div class="max-w-3xl mx-auto px-2">
+						<message-editor
+							.isStreaming=${state.isStreaming}
+							.currentModel=${state.model}
+							.thinkingLevel=${state.thinkingLevel}
+							.showAttachmentButton=${this.enableAttachments}
+							.showModelSelector=${this.enableModelSelector}
+							.showThinkingSelector=${this.enableThinkingSelector}
+							.onSend=${(input: string, attachments: Attachment[]) => {
+								this.sendMessage(input, attachments);
+							}}
+							.onAbort=${() => session.abort()}
+							.onModelSelect=${() => {
+								ModelSelector.open(state.model, (model) => session.setModel(model));
+							}}
+							.onThinkingChange=${
+								this.enableThinkingSelector
+									? (level: "off" | "minimal" | "low" | "medium" | "high") => {
+											session.setThinkingLevel(level);
+										}
+									: undefined
+							}
+						></message-editor>
+						${this.renderStats()}
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}
+
+// Register custom element with guard
+if (!customElements.get("agent-interface")) {
+	customElements.define("agent-interface", AgentInterface);
+}

package/src/components/AttachmentTile.ts

@@ -0,0 +1,107 @@
+import { icon } from "@mariozechner/mini-lit/dist/icons.js";
+import { LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit/html.js";
+import { FileSpreadsheet, FileText, X } from "lucide";
+import { AttachmentOverlay } from "../dialogs/AttachmentOverlay.js";
+import type { Attachment } from "../utils/attachment-utils.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("attachment-tile")
+export class AttachmentTile extends LitElement {
+	@property({ type: Object }) attachment!: Attachment;
+	@property({ type: Boolean }) showDelete = false;
+	@property() onDelete?: () => void;
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+		this.classList.add("max-h-16");
+	}
+
+	private handleClick = () => {
+		AttachmentOverlay.open(this.attachment);
+	};
+
+	override render() {
+		const hasPreview = !!this.attachment.preview;
+		const isImage = this.attachment.type === "image";
+		const isPdf = this.attachment.mimeType === "application/pdf";
+		const isExcel =
+			this.attachment.mimeType?.includes("spreadsheetml") ||
+			this.attachment.fileName.toLowerCase().endsWith(".xlsx") ||
+			this.attachment.fileName.toLowerCase().endsWith(".xls");
+
+		// Choose the appropriate icon
+		const getDocumentIcon = () => {
+			if (isExcel) return icon(FileSpreadsheet, "md");
+			return icon(FileText, "md");
+		};
+
+		return html`
+			<div class="relative group inline-block">
+				${
+					hasPreview
+						? html`
+							<div class="relative">
+								<img
+									src="data:${isImage ? this.attachment.mimeType : "image/png"};base64,${this.attachment.preview}"
+									class="w-16 h-16 object-cover rounded-lg border border-input cursor-pointer hover:opacity-80 transition-opacity"
+									alt="${this.attachment.fileName}"
+									title="${this.attachment.fileName}"
+									@click=${this.handleClick}
+								/>
+								${
+									isPdf
+										? html`
+											<!-- PDF badge overlay -->
+											<div class="absolute bottom-0 left-0 right-0 bg-background/90 px-1 py-0.5 rounded-b-lg">
+												<div class="text-[10px] text-muted-foreground text-center font-medium">${i18n("PDF")}</div>
+											</div>
+									  `
+										: ""
+								}
+							</div>
+					  `
+						: html`
+							<!-- Fallback: document icon + filename -->
+							<div
+								class="w-16 h-16 rounded-lg border border-input cursor-pointer hover:opacity-80 transition-opacity bg-muted text-muted-foreground flex flex-col items-center justify-center p-2"
+								@click=${this.handleClick}
+								title="${this.attachment.fileName}"
+							>
+								${getDocumentIcon()}
+								<div class="text-[10px] text-center truncate w-full">
+									${
+										this.attachment.fileName.length > 10
+											? `${this.attachment.fileName.substring(0, 8)}...`
+											: this.attachment.fileName
+									}
+								</div>
+							</div>
+					  `
+				}
+				${
+					this.showDelete
+						? html`
+							<button
+								@click=${(e: Event) => {
+									e.stopPropagation();
+									this.onDelete?.();
+								}}
+								class="absolute -top-1 -right-1 w-5 h-5 bg-background hover:bg-muted text-muted-foreground hover:text-foreground rounded-full flex items-center justify-center opacity-100 hover:opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100 transition-opacity border border-input shadow-sm"
+								title="${i18n("Remove")}"
+							>
+								${icon(X, "xs")}
+							</button>
+					  `
+						: ""
+				}
+			</div>
+		`;
+	}
+}

package/src/components/ConsoleBlock.ts

@@ -0,0 +1,74 @@
+import { icon } from "@mariozechner/mini-lit";
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { html } from "lit/html.js";
+import { Check, Copy } from "lucide";
+import { i18n } from "../utils/i18n.js";
+
+export class ConsoleBlock extends LitElement {
+	@property() content: string = "";
+	@property() variant: "default" | "error" = "default";
+	@state() private copied = false;
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+	}
+
+	private async copy() {
+		try {
+			await navigator.clipboard.writeText(this.content || "");
+			this.copied = true;
+			setTimeout(() => {
+				this.copied = false;
+			}, 1500);
+		} catch (e) {
+			console.error("Copy failed", e);
+		}
+	}
+
+	override updated() {
+		// Auto-scroll to bottom on content changes
+		const container = this.querySelector(".console-scroll") as HTMLElement | null;
+		if (container) {
+			container.scrollTop = container.scrollHeight;
+		}
+	}
+
+	override render() {
+		const isError = this.variant === "error";
+		const textClass = isError ? "text-destructive" : "text-foreground";
+
+		return html`
+			<div class="border border-border rounded-lg overflow-hidden">
+				<div class="flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border">
+					<span class="text-xs text-muted-foreground font-mono">${i18n("console")}</span>
+					<button
+						@click=${() => this.copy()}
+						class="flex items-center gap-1 px-2 py-0.5 text-xs rounded hover:bg-accent text-muted-foreground hover:text-accent-foreground transition-colors"
+						title="${i18n("Copy output")}"
+					>
+						${this.copied ? icon(Check, "sm") : icon(Copy, "sm")}
+						${this.copied ? html`<span>${i18n("Copied!")}</span>` : ""}
+					</button>
+				</div>
+				<div class="console-scroll overflow-auto max-h-64">
+					<pre
+						class="!bg-background !border-0 !rounded-none m-0 p-3 text-xs ${textClass} font-mono whitespace-pre-wrap"
+					>
+${this.content || ""}</pre
+					>
+				</div>
+			</div>
+		`;
+	}
+}
+
+// Register custom element
+if (!customElements.get("console-block")) {
+	customElements.define("console-block", ConsoleBlock);
+}

package/src/components/CustomProviderCard.ts

@@ -0,0 +1,96 @@
+import { i18n } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { html, LitElement, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import type { CustomProvider } from "../storage/stores/custom-providers-store.js";
+
+@customElement("custom-provider-card")
+export class CustomProviderCard extends LitElement {
+	@property({ type: Object }) provider!: CustomProvider;
+	@property({ type: Boolean }) isAutoDiscovery = false;
+	@property({ type: Object }) status?: { modelCount: number; status: "connected" | "disconnected" | "checking" };
+	@property() onRefresh?: (provider: CustomProvider) => void;
+	@property() onEdit?: (provider: CustomProvider) => void;
+	@property() onDelete?: (provider: CustomProvider) => void;
+
+	protected createRenderRoot() {
+		return this;
+	}
+
+	private renderStatus(): TemplateResult {
+		if (!this.isAutoDiscovery) {
+			return html`
+				<div class="text-xs text-muted-foreground mt-1">${i18n("Models")}: ${this.provider.models?.length || 0}</div>
+			`;
+		}
+
+		if (!this.status) return html``;
+
+		const statusIcon =
+			this.status.status === "connected"
+				? html`<span class="text-green-500">●</span>`
+				: this.status.status === "checking"
+					? html`<span class="text-yellow-500">●</span>`
+					: html`<span class="text-red-500">●</span>`;
+
+		const statusText =
+			this.status.status === "connected"
+				? `${this.status.modelCount} ${i18n("models")}`
+				: this.status.status === "checking"
+					? i18n("Checking...")
+					: i18n("Disconnected");
+
+		return html`
+			<div class="text-xs text-muted-foreground mt-1 flex items-center gap-1">${statusIcon} ${statusText}</div>
+		`;
+	}
+
+	render(): TemplateResult {
+		return html`
+			<div class="border border-border rounded-lg p-4 space-y-2">
+				<div class="flex items-center justify-between">
+					<div class="flex-1">
+						<div class="font-medium text-sm text-foreground">${this.provider.name}</div>
+						<div class="text-xs text-muted-foreground mt-1">
+							<span class="capitalize">${this.provider.type}</span>
+							${this.provider.baseUrl ? html` • ${this.provider.baseUrl}` : ""}
+						</div>
+						${this.renderStatus()}
+					</div>
+					<div class="flex gap-2">
+						${
+							this.isAutoDiscovery && this.onRefresh
+								? Button({
+										onClick: () => this.onRefresh?.(this.provider),
+										variant: "ghost",
+										size: "sm",
+										children: i18n("Refresh"),
+									})
+								: ""
+						}
+						${
+							this.onEdit
+								? Button({
+										onClick: () => this.onEdit?.(this.provider),
+										variant: "ghost",
+										size: "sm",
+										children: i18n("Edit"),
+									})
+								: ""
+						}
+						${
+							this.onDelete
+								? Button({
+										onClick: () => this.onDelete?.(this.provider),
+										variant: "ghost",
+										size: "sm",
+										children: i18n("Delete"),
+									})
+								: ""
+						}
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}