pi-usereq 0.49.0 → 0.50.0

package/pi.dev-src/pi-mono/web-ui/src/components/AttachmentTile.ts

@@ -1,107 +0,0 @@
-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/pi.dev-src/pi-mono/web-ui/src/components/ConsoleBlock.ts

@@ -1,72 +0,0 @@
-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/pi.dev-src/pi-mono/web-ui/src/components/CustomProviderCard.ts

@@ -1,100 +0,0 @@
-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/pi.dev-src/pi-mono/web-ui/src/components/ExpandableSection.ts

@@ -1,46 +0,0 @@
-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/pi.dev-src/pi-mono/web-ui/src/components/Input.ts

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