pi-usereq 0.49.0 → 0.50.0

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

@@ -1,119 +0,0 @@
-import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
-import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
-import { PreviewCodeToggle } from "@mariozechner/mini-lit/dist/PreviewCodeToggle.js";
-import hljs from "highlight.js";
-import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { i18n } from "../../utils/i18n.js";
-import { ArtifactElement } from "./ArtifactElement.js";
-
-@customElement("svg-artifact")
-export class SvgArtifact extends ArtifactElement {
-	@property() override filename = "";
-
-	private _content = "";
-	@state() private previewUrl = "";
-
-	override get content(): string {
-		return this._content;
-	}
-	override set content(value: string) {
-		if (this._content === value) {
-			return;
-		}
-		this._content = value;
-		this.updatePreviewUrl();
-		this.requestUpdate();
-	}
-
-	@state() private viewMode: "preview" | "code" = "preview";
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this; // light DOM
-	}
-
-	private setViewMode(mode: "preview" | "code") {
-		this.viewMode = mode;
-	}
-
-	private revokePreviewUrl() {
-		if (this.previewUrl) {
-			URL.revokeObjectURL(this.previewUrl);
-			this.previewUrl = "";
-		}
-	}
-
-	private updatePreviewUrl() {
-		this.revokePreviewUrl();
-		if (!this._content) {
-			return;
-		}
-		this.previewUrl = URL.createObjectURL(new Blob([this._content], { type: "image/svg+xml" }));
-	}
-
-	public getHeaderButtons() {
-		const toggle = new PreviewCodeToggle();
-		toggle.mode = this.viewMode;
-		toggle.addEventListener("mode-change", (e: Event) => {
-			this.setViewMode((e as CustomEvent).detail);
-		});
-
-		const copyButton = new CopyButton();
-		copyButton.text = this._content;
-		copyButton.title = i18n("Copy SVG");
-		copyButton.showText = false;
-
-		return html`
-			<div class="flex items-center gap-2">
-				${toggle}
-				${copyButton}
-				${DownloadButton({ content: this._content, filename: this.filename, mimeType: "image/svg+xml", title: i18n("Download SVG") })}
-			</div>
-		`;
-	}
-
-	override connectedCallback() {
-		super.connectedCallback();
-		if (this._content && !this.previewUrl) {
-			this.updatePreviewUrl();
-		}
-	}
-
-	override disconnectedCallback() {
-		super.disconnectedCallback();
-		this.revokePreviewUrl();
-	}
-
-	override render() {
-		return html`
-			<div class="h-full flex flex-col">
-				<div class="flex-1 overflow-auto">
-					${
-						this.viewMode === "preview"
-							? html`<div class="h-full flex items-center justify-center p-4">
-								${
-									this.previewUrl
-										? html`<img
-												class="max-w-full max-h-full w-full h-full object-contain"
-												src="${this.previewUrl}"
-												alt="${this.filename}"
-											/>`
-										: ""
-								}
-							</div>`
-							: html`<pre class="m-0 p-4 text-xs"><code class="hljs language-xml">${unsafeHTML(
-									hljs.highlight(this.content, { language: "xml", ignoreIllegals: true }).value,
-								)}</code></pre>`
-					}
-				</div>
-			</div>
-		`;
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		"svg-artifact": SvgArtifact;
-	}
-}

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

@@ -1,148 +0,0 @@
-import { CopyButton } from "@mariozechner/mini-lit/dist/CopyButton.js";
-import { DownloadButton } from "@mariozechner/mini-lit/dist/DownloadButton.js";
-import hljs from "highlight.js";
-import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { i18n } from "../../utils/i18n.js";
-import { ArtifactElement } from "./ArtifactElement.js";
-
-// Known code file extensions for highlighting
-const CODE_EXTENSIONS = [
-	"js",
-	"javascript",
-	"ts",
-	"typescript",
-	"jsx",
-	"tsx",
-	"py",
-	"python",
-	"java",
-	"c",
-	"cpp",
-	"cs",
-	"php",
-	"rb",
-	"ruby",
-	"go",
-	"rust",
-	"swift",
-	"kotlin",
-	"scala",
-	"dart",
-	"html",
-	"css",
-	"scss",
-	"sass",
-	"less",
-	"json",
-	"xml",
-	"yaml",
-	"yml",
-	"toml",
-	"sql",
-	"sh",
-	"bash",
-	"ps1",
-	"bat",
-	"r",
-	"matlab",
-	"julia",
-	"lua",
-	"perl",
-	"vue",
-	"svelte",
-];
-
-@customElement("text-artifact")
-export class TextArtifact extends ArtifactElement {
-	@property() override filename = "";
-
-	private _content = "";
-	override get content(): string {
-		return this._content;
-	}
-	override set content(value: string) {
-		this._content = value;
-		this.requestUpdate();
-	}
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this; // light DOM
-	}
-
-	private isCode(): boolean {
-		const ext = this.filename.split(".").pop()?.toLowerCase() || "";
-		return CODE_EXTENSIONS.includes(ext);
-	}
-
-	private getLanguageFromExtension(ext: string): string {
-		const languageMap: Record<string, string> = {
-			js: "javascript",
-			ts: "typescript",
-			py: "python",
-			rb: "ruby",
-			yml: "yaml",
-			ps1: "powershell",
-			bat: "batch",
-		};
-		return languageMap[ext] || ext;
-	}
-
-	private getMimeType(): string {
-		const ext = this.filename.split(".").pop()?.toLowerCase() || "";
-		if (ext === "svg") return "image/svg+xml";
-		if (ext === "md" || ext === "markdown") return "text/markdown";
-		return "text/plain";
-	}
-
-	public getHeaderButtons() {
-		const copyButton = new CopyButton();
-		copyButton.text = this.content;
-		copyButton.title = i18n("Copy");
-		copyButton.showText = false;
-
-		return html`
-			<div class="flex items-center gap-1">
-				${copyButton}
-				${DownloadButton({
-					content: this.content,
-					filename: this.filename,
-					mimeType: this.getMimeType(),
-					title: i18n("Download"),
-				})}
-			</div>
-		`;
-	}
-
-	override render() {
-		const isCode = this.isCode();
-		const ext = this.filename.split(".").pop() || "";
-		return html`
-			<div class="h-full flex flex-col">
-				<div class="flex-1 overflow-auto">
-					${
-						isCode
-							? html`
-								<pre class="m-0 p-4 text-xs"><code class="hljs language-${this.getLanguageFromExtension(
-									ext.toLowerCase(),
-								)}">${unsafeHTML(
-									hljs.highlight(this.content, {
-										language: this.getLanguageFromExtension(ext.toLowerCase()),
-										ignoreIllegals: true,
-									}).value,
-								)}</code></pre>
-							`
-							: html` <pre class="m-0 p-4 text-xs font-mono">${this.content}</pre> `
-					}
-				</div>
-			</div>
-		`;
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		"text-artifact": TextArtifact;
-	}
-}

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

@@ -1,310 +0,0 @@
-import "@mariozechner/mini-lit/dist/CodeBlock.js";
-import type { ToolResultMessage } from "@mariozechner/pi-ai";
-import { createRef, ref } from "lit/directives/ref.js";
-import { FileCode2 } from "lucide";
-import "../../components/ConsoleBlock.js";
-import { Diff } from "@mariozechner/mini-lit/dist/Diff.js";
-import { html, type TemplateResult } from "lit";
-import { i18n } from "../../utils/i18n.js";
-import { renderCollapsibleHeader, renderHeader } from "../renderer-registry.js";
-import type { ToolRenderer, ToolRenderResult } from "../types.js";
-import { ArtifactPill } from "./ArtifactPill.js";
-import type { ArtifactsPanel, ArtifactsParams } from "./artifacts.js";
-
-// Helper to extract text from content blocks
-function getTextOutput(result: ToolResultMessage<any> | undefined): string {
-	if (!result) return "";
-	return (
-		result.content
-			?.filter((c) => c.type === "text")
-			.map((c: any) => c.text)
-			.join("\n") || ""
-	);
-}
-
-// Helper to determine language for syntax highlighting
-function getLanguageFromFilename(filename?: string): string {
-	if (!filename) return "text";
-	const ext = filename.split(".").pop()?.toLowerCase();
-	const languageMap: Record<string, string> = {
-		js: "javascript",
-		jsx: "javascript",
-		ts: "typescript",
-		tsx: "typescript",
-		html: "html",
-		css: "css",
-		scss: "scss",
-		json: "json",
-		py: "python",
-		md: "markdown",
-		svg: "xml",
-		xml: "xml",
-		yaml: "yaml",
-		yml: "yaml",
-		sh: "bash",
-		bash: "bash",
-		sql: "sql",
-		java: "java",
-		c: "c",
-		cpp: "cpp",
-		cs: "csharp",
-		go: "go",
-		rs: "rust",
-		php: "php",
-		rb: "ruby",
-		swift: "swift",
-		kt: "kotlin",
-		r: "r",
-	};
-	return languageMap[ext || ""] || "text";
-}
-
-export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, undefined> {
-	constructor(public artifactsPanel?: ArtifactsPanel) {}
-
-	render(
-		params: ArtifactsParams | undefined,
-		result: ToolResultMessage<undefined> | undefined,
-		isStreaming?: boolean,
-	): ToolRenderResult {
-		const state = result ? (result.isError ? "error" : "complete") : isStreaming ? "inprogress" : "complete";
-
-		// Create refs for collapsible sections
-		const contentRef = createRef<HTMLDivElement>();
-		const chevronRef = createRef<HTMLSpanElement>();
-
-		// Helper to get command labels
-		const getCommandLabels = (command: string): { streaming: string; complete: string } => {
-			const labels: Record<string, { streaming: string; complete: string }> = {
-				create: { streaming: i18n("Creating artifact"), complete: i18n("Created artifact") },
-				update: { streaming: i18n("Updating artifact"), complete: i18n("Updated artifact") },
-				rewrite: { streaming: i18n("Rewriting artifact"), complete: i18n("Rewrote artifact") },
-				get: { streaming: i18n("Getting artifact"), complete: i18n("Got artifact") },
-				delete: { streaming: i18n("Deleting artifact"), complete: i18n("Deleted artifact") },
-				logs: { streaming: i18n("Getting logs"), complete: i18n("Got logs") },
-			};
-			return labels[command] || { streaming: i18n("Processing artifact"), complete: i18n("Processed artifact") };
-		};
-
-		// Helper to render header text with inline artifact pill
-		const renderHeaderWithPill = (labelText: string, filename?: string): TemplateResult => {
-			if (filename) {
-				return html`<span>${labelText} ${ArtifactPill(filename, this.artifactsPanel)}</span>`;
-			}
-			return html`<span>${labelText}</span>`;
-		};
-
-		// Error handling
-		if (result?.isError) {
-			const command = params?.command;
-			const filename = params?.filename;
-			const labels = command
-				? getCommandLabels(command)
-				: { streaming: i18n("Processing artifact"), complete: i18n("Processed artifact") };
-			const headerText = labels.streaming;
-
-			// For create/update/rewrite errors, show code block + console/error
-			if (command === "create" || command === "update" || command === "rewrite") {
-				const content = params?.content || "";
-				const { old_str, new_str } = params || {};
-				const isDiff = command === "update";
-				const diffContent =
-					old_str !== undefined && new_str !== undefined ? Diff({ oldText: old_str, newText: new_str }) : "";
-
-				const isHtml = filename?.endsWith(".html");
-
-				return {
-					content: html`
-					<div>
-						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
-						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
-							${isDiff ? diffContent : content ? html`<code-block .code=${content} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
-							${
-								isHtml
-									? html`<console-block .content=${getTextOutput(result) || i18n("An error occurred")} variant="error"></console-block>`
-									: html`<div class="text-sm text-destructive">${getTextOutput(result) || i18n("An error occurred")}</div>`
-							}
-						</div>
-					</div>
-				`,
-					isCustom: false,
-				};
-			}
-
-			// For other errors, just show error message
-			return {
-				content: html`
-				<div class="space-y-3">
-					${renderHeader(state, FileCode2, headerText)}
-					<div class="text-sm text-destructive">${getTextOutput(result) || i18n("An error occurred")}</div>
-				</div>
-			`,
-				isCustom: false,
-			};
-		}
-
-		// Full params + result
-		if (result && params) {
-			const { command, filename, content } = params;
-			const labels = command
-				? getCommandLabels(command)
-				: { streaming: i18n("Processing artifact"), complete: i18n("Processed artifact") };
-			const headerText = labels.complete;
-
-			// GET command: show code block with file content
-			if (command === "get") {
-				const fileContent = getTextOutput(result) || i18n("(no output)");
-				return {
-					content: html`
-					<div>
-						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
-						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
-							<code-block .code=${fileContent} language=${getLanguageFromFilename(filename)}></code-block>
-						</div>
-					</div>
-				`,
-					isCustom: false,
-				};
-			}
-
-			// LOGS command: show console block
-			if (command === "logs") {
-				const logs = getTextOutput(result) || i18n("(no output)");
-				return {
-					content: html`
-					<div>
-						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
-						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
-							<console-block .content=${logs}></console-block>
-						</div>
-					</div>
-				`,
-					isCustom: false,
-				};
-			}
-
-			// CREATE/UPDATE/REWRITE: always show code block, + console block for .html files
-			if (command === "create" || command === "rewrite") {
-				const codeContent = content || "";
-				const isHtml = filename?.endsWith(".html");
-				const logs = getTextOutput(result) || "";
-
-				return {
-					content: html`
-					<div>
-						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
-						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
-							${codeContent ? html`<code-block .code=${codeContent} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
-							${isHtml && logs ? html`<console-block .content=${logs}></console-block>` : ""}
-						</div>
-					</div>
-				`,
-					isCustom: false,
-				};
-			}
-
-			if (command === "update") {
-				const isHtml = filename?.endsWith(".html");
-				const logs = getTextOutput(result) || "";
-				return {
-					content: html`
-					<div>
-						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
-						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
-							${Diff({ oldText: params.old_str || "", newText: params.new_str || "" })}
-							${isHtml && logs ? html`<console-block .content=${logs}></console-block>` : ""}
-						</div>
-					</div>
-				`,
-					isCustom: false,
-				};
-			}
-
-			// For DELETE, just show header
-			return {
-				content: html`
-				<div class="space-y-3">
-					${renderHeader(state, FileCode2, renderHeaderWithPill(headerText, filename))}
-				</div>
-			`,
-				isCustom: false,
-			};
-		}
-
-		// Params only (streaming or waiting for result)
-		if (params) {
-			const { command, filename, content, old_str, new_str } = params;
-
-			// If no command yet
-			if (!command) {
-				return { content: renderHeader(state, FileCode2, i18n("Preparing artifact...")), isCustom: false };
-			}
-
-			const labels = getCommandLabels(command);
-			const headerText = labels.streaming;
-
-			// Render based on command type
-			switch (command) {
-				case "create":
-				case "rewrite":
-					return {
-						content: html`
-						<div>
-							${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
-							<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
-								${
-									content
-										? html`<code-block .code=${content} language=${getLanguageFromFilename(filename)}></code-block>`
-										: ""
-								}
-							</div>
-						</div>
-					`,
-						isCustom: false,
-					};
-
-				case "update":
-					return {
-						content: html`
-						<div>
-							${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
-							<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
-								${
-									old_str !== undefined && new_str !== undefined
-										? Diff({ oldText: old_str, newText: new_str })
-										: ""
-								}
-							</div>
-						</div>
-					`,
-						isCustom: false,
-					};
-
-				case "get":
-				case "logs":
-					return {
-						content: html`
-						<div>
-							${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
-							<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300"></div>
-						</div>
-					`,
-						isCustom: false,
-					};
-
-				default:
-					return {
-						content: html`
-						<div>
-							${renderHeader(state, FileCode2, renderHeaderWithPill(headerText, filename))}
-						</div>
-					`,
-						isCustom: false,
-					};
-			}
-		}
-
-		// No params or result yet
-		return { content: renderHeader(state, FileCode2, i18n("Preparing artifact...")), isCustom: false };
-	}
-}