@mariozechner/pi-web-ui 0.5.48 → 0.7.1

package/src/components/AgentInterface.ts

@@ -1,6 +1,5 @@
-import { html } from "@mariozechner/mini-lit";
 import type { ToolResultMessage, Usage } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+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";
@@ -29,6 +28,8 @@ export class AgentInterface extends LitElement {
 	@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;
@@ -226,6 +227,7 @@ export class AgentInterface extends LitElement {
 					.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 -->
@@ -235,6 +237,7 @@ export class AgentInterface extends LitElement {
 					.isStreaming=${state.isStreaming}
 					.pendingToolCalls=${state.pendingToolCalls}
 					.toolResultsById=${toolResultsById}
+					.onCostClick=${this.onCostClick}
 				></streaming-message-container>
 			</div>
 		`;
@@ -275,7 +278,15 @@ export class AgentInterface extends LitElement {
 				<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 ? html`<span>${totalsText}</span>` : ""}</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>
 		`;
 	}

package/src/components/AttachmentTile.ts

@@ -1,6 +1,7 @@
-import { html, icon } from "@mariozechner/mini-lit";
+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";

package/src/components/ConsoleBlock.ts

@@ -1,6 +1,7 @@
-import { html, icon } from "@mariozechner/mini-lit";
+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";
 

package/src/components/CustomProviderCard.ts

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

package/src/components/Input.ts

@@ -1,4 +1,5 @@
-import { type BaseComponentProps, fc, html } from "@mariozechner/mini-lit";
+import { type BaseComponentProps, fc } from "@mariozechner/mini-lit/dist/mini.js";
+import { html } from "lit";
 import { type Ref, ref } from "lit/directives/ref.js";
 import { i18n } from "../utils/i18n.js";
 

package/src/components/MessageEditor.ts

@@ -1,12 +1,14 @@
-import { Button, html, icon, Select, type SelectOption } from "@mariozechner/mini-lit";
+import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { Select, type SelectOption } from "@mariozechner/mini-lit/dist/Select.js";
 import type { Model } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { Brain, Loader2, Paperclip, Send, Sparkles, Square } from "lucide";
-import "./AttachmentTile.js";
 import { type Attachment, loadAttachment } from "../utils/attachment-utils.js";
 import { i18n } from "../utils/i18n.js";
+import "./AttachmentTile.js";
 
 @customElement("message-editor")
 export class MessageEditor extends LitElement {
@@ -22,13 +24,6 @@ export class MessageEditor extends LitElement {
 		const oldValue = this._value;
 		this._value = val;
 		this.requestUpdate("value", oldValue);
-		this.updateComplete.then(() => {
-			const textarea = this.textareaRef.value;
-			if (textarea) {
-				textarea.style.height = "auto";
-				textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-			}
-		});
 	}
 
 	@property() isStreaming = false;
@@ -60,8 +55,6 @@ export class MessageEditor extends LitElement {
 	private handleTextareaInput = (e: Event) => {
 		const textarea = e.target as HTMLTextAreaElement;
 		this.value = textarea.value;
-		textarea.style.height = "auto";
-		textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
 		this.onInput?.(this.value);
 	};
 
@@ -231,33 +224,13 @@ export class MessageEditor extends LitElement {
 		this.processingFiles = false;
 	};
 
-	private adjustTextareaHeight() {
-		const textarea = this.textareaRef.value;
-		if (textarea) {
-			// Reset height to auto to get accurate scrollHeight
-			textarea.style.height = "auto";
-			// Only adjust if there's content, otherwise keep minimal height
-			if (this.value.trim()) {
-				textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-			}
-		}
-	}
-
 	override firstUpdated() {
 		const textarea = this.textareaRef.value;
 		if (textarea) {
-			// Don't adjust height on first render - let it be minimal
 			textarea.focus();
 		}
 	}
 
-	override updated() {
-		// Only adjust height when component updates if there's content
-		if (this.value) {
-			this.adjustTextareaHeight();
-		}
-	}
-
 	override render() {
 		// Check if current model supports thinking/reasoning
 		const model = this.currentModel;
@@ -304,7 +277,7 @@ export class MessageEditor extends LitElement {
 					class="w-full bg-transparent p-4 text-foreground placeholder-muted-foreground outline-none resize-none overflow-y-auto"
 					placeholder=${i18n("Type a message...")}
 					rows="1"
-					style="max-height: 200px;"
+					style="max-height: 200px; field-sizing: content; min-height: 1lh; height: auto;"
 					.value=${this.value}
 					@input=${this.handleTextareaInput}
 					@keydown=${this.handleKeyDown}

package/src/components/MessageList.ts

@@ -1,10 +1,9 @@
-import { html } from "@mariozechner/mini-lit";
 import type {
 	AgentTool,
 	AssistantMessage as AssistantMessageType,
 	ToolResultMessage as ToolResultMessageType,
 } from "@mariozechner/pi-ai";
-import { LitElement, type TemplateResult } from "lit";
+import { html, LitElement, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import type { AppMessage } from "./Messages.js";
@@ -15,6 +14,7 @@ export class MessageList extends LitElement {
 	@property({ type: Array }) tools: AgentTool[] = [];
 	@property({ type: Object }) pendingToolCalls?: Set<string>;
 	@property({ type: Boolean }) isStreaming: boolean = false;
+	@property({ attribute: false }) onCostClick?: () => void;
 
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
 		return this;
@@ -64,10 +64,11 @@ export class MessageList extends LitElement {
 					template: html`<assistant-message
 						.message=${amsg}
 						.tools=${this.tools}
-						.isStreaming=${this.isStreaming}
+						.isStreaming=${false}
 						.pendingToolCalls=${this.pendingToolCalls}
 						.toolResultsById=${resultByCallId}
 						.hideToolCalls=${false}
+						.onCostClick=${this.onCostClick}
 					></assistant-message>`,
 				});
 				index++;

package/src/components/Messages.ts

@@ -1,4 +1,3 @@
-import { html } from "@mariozechner/mini-lit";
 import type {
 	AgentTool,
 	AssistantMessage as AssistantMessageType,
@@ -6,12 +5,13 @@ import type {
 	ToolResultMessage as ToolResultMessageType,
 	UserMessage as UserMessageType,
 } from "@mariozechner/pi-ai";
-import { LitElement, type TemplateResult } from "lit";
+import { html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { renderTool } from "../tools/index.js";
 import type { Attachment } from "../utils/attachment-utils.js";
 import { formatUsage } from "../utils/format.js";
 import { i18n } from "../utils/i18n.js";
+import "./ThinkingBlock.js";
 
 export type UserMessageWithAttachments = UserMessageType & { attachments?: Attachment[] };
 
@@ -62,19 +62,21 @@ export class UserMessage extends LitElement {
 				: this.message.content.find((c) => c.type === "text")?.text || "";
 
 		return html`
-			<div class="py-2 px-4 border-l-4 border-accent-foreground/60 text-primary-foreground">
-				<markdown-block .content=${content}></markdown-block>
-				${
-					this.message.attachments && this.message.attachments.length > 0
-						? html`
-							<div class="mt-3 flex flex-wrap gap-2">
-								${this.message.attachments.map(
-									(attachment) => html` <attachment-tile .attachment=${attachment}></attachment-tile> `,
-								)}
-							</div>
-						`
-						: ""
-				}
+			<div class="flex justify-start mx-4">
+				<div class="user-message-container py-2 px-4 rounded-xl">
+					<markdown-block .content=${content}></markdown-block>
+					${
+						this.message.attachments && this.message.attachments.length > 0
+							? html`
+								<div class="mt-3 flex flex-wrap gap-2">
+									${this.message.attachments.map(
+										(attachment) => html` <attachment-tile .attachment=${attachment}></attachment-tile> `,
+									)}
+								</div>
+							`
+							: ""
+					}
+				</div>
 			</div>
 		`;
 	}
@@ -88,6 +90,7 @@ export class AssistantMessage extends LitElement {
 	@property({ type: Boolean }) hideToolCalls = false;
 	@property({ type: Object }) toolResultsById?: Map<string, ToolResultMessageType>;
 	@property({ type: Boolean }) isStreaming: boolean = false;
+	@property({ attribute: false }) onCostClick?: () => void;
 
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
 		return this;
@@ -106,7 +109,9 @@ export class AssistantMessage extends LitElement {
 			if (chunk.type === "text" && chunk.text.trim() !== "") {
 				orderedParts.push(html`<markdown-block .content=${chunk.text}></markdown-block>`);
 			} else if (chunk.type === "thinking" && chunk.thinking.trim() !== "") {
-				orderedParts.push(html` <markdown-block .content=${chunk.thinking} .isThinking=${true}></markdown-block> `);
+				orderedParts.push(
+					html`<thinking-block .content=${chunk.thinking} .isStreaming=${this.isStreaming}></thinking-block>`,
+				);
 			} else if (chunk.type === "toolCall") {
 				if (!this.hideToolCalls) {
 					const tool = this.tools?.find((t) => t.name === chunk.name);
@@ -132,8 +137,10 @@ export class AssistantMessage extends LitElement {
 			<div>
 				${orderedParts.length ? html` <div class="px-4 flex flex-col gap-3">${orderedParts}</div> ` : ""}
 				${
-					this.message.usage
-						? html` <div class="px-4 mt-2 text-xs text-muted-foreground">${formatUsage(this.message.usage)}</div> `
+					this.message.usage && !this.isStreaming
+						? this.onCostClick
+							? html` <div class="px-4 mt-2 text-xs text-muted-foreground cursor-pointer hover:text-foreground transition-colors" @click=${this.onCostClick}>${formatUsage(this.message.usage)}</div> `
+							: html` <div class="px-4 mt-2 text-xs text-muted-foreground">${formatUsage(this.message.usage)}</div> `
 						: ""
 				}
 				${
@@ -183,7 +190,12 @@ export class ToolMessageDebugView extends LitElement {
 	}
 
 	override render() {
-		const output = this.pretty(this.result?.output);
+		const textOutput =
+			this.result?.content
+				?.filter((c) => c.type === "text")
+				.map((c: any) => c.text)
+				.join("\n") || "";
+		const output = this.pretty(textOutput);
 		const details = this.pretty(this.result?.details);
 
 		return html`
@@ -232,7 +244,7 @@ export class ToolMessage extends LitElement {
 			? {
 					role: "toolResult",
 					isError: true,
-					output: "",
+					content: [],
 					toolCallId: this.toolCall.id,
 					toolName: this.toolCall.name,
 					timestamp: Date.now(),

package/src/components/ProviderKeyInput.ts

@@ -1,8 +1,12 @@
-import { Badge, Button, html, Input, i18n } from "@mariozechner/mini-lit";
+import { i18n } from "@mariozechner/mini-lit";
+import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import { type Context, complete, getModel } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { getAppStorage } from "../storage/app-storage.js";
+import { applyProxyIfNeeded } from "../utils/proxy-utils.js";
+import { Input } from "./Input.js";
 
 // Test models for each provider
 const TEST_MODELS: Record<string, string> = {
@@ -23,6 +27,7 @@ export class ProviderKeyInput extends LitElement {
 	@state() private testing = false;
 	@state() private failed = false;
 	@state() private hasKey = false;
+	@state() private inputChanged = false;
 
 	protected createRenderRoot() {
 		return this;
@@ -51,16 +56,12 @@ export class ProviderKeyInput extends LitElement {
 			let model = getModel(provider as any, modelId);
 			if (!model) return false;
 
-			// Check if CORS proxy is enabled and apply it
+			// Get proxy URL from settings (if available)
 			const proxyEnabled = await getAppStorage().settings.get<boolean>("proxy.enabled");
 			const proxyUrl = await getAppStorage().settings.get<string>("proxy.url");
 
-			if (proxyEnabled && proxyUrl && model.baseUrl) {
-				model = {
-					...model,
-					baseUrl: `${proxyUrl}/?url=${encodeURIComponent(model.baseUrl)}`,
-				};
-			}
+			// Apply proxy only if this provider/key combination requires it
+			model = applyProxyIfNeeded(model, apiKey, proxyEnabled ? proxyUrl || undefined : undefined);
 
 			const context: Context = {
 				messages: [{ role: "user", content: "Reply with: ok", timestamp: Date.now() }],
@@ -92,7 +93,7 @@ export class ProviderKeyInput extends LitElement {
 			try {
 				await getAppStorage().providerKeys.set(this.provider, this.keyInput);
 				this.hasKey = true;
-				this.keyInput = "";
+				this.inputChanged = false;
 				this.requestUpdate();
 			} catch (error) {
 				console.error("Failed to save API key:", error);
@@ -111,17 +112,6 @@ export class ProviderKeyInput extends LitElement {
 		}
 	}
 
-	private async removeKey() {
-		try {
-			await getAppStorage().providerKeys.delete(this.provider);
-			this.hasKey = false;
-			this.keyInput = "";
-			this.requestUpdate();
-		} catch (error) {
-			console.error("Failed to remove API key:", error);
-		}
-	}
-
 	render() {
 		return html`
 			<div class="space-y-3">
@@ -143,27 +133,18 @@ export class ProviderKeyInput extends LitElement {
 						value: this.keyInput,
 						onInput: (e: Event) => {
 							this.keyInput = (e.target as HTMLInputElement).value;
+							this.inputChanged = true;
 							this.requestUpdate();
 						},
 						className: "flex-1",
 					})}
-					${
-						this.hasKey
-							? Button({
-									onClick: () => this.removeKey(),
-									variant: "ghost",
-									size: "sm",
-									children: i18n("Clear"),
-									className: "!text-destructive",
-								})
-							: Button({
-									onClick: () => this.saveKey(),
-									variant: "default",
-									size: "sm",
-									disabled: !this.keyInput || this.testing,
-									children: i18n("Save"),
-								})
-					}
+					${Button({
+						onClick: () => this.saveKey(),
+						variant: "default",
+						size: "sm",
+						disabled: !this.keyInput || this.testing || (this.hasKey && !this.inputChanged),
+						children: i18n("Save"),
+					})}
 				</div>
 			</div>
 		`;

package/src/components/StreamingMessageContainer.ts

@@ -1,6 +1,5 @@
-import { html } from "@mariozechner/mini-lit";
 import type { AgentTool, Message, ToolResultMessage } from "@mariozechner/pi-ai";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
 
 export class StreamingMessageContainer extends LitElement {
@@ -8,6 +7,7 @@ export class StreamingMessageContainer extends LitElement {
 	@property({ type: Boolean }) isStreaming = false;
 	@property({ type: Object }) pendingToolCalls?: Set<string>;
 	@property({ type: Object }) toolResultsById?: Map<string, ToolResultMessage>;
+	@property({ attribute: false }) onCostClick?: () => void;
 
 	@state() private _message: Message | null = null;
 	private _pendingMessage: Message | null = null;
@@ -87,6 +87,7 @@ export class StreamingMessageContainer extends LitElement {
 						.pendingToolCalls=${this.pendingToolCalls}
 						.toolResultsById=${this.toolResultsById}
 						.hideToolCalls=${false}
+						.onCostClick=${this.onCostClick}
 					></assistant-message>
 					${this.isStreaming ? html`<span class="mx-4 inline-block w-2 h-4 bg-muted-foreground animate-pulse"></span>` : ""}
 				</div>

package/src/components/ThinkingBlock.ts

@@ -0,0 +1,43 @@
+import { icon } from "@mariozechner/mini-lit";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ChevronRight } from "lucide";
+
+@customElement("thinking-block")
+export class ThinkingBlock extends LitElement {
+	@property() content!: string;
+	@property({ type: Boolean }) isStreaming = false;
+	@state() private isExpanded = false;
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+	}
+
+	private toggleExpanded() {
+		this.isExpanded = !this.isExpanded;
+	}
+
+	override render() {
+		const shimmerClasses = this.isStreaming
+			? "animate-shimmer bg-gradient-to-r from-muted-foreground via-foreground to-muted-foreground bg-[length:200%_100%] bg-clip-text text-transparent"
+			: "";
+
+		return html`
+			<div class="thinking-block">
+				<div
+					class="thinking-header cursor-pointer select-none flex items-center gap-2 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+					@click=${this.toggleExpanded}
+				>
+					<span class="transition-transform inline-block ${this.isExpanded ? "rotate-90" : ""}">${icon(ChevronRight, "sm")}</span>
+					<span class="${shimmerClasses}">Thinking...</span>
+				</div>
+				${this.isExpanded ? html`<markdown-block .content=${this.content} .isThinking=${true}></markdown-block>` : ""}
+			</div>
+		`;
+	}
+}

package/src/dialogs/ApiKeyPromptDialog.ts

@@ -1,6 +1,8 @@
-import { DialogBase, DialogContent, DialogHeader, html } from "@mariozechner/mini-lit";
 import { customElement, state } from "lit/decorators.js";
 import "../components/ProviderKeyInput.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 { getAppStorage } from "../storage/app-storage.js";
 import { i18n } from "../utils/i18n.js";
 

package/src/dialogs/AttachmentOverlay.ts

@@ -1,7 +1,8 @@
-import { Button, html, icon } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/ModeToggle.js";
+import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
 import { renderAsync } from "docx-preview";
-import { LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { state } from "lit/decorators.js";
 import { Download, X } from "lucide";
 import * as pdfjsLib from "pdfjs-dist";