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

package/src/components/ExpandableSection.ts

@@ -0,0 +1,46 @@
+import { icon } from "@mariozechner/mini-lit";
+import { html, LitElement, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ChevronDown, ChevronRight } from "lucide";
+
+/**
+ * Reusable expandable section component for tool renderers.
+ * Captures children in connectedCallback and re-renders them in the details area.
+ */
+@customElement("expandable-section")
+export class ExpandableSection extends LitElement {
+	@property() summary!: string;
+	@property({ type: Boolean }) defaultExpanded = false;
+	@state() private expanded = false;
+	private capturedChildren: Node[] = [];
+
+	protected createRenderRoot() {
+		return this; // light DOM
+	}
+
+	override connectedCallback() {
+		super.connectedCallback();
+		// Capture children before first render
+		this.capturedChildren = Array.from(this.childNodes);
+		// Clear children (we'll re-insert them in render)
+		this.innerHTML = "";
+		this.expanded = this.defaultExpanded;
+	}
+
+	override render(): TemplateResult {
+		return html`
+			<div>
+				<button
+					@click=${() => {
+						this.expanded = !this.expanded;
+					}}
+					class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full text-left"
+				>
+					${icon(this.expanded ? ChevronDown : ChevronRight, "sm")}
+					<span>${this.summary}</span>
+				</button>
+				${this.expanded ? html`<div class="mt-2">${this.capturedChildren}</div>` : ""}
+			</div>
+		`;
+	}
+}

package/src/components/Input.ts

@@ -0,0 +1,113 @@
+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";
+
+export type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "search";
+export type InputSize = "sm" | "md" | "lg";
+
+export interface InputProps extends BaseComponentProps {
+	type?: InputType;
+	size?: InputSize;
+	value?: string;
+	placeholder?: string;
+	label?: string;
+	error?: string;
+	disabled?: boolean;
+	required?: boolean;
+	name?: string;
+	autocomplete?: string;
+	min?: number;
+	max?: number;
+	step?: number;
+	inputRef?: Ref<HTMLInputElement>;
+	onInput?: (e: Event) => void;
+	onChange?: (e: Event) => void;
+	onKeyDown?: (e: KeyboardEvent) => void;
+	onKeyUp?: (e: KeyboardEvent) => void;
+}
+
+export const Input = fc<InputProps>(
+	({
+		type = "text",
+		size = "md",
+		value = "",
+		placeholder = "",
+		label = "",
+		error = "",
+		disabled = false,
+		required = false,
+		name = "",
+		autocomplete = "",
+		min,
+		max,
+		step,
+		inputRef,
+		onInput,
+		onChange,
+		onKeyDown,
+		onKeyUp,
+		className = "",
+	}) => {
+		const sizeClasses = {
+			sm: "h-8 px-3 py-1 text-sm",
+			md: "h-9 px-3 py-1 text-sm md:text-sm",
+			lg: "h-10 px-4 py-1 text-base",
+		};
+
+		const baseClasses =
+			"flex w-full min-w-0 rounded-md border bg-transparent text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium";
+		const interactionClasses =
+			"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground";
+		const focusClasses = "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";
+		const darkClasses = "dark:bg-input/30";
+		const stateClasses = error
+			? "border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+			: "border-input";
+		const disabledClasses = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
+
+		const handleInput = (e: Event) => {
+			onInput?.(e);
+		};
+
+		const handleChange = (e: Event) => {
+			onChange?.(e);
+		};
+
+		return html`
+			<div class="flex flex-col gap-1.5 ${className}">
+				${
+					label
+						? html`
+							<label class="text-sm font-medium text-foreground">
+								${label} ${required ? html`<span class="text-destructive">${i18n("*")}</span>` : ""}
+							</label>
+					  `
+						: ""
+				}
+				<input
+					type="${type}"
+					class="${baseClasses} ${
+						sizeClasses[size]
+					} ${interactionClasses} ${focusClasses} ${darkClasses} ${stateClasses} ${disabledClasses}"
+					.value=${value}
+					placeholder="${placeholder}"
+					?disabled=${disabled}
+					?required=${required}
+					?aria-invalid=${!!error}
+					name="${name}"
+					autocomplete="${autocomplete}"
+					min="${min ?? ""}"
+					max="${max ?? ""}"
+					step="${step ?? ""}"
+					@input=${handleInput}
+					@change=${handleChange}
+					@keydown=${onKeyDown}
+					@keyup=${onKeyUp}
+					${inputRef ? ref(inputRef) : ""}
+				/>
+				${error ? html`<span class="text-sm text-destructive">${error}</span>` : ""}
+			</div>
+		`;
+	},
+);

package/src/components/MessageEditor.ts

@@ -0,0 +1,404 @@
+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 "@oh-my-pi/pi-ai";
+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 { type Attachment, loadAttachment } from "../utils/attachment-utils.js";
+import { i18n } from "../utils/i18n.js";
+import "./AttachmentTile.js";
+import type { ThinkingLevel } from "@oh-my-pi/pi-agent-core";
+
+@customElement("message-editor")
+export class MessageEditor extends LitElement {
+	private _value = "";
+	private textareaRef = createRef<HTMLTextAreaElement>();
+
+	@property()
+	get value() {
+		return this._value;
+	}
+
+	set value(val: string) {
+		const oldValue = this._value;
+		this._value = val;
+		this.requestUpdate("value", oldValue);
+	}
+
+	@property() isStreaming = false;
+	@property() currentModel?: Model<any>;
+	@property() thinkingLevel: ThinkingLevel = "off";
+	@property() showAttachmentButton = true;
+	@property() showModelSelector = true;
+	@property() showThinkingSelector = true;
+	@property() onInput?: (value: string) => void;
+	@property() onSend?: (input: string, attachments: Attachment[]) => void;
+	@property() onAbort?: () => void;
+	@property() onModelSelect?: () => void;
+	@property() onThinkingChange?: (level: "off" | "minimal" | "low" | "medium" | "high") => void;
+	@property() onFilesChange?: (files: Attachment[]) => void;
+	@property() attachments: Attachment[] = [];
+	@property() maxFiles = 10;
+	@property() maxFileSize = 20 * 1024 * 1024; // 20MB
+	@property() acceptedTypes =
+		"image/*,application/pdf,.docx,.pptx,.xlsx,.xls,.txt,.md,.json,.xml,.html,.css,.js,.ts,.jsx,.tsx,.yml,.yaml";
+
+	@state() processingFiles = false;
+	@state() isDragging = false;
+	private fileInputRef = createRef<HTMLInputElement>();
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	private handleTextareaInput = (e: Event) => {
+		const textarea = e.target as HTMLTextAreaElement;
+		this.value = textarea.value;
+		this.onInput?.(this.value);
+	};
+
+	private handleKeyDown = (e: KeyboardEvent) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			if (!this.isStreaming && !this.processingFiles && (this.value.trim() || this.attachments.length > 0)) {
+				this.handleSend();
+			}
+		} else if (e.key === "Escape" && this.isStreaming) {
+			e.preventDefault();
+			this.onAbort?.();
+		}
+	};
+
+	private handlePaste = async (e: ClipboardEvent) => {
+		const items = e.clipboardData?.items;
+		if (!items) return;
+
+		const imageFiles: File[] = [];
+
+		// Check for image items in clipboard
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			if (item.type.startsWith("image/")) {
+				const file = item.getAsFile();
+				if (file) {
+					imageFiles.push(file);
+				}
+			}
+		}
+
+		// If we found images, process them
+		if (imageFiles.length > 0) {
+			e.preventDefault(); // Prevent default paste behavior
+
+			if (imageFiles.length + this.attachments.length > this.maxFiles) {
+				alert(`Maximum ${this.maxFiles} files allowed`);
+				return;
+			}
+
+			this.processingFiles = true;
+			const newAttachments: Attachment[] = [];
+
+			for (const file of imageFiles) {
+				try {
+					if (file.size > this.maxFileSize) {
+						alert(`Image exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+						continue;
+					}
+
+					const attachment = await loadAttachment(file);
+					newAttachments.push(attachment);
+				} catch (error) {
+					console.error("Error processing pasted image:", error);
+					alert(`Failed to process pasted image: ${String(error)}`);
+				}
+			}
+
+			this.attachments = [...this.attachments, ...newAttachments];
+			this.onFilesChange?.(this.attachments);
+			this.processingFiles = false;
+		}
+	};
+
+	private handleSend = () => {
+		this.onSend?.(this.value, this.attachments);
+	};
+
+	private handleAttachmentClick = () => {
+		this.fileInputRef.value?.click();
+	};
+
+	private async handleFilesSelected(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const files = Array.from(input.files || []);
+		if (files.length === 0) return;
+
+		if (files.length + this.attachments.length > this.maxFiles) {
+			alert(`Maximum ${this.maxFiles} files allowed`);
+			input.value = "";
+			return;
+		}
+
+		this.processingFiles = true;
+		const newAttachments: Attachment[] = [];
+
+		for (const file of files) {
+			try {
+				if (file.size > this.maxFileSize) {
+					alert(`${file.name} exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+					continue;
+				}
+
+				const attachment = await loadAttachment(file);
+				newAttachments.push(attachment);
+			} catch (error) {
+				console.error(`Error processing ${file.name}:`, error);
+				alert(`Failed to process ${file.name}: ${String(error)}`);
+			}
+		}
+
+		this.attachments = [...this.attachments, ...newAttachments];
+		this.onFilesChange?.(this.attachments);
+		this.processingFiles = false;
+		input.value = ""; // Reset input
+	}
+
+	private removeFile(fileId: string) {
+		this.attachments = this.attachments.filter((f) => f.id !== fileId);
+		this.onFilesChange?.(this.attachments);
+	}
+
+	private handleDragOver = (e: DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!this.isDragging) {
+			this.isDragging = true;
+		}
+	};
+
+	private handleDragLeave = (e: DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		// Only set isDragging to false if we're leaving the entire component
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		const x = e.clientX;
+		const y = e.clientY;
+		if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+			this.isDragging = false;
+		}
+	};
+
+	private handleDrop = async (e: DragEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		this.isDragging = false;
+
+		const files = Array.from(e.dataTransfer?.files || []);
+		if (files.length === 0) return;
+
+		if (files.length + this.attachments.length > this.maxFiles) {
+			alert(`Maximum ${this.maxFiles} files allowed`);
+			return;
+		}
+
+		this.processingFiles = true;
+		const newAttachments: Attachment[] = [];
+
+		for (const file of files) {
+			try {
+				if (file.size > this.maxFileSize) {
+					alert(`${file.name} exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+					continue;
+				}
+
+				const attachment = await loadAttachment(file);
+				newAttachments.push(attachment);
+			} catch (error) {
+				console.error(`Error processing ${file.name}:`, error);
+				alert(`Failed to process ${file.name}: ${String(error)}`);
+			}
+		}
+
+		this.attachments = [...this.attachments, ...newAttachments];
+		this.onFilesChange?.(this.attachments);
+		this.processingFiles = false;
+	};
+
+	override firstUpdated() {
+		const textarea = this.textareaRef.value;
+		if (textarea) {
+			textarea.focus();
+		}
+	}
+
+	override render() {
+		// Check if current model supports thinking/reasoning
+		const model = this.currentModel;
+		const supportsThinking = model?.reasoning === true; // Models with reasoning:true support thinking
+
+		return html`
+			<div
+				class="bg-card rounded-xl border shadow-sm relative ${
+					this.isDragging ? "border-primary border-2 bg-primary/5" : "border-border"
+				}"
+				@dragover=${this.handleDragOver}
+				@dragleave=${this.handleDragLeave}
+				@drop=${this.handleDrop}
+			>
+				<!-- Drag overlay -->
+				${
+					this.isDragging
+						? html`
+							<div
+								class="absolute inset-0 bg-primary/10 rounded-xl pointer-events-none z-10 flex items-center justify-center"
+							>
+								<div class="text-primary font-medium">${i18n("Drop files here")}</div>
+							</div>
+					  `
+						: ""
+				}
+
+				<!-- Attachments -->
+				${
+					this.attachments.length > 0
+						? html`
+							<div class="px-4 pt-3 pb-2 flex flex-wrap gap-2">
+								${this.attachments.map(
+									(attachment) => html`
+										<attachment-tile
+											.attachment=${attachment}
+											.showDelete=${true}
+											.onDelete=${() => this.removeFile(attachment.id)}
+										></attachment-tile>
+									`,
+								)}
+							</div>
+					  `
+						: ""
+				}
+
+				<textarea
+					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; field-sizing: content; min-height: 1lh; height: auto;"
+					.value=${this.value}
+					@input=${this.handleTextareaInput}
+					@keydown=${this.handleKeyDown}
+					@paste=${this.handlePaste}
+					${ref(this.textareaRef)}
+				></textarea>
+
+				<!-- Hidden file input -->
+				<input
+					type="file"
+					${ref(this.fileInputRef)}
+					@change=${this.handleFilesSelected}
+					accept=${this.acceptedTypes}
+					multiple
+					style="display: none;"
+				/>
+
+				<!-- Button Row -->
+				<div class="px-2 pb-2 flex items-center justify-between">
+					<!-- Left side - attachment and thinking selector -->
+					<div class="flex gap-2 items-center">
+						${
+							this.showAttachmentButton
+								? this.processingFiles
+									? html`
+										<div class="h-8 w-8 flex items-center justify-center">
+											${icon(Loader2, "sm", "animate-spin text-muted-foreground")}
+										</div>
+								  `
+									: html`
+										${Button({
+											variant: "ghost",
+											size: "icon",
+											className: "h-8 w-8",
+											onClick: this.handleAttachmentClick,
+											children: icon(Paperclip, "sm"),
+										})}
+								  `
+								: ""
+						}
+						${
+							supportsThinking && this.showThinkingSelector
+								? html`
+									${Select({
+										value: this.thinkingLevel,
+										placeholder: i18n("Off"),
+										options: [
+											{ value: "off", label: i18n("Off"), icon: icon(Brain, "sm") },
+											{ value: "minimal", label: i18n("Minimal"), icon: icon(Brain, "sm") },
+											{ value: "low", label: i18n("Low"), icon: icon(Brain, "sm") },
+											{ value: "medium", label: i18n("Medium"), icon: icon(Brain, "sm") },
+											{ value: "high", label: i18n("High"), icon: icon(Brain, "sm") },
+										] as SelectOption[],
+										onChange: (value: string) => {
+											this.onThinkingChange?.(value as "off" | "minimal" | "low" | "medium" | "high");
+										},
+										width: "80px",
+										size: "sm",
+										variant: "ghost",
+										fitContent: true,
+									})}
+							  `
+								: ""
+						}
+					</div>
+
+					<!-- Model selector and send on the right -->
+					<div class="flex gap-2 items-center">
+						${
+							this.showModelSelector && this.currentModel
+								? html`
+									${Button({
+										variant: "ghost",
+										size: "sm",
+										onClick: () => {
+											// Focus textarea before opening model selector so focus returns there
+											this.textareaRef.value?.focus();
+											// Wait for next frame to ensure focus takes effect before dialog captures it
+											requestAnimationFrame(() => {
+												this.onModelSelect?.();
+											});
+										},
+										children: html`
+											${icon(Sparkles, "sm")}
+											<span class="ml-1">${this.currentModel.id}</span>
+										`,
+										className: "h-8 text-xs truncate",
+									})}
+							  `
+								: ""
+						}
+						${
+							this.isStreaming
+								? html`
+									${Button({
+										variant: "ghost",
+										size: "icon",
+										onClick: this.onAbort,
+										children: icon(Square, "sm"),
+										className: "h-8 w-8",
+									})}
+							  `
+								: html`
+									${Button({
+										variant: "ghost",
+										size: "icon",
+										onClick: this.handleSend,
+										disabled: (!this.value.trim() && this.attachments.length === 0) || this.processingFiles,
+										children: html`<div style="transform: rotate(-45deg)">${icon(Send, "sm")}</div>`,
+										className: "h-8 w-8",
+									})}
+							  `
+						}
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}

package/src/components/MessageList.ts

@@ -0,0 +1,97 @@
+import type { AgentMessage, AgentTool } from "@oh-my-pi/pi-agent-core";
+import type {
+	AssistantMessage as AssistantMessageType,
+	ToolResultMessage as ToolResultMessageType,
+} from "@oh-my-pi/pi-ai";
+import { html, LitElement, type TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { renderMessage } from "./message-renderer-registry.js";
+
+export class MessageList extends LitElement {
+	@property({ type: Array }) messages: AgentMessage[] = [];
+	@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;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+	}
+
+	private buildRenderItems() {
+		// Map tool results by call id for quick lookup
+		const resultByCallId = new Map<string, ToolResultMessageType>();
+		for (const message of this.messages) {
+			if (message.role === "toolResult") {
+				resultByCallId.set(message.toolCallId, message);
+			}
+		}
+
+		const items: Array<{ key: string; template: TemplateResult }> = [];
+		let index = 0;
+		for (const msg of this.messages) {
+			// Skip artifact messages - they're for session persistence only, not UI display
+			if (msg.role === "artifact") {
+				continue;
+			}
+
+			// Try custom renderer first
+			const customTemplate = renderMessage(msg);
+			if (customTemplate) {
+				items.push({ key: `msg:${index}`, template: customTemplate });
+				index++;
+				continue;
+			}
+
+			// Fall back to built-in renderers
+			if (msg.role === "user" || msg.role === "user-with-attachments") {
+				items.push({
+					key: `msg:${index}`,
+					template: html`<user-message .message=${msg}></user-message>`,
+				});
+				index++;
+			} else if (msg.role === "assistant") {
+				const amsg = msg as AssistantMessageType;
+				items.push({
+					key: `msg:${index}`,
+					template: html`<assistant-message
+						.message=${amsg}
+						.tools=${this.tools}
+						.isStreaming=${false}
+						.pendingToolCalls=${this.pendingToolCalls}
+						.toolResultsById=${resultByCallId}
+						.hideToolCalls=${false}
+						.onCostClick=${this.onCostClick}
+					></assistant-message>`,
+				});
+				index++;
+			} else {
+				// Skip standalone toolResult messages; they are rendered via paired tool-message above
+				// Skip unknown roles
+			}
+		}
+		return items;
+	}
+
+	override render() {
+		const items = this.buildRenderItems();
+		return html`<div class="flex flex-col gap-3">
+			${repeat(
+				items,
+				(it) => it.key,
+				(it) => it.template,
+			)}
+		</div>`;
+	}
+}
+
+// Register custom element
+if (!customElements.get("message-list")) {
+	customElements.define("message-list", MessageList);
+}