pi-usereq 0.49.0 → 0.51.0

package/pi.dev-src/pi-mono/web-ui/src/ChatPanel.ts

@@ -1,209 +0,0 @@
-import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
-import { html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import "./components/AgentInterface.js";
-import type { Agent, AgentTool } from "@mariozechner/pi-agent-core";
-import type { AgentInterface } from "./components/AgentInterface.js";
-import { ArtifactsRuntimeProvider } from "./components/sandbox/ArtifactsRuntimeProvider.js";
-import { AttachmentsRuntimeProvider } from "./components/sandbox/AttachmentsRuntimeProvider.js";
-import type { SandboxRuntimeProvider } from "./components/sandbox/SandboxRuntimeProvider.js";
-import { ArtifactsPanel, ArtifactsToolRenderer } from "./tools/artifacts/index.js";
-import { registerToolRenderer } from "./tools/renderer-registry.js";
-import type { Attachment } from "./utils/attachment-utils.js";
-import { i18n } from "./utils/i18n.js";
-
-const BREAKPOINT = 800; // px - switch between overlay and side-by-side
-
-@customElement("pi-chat-panel")
-export class ChatPanel extends LitElement {
-	@state() public agent?: Agent;
-	@state() public agentInterface?: AgentInterface;
-	@state() public artifactsPanel?: ArtifactsPanel;
-	@state() private hasArtifacts = false;
-	@state() private artifactCount = 0;
-	@state() private showArtifactsPanel = false;
-	@state() private windowWidth = 0;
-
-	private resizeHandler = () => {
-		this.windowWidth = window.innerWidth;
-		this.requestUpdate();
-	};
-
-	createRenderRoot() {
-		return this;
-	}
-
-	override connectedCallback() {
-		super.connectedCallback();
-		this.windowWidth = window.innerWidth; // Set initial width after connection
-		window.addEventListener("resize", this.resizeHandler);
-		this.style.display = "flex";
-		this.style.flexDirection = "column";
-		this.style.height = "100%";
-		this.style.minHeight = "0";
-		// Update width after initial render
-		requestAnimationFrame(() => {
-			this.windowWidth = window.innerWidth;
-			this.requestUpdate();
-		});
-	}
-
-	override disconnectedCallback() {
-		super.disconnectedCallback();
-		window.removeEventListener("resize", this.resizeHandler);
-	}
-
-	async setAgent(
-		agent: Agent,
-		config?: {
-			onApiKeyRequired?: (provider: string) => Promise<boolean>;
-			onBeforeSend?: () => void | Promise<void>;
-			onCostClick?: () => void;
-			onModelSelect?: () => void;
-			sandboxUrlProvider?: () => string;
-			toolsFactory?: (
-				agent: Agent,
-				agentInterface: AgentInterface,
-				artifactsPanel: ArtifactsPanel,
-				runtimeProvidersFactory: () => SandboxRuntimeProvider[],
-			) => AgentTool<any>[];
-		},
-	) {
-		this.agent = agent;
-
-		// Create AgentInterface
-		this.agentInterface = document.createElement("agent-interface") as AgentInterface;
-		this.agentInterface.session = agent;
-		this.agentInterface.enableAttachments = true;
-		this.agentInterface.enableModelSelector = true;
-		this.agentInterface.enableThinkingSelector = true;
-		this.agentInterface.showThemeToggle = false;
-		this.agentInterface.onApiKeyRequired = config?.onApiKeyRequired;
-		this.agentInterface.onModelSelect = config?.onModelSelect;
-		this.agentInterface.onBeforeSend = config?.onBeforeSend;
-		this.agentInterface.onCostClick = config?.onCostClick;
-
-		// Set up artifacts panel
-		this.artifactsPanel = new ArtifactsPanel();
-		this.artifactsPanel.agent = agent; // Pass agent for HTML artifact runtime providers
-		if (config?.sandboxUrlProvider) {
-			this.artifactsPanel.sandboxUrlProvider = config.sandboxUrlProvider;
-		}
-		// Register the standalone tool renderer (not the panel itself)
-		registerToolRenderer("artifacts", new ArtifactsToolRenderer(this.artifactsPanel));
-
-		// Runtime providers factory for REPL tools (read-write access)
-		const runtimeProvidersFactory = () => {
-			const attachments: Attachment[] = [];
-			for (const message of this.agent!.state.messages) {
-				if (message.role === "user-with-attachments") {
-					message.attachments?.forEach((a) => {
-						attachments.push(a);
-					});
-				}
-			}
-			const providers: SandboxRuntimeProvider[] = [];
-
-			// Add attachments provider if there are attachments
-			if (attachments.length > 0) {
-				providers.push(new AttachmentsRuntimeProvider(attachments));
-			}
-
-			// Add artifacts provider with read-write access (for REPL)
-			providers.push(new ArtifactsRuntimeProvider(this.artifactsPanel!, this.agent!, true));
-
-			return providers;
-		};
-
-		this.artifactsPanel.onArtifactsChange = () => {
-			const count = this.artifactsPanel?.artifacts?.size ?? 0;
-			const created = count > this.artifactCount;
-			this.hasArtifacts = count > 0;
-			this.artifactCount = count;
-			if (this.hasArtifacts && created) {
-				this.showArtifactsPanel = true;
-			}
-			this.requestUpdate();
-		};
-
-		this.artifactsPanel.onClose = () => {
-			this.showArtifactsPanel = false;
-			this.requestUpdate();
-		};
-
-		this.artifactsPanel.onOpen = () => {
-			this.showArtifactsPanel = true;
-			this.requestUpdate();
-		};
-
-		// Set tools on the agent
-		// Pass runtimeProvidersFactory so consumers can configure their own REPL tools
-		const additionalTools =
-			config?.toolsFactory?.(agent, this.agentInterface, this.artifactsPanel, runtimeProvidersFactory) || [];
-		const tools = [this.artifactsPanel.tool, ...additionalTools];
-		this.agent.state.tools = tools;
-
-		// Reconstruct artifacts from existing messages
-		// Temporarily disable the onArtifactsChange callback to prevent auto-opening on load
-		const originalCallback = this.artifactsPanel.onArtifactsChange;
-		this.artifactsPanel.onArtifactsChange = undefined;
-		await this.artifactsPanel.reconstructFromMessages(this.agent.state.messages);
-		this.artifactsPanel.onArtifactsChange = originalCallback;
-
-		this.hasArtifacts = this.artifactsPanel.artifacts.size > 0;
-		this.artifactCount = this.artifactsPanel.artifacts.size;
-
-		this.requestUpdate();
-	}
-
-	render() {
-		if (!this.agent || !this.agentInterface) {
-			return html`<div class="flex items-center justify-center h-full">
-				<div class="text-muted-foreground">No agent set</div>
-			</div>`;
-		}
-
-		const isMobile = this.windowWidth < BREAKPOINT;
-
-		// Set panel props
-		if (this.artifactsPanel) {
-			this.artifactsPanel.collapsed = !this.showArtifactsPanel;
-			this.artifactsPanel.overlay = isMobile;
-		}
-
-		return html`
-			<div class="relative w-full h-full overflow-hidden flex">
-				<div class="h-full" style="${!isMobile && this.showArtifactsPanel && this.hasArtifacts ? "width: 50%;" : "width: 100%;"}">
-						${this.agentInterface}
-					</div>
-
-					<!-- Floating pill when artifacts exist and panel is collapsed -->
-					${
-						this.hasArtifacts && !this.showArtifactsPanel
-							? html`
-								<button
-									class="absolute z-30 top-4 left-1/2 -translate-x-1/2 pointer-events-auto"
-									@click=${() => {
-										this.showArtifactsPanel = true;
-										this.requestUpdate();
-									}}
-									title=${i18n("Show artifacts")}
-								>
-									${Badge(html`
-										<span class="inline-flex items-center gap-1">
-											<span>${i18n("Artifacts")}</span>
-											<span class="text-[10px] leading-none bg-primary-foreground/20 text-primary-foreground rounded px-1 font-mono tabular-nums">${this.artifactCount}</span>
-										</span>
-									`)}
-								</button>
-							`
-							: ""
-					}
-
-				<div class="h-full ${isMobile ? "absolute inset-0 pointer-events-none" : ""}" style="${!isMobile ? (!this.hasArtifacts || !this.showArtifactsPanel ? "display: none;" : "width: 50%;") : ""}">
-					${this.artifactsPanel}
-				</div>
-			</div>
-		`;
-	}
-}

package/pi.dev-src/pi-mono/web-ui/src/app.css

@@ -1,68 +0,0 @@
-/* Import Claude theme from mini-lit */
-@import "@mariozechner/mini-lit/styles/themes/default.css";
-
-/* Tell Tailwind to scan mini-lit components */
-/* biome-ignore lint/suspicious/noUnknownAtRules: Tailwind 4 source directive */
-@source "../../../node_modules/@mariozechner/mini-lit/dist";
-
-/* Import Tailwind */
-/* biome-ignore lint/correctness/noInvalidPositionAtImportRule: fuck you */
-@import "tailwindcss";
-
-body {
-	font-size: 16px;
-	-webkit-font-smoothing: antialiased;
-}
-
-* {
-	scrollbar-width: thin;
-	scrollbar-color: var(--color-border) rgba(0, 0, 0, 0);
-}
-
-*::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-
-*::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-	background-color: var(--color-border);
-	border-radius: 4px;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-	background-color: rgba(0, 0, 0, 0);
-}
-
-/* Fix cursor for dialog close buttons */
-.fixed.inset-0 button[aria-label*="Close"],
-.fixed.inset-0 button[type="button"] {
-	cursor: pointer;
-}
-
-/* Shimmer animation for thinking text */
-@keyframes shimmer {
-	0% {
-		background-position: -200% 0;
-	}
-	100% {
-		background-position: 200% 0;
-	}
-}
-
-.animate-shimmer {
-	animation: shimmer 2s ease-in-out infinite;
-}
-
-/* User message with fancy pill styling */
-.user-message-container {
-	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-	position: relative;
-	background: linear-gradient(135deg, rgba(217, 79, 0, 0.12), rgba(255, 107, 0, 0.12), rgba(212, 165, 0, 0.12));
-	border: 1px solid rgba(255, 107, 0, 0.25);
-	backdrop-filter: blur(10px);
-	max-width: 100%;
-}

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

@@ -1,403 +0,0 @@
-import { streamSimple, type ToolResultMessage, type Usage } from "@mariozechner/pi-ai";
-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";
-import "./MessageEditor.js";
-import "./MessageList.js";
-import "./Messages.js"; // Import for side effects to register the custom elements
-import { getAppStorage } from "../storage/app-storage.js";
-import "./StreamingMessageContainer.js";
-import type { Agent, AgentEvent } from "@mariozechner/pi-agent-core";
-import type { Attachment } from "../utils/attachment-utils.js";
-import { formatUsage } from "../utils/format.js";
-import { i18n } from "../utils/i18n.js";
-import { createStreamFn } from "../utils/proxy-utils.js";
-import type { UserMessageWithAttachments } from "./Messages.js";
-import type { StreamingMessageContainer } from "./StreamingMessageContainer.js";
-
-@customElement("agent-interface")
-export class AgentInterface extends LitElement {
-	// Optional external session: when provided, this component becomes a view over the session
-	@property({ attribute: false }) session?: Agent;
-	@property({ type: Boolean }) enableAttachments = true;
-	@property({ type: Boolean }) enableModelSelector = true;
-	@property({ type: Boolean }) enableThinkingSelector = true;
-	@property({ type: Boolean }) showThemeToggle = false;
-	// Optional custom API key prompt handler - if not provided, uses default dialog
-	@property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise<boolean>;
-	// Optional callback called before sending a message
-	@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;
-	// Optional callback to override model selector behavior
-	@property({ attribute: false }) onModelSelect?: () => void;
-
-	// References
-	@query("message-editor") private _messageEditor!: MessageEditor;
-	@query("streaming-message-container") private _streamingContainer!: StreamingMessageContainer;
-
-	private _autoScroll = true;
-	private _lastScrollTop = 0;
-	private _lastClientHeight = 0;
-	private _scrollContainer?: HTMLElement;
-	private _resizeObserver?: ResizeObserver;
-	private _unsubscribeSession?: () => void;
-
-	public setInput(text: string, attachments?: Attachment[]) {
-		const update = () => {
-			if (!this._messageEditor) requestAnimationFrame(update);
-			else {
-				this._messageEditor.value = text;
-				this._messageEditor.attachments = attachments || [];
-			}
-		};
-		update();
-	}
-
-	public setAutoScroll(enabled: boolean) {
-		this._autoScroll = enabled;
-	}
-
-	protected override createRenderRoot(): HTMLElement | DocumentFragment {
-		return this;
-	}
-
-	override willUpdate(changedProperties: Map<string, any>) {
-		super.willUpdate(changedProperties);
-
-		// Re-subscribe when session property changes
-		if (changedProperties.has("session")) {
-			this.setupSessionSubscription();
-		}
-	}
-
-	override async connectedCallback() {
-		super.connectedCallback();
-
-		this.style.display = "flex";
-		this.style.flexDirection = "column";
-		this.style.height = "100%";
-		this.style.minHeight = "0";
-
-		// Wait for first render to get scroll container
-		await this.updateComplete;
-		this._scrollContainer = this.querySelector(".overflow-y-auto") as HTMLElement;
-
-		if (this._scrollContainer) {
-			// Set up ResizeObserver to detect content changes
-			this._resizeObserver = new ResizeObserver(() => {
-				if (this._autoScroll && this._scrollContainer) {
-					this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight;
-				}
-			});
-
-			// Observe the content container inside the scroll container
-			const contentContainer = this._scrollContainer.querySelector(".max-w-3xl");
-			if (contentContainer) {
-				this._resizeObserver.observe(contentContainer);
-			}
-
-			// Set up scroll listener with better detection
-			this._scrollContainer.addEventListener("scroll", this._handleScroll);
-		}
-
-		// Subscribe to external session if provided
-		this.setupSessionSubscription();
-	}
-
-	override disconnectedCallback() {
-		super.disconnectedCallback();
-
-		// Clean up observers and listeners
-		if (this._resizeObserver) {
-			this._resizeObserver.disconnect();
-			this._resizeObserver = undefined;
-		}
-
-		if (this._scrollContainer) {
-			this._scrollContainer.removeEventListener("scroll", this._handleScroll);
-		}
-
-		if (this._unsubscribeSession) {
-			this._unsubscribeSession();
-			this._unsubscribeSession = undefined;
-		}
-	}
-
-	private setupSessionSubscription() {
-		if (this._unsubscribeSession) {
-			this._unsubscribeSession();
-			this._unsubscribeSession = undefined;
-		}
-		if (!this.session) return;
-
-		// Set default streamFn with proxy support if not already set
-		if (this.session.streamFn === streamSimple) {
-			this.session.streamFn = createStreamFn(async () => {
-				const enabled = await getAppStorage().settings.get<boolean>("proxy.enabled");
-				return enabled ? (await getAppStorage().settings.get<string>("proxy.url")) || undefined : undefined;
-			});
-		}
-
-		// Set default getApiKey if not already set
-		if (!this.session.getApiKey) {
-			this.session.getApiKey = async (provider: string) => {
-				const key = await getAppStorage().providerKeys.get(provider);
-				return key ?? undefined;
-			};
-		}
-
-		this._unsubscribeSession = this.session.subscribe(async (ev: AgentEvent) => {
-			switch (ev.type) {
-				case "message_start":
-				case "turn_start":
-				case "turn_end":
-				case "agent_start":
-					this.requestUpdate();
-					break;
-				case "message_end":
-					// Clear streaming container when a message completes
-					// to prevent duplicate rendering (stable list now has this message)
-					if (this._streamingContainer) {
-						this._streamingContainer.setMessage(null, true);
-					}
-					this.requestUpdate();
-					break;
-				case "agent_end":
-					// Clear streaming container when agent finishes
-					if (this._streamingContainer) {
-						this._streamingContainer.isStreaming = false;
-						this._streamingContainer.setMessage(null, true);
-					}
-					this.requestUpdate();
-					break;
-				case "message_update":
-					if (this._streamingContainer) {
-						const isStreaming = this.session?.state.isStreaming || false;
-						this._streamingContainer.isStreaming = isStreaming;
-						this._streamingContainer.setMessage(ev.message, !isStreaming);
-					}
-					this.requestUpdate();
-					break;
-			}
-		});
-	}
-
-	private _handleScroll = (_ev: any) => {
-		if (!this._scrollContainer) return;
-
-		const currentScrollTop = this._scrollContainer.scrollTop;
-		const scrollHeight = this._scrollContainer.scrollHeight;
-		const clientHeight = this._scrollContainer.clientHeight;
-		const distanceFromBottom = scrollHeight - currentScrollTop - clientHeight;
-
-		// Ignore relayout due to message editor getting pushed up by stats
-		if (clientHeight < this._lastClientHeight) {
-			this._lastClientHeight = clientHeight;
-			return;
-		}
-
-		// Only disable auto-scroll if user scrolled UP or is far from bottom
-		if (currentScrollTop !== 0 && currentScrollTop < this._lastScrollTop && distanceFromBottom > 50) {
-			this._autoScroll = false;
-		} else if (distanceFromBottom < 10) {
-			// Re-enable if very close to bottom
-			this._autoScroll = true;
-		}
-
-		this._lastScrollTop = currentScrollTop;
-		this._lastClientHeight = clientHeight;
-	};
-
-	public async sendMessage(input: string, attachments?: Attachment[]) {
-		if ((!input.trim() && attachments?.length === 0) || this.session?.state.isStreaming) return;
-		const session = this.session;
-		if (!session) throw new Error("No session set on AgentInterface");
-		if (!session.state.model) throw new Error("No model set on AgentInterface");
-
-		// Check if API key exists for the provider (only needed in direct mode)
-		const provider = session.state.model.provider;
-		const apiKey = await getAppStorage().providerKeys.get(provider);
-
-		// If no API key, prompt for it
-		if (!apiKey) {
-			if (!this.onApiKeyRequired) {
-				console.error("No API key configured and no onApiKeyRequired handler set");
-				return;
-			}
-
-			const success = await this.onApiKeyRequired(provider);
-
-			// If still no API key, abort the send
-			if (!success) {
-				return;
-			}
-		}
-
-		// Call onBeforeSend hook before sending
-		if (this.onBeforeSend) {
-			await this.onBeforeSend();
-		}
-
-		// Only clear editor after we know we can send
-		this._messageEditor.value = "";
-		this._messageEditor.attachments = [];
-		this._autoScroll = true; // Enable auto-scroll when sending a message
-
-		// Compose message with attachments if any
-		if (attachments && attachments.length > 0) {
-			const message: UserMessageWithAttachments = {
-				role: "user-with-attachments",
-				content: input,
-				attachments,
-				timestamp: Date.now(),
-			};
-			await this.session?.prompt(message);
-		} else {
-			await this.session?.prompt(input);
-		}
-	}
-
-	private renderMessages() {
-		if (!this.session)
-			return html`<div class="p-4 text-center text-muted-foreground">${i18n("No session available")}</div>`;
-		const state = this.session.state;
-		// Build a map of tool results to allow inline rendering in assistant messages
-		const toolResultsById = new Map<string, ToolResultMessage<any>>();
-		for (const message of state.messages) {
-			if (message.role === "toolResult") {
-				toolResultsById.set(message.toolCallId, message);
-			}
-		}
-		return html`
-			<div class="flex flex-col gap-3">
-				<!-- Stable messages list - won't re-render during streaming -->
-				<message-list
-					.messages=${this.session.state.messages}
-					.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 -->
-				<streaming-message-container
-					class="${state.isStreaming ? "" : "hidden"}"
-					.tools=${state.tools}
-					.isStreaming=${state.isStreaming}
-					.pendingToolCalls=${state.pendingToolCalls}
-					.toolResultsById=${toolResultsById}
-					.onCostClick=${this.onCostClick}
-				></streaming-message-container>
-			</div>
-		`;
-	}
-
-	private renderStats() {
-		if (!this.session) return html`<div class="text-xs h-5"></div>`;
-
-		const state = this.session.state;
-		const totals = state.messages
-			.filter((m) => m.role === "assistant")
-			.reduce(
-				(acc, msg: any) => {
-					const usage = msg.usage;
-					if (usage) {
-						acc.input += usage.input;
-						acc.output += usage.output;
-						acc.cacheRead += usage.cacheRead;
-						acc.cacheWrite += usage.cacheWrite;
-						acc.cost.total += usage.cost.total;
-					}
-					return acc;
-				},
-				{
-					input: 0,
-					output: 0,
-					cacheRead: 0,
-					cacheWrite: 0,
-					totalTokens: 0,
-					cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
-				} satisfies Usage,
-			);
-
-		const hasTotals = totals.input || totals.output || totals.cacheRead || totals.cacheWrite;
-		const totalsText = hasTotals ? formatUsage(totals) : "";
-
-		return html`
-			<div class="text-xs text-muted-foreground flex justify-between items-center h-5">
-				<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
-							? this.onCostClick
-								? html`<span class="cursor-pointer hover:text-foreground transition-colors" @click=${this.onCostClick}>${totalsText}</span>`
-								: html`<span>${totalsText}</span>`
-							: ""
-					}
-				</div>
-			</div>
-		`;
-	}
-
-	override render() {
-		if (!this.session)
-			return html`<div class="p-4 text-center text-muted-foreground">${i18n("No session set")}</div>`;
-
-		const session = this.session;
-		const state = this.session.state;
-		return html`
-			<div class="flex flex-col h-full bg-background text-foreground">
-				<!-- Messages Area -->
-				<div class="flex-1 overflow-y-auto">
-					<div class="max-w-3xl mx-auto p-4 pb-0">${this.renderMessages()}</div>
-				</div>
-
-				<!-- Input Area -->
-				<div class="shrink-0">
-					<div class="max-w-3xl mx-auto px-2">
-						<message-editor
-							.isStreaming=${state.isStreaming}
-							.currentModel=${state.model}
-							.thinkingLevel=${state.thinkingLevel}
-							.showAttachmentButton=${this.enableAttachments}
-							.showModelSelector=${this.enableModelSelector}
-							.showThinkingSelector=${this.enableThinkingSelector}
-							.onSend=${(input: string, attachments: Attachment[]) => {
-								this.sendMessage(input, attachments);
-							}}
-							.onAbort=${() => session.abort()}
-							.onModelSelect=${() => {
-								if (this.onModelSelect) {
-									this.onModelSelect();
-								} else {
-									ModelSelector.open(state.model, (model) => {
-										session.state.model = model;
-									});
-								}
-							}}
-							.onThinkingChange=${
-								this.enableThinkingSelector
-									? (level: "off" | "minimal" | "low" | "medium" | "high") => {
-											session.state.thinkingLevel = level;
-										}
-									: undefined
-							}
-						></message-editor>
-						${this.renderStats()}
-					</div>
-				</div>
-			</div>
-		`;
-	}
-}
-
-// Register custom element with guard
-if (!customElements.get("agent-interface")) {
-	customElements.define("agent-interface", AgentInterface);
-}