pi-usereq 0.49.0 → 0.50.0

package/pi.dev-src/pi-mono/web-ui/src/tools/artifacts/ArtifactElement.ts

@@ -1,14 +0,0 @@
-import { LitElement, type TemplateResult } from "lit";
-
-export abstract class ArtifactElement extends LitElement {
-	public filename = "";
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this; // light DOM for shared styles
-	}
-
-	public abstract get content(): string;
-	public abstract set content(value: string);
-
-	abstract getHeaderButtons(): TemplateResult | HTMLElement;
-}

package/pi.dev-src/pi-mono/web-ui/src/tools/artifacts/ArtifactPill.ts

@@ -1,26 +0,0 @@
-import { icon } from "@mariozechner/mini-lit";
-import { html, type TemplateResult } from "lit";
-import { FileCode2 } from "lucide";
-import type { ArtifactsPanel } from "./artifacts.js";
-
-export function ArtifactPill(filename: string, artifactsPanel?: ArtifactsPanel): TemplateResult {
-	const handleClick = (e: Event) => {
-		if (!artifactsPanel) return;
-		e.preventDefault();
-		e.stopPropagation();
-		// openArtifact will show the artifact and call onOpen() to open the panel if needed
-		artifactsPanel.openArtifact(filename);
-	};
-
-	return html`
-		<span
-			class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-muted/50 border border-border rounded ${
-				artifactsPanel ? "cursor-pointer hover:bg-muted transition-colors" : ""
-			}"
-			@click=${artifactsPanel ? handleClick : null}
-		>
-			${icon(FileCode2, "sm")}
-			<span class="text-foreground">${filename}</span>
-		</span>
-	`;
-}

package/pi.dev-src/pi-mono/web-ui/src/tools/artifacts/Console.ts

@@ -1,93 +0,0 @@
-import { icon } from "@mariozechner/mini-lit";
-import "@mariozechner/mini-lit/dist/CopyButton.js";
-import { html, LitElement, type TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, type Ref, ref } from "lit/directives/ref.js";
-import { repeat } from "lit/directives/repeat.js";
-import { ChevronDown, ChevronRight, ChevronsDown, Lock } from "lucide";
-import { i18n } from "../../utils/i18n.js";
-
-interface LogEntry {
-	type: "log" | "error";
-	text: string;
-}
-
-@customElement("artifact-console")
-export class Console extends LitElement {
-	@property({ attribute: false }) logs: LogEntry[] = [];
-	@state() private expanded = false;
-	@state() private autoscroll = true;
-	private logsContainerRef: Ref<HTMLDivElement> = createRef();
-
-	protected createRenderRoot() {
-		return this; // light DOM
-	}
-
-	override updated() {
-		// Autoscroll to bottom when new logs arrive
-		if (this.autoscroll && this.expanded && this.logsContainerRef.value) {
-			this.logsContainerRef.value.scrollTop = this.logsContainerRef.value.scrollHeight;
-		}
-	}
-
-	private getLogsText(): string {
-		return this.logs.map((l) => `[${l.type}] ${l.text}`).join("\n");
-	}
-
-	override render(): TemplateResult {
-		const errorCount = this.logs.filter((l) => l.type === "error").length;
-		const summary =
-			errorCount > 0
-				? `${i18n("console")} (${errorCount} ${errorCount === 1 ? "error" : "errors"})`
-				: `${i18n("console")} (${this.logs.length})`;
-
-		return html`
-			<div class="border-t border-border p-2">
-				<div class="flex items-center gap-2 w-full">
-					<button
-						@click=${() => {
-							this.expanded = !this.expanded;
-						}}
-						class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors flex-1 text-left"
-					>
-						${icon(this.expanded ? ChevronDown : ChevronRight, "sm")}
-						<span>${summary}</span>
-					</button>
-					${
-						this.expanded
-							? html`
-							<button
-								@click=${() => {
-									this.autoscroll = !this.autoscroll;
-								}}
-								class="p-1 rounded transition-colors ${this.autoscroll ? "bg-accent text-accent-foreground" : "hover:bg-muted"}"
-								title=${this.autoscroll ? i18n("Autoscroll enabled") : i18n("Autoscroll disabled")}
-							>
-								${icon(this.autoscroll ? ChevronsDown : Lock, "sm")}
-							</button>
-							<copy-button .text=${this.getLogsText()} title=${i18n("Copy logs")} .showText=${false} class="!bg-transparent hover:!bg-accent"></copy-button>
-						`
-							: ""
-					}
-				</div>
-				${
-					this.expanded
-						? html`
-						<div class="max-h-48 overflow-y-auto space-y-1 mt-2" ${ref(this.logsContainerRef)}>
-							${repeat(
-								this.logs,
-								(_log, index) => index,
-								(log) => html`
-									<div class="text-xs font-mono ${log.type === "error" ? "text-destructive" : "text-muted-foreground"}">
-										[${log.type}] ${log.text}
-									</div>
-								`,
-							)}
-						</div>
-					`
-						: ""
-				}
-			</div>
-		`;
-	}
-}

package/pi.dev-src/pi-mono/web-ui/src/tools/artifacts/DocxArtifact.ts

@@ -1,213 +0,0 @@
-import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
-import { renderAsync } from "docx-preview";
-import { html, type TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { i18n } from "../../utils/i18n.js";
-import { ArtifactElement } from "./ArtifactElement.js";
-
-@customElement("docx-artifact")
-export class DocxArtifact extends ArtifactElement {
-	@property({ type: String }) private _content = "";
-	@state() private error: string | null = null;
-
-	get content(): string {
-		return this._content;
-	}
-
-	set content(value: string) {
-		this._content = value;
-		this.error = null;
-		this.requestUpdate();
-	}
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this;
-	}
-
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.style.display = "block";
-		this.style.height = "100%";
-	}
-
-	private base64ToArrayBuffer(base64: string): ArrayBuffer {
-		// Remove data URL prefix if present
-		let base64Data = base64;
-		if (base64.startsWith("data:")) {
-			const base64Match = base64.match(/base64,(.+)/);
-			if (base64Match) {
-				base64Data = base64Match[1];
-			}
-		}
-
-		const binaryString = atob(base64Data);
-		const bytes = new Uint8Array(binaryString.length);
-		for (let i = 0; i < binaryString.length; i++) {
-			bytes[i] = binaryString.charCodeAt(i);
-		}
-		return bytes.buffer;
-	}
-
-	private decodeBase64(): Uint8Array {
-		let base64Data = this._content;
-		if (this._content.startsWith("data:")) {
-			const base64Match = this._content.match(/base64,(.+)/);
-			if (base64Match) {
-				base64Data = base64Match[1];
-			}
-		}
-
-		const binaryString = atob(base64Data);
-		const bytes = new Uint8Array(binaryString.length);
-		for (let i = 0; i < binaryString.length; i++) {
-			bytes[i] = binaryString.charCodeAt(i);
-		}
-		return bytes;
-	}
-
-	public getHeaderButtons() {
-		return html`
-			<div class="flex items-center gap-1">
-				${DownloadButton({
-					content: this.decodeBase64(),
-					filename: this.filename,
-					mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-					title: i18n("Download"),
-				})}
-			</div>
-		`;
-	}
-
-	override async updated(changedProperties: Map<string, any>) {
-		super.updated(changedProperties);
-
-		if (changedProperties.has("_content") && this._content && !this.error) {
-			await this.renderDocx();
-		}
-	}
-
-	private async renderDocx() {
-		const container = this.querySelector("#docx-container");
-		if (!container || !this._content) return;
-
-		try {
-			const arrayBuffer = this.base64ToArrayBuffer(this._content);
-
-			// Clear container first
-			container.innerHTML = "";
-
-			// Create a wrapper div for the document
-			const wrapper = document.createElement("div");
-			wrapper.className = "docx-wrapper-custom";
-			container.appendChild(wrapper);
-
-			// Render the DOCX file into the wrapper
-			await renderAsync(arrayBuffer, wrapper as HTMLElement, undefined, {
-				className: "docx",
-				inWrapper: true,
-				ignoreWidth: true,
-				ignoreHeight: false,
-				ignoreFonts: false,
-				breakPages: true,
-				ignoreLastRenderedPageBreak: true,
-				experimental: false,
-				trimXmlDeclaration: true,
-				useBase64URL: false,
-				renderHeaders: true,
-				renderFooters: true,
-				renderFootnotes: true,
-				renderEndnotes: true,
-			});
-
-			// Apply custom styles to match theme and fix sizing
-			const style = document.createElement("style");
-			style.textContent = `
-				#docx-container {
-					padding: 0;
-				}
-
-				#docx-container .docx-wrapper-custom {
-					max-width: 100%;
-					overflow-x: auto;
-				}
-
-				#docx-container .docx-wrapper {
-					max-width: 100% !important;
-					margin: 0 !important;
-					background: transparent !important;
-					padding: 0em !important;
-				}
-
-				#docx-container .docx-wrapper > section.docx {
-					box-shadow: none !important;
-					border: none !important;
-					border-radius: 0 !important;
-					margin: 0 !important;
-					padding: 2em !important;
-					background: white !important;
-					color: black !important;
-					max-width: 100% !important;
-					width: 100% !important;
-					min-width: 0 !important;
-					overflow-x: auto !important;
-				}
-
-				/* Fix tables and wide content */
-				#docx-container table {
-					max-width: 100% !important;
-					width: auto !important;
-					overflow-x: auto !important;
-					display: block !important;
-				}
-
-				#docx-container img {
-					max-width: 100% !important;
-					height: auto !important;
-				}
-
-				/* Fix paragraphs and text */
-				#docx-container p,
-				#docx-container span,
-				#docx-container div {
-					max-width: 100% !important;
-					word-wrap: break-word !important;
-					overflow-wrap: break-word !important;
-				}
-
-				/* Hide page breaks in web view */
-				#docx-container .docx-page-break {
-					display: none !important;
-				}
-			`;
-			container.appendChild(style);
-		} catch (error: any) {
-			console.error("Error rendering DOCX:", error);
-			this.error = error?.message || i18n("Failed to load document");
-		}
-	}
-
-	override render(): TemplateResult {
-		if (this.error) {
-			return html`
-				<div class="h-full flex items-center justify-center bg-background p-4">
-					<div class="bg-destructive/10 border border-destructive text-destructive p-4 rounded-lg max-w-2xl">
-						<div class="font-medium mb-1">${i18n("Error loading document")}</div>
-						<div class="text-sm opacity-90">${this.error}</div>
-					</div>
-				</div>
-			`;
-		}
-
-		return html`
-			<div class="h-full flex flex-col bg-background overflow-auto">
-				<div id="docx-container" class="flex-1 overflow-auto"></div>
-			</div>
-		`;
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		"docx-artifact": DocxArtifact;
-	}
-}

package/pi.dev-src/pi-mono/web-ui/src/tools/artifacts/ExcelArtifact.ts

@@ -1,231 +0,0 @@
-import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
-import { html, type TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import * as XLSX from "xlsx";
-import { i18n } from "../../utils/i18n.js";
-import { ArtifactElement } from "./ArtifactElement.js";
-
-@customElement("excel-artifact")
-export class ExcelArtifact extends ArtifactElement {
-	@property({ type: String }) private _content = "";
-	@state() private error: string | null = null;
-
-	get content(): string {
-		return this._content;
-	}
-
-	set content(value: string) {
-		this._content = value;
-		this.error = null;
-		this.requestUpdate();
-	}
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this;
-	}
-
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.style.display = "block";
-		this.style.height = "100%";
-	}
-
-	private base64ToArrayBuffer(base64: string): ArrayBuffer {
-		// Remove data URL prefix if present
-		let base64Data = base64;
-		if (base64.startsWith("data:")) {
-			const base64Match = base64.match(/base64,(.+)/);
-			if (base64Match) {
-				base64Data = base64Match[1];
-			}
-		}
-
-		const binaryString = atob(base64Data);
-		const bytes = new Uint8Array(binaryString.length);
-		for (let i = 0; i < binaryString.length; i++) {
-			bytes[i] = binaryString.charCodeAt(i);
-		}
-		return bytes.buffer;
-	}
-
-	private decodeBase64(): Uint8Array {
-		let base64Data = this._content;
-		if (this._content.startsWith("data:")) {
-			const base64Match = this._content.match(/base64,(.+)/);
-			if (base64Match) {
-				base64Data = base64Match[1];
-			}
-		}
-
-		const binaryString = atob(base64Data);
-		const bytes = new Uint8Array(binaryString.length);
-		for (let i = 0; i < binaryString.length; i++) {
-			bytes[i] = binaryString.charCodeAt(i);
-		}
-		return bytes;
-	}
-
-	private getMimeType(): string {
-		const ext = this.filename.split(".").pop()?.toLowerCase();
-		if (ext === "xls") return "application/vnd.ms-excel";
-		return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-	}
-
-	public getHeaderButtons() {
-		return html`
-			<div class="flex items-center gap-1">
-				${DownloadButton({
-					content: this.decodeBase64(),
-					filename: this.filename,
-					mimeType: this.getMimeType(),
-					title: i18n("Download"),
-				})}
-			</div>
-		`;
-	}
-
-	override async updated(changedProperties: Map<string, any>) {
-		super.updated(changedProperties);
-
-		if (changedProperties.has("_content") && this._content && !this.error) {
-			await this.renderExcel();
-		}
-	}
-
-	private async renderExcel() {
-		const container = this.querySelector("#excel-container");
-		if (!container || !this._content) return;
-
-		try {
-			const arrayBuffer = this.base64ToArrayBuffer(this._content);
-			const workbook = XLSX.read(arrayBuffer, { type: "array" });
-
-			container.innerHTML = "";
-			const wrapper = document.createElement("div");
-			wrapper.className = "overflow-auto h-full flex flex-col";
-			container.appendChild(wrapper);
-
-			// Create tabs for multiple sheets
-			if (workbook.SheetNames.length > 1) {
-				const tabContainer = document.createElement("div");
-				tabContainer.className = "flex gap-2 mb-4 border-b border-border sticky top-0 bg-background z-10";
-
-				const sheetContents: HTMLElement[] = [];
-
-				workbook.SheetNames.forEach((sheetName, index) => {
-					// Create tab button
-					const tab = document.createElement("button");
-					tab.textContent = sheetName;
-					tab.className =
-						index === 0
-							? "px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary"
-							: "px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-b-2 hover:border-border transition-colors";
-
-					// Create sheet content
-					const sheetDiv = document.createElement("div");
-					sheetDiv.style.display = index === 0 ? "flex" : "none";
-					sheetDiv.className = "flex-1 overflow-auto";
-					sheetDiv.appendChild(this.renderExcelSheet(workbook.Sheets[sheetName], sheetName));
-					sheetContents.push(sheetDiv);
-
-					// Tab click handler
-					tab.onclick = () => {
-						// Update tab styles
-						tabContainer.querySelectorAll("button").forEach((btn, btnIndex) => {
-							if (btnIndex === index) {
-								btn.className = "px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary";
-							} else {
-								btn.className =
-									"px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-b-2 hover:border-border transition-colors";
-							}
-						});
-						// Show/hide sheets
-						sheetContents.forEach((content, contentIndex) => {
-							content.style.display = contentIndex === index ? "flex" : "none";
-						});
-					};
-
-					tabContainer.appendChild(tab);
-				});
-
-				wrapper.appendChild(tabContainer);
-				sheetContents.forEach((content) => {
-					wrapper.appendChild(content);
-				});
-			} else {
-				// Single sheet
-				const sheetName = workbook.SheetNames[0];
-				wrapper.appendChild(this.renderExcelSheet(workbook.Sheets[sheetName], sheetName));
-			}
-		} catch (error: any) {
-			console.error("Error rendering Excel:", error);
-			this.error = error?.message || i18n("Failed to load spreadsheet");
-		}
-	}
-
-	private renderExcelSheet(worksheet: any, sheetName: string): HTMLElement {
-		const sheetDiv = document.createElement("div");
-
-		// Generate HTML table
-		const htmlTable = XLSX.utils.sheet_to_html(worksheet, { id: `sheet-${sheetName}` });
-		const tempDiv = document.createElement("div");
-		tempDiv.innerHTML = htmlTable;
-
-		// Find and style the table
-		const table = tempDiv.querySelector("table");
-		if (table) {
-			table.className = "w-full border-collapse text-foreground";
-
-			// Style all cells
-			table.querySelectorAll("td, th").forEach((cell) => {
-				const cellEl = cell as HTMLElement;
-				cellEl.className = "border border-border px-3 py-2 text-sm text-left";
-			});
-
-			// Style header row
-			const headerCells = table.querySelectorAll("thead th, tr:first-child td");
-			if (headerCells.length > 0) {
-				headerCells.forEach((th) => {
-					const thEl = th as HTMLElement;
-					thEl.className =
-						"border border-border px-3 py-2 text-sm font-semibold bg-muted text-foreground sticky top-0";
-				});
-			}
-
-			// Alternate row colors
-			table.querySelectorAll("tbody tr:nth-child(even)").forEach((row) => {
-				const rowEl = row as HTMLElement;
-				rowEl.className = "bg-muted/30";
-			});
-
-			sheetDiv.appendChild(table);
-		}
-
-		return sheetDiv;
-	}
-
-	override render(): TemplateResult {
-		if (this.error) {
-			return html`
-				<div class="h-full flex items-center justify-center bg-background p-4">
-					<div class="bg-destructive/10 border border-destructive text-destructive p-4 rounded-lg max-w-2xl">
-						<div class="font-medium mb-1">${i18n("Error loading spreadsheet")}</div>
-						<div class="text-sm opacity-90">${this.error}</div>
-					</div>
-				</div>
-			`;
-		}
-
-		return html`
-			<div class="h-full flex flex-col bg-background overflow-auto">
-				<div id="excel-container" class="flex-1 overflow-auto"></div>
-			</div>
-		`;
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		"excel-artifact": ExcelArtifact;
-	}
-}

package/pi.dev-src/pi-mono/web-ui/src/tools/artifacts/GenericArtifact.ts

@@ -1,117 +0,0 @@
-import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
-import { html, type TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { i18n } from "../../utils/i18n.js";
-import { ArtifactElement } from "./ArtifactElement.js";
-
-@customElement("generic-artifact")
-export class GenericArtifact extends ArtifactElement {
-	@property({ type: String }) private _content = "";
-
-	get content(): string {
-		return this._content;
-	}
-
-	set content(value: string) {
-		this._content = value;
-		this.requestUpdate();
-	}
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this;
-	}
-
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.style.display = "block";
-		this.style.height = "100%";
-	}
-
-	private decodeBase64(): Uint8Array {
-		let base64Data = this._content;
-		if (this._content.startsWith("data:")) {
-			const base64Match = this._content.match(/base64,(.+)/);
-			if (base64Match) {
-				base64Data = base64Match[1];
-			}
-		}
-
-		const binaryString = atob(base64Data);
-		const bytes = new Uint8Array(binaryString.length);
-		for (let i = 0; i < binaryString.length; i++) {
-			bytes[i] = binaryString.charCodeAt(i);
-		}
-		return bytes;
-	}
-
-	private getMimeType(): string {
-		const ext = this.filename.split(".").pop()?.toLowerCase();
-		// Add common MIME types
-		const mimeTypes: Record<string, string> = {
-			pdf: "application/pdf",
-			zip: "application/zip",
-			tar: "application/x-tar",
-			gz: "application/gzip",
-			rar: "application/vnd.rar",
-			"7z": "application/x-7z-compressed",
-			mp3: "audio/mpeg",
-			mp4: "video/mp4",
-			avi: "video/x-msvideo",
-			mov: "video/quicktime",
-			wav: "audio/wav",
-			ogg: "audio/ogg",
-			json: "application/json",
-			xml: "application/xml",
-			bin: "application/octet-stream",
-		};
-		return mimeTypes[ext || ""] || "application/octet-stream";
-	}
-
-	public getHeaderButtons() {
-		return html`
-			<div class="flex items-center gap-1">
-				${DownloadButton({
-					content: this.decodeBase64(),
-					filename: this.filename,
-					mimeType: this.getMimeType(),
-					title: i18n("Download"),
-				})}
-			</div>
-		`;
-	}
-
-	override render(): TemplateResult {
-		return html`
-			<div class="h-full flex items-center justify-center bg-background p-8">
-				<div class="text-center max-w-md">
-					<div class="text-muted-foreground text-lg mb-4">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-16 w-16 mx-auto mb-4 text-muted-foreground/50"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="1.5"
-								d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-							/>
-						</svg>
-						<div class="font-medium text-foreground mb-2">${this.filename}</div>
-						<p class="text-sm">
-							${i18n("Preview not available for this file type.")} ${i18n("Click the download button above to view it on your computer.")}
-						</p>
-					</div>
-				</div>
-			</div>
-		`;
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		"generic-artifact": GenericArtifact;
-	}
-}