- ${Alert({
- variant: notification.variant,
- children: html`
-
- `;
- },
-};
-
-// ============================================================================
-// 3. REGISTER RENDERER
-// ============================================================================
-
-export function registerCustomMessageRenderers() {
- registerMessageRenderer("system-notification", systemNotificationRenderer);
-}
-
-// ============================================================================
-// 4. HELPER TO CREATE CUSTOM MESSAGES
-// ============================================================================
-
-export function createSystemNotification(
- message: string,
- variant: "default" | "destructive" = "default",
-): SystemNotificationMessage {
- return {
- role: "system-notification",
- message,
- variant,
- timestamp: new Date().toISOString(),
- };
-}
-
-// ============================================================================
-// 5. CUSTOM MESSAGE TRANSFORMER
-// ============================================================================
-
-/**
- * Custom message transformer that extends defaultConvertToLlm.
- * Handles system-notification messages by converting them to user messages.
- */
-export function customConvertToLlm(messages: AgentMessage[]): Message[] {
- // First, handle our custom system-notification type
- const processed = messages.map((m): AgentMessage => {
- if (m.role === "system-notification") {
- const notification = m as SystemNotificationMessage;
- // Convert to user message with
-
- `,
- })}
- ${notification.message}
-
- ${new Date(notification.timestamp).toLocaleTimeString()}
-
-
-
-
- `;
-
- render(appHtml, app);
-};
-
-// ============================================================================
-// INIT
-// ============================================================================
-async function initApp() {
- const app = document.getElementById("app");
- if (!app) throw new Error("App container not found");
-
- // Show loading
- render(
- html`
-
-
-
-
- ${chatPanel}
-
- ${Button({
- variant: "ghost",
- size: "sm",
- children: icon(History, "sm"),
- onClick: () => {
- SessionListDialog.open(
- async (sessionId) => {
- await loadSession(sessionId);
- },
- (deletedSessionId) => {
- // Only reload if the current session was deleted
- if (deletedSessionId === currentSessionId) {
- newSession();
- }
- },
- );
- },
- title: "Sessions",
- })}
- ${Button({
- variant: "ghost",
- size: "sm",
- children: icon(Plus, "sm"),
- onClick: newSession,
- title: "New Session",
- })}
- ${currentTitle
- ? isEditingTitle
- ? html`
-
- ${Input({
- type: "text",
- value: currentTitle,
- className: "text-sm w-64",
- onChange: async (e: Event) => {
- const newTitle = (
- e.target as HTMLInputElement
- ).value.trim();
- if (
- newTitle &&
- newTitle !== currentTitle &&
- storage.sessions &&
- currentSessionId
- ) {
- await storage.sessions.updateTitle(
- currentSessionId,
- newTitle,
- );
- currentTitle = newTitle;
- }
- isEditingTitle = false;
- renderApp();
- },
- onKeyDown: async (e: KeyboardEvent) => {
- if (e.key === "Enter") {
- const newTitle = (
- e.target as HTMLInputElement
- ).value.trim();
- if (
- newTitle &&
- newTitle !== currentTitle &&
- storage.sessions &&
- currentSessionId
- ) {
- await storage.sessions.updateTitle(
- currentSessionId,
- newTitle,
- );
- currentTitle = newTitle;
- }
- isEditingTitle = false;
- renderApp();
- } else if (e.key === "Escape") {
- isEditingTitle = false;
- renderApp();
- }
- },
- })}
-
`
- : html``
- : html`Pi Web UI Example`}
-
- ${Button({
- variant: "ghost",
- size: "sm",
- children: icon(Bell, "sm"),
- onClick: () => {
- // Demo: Inject custom message (will appear on next agent run)
- if (agent) {
- agent.steer(
- createSystemNotification(
- "This is a custom message! It appears in the UI but is never sent to the LLM.",
- ),
- );
- }
- },
- title: "Demo: Add Custom Notification",
- })}
-
-
-
- `,
- app,
- );
-
- // TODO: Fix PersistentStorageDialog - currently broken
- // Request persistent storage
- // if (storage.sessions) {
- // await PersistentStorageDialog.request();
- // }
-
- // Create ChatPanel
- chatPanel = new ChatPanel();
-
- // Check for session in URL
- const urlParams = new URLSearchParams(window.location.search);
- const sessionIdFromUrl = urlParams.get("session");
-
- if (sessionIdFromUrl) {
- const loaded = await loadSession(sessionIdFromUrl);
- if (!loaded) {
- // Session doesn't exist, redirect to new session
- newSession();
- return;
- }
- } else {
- await createAgent();
- }
-
- renderApp();
-}
-
-initApp();
diff --git a/packages/web-ui/example/tsconfig.json b/packages/web-ui/example/tsconfig.json
deleted file mode 100644
index 0844934..0000000
--- a/packages/web-ui/example/tsconfig.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "compilerOptions": {
- "target": "ES2022",
- "module": "ES2022",
- "lib": ["ES2022", "DOM", "DOM.Iterable"],
- "moduleResolution": "bundler",
- "paths": {
- "*": ["./*"],
- "@mariozechner/pi-agent-core": ["../../agent/dist/index.d.ts"],
- "@mariozechner/pi-ai": ["../../ai/dist/index.d.ts"],
- "@mariozechner/pi-tui": ["../../tui/dist/index.d.ts"],
- "@mariozechner/pi-web-ui": ["../dist/index.d.ts"]
- },
- "strict": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "experimentalDecorators": true,
- "useDefineForClassFields": false
- },
- "include": ["src/**/*"],
- "exclude": ["../src"]
-}
diff --git a/packages/web-ui/example/vite.config.ts b/packages/web-ui/example/vite.config.ts
deleted file mode 100644
index 2f4c184..0000000
--- a/packages/web-ui/example/vite.config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import tailwindcss from "@tailwindcss/vite";
-import { defineConfig } from "vite";
-
-export default defineConfig({
- plugins: [tailwindcss()],
-});
diff --git a/packages/web-ui/package.json b/packages/web-ui/package.json
deleted file mode 100644
index c4387b1..0000000
--- a/packages/web-ui/package.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
- "name": "@mariozechner/pi-web-ui",
- "version": "0.56.2",
- "description": "Reusable web UI components for AI chat interfaces powered by @mariozechner/pi-ai",
- "type": "module",
- "main": "dist/index.js",
- "types": "dist/index.d.ts",
- "exports": {
- ".": "./dist/index.js",
- "./app.css": "./dist/app.css"
- },
- "scripts": {
- "clean": "shx rm -rf dist",
- "build": "tsgo -p tsconfig.build.json && tailwindcss -i ./src/app.css -o ./dist/app.css --minify",
- "dev": "concurrently --names \"build,example\" --prefix-colors \"cyan,green\" \"tsc -p tsconfig.build.json --watch --preserveWatchOutput\" \"tailwindcss -i ./src/app.css -o ./dist/app.css --watch\" \"npm run dev --prefix example\"",
- "dev:tsc": "concurrently --names \"build\" --prefix-colors \"cyan\" \"tsc -p tsconfig.build.json --watch --preserveWatchOutput\" \"tailwindcss -i ./src/app.css -o ./dist/app.css --watch\"",
- "check": "biome check --write --error-on-warnings . && tsc --noEmit && cd example && biome check --write --error-on-warnings . && tsc --noEmit"
- },
- "dependencies": {
- "@lmstudio/sdk": "^1.5.0",
- "@mariozechner/pi-ai": "^0.56.2",
- "@mariozechner/pi-tui": "^0.56.2",
- "docx-preview": "^0.3.7",
- "jszip": "^3.10.1",
- "lucide": "^0.544.0",
- "ollama": "^0.6.0",
- "pdfjs-dist": "5.4.394",
- "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
- },
- "peerDependencies": {
- "@mariozechner/mini-lit": "^0.2.0",
- "lit": "^3.3.1"
- },
- "devDependencies": {
- "@mariozechner/mini-lit": "^0.2.0",
- "@tailwindcss/cli": "^4.0.0-beta.14",
- "concurrently": "^9.2.1",
- "typescript": "^5.7.3"
- },
- "keywords": [
- "ai",
- "chat",
- "ui",
- "components",
- "llm",
- "web-components",
- "mini-lit"
- ],
- "author": "Mario Zechner",
- "license": "MIT"
-}
diff --git a/packages/web-ui/scripts/count-prompt-tokens.ts b/packages/web-ui/scripts/count-prompt-tokens.ts
deleted file mode 100644
index fbf15af..0000000
--- a/packages/web-ui/scripts/count-prompt-tokens.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-#!/usr/bin/env tsx
-/**
- * Count tokens in system prompts using Anthropic's token counter API
- */
-
-import * as prompts from "../src/prompts/prompts.js";
-
-const ANTHROPIC_API_KEY = process.env.ANTHROPIC_API_KEY;
-
-if (!ANTHROPIC_API_KEY) {
- console.error("Error: ANTHROPIC_API_KEY environment variable not set");
- process.exit(1);
-}
-
-interface TokenCountResponse {
- input_tokens: number;
-}
-
-async function countTokens(text: string): PromiseLoading...
-
-
`;
- }
-
- const isMobile = this.windowWidth < BREAKPOINT;
-
- // Set panel props
- if (this.artifactsPanel) {
- this.artifactsPanel.collapsed = !this.showArtifactsPanel;
- this.artifactsPanel.overlay = isMobile;
- }
-
- return html`
- No agent set
-
-
- `;
- }
-}
diff --git a/packages/web-ui/src/app.css b/packages/web-ui/src/app.css
deleted file mode 100644
index c8ddc30..0000000
--- a/packages/web-ui/src/app.css
+++ /dev/null
@@ -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%;
-}
diff --git a/packages/web-ui/src/components/AgentInterface.ts b/packages/web-ui/src/components/AgentInterface.ts
deleted file mode 100644
index 98eda8b..0000000
--- a/packages/web-ui/src/components/AgentInterface.ts
+++ /dev/null
@@ -1,428 +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
- ${this.agentInterface}
-
-
-
- ${this.hasArtifacts && !this.showArtifactsPanel
- ? html`
-
- `
- : ""}
-
-
- ${this.artifactsPanel}
-
-
- ${i18n("No session available")}
-
`;
- const state = this.session.state;
- // Build a map of tool results to allow inline rendering in assistant messages
- const toolResultsById = new Map
-
- ()}
- .isStreaming=${state.isStreaming}
- .onCostClick=${this.onCostClick}
- >
-
-
-
- `;
- }
-
- private renderStats() {
- if (!this.session) return html``;
-
- 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`
-
-
- `;
- }
-
- override render() {
- if (!this.session)
- return html`
- ${this.showThemeToggle ? html`
-
- ${totalsText
- ? this.onCostClick
- ? html`${totalsText}`
- : html`${totalsText}`
- : ""}
-
-
- ${i18n("No session set")}
-
`;
-
- const session = this.session;
- const state = this.session.state;
- return html`
-
-
-
- `;
- }
-}
-
-// Register custom element with guard
-if (!customElements.get("agent-interface")) {
- customElements.define("agent-interface", AgentInterface);
-}
diff --git a/packages/web-ui/src/components/AttachmentTile.ts b/packages/web-ui/src/components/AttachmentTile.ts
deleted file mode 100644
index 7139a2e..0000000
--- a/packages/web-ui/src/components/AttachmentTile.ts
+++ /dev/null
@@ -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`
-
-
-
-
- ${this.renderMessages()}
-
-
-
- {
- this.sendMessage(input, attachments);
- }}
- .onAbort=${() => session.abort()}
- .onModelSelect=${() => {
- ModelSelector.open(state.model, (model) =>
- session.setModel(model),
- );
- }}
- .onThinkingChange=${this.enableThinkingSelector
- ? (level: "off" | "minimal" | "low" | "medium" | "high") => {
- session.setThinkingLevel(level);
- }
- : undefined}
- >
- ${this.renderStats()}
-
-
- ${hasPreview
- ? html`
-
- `;
- }
-}
diff --git a/packages/web-ui/src/components/ConsoleBlock.ts b/packages/web-ui/src/components/ConsoleBlock.ts
deleted file mode 100644
index ffcb329..0000000
--- a/packages/web-ui/src/components/ConsoleBlock.ts
+++ /dev/null
@@ -1,80 +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`
-
- 
- ${isPdf
- ? html`
-
-
- `
- : html`
-
-
-
- `
- : ""}
-
- ${i18n("PDF")}
-
-
- ${getDocumentIcon()}
-
- `}
- ${this.showDelete
- ? html`
-
- `
- : ""}
-
- ${this.attachment.fileName.length > 10
- ? `${this.attachment.fileName.substring(0, 8)}...`
- : this.attachment.fileName}
-
-
-
- `;
- }
-}
-
-// Register custom element
-if (!customElements.get("console-block")) {
- customElements.define("console-block", ConsoleBlock);
-}
diff --git a/packages/web-ui/src/components/CustomProviderCard.ts b/packages/web-ui/src/components/CustomProviderCard.ts
deleted file mode 100644
index ee6edd4..0000000
--- a/packages/web-ui/src/components/CustomProviderCard.ts
+++ /dev/null
@@ -1,99 +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`
-
- ${i18n("console")}
-
-
-
-
-
-${this.content || ""}
-
- ${i18n("Models")}: ${this.provider.models?.length || 0}
-
- `;
- }
-
- if (!this.status) return html``;
-
- const statusIcon =
- this.status.status === "connected"
- ? html`●`
- : this.status.status === "checking"
- ? html`●`
- : html`●`;
-
- const statusText =
- this.status.status === "connected"
- ? `${this.status.modelCount} ${i18n("models")}`
- : this.status.status === "checking"
- ? i18n("Checking...")
- : i18n("Disconnected");
-
- return html`
-
- ${statusIcon} ${statusText}
-
- `;
- }
-
- render(): TemplateResult {
- return html`
-
-
- `;
- }
-}
diff --git a/packages/web-ui/src/components/ExpandableSection.ts b/packages/web-ui/src/components/ExpandableSection.ts
deleted file mode 100644
index 1282921..0000000
--- a/packages/web-ui/src/components/ExpandableSection.ts
+++ /dev/null
@@ -1,48 +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`
-
-
-
-
-
- ${this.provider.name}
-
-
- ${this.provider.type}
- ${this.provider.baseUrl ? html` • ${this.provider.baseUrl}` : ""}
-
- ${this.renderStatus()}
-
- ${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"),
- })
- : ""}
-
-
-
- ${this.expanded
- ? html`
- `;
- }
-}
diff --git a/packages/web-ui/src/components/Input.ts b/packages/web-ui/src/components/Input.ts
deleted file mode 100644
index 1e6a0e3..0000000
--- a/packages/web-ui/src/components/Input.ts
+++ /dev/null
@@ -1,128 +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${this.capturedChildren}
`
- : ""}
-
- ${label
- ? html`
-
- `
- : ""}
-
- ${error
- ? html`${error}`
- : ""}
-
- `;
- },
-);
diff --git a/packages/web-ui/src/components/MessageEditor.ts b/packages/web-ui/src/components/MessageEditor.ts
deleted file mode 100644
index a8f2e02..0000000
--- a/packages/web-ui/src/components/MessageEditor.ts
+++ /dev/null
@@ -1,444 +0,0 @@
-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 "@mariozechner/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 "@mariozechner/pi-agent-core";
-
-@customElement("message-editor")
-export class MessageEditor extends LitElement {
- private _value = "";
- private textareaRef = createRef
-
- ${this.isDragging
- ? html`
-
- `;
- }
-}
diff --git a/packages/web-ui/src/components/MessageList.ts b/packages/web-ui/src/components/MessageList.ts
deleted file mode 100644
index 58d3062..0000000
--- a/packages/web-ui/src/components/MessageList.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { AgentMessage, AgentTool } from "@mariozechner/pi-agent-core";
-import type {
- AssistantMessage as AssistantMessageType,
- ToolResultMessage as ToolResultMessageType,
-} from "@mariozechner/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
-
- `
- : ""}
-
-
- ${this.attachments.length > 0
- ? html`
-
- ${i18n("Drop files here")}
-
-
- ${this.attachments.map(
- (attachment) => html`
- this.removeFile(attachment.id)}
- >
- `,
- )}
-
- `
- : ""}
-
-
-
-
-
-
-
-
-
-
-
- ${this.showAttachmentButton
- ? this.processingFiles
- ? html`
-
-
-
-
- ${icon(
- Loader2,
- "sm",
- "animate-spin text-muted-foreground",
- )}
-
- `
- : 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,
- })}
- `
- : ""}
-
- ${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")}
- ${this.currentModel.id}
- `,
- 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`
-
- ${icon(Send, "sm")}
-
`,
- className: "h-8 w-8",
- })}
- `}
-
- ${repeat(
- items,
- (it) => it.key,
- (it) => it.template,
- )}
-
`;
- }
-}
-
-// Register custom element
-if (!customElements.get("message-list")) {
- customElements.define("message-list", MessageList);
-}
diff --git a/packages/web-ui/src/components/Messages.ts b/packages/web-ui/src/components/Messages.ts
deleted file mode 100644
index df5256f..0000000
--- a/packages/web-ui/src/components/Messages.ts
+++ /dev/null
@@ -1,436 +0,0 @@
-import type {
- AssistantMessage as AssistantMessageType,
- ImageContent,
- TextContent,
- ToolCall,
- ToolResultMessage as ToolResultMessageType,
- UserMessage as UserMessageType,
-} from "@mariozechner/pi-ai";
-import { html, LitElement, type TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { renderTool } from "../tools/index.js";
-import type { Attachment } from "../utils/attachment-utils.js";
-import { formatUsage } from "../utils/format.js";
-import { i18n } from "../utils/i18n.js";
-import "./ThinkingBlock.js";
-import type { AgentTool } from "@mariozechner/pi-agent-core";
-
-export type UserMessageWithAttachments = {
- role: "user-with-attachments";
- content: string | (TextContent | ImageContent)[];
- timestamp: number;
- attachments?: Attachment[];
-};
-
-// Artifact message type for session persistence
-export interface ArtifactMessage {
- role: "artifact";
- action: "create" | "update" | "delete";
- filename: string;
- content?: string;
- title?: string;
- timestamp: string;
-}
-
-declare module "@mariozechner/pi-agent-core" {
- interface CustomAgentMessages {
- "user-with-attachments": UserMessageWithAttachments;
- artifact: ArtifactMessage;
- }
-}
-
-@customElement("user-message")
-export class UserMessage extends LitElement {
- @property({ type: Object }) message!:
- | UserMessageWithAttachments
- | UserMessageType;
-
- protected override createRenderRoot(): HTMLElement | DocumentFragment {
- return this;
- }
-
- override connectedCallback(): void {
- super.connectedCallback();
- this.style.display = "block";
- }
-
- override render() {
- const content =
- typeof this.message.content === "string"
- ? this.message.content
- : this.message.content.find((c) => c.type === "text")?.text || "";
-
- return html`
-
-
-
- `;
- }
-}
-
-@customElement("assistant-message")
-export class AssistantMessage extends LitElement {
- @property({ type: Object }) message!: AssistantMessageType;
- @property({ type: Array }) tools?: AgentTool
- ${orderedParts.length
- ? html`
- `;
- }
-}
-
-@customElement("tool-message-debug")
-export class ToolMessageDebugView extends LitElement {
- @property({ type: Object }) callArgs: any;
- @property({ type: Object }) result?: ToolResultMessageType;
- @property({ type: Boolean }) hasResult: boolean = false;
-
- protected override createRenderRoot(): HTMLElement | DocumentFragment {
- return this; // light DOM for shared styles
- }
-
- override connectedCallback(): void {
- super.connectedCallback();
- this.style.display = "block";
- }
-
- private pretty(value: unknown): { content: string; isJson: boolean } {
- try {
- if (typeof value === "string") {
- const maybeJson = JSON.parse(value);
- return { content: JSON.stringify(maybeJson, null, 2), isJson: true };
- }
- return { content: JSON.stringify(value, null, 2), isJson: true };
- } catch {
- return {
- content: typeof value === "string" ? value : String(value),
- isJson: false,
- };
- }
- }
-
- override render() {
- const textOutput =
- this.result?.content
- ?.filter((c) => c.type === "text")
- .map((c: any) => c.text)
- .join("\n") || "";
- const output = this.pretty(textOutput);
- const details = this.pretty(this.result?.details);
-
- return html`
- ${orderedParts}
`
- : ""}
- ${this.message.usage && !this.isStreaming
- ? this.onCostClick
- ? html`
-
- ${formatUsage(this.message.usage)}
-
- `
- : html`
-
- ${formatUsage(this.message.usage)}
-
- `
- : ""}
- ${this.message.stopReason === "error" && this.message.errorMessage
- ? html`
-
- ${i18n("Error:")} ${this.message.errorMessage}
-
- `
- : ""}
- ${this.message.stopReason === "aborted"
- ? html`${i18n("Request aborted")}`
- : ""}
-
-
- `;
- }
-}
-
-@customElement("tool-message")
-export class ToolMessage extends LitElement {
- @property({ type: Object }) toolCall!: ToolCall;
- @property({ type: Object }) tool?: AgentTool
-
-
- ${i18n("Call")}
-
-
-
-
- ${i18n("Result")}
-
- ${this.hasResult
- ? html`
- ${i18n("(no result)")}
-
`}
-
- ${renderResult.content}
-
- `;
- }
-}
-
-@customElement("aborted-message")
-export class AbortedMessage extends LitElement {
- protected override createRenderRoot(): HTMLElement | DocumentFragment {
- return this;
- }
-
- override connectedCallback(): void {
- super.connectedCallback();
- this.style.display = "block";
- }
-
- protected override render(): unknown {
- return html`${i18n("Request aborted")}`;
- }
-}
-
-// ============================================================================
-// Default Message Transformer
-// ============================================================================
-
-import type { AgentMessage } from "@mariozechner/pi-agent-core";
-import type { Message } from "@mariozechner/pi-ai";
-
-/**
- * Convert attachments to content blocks for LLM.
- * - Images become ImageContent blocks
- * - Documents with extractedText become TextContent blocks with filename header
- */
-export function convertAttachments(
- attachments: Attachment[],
-): (TextContent | ImageContent)[] {
- const content: (TextContent | ImageContent)[] = [];
- for (const attachment of attachments) {
- if (attachment.type === "image") {
- content.push({
- type: "image",
- data: attachment.content,
- mimeType: attachment.mimeType,
- } as ImageContent);
- } else if (attachment.type === "document" && attachment.extractedText) {
- content.push({
- type: "text",
- text: `\n\n[Document: ${attachment.fileName}]\n${attachment.extractedText}`,
- } as TextContent);
- }
- }
- return content;
-}
-
-/**
- * Check if a message is a UserMessageWithAttachments.
- */
-export function isUserMessageWithAttachments(
- msg: AgentMessage,
-): msg is UserMessageWithAttachments {
- return (msg as UserMessageWithAttachments).role === "user-with-attachments";
-}
-
-/**
- * Check if a message is an ArtifactMessage.
- */
-export function isArtifactMessage(msg: AgentMessage): msg is ArtifactMessage {
- return (msg as ArtifactMessage).role === "artifact";
-}
-
-/**
- * Default convertToLlm for web-ui apps.
- *
- * Handles:
- * - UserMessageWithAttachments: converts to user message with content blocks
- * - ArtifactMessage: filtered out (UI-only, for session reconstruction)
- * - Standard LLM messages (user, assistant, toolResult): passed through
- */
-export function defaultConvertToLlm(messages: AgentMessage[]): Message[] {
- return messages
- .filter((m) => {
- // Filter out artifact messages - they're for session reconstruction only
- if (isArtifactMessage(m)) {
- return false;
- }
- return true;
- })
- .map((m): Message | null => {
- // Convert user-with-attachments to user message with content blocks
- if (isUserMessageWithAttachments(m)) {
- const textContent: (TextContent | ImageContent)[] =
- typeof m.content === "string"
- ? [{ type: "text", text: m.content }]
- : [...m.content];
-
- if (m.attachments) {
- textContent.push(...convertAttachments(m.attachments));
- }
-
- return {
- role: "user",
- content: textContent,
- timestamp: m.timestamp,
- } as Message;
- }
-
- // Pass through standard LLM roles
- if (
- m.role === "user" ||
- m.role === "assistant" ||
- m.role === "toolResult"
- ) {
- return m as Message;
- }
-
- // Filter out unknown message types
- return null;
- })
- .filter((m): m is Message => m !== null);
-}
diff --git a/packages/web-ui/src/components/ProviderKeyInput.ts b/packages/web-ui/src/components/ProviderKeyInput.ts
deleted file mode 100644
index e4ccc71..0000000
--- a/packages/web-ui/src/components/ProviderKeyInput.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { i18n } from "@mariozechner/mini-lit";
-import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
-import { Button } from "@mariozechner/mini-lit/dist/Button.js";
-import { type Context, complete, getModel } from "@mariozechner/pi-ai";
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { getAppStorage } from "../storage/app-storage.js";
-import { applyProxyIfNeeded } from "../utils/proxy-utils.js";
-import { Input } from "./Input.js";
-
-// Test models for each provider
-const TEST_MODELS: Record
-
- `;
- }
-}
diff --git a/packages/web-ui/src/components/SandboxedIframe.ts b/packages/web-ui/src/components/SandboxedIframe.ts
deleted file mode 100644
index 4ac92dd..0000000
--- a/packages/web-ui/src/components/SandboxedIframe.ts
+++ /dev/null
@@ -1,672 +0,0 @@
-import { LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { ConsoleRuntimeProvider } from "./sandbox/ConsoleRuntimeProvider.js";
-import { RuntimeMessageBridge } from "./sandbox/RuntimeMessageBridge.js";
-import {
- type MessageConsumer,
- RUNTIME_MESSAGE_ROUTER,
-} from "./sandbox/RuntimeMessageRouter.js";
-import type { SandboxRuntimeProvider } from "./sandbox/SandboxRuntimeProvider.js";
-
-export interface SandboxFile {
- fileName: string;
- content: string | Uint8Array;
- mimeType: string;
-}
-
-export interface SandboxResult {
- success: boolean;
- console: Array<{ type: string; text: string }>;
- files?: SandboxFile[];
- error?: { message: string; stack: string };
- returnValue?: any;
-}
-
-/**
- * Function that returns the URL to the sandbox HTML file.
- * Used in browser extensions to load sandbox.html via chrome.runtime.getURL().
- */
-export type SandboxUrlProvider = () => string;
-
-/**
- * Configuration for prepareHtmlDocument
- */
-export interface PrepareHtmlOptions {
- /** True if this is an HTML artifact (inject into existing HTML), false if REPL (wrap in HTML) */
- isHtmlArtifact: boolean;
- /** True if this is a standalone download (no runtime bridge, no navigation interceptor) */
- isStandalone?: boolean;
-}
-
-/**
- * Escape HTML special sequences in code to prevent premature tag closure
- * @param code Code that will be injected into in user code to prevent premature tag closure
- const escapedUserCode = escapeScriptContent(userCode);
-
- return `
-
-
- ${runtime}
-
-
-
-
-`;
- }
- }
-
- /**
- * Generate runtime script from providers
- * @param sandboxId Unique sandbox ID
- * @param providers Runtime providers
- * @param isStandalone If true, skip runtime bridge and navigation interceptor (for standalone downloads)
- */
- private getRuntimeScript(
- sandboxId: string,
- providers: SandboxRuntimeProvider[] = [],
- isStandalone: boolean = false,
- ): string {
- // Collect all data from providers
- const allData: Record
- ${this.provider}
- ${this.testing
- ? Badge({ children: i18n("Testing..."), variant: "secondary" })
- : this.hasKey
- ? html`✓`
- : ""}
- ${this.failed
- ? Badge({ children: i18n("✗ Invalid"), variant: "destructive" })
- : ""}
-
-
- ${Input({
- type: "password",
- placeholder: this.hasKey ? "••••••••••••" : i18n("Enter API key"),
- value: this.keyInput,
- onInput: (e: Event) => {
- this.keyInput = (e.target as HTMLInputElement).value;
- this.inputChanged = true;
- this.requestUpdate();
- },
- className: "flex-1",
- })}
- ${Button({
- onClick: () => this.saveKey(),
- variant: "default",
- size: "sm",
- disabled:
- !this.keyInput ||
- this.testing ||
- (this.hasKey && !this.inputChanged),
- children: i18n("Save"),
- })}
-
-
-
-
`;
- return html``; // Empty until a message is set
- }
- const msg = this._message;
-
- if (msg.role === "toolResult") {
- // Skip standalone tool result in streaming; the stable list will render paired tool-message
- return html``;
- } else if (msg.role === "user" || msg.role === "user-with-attachments") {
- // Skip standalone tool result in streaming; the stable list will render it immediiately
- return html``;
- } else if (msg.role === "assistant") {
- // Assistant message - render inline tool messages during streaming
- return html`
-
-
- `;
- }
- }
-}
-
-// Register custom element
-if (!customElements.get("streaming-message-container")) {
- customElements.define(
- "streaming-message-container",
- StreamingMessageContainer,
- );
-}
diff --git a/packages/web-ui/src/components/ThinkingBlock.ts b/packages/web-ui/src/components/ThinkingBlock.ts
deleted file mode 100644
index aac40e3..0000000
--- a/packages/web-ui/src/components/ThinkingBlock.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { icon } from "@mariozechner/mini-lit";
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { ChevronRight } from "lucide";
-
-@customElement("thinking-block")
-export class ThinkingBlock extends LitElement {
- @property() content!: string;
- @property({ type: Boolean }) isStreaming = false;
- @state() private isExpanded = false;
-
- protected override createRenderRoot(): HTMLElement | DocumentFragment {
- return this;
- }
-
- override connectedCallback(): void {
- super.connectedCallback();
- this.style.display = "block";
- }
-
- private toggleExpanded() {
- this.isExpanded = !this.isExpanded;
- }
-
- override render() {
- const shimmerClasses = this.isStreaming
- ? "animate-shimmer bg-gradient-to-r from-muted-foreground via-foreground to-muted-foreground bg-[length:200%_100%] bg-clip-text text-transparent"
- : "";
-
- return html`
-
-
- `;
- }
-}
diff --git a/packages/web-ui/src/components/message-renderer-registry.ts b/packages/web-ui/src/components/message-renderer-registry.ts
deleted file mode 100644
index d593f56..0000000
--- a/packages/web-ui/src/components/message-renderer-registry.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { AgentMessage } from "@mariozechner/pi-agent-core";
-import type { TemplateResult } from "lit";
-
-// Extract role type from AppMessage union
-export type MessageRole = AgentMessage["role"];
-
-// Generic message renderer typed to specific message type
-export interface MessageRenderer
- ${icon(ChevronRight, "sm")}
- Thinking...
-
- ${this.isExpanded
- ? html`
-
-
- `;
- }
-
- private renderToggle() {
- if (!this.attachment) return html``;
-
- const fileType = this.getFileType();
- const hasExtractedText = !!this.attachment.extractedText;
- const showToggle =
- fileType !== "image" &&
- fileType !== "text" &&
- fileType !== "pptx" &&
- hasExtractedText;
-
- if (!showToggle) return html``;
-
- const fileTypeLabel = this.getFileTypeLabel();
-
- return html`
- e.stopPropagation()}
- >
-
-
-
-
-
-
- ${this.attachment.fileName}
-
-
- ${this.renderToggle()}
- ${Button({
- variant: "ghost",
- size: "icon",
- onClick: this.handleDownload,
- children: icon(Download, "sm"),
- className: "h-8 w-8",
- })}
- ${Button({
- variant: "ghost",
- size: "icon",
- onClick: () => this.close(),
- children: icon(X, "sm"),
- className: "h-8 w-8",
- })}
-
- e.stopPropagation()}
- >
- ${this.renderContent()}
-
-
-
- `;
- }
-
- // Content based on file type
- return this.renderFileContent();
- }
-
- private renderFileContent() {
- if (!this.attachment) return html``;
-
- const fileType = this.getFileType();
-
- // Show extracted text if toggled
- if (this.showExtractedText && fileType !== "image") {
- return html`
- ${i18n("Error loading file")}
- ${this.error}
-
-
- `;
- }
-
- // Render based on file type
- switch (fileType) {
- case "image": {
- const imageUrl = `data:${this.attachment.mimeType};base64,${this.attachment.content}`;
- return html`
-
-${this.attachment.extractedText || i18n("No text content available")}
-
-
- `;
- }
- }
-
- override async updated(changedProperties: Map
-${this.attachment.extractedText || i18n("No content available")}
-
-
- `;
- }
-}
-
-customElements.define("custom-provider-dialog", CustomProviderDialog);
diff --git a/packages/web-ui/src/dialogs/ModelSelector.ts b/packages/web-ui/src/dialogs/ModelSelector.ts
deleted file mode 100644
index 898c31c..0000000
--- a/packages/web-ui/src/dialogs/ModelSelector.ts
+++ /dev/null
@@ -1,367 +0,0 @@
-import { icon } from "@mariozechner/mini-lit";
-import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
-import { Button } from "@mariozechner/mini-lit/dist/Button.js";
-import { DialogHeader } from "@mariozechner/mini-lit/dist/Dialog.js";
-import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
-import {
- getModels,
- getProviders,
- type Model,
- modelsAreEqual,
-} from "@mariozechner/pi-ai";
-import { html, type PropertyValues, type TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { Brain, Image as ImageIcon } from "lucide";
-import { Input } from "../components/Input.js";
-import { getAppStorage } from "../storage/app-storage.js";
-import type { AutoDiscoveryProviderType } from "../storage/stores/custom-providers-store.js";
-import { formatModelCost } from "../utils/format.js";
-import { i18n } from "../utils/i18n.js";
-import { discoverModels } from "../utils/model-discovery.js";
-
-@customElement("agent-model-selector")
-export class ModelSelector extends DialogBase {
- @state() currentModel: Model
-
-
- - ${this.provider ? i18n("Edit Provider") : i18n("Add Provider")} -
-
-
-
-
-
-
- ${Label({
- htmlFor: "provider-name",
- children: i18n("Provider Name"),
- })}
- ${Input({
- value: this.name,
- placeholder: i18n("e.g., My Ollama Server"),
- onInput: (e: Event) => {
- this.name = (e.target as HTMLInputElement).value;
- this.requestUpdate();
- },
- })}
-
-
-
- ${Label({
- htmlFor: "provider-type",
- children: i18n("Provider Type"),
- })}
- ${Select({
- value: this.type,
- options: providerTypes.map((pt) => ({
- value: pt.value,
- label: pt.label,
- })),
- onChange: (value: string) => {
- this.type = value as CustomProviderType;
- this.baseUrl = "";
- this.updateDefaultBaseUrl();
- this.requestUpdate();
- },
- width: "100%",
- })}
-
-
-
- ${Label({ htmlFor: "base-url", children: i18n("Base URL") })}
- ${Input({
- value: this.baseUrl,
- placeholder: i18n("e.g., http://localhost:11434"),
- onInput: (e: Event) => {
- this.baseUrl = (e.target as HTMLInputElement).value;
- this.requestUpdate();
- },
- })}
-
-
-
- ${Label({
- htmlFor: "api-key",
- children: i18n("API Key (Optional)"),
- })}
- ${Input({
- type: "password",
- value: this.apiKey,
- placeholder: i18n("Leave empty if not required"),
- onInput: (e: Event) => {
- this.apiKey = (e.target as HTMLInputElement).value;
- this.requestUpdate();
- },
- })}
-
-
- ${this.isAutoDiscoveryType()
- ? html`
-
- ${Button({
- onClick: () => this.testConnection(),
- variant: "outline",
- disabled: this.testing || !this.baseUrl,
- children: this.testing
- ? i18n("Testing...")
- : i18n("Test Connection"),
- })}
- ${this.testError
- ? html`
-
- `
- : html`
- ${this.testError}
-
- `
- : ""}
- ${this.discoveredModels.length > 0
- ? html`
-
- ${i18n("Discovered")}
- ${this.discoveredModels.length} ${i18n("models")}:
-
- `
- : ""}
- -
- ${this.discoveredModels
- .slice(0, 5)
- .map((model) => html`
- ${model.name} `)} - ${this.discoveredModels.length > 5 - ? html`
- - ...${i18n("and")} - ${this.discoveredModels.length - 5} - ${i18n("more")} - ` - : ""} -
- ${i18n(
- "For manual provider types, add models after saving the provider.",
- )}
-
`}
-
- ${Button({
- onClick: () => this.close(),
- variant: "ghost",
- children: i18n("Cancel"),
- })}
- ${Button({
- onClick: () => this.save(),
- variant: "default",
- disabled: !this.name || !this.baseUrl,
- children: i18n("Save"),
- })}
-
-
- ${DialogHeader({ title: i18n("Select Model") })}
- ${Input({
- placeholder: i18n("Search models..."),
- value: this.searchQuery,
- inputRef: this.searchInputRef,
- onInput: (e: Event) => {
- this.searchQuery = (e.target as HTMLInputElement).value;
- this.selectedIndex = 0;
- // Reset scroll position when search changes
- if (this.scrollContainerRef.value) {
- this.scrollContainerRef.value.scrollTop = 0;
- }
- },
- })}
-
-
-
-
- ${Button({
- variant: this.filterThinking ? "default" : "secondary",
- size: "sm",
- onClick: () => {
- this.filterThinking = !this.filterThinking;
- this.selectedIndex = 0;
- if (this.scrollContainerRef.value) {
- this.scrollContainerRef.value.scrollTop = 0;
- }
- },
- className: "rounded-full",
- children: html`${icon(Brain, "sm")} ${i18n("Thinking")}`,
- })}
- ${Button({
- variant: this.filterVision ? "default" : "secondary",
- size: "sm",
- onClick: () => {
- this.filterVision = !this.filterVision;
- this.selectedIndex = 0;
- if (this.scrollContainerRef.value) {
- this.scrollContainerRef.value.scrollTop = 0;
- }
- },
- className: "rounded-full",
- children: html`${icon(ImageIcon, "sm")} ${i18n("Vision")}`,
- })}
-
-
- ${filteredModels.map(({ provider, id, model }, index) => {
- const isCurrent = modelsAreEqual(this.currentModel, model);
- const isSelected = index === this.selectedIndex;
- return html`
-
- `;
- })}
-
- `;
- }
-}
diff --git a/packages/web-ui/src/dialogs/PersistentStorageDialog.ts b/packages/web-ui/src/dialogs/PersistentStorageDialog.ts
deleted file mode 100644
index 875682c..0000000
--- a/packages/web-ui/src/dialogs/PersistentStorageDialog.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import { Button } from "@mariozechner/mini-lit/dist/Button.js";
-import {
- DialogContent,
- DialogHeader,
-} from "@mariozechner/mini-lit/dist/Dialog.js";
-import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
-import { html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { i18n } from "../utils/i18n.js";
-
-@customElement("persistent-storage-dialog")
-export class PersistentStorageDialog extends DialogBase {
- @state() private requesting = false;
-
- private resolvePromise?: (userApproved: boolean) => void;
-
- protected modalWidth = "min(500px, 90vw)";
- protected modalHeight = "auto";
-
- /**
- * Request persistent storage permission.
- * Returns true if browser granted persistent storage, false otherwise.
- */
- static async request(): Promise
-
-
-
-
-
-
-
-
-
-
- - ${i18n("Why is this needed?")} -
-- ${i18n( - "Without persistent storage, your browser may delete saved conversations when it needs disk space. Granting this permission ensures your chat history is preserved.", - )} -
-
-
- ${i18n("What this means:")}
--
-
- - ${i18n( - "Your conversations will be saved locally in your browser", - )} - -
- - ${i18n( - "Data will not be deleted automatically to free up space", - )} - -
- - ${i18n("You can still manually clear data at any time")} - -
- ${i18n("No data is sent to external servers")} -
- ${Button({
- variant: "outline",
- onClick: () => this.handleDeny(),
- disabled: this.requesting,
- children: i18n("Continue Anyway"),
- })}
- ${Button({
- variant: "default",
- onClick: () => this.handleGrant(),
- disabled: this.requesting,
- children: this.requesting
- ? i18n("Requesting...")
- : i18n("Grant Permission"),
- })}
-
- `,
- })}
- `;
- }
-}
diff --git a/packages/web-ui/src/dialogs/ProvidersModelsTab.ts b/packages/web-ui/src/dialogs/ProvidersModelsTab.ts
deleted file mode 100644
index 7638974..0000000
--- a/packages/web-ui/src/dialogs/ProvidersModelsTab.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-import { i18n } from "@mariozechner/mini-lit";
-import { Select } from "@mariozechner/mini-lit/dist/Select.js";
-import { getProviders } from "@mariozechner/pi-ai";
-import { html, type TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import "../components/CustomProviderCard.js";
-import "../components/ProviderKeyInput.js";
-import { getAppStorage } from "../storage/app-storage.js";
-import type {
- AutoDiscoveryProviderType,
- CustomProvider,
- CustomProviderType,
-} from "../storage/stores/custom-providers-store.js";
-import { discoverModels } from "../utils/model-discovery.js";
-import { CustomProviderDialog } from "./CustomProviderDialog.js";
-import { SettingsTab } from "./SettingsDialog.js";
-
-@customElement("providers-models-tab")
-export class ProvidersModelsTab extends SettingsTab {
- @state() private customProviders: CustomProvider[] = [];
- @state() private providerStatus: Map<
- string,
- { modelCount: number; status: "connected" | "disconnected" | "checking" }
- > = new Map();
-
- override async connectedCallback() {
- super.connectedCallback();
- await this.loadCustomProviders();
- }
-
- private async loadCustomProviders() {
- try {
- const storage = getAppStorage();
- this.customProviders = await storage.customProviders.getAll();
-
- // Check status for auto-discovery providers
- for (const provider of this.customProviders) {
- const isAutoDiscovery =
- provider.type === "ollama" ||
- provider.type === "llama.cpp" ||
- provider.type === "vllm" ||
- provider.type === "lmstudio";
- if (isAutoDiscovery) {
- this.checkProviderStatus(provider);
- }
- }
- } catch (error) {
- console.error("Failed to load custom providers:", error);
- }
- }
-
- getTabName(): string {
- return "Providers & Models";
- }
-
- private async checkProviderStatus(provider: CustomProvider) {
- this.providerStatus.set(provider.id, { modelCount: 0, status: "checking" });
- this.requestUpdate();
-
- try {
- const models = await discoverModels(
- provider.type as AutoDiscoveryProviderType,
- provider.baseUrl,
- provider.apiKey,
- );
-
- this.providerStatus.set(provider.id, {
- modelCount: models.length,
- status: "connected",
- });
- } catch (_error) {
- this.providerStatus.set(provider.id, {
- modelCount: 0,
- status: "disconnected",
- });
- }
- this.requestUpdate();
- }
-
- private renderKnownProviders(): TemplateResult {
- const providers = getProviders();
-
- return html`
-
-
- `;
- }
-
- private renderCustomProviders(): TemplateResult {
- const isAutoDiscovery = (type: string) =>
- type === "ollama" ||
- type === "llama.cpp" ||
- type === "vllm" ||
- type === "lmstudio";
-
- return html`
-
-
- - Cloud Providers -
-- Cloud LLM providers with predefined models. API keys are stored - locally in your browser. -
-
- ${providers.map(
- (provider) => html`
-
-
-
- `;
- }
-
- private async addCustomProvider(type: CustomProviderType) {
- await CustomProviderDialog.open(undefined, type, async () => {
- await this.loadCustomProviders();
- this.requestUpdate();
- });
- }
-
- private async editProvider(provider: CustomProvider) {
- await CustomProviderDialog.open(provider, undefined, async () => {
- await this.loadCustomProviders();
- this.requestUpdate();
- });
- }
-
- private async refreshProvider(provider: CustomProvider) {
- this.providerStatus.set(provider.id, { modelCount: 0, status: "checking" });
- this.requestUpdate();
-
- try {
- const models = await discoverModels(
- provider.type as AutoDiscoveryProviderType,
- provider.baseUrl,
- provider.apiKey,
- );
-
- this.providerStatus.set(provider.id, {
- modelCount: models.length,
- status: "connected",
- });
- this.requestUpdate();
-
- console.log(`Refreshed ${models.length} models from ${provider.name}`);
- } catch (error) {
- this.providerStatus.set(provider.id, {
- modelCount: 0,
- status: "disconnected",
- });
- this.requestUpdate();
-
- console.error(`Failed to refresh provider ${provider.name}:`, error);
- alert(
- `Failed to refresh provider: ${error instanceof Error ? error.message : String(error)}`,
- );
- }
- }
-
- private async deleteProvider(provider: CustomProvider) {
- if (!confirm("Are you sure you want to delete this provider?")) {
- return;
- }
-
- try {
- const storage = getAppStorage();
- await storage.customProviders.delete(provider.id);
- await this.loadCustomProviders();
- this.requestUpdate();
- } catch (error) {
- console.error("Failed to delete provider:", error);
- }
- }
-
- render(): TemplateResult {
- return html`
-
-
-
- ${this.customProviders.length === 0
- ? html`
-
-
- ${Select({
- placeholder: i18n("Add Provider"),
- options: [
- { value: "ollama", label: "Ollama" },
- { value: "llama.cpp", label: "llama.cpp" },
- { value: "vllm", label: "vLLM" },
- { value: "lmstudio", label: "LM Studio" },
- {
- value: "openai-completions",
- label: i18n("OpenAI Completions Compatible"),
- },
- {
- value: "openai-responses",
- label: i18n("OpenAI Responses Compatible"),
- },
- {
- value: "anthropic-messages",
- label: i18n("Anthropic Messages Compatible"),
- },
- ],
- onChange: (value: string) =>
- this.addCustomProvider(value as CustomProviderType),
- variant: "outline",
- size: "sm",
- })}
- - Custom Providers -
-- User-configured servers with auto-discovered or manually defined - models. -
-
- No custom providers configured. Click 'Add Provider' to get
- started.
-
- `
- : html`
-
- ${this.customProviders.map(
- (provider) => html`
-
- this.refreshProvider(p)}
- .onEdit=${(p: CustomProvider) => this.editProvider(p)}
- .onDelete=${(p: CustomProvider) => this.deleteProvider(p)}
- >
- `,
- )}
-
- `}
-
- ${this.renderKnownProviders()}
-
- ${this.renderCustomProviders()}
-
- `;
- }
-}
diff --git a/packages/web-ui/src/dialogs/SessionListDialog.ts b/packages/web-ui/src/dialogs/SessionListDialog.ts
deleted file mode 100644
index 240f188..0000000
--- a/packages/web-ui/src/dialogs/SessionListDialog.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import {
- DialogContent,
- DialogHeader,
-} from "@mariozechner/mini-lit/dist/Dialog.js";
-import { DialogBase } from "@mariozechner/mini-lit/dist/DialogBase.js";
-import { html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { getAppStorage } from "../storage/app-storage.js";
-import type { SessionMetadata } from "../storage/types.js";
-import { formatUsage } from "../utils/format.js";
-import { i18n } from "../utils/i18n.js";
-
-@customElement("session-list-dialog")
-export class SessionListDialog extends DialogBase {
- @state() private sessions: SessionMetadata[] = [];
- @state() private loading = true;
-
- private onSelectCallback?: (sessionId: string) => void;
- private onDeleteCallback?: (sessionId: string) => void;
- private deletedSessions = new Set
- ${this.loading
- ? html`
- `,
- })}
- `;
- }
-}
diff --git a/packages/web-ui/src/dialogs/SettingsDialog.ts b/packages/web-ui/src/dialogs/SettingsDialog.ts
deleted file mode 100644
index edad4da..0000000
--- a/packages/web-ui/src/dialogs/SettingsDialog.ts
+++ /dev/null
@@ -1,241 +0,0 @@
-import { i18n } from "@mariozechner/mini-lit";
-import {
- Dialog,
- DialogContent,
- DialogHeader,
-} from "@mariozechner/mini-lit/dist/Dialog.js";
-import { Input } from "@mariozechner/mini-lit/dist/Input.js";
-import { Label } from "@mariozechner/mini-lit/dist/Label.js";
-import { Switch } from "@mariozechner/mini-lit/dist/Switch.js";
-import { getProviders } from "@mariozechner/pi-ai";
-import { html, LitElement, type TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "../components/ProviderKeyInput.js";
-import { getAppStorage } from "../storage/app-storage.js";
-
-// Base class for settings tabs
-export abstract class SettingsTab extends LitElement {
- abstract getTabName(): string;
-
- protected createRenderRoot() {
- return this;
- }
-}
-
-// API Keys Tab
-@customElement("api-keys-tab")
-export class ApiKeysTab extends SettingsTab {
- getTabName(): string {
- return i18n("API Keys");
- }
-
- render(): TemplateResult {
- const providers = getProviders();
-
- return html`
-
- ${i18n("Loading...")}
-
`
- : this.sessions.length === 0
- ? html`
- ${i18n("No sessions yet")}
-
`
- : this.sessions.map(
- (session) => html`
- this.handleSelect(session.id)}
- >
-
- `,
- )}
-
-
-
-
- ${session.title}
-
-
- ${this.formatDate(session.lastModified)}
-
-
- ${session.messageCount} ${i18n("messages")} ·
- ${formatUsage(session.usage)}
-
-
-
- `;
- }
-}
-
-// Proxy Tab
-@customElement("proxy-tab")
-export class ProxyTab extends SettingsTab {
- @state() private proxyEnabled = false;
- @state() private proxyUrl = "http://localhost:3001";
-
- override async connectedCallback() {
- super.connectedCallback();
- // Load proxy settings when tab is connected
- try {
- const storage = getAppStorage();
- const enabled = await storage.settings.get- ${i18n( - "Configure API keys for LLM providers. Keys are stored locally in your browser.", - )} -
- ${providers.map( - (provider) => - html`
-
- `;
- }
-}
-
-@customElement("settings-dialog")
-export class SettingsDialog extends LitElement {
- @property({ type: Array, attribute: false }) tabs: SettingsTab[] = [];
- @state() private isOpen = false;
- @state() private activeTabIndex = 0;
-
- protected createRenderRoot() {
- return this;
- }
-
- static async open(tabs: SettingsTab[]) {
- const dialog = new SettingsDialog();
- dialog.tabs = tabs;
- dialog.isOpen = true;
- document.body.appendChild(dialog);
- }
-
- private setActiveTab(index: number) {
- this.activeTabIndex = index;
- }
-
- private renderSidebarItem(tab: SettingsTab, index: number): TemplateResult {
- const isActive = this.activeTabIndex === index;
- return html`
-
- `;
- }
-
- private renderMobileTab(tab: SettingsTab, index: number): TemplateResult {
- const isActive = this.activeTabIndex === index;
- return html`
-
- `;
- }
-
- render() {
- if (this.tabs.length === 0) {
- return html``;
- }
-
- return Dialog({
- isOpen: this.isOpen,
- onClose: () => {
- this.isOpen = false;
- this.remove();
- },
- width: "min(1000px, 90vw)",
- height: "min(800px, 90vh)",
- backdropClassName: "bg-black/50 backdrop-blur-sm",
- children: html`
- ${DialogContent({
- className: "h-full p-6",
- children: html`
- - ${i18n( - "Allows browser-based apps to bypass CORS restrictions when calling LLM providers. Required for Z-AI and Anthropic with OAuth token.", - )} -
- -
- ${i18n("Use CORS Proxy")}
- ${Switch({
- checked: this.proxyEnabled,
- onChange: (checked: boolean) => {
- this.proxyEnabled = checked;
- this.saveProxySettings();
- },
- })}
-
-
-
- ${Label({ children: i18n("Proxy URL") })}
- ${Input({
- type: "text",
- value: this.proxyUrl,
- disabled: !this.proxyEnabled,
- onInput: (e) => {
- this.proxyUrl = (e.target as HTMLInputElement).value;
- },
- onChange: () => this.saveProxySettings(),
- })}
-
-
- ${i18n(
- "Format: The proxy must accept requests as
-
-
- `,
- })}
- `,
- });
- }
-}
diff --git a/packages/web-ui/src/index.ts b/packages/web-ui/src/index.ts
deleted file mode 100644
index 6d675f3..0000000
--- a/packages/web-ui/src/index.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-// Main chat interface
-
-export type {
- Agent,
- AgentMessage,
- AgentState,
- ThinkingLevel,
-} from "@mariozechner/pi-agent-core";
-export type { Model } from "@mariozechner/pi-ai";
-export { ChatPanel } from "./ChatPanel.js";
-// Components
-export { AgentInterface } from "./components/AgentInterface.js";
-export { AttachmentTile } from "./components/AttachmentTile.js";
-export { ConsoleBlock } from "./components/ConsoleBlock.js";
-export { CustomProviderCard } from "./components/CustomProviderCard.js";
-export { ExpandableSection } from "./components/ExpandableSection.js";
-export { Input } from "./components/Input.js";
-export { MessageEditor } from "./components/MessageEditor.js";
-export { MessageList } from "./components/MessageList.js";
-// Message components
-export type {
- ArtifactMessage,
- UserMessageWithAttachments,
-} from "./components/Messages.js";
-export {
- AbortedMessage,
- AssistantMessage,
- convertAttachments,
- defaultConvertToLlm,
- isArtifactMessage,
- isUserMessageWithAttachments,
- ToolMessage,
- ToolMessageDebugView,
- UserMessage,
-} from "./components/Messages.js";
-// Message renderer registry
-export {
- getMessageRenderer,
- type MessageRenderer,
- type MessageRole,
- registerMessageRenderer,
- renderMessage,
-} from "./components/message-renderer-registry.js";
-export { ProviderKeyInput } from "./components/ProviderKeyInput.js";
-export {
- type SandboxFile,
- SandboxIframe,
- type SandboxResult,
- type SandboxUrlProvider,
-} from "./components/SandboxedIframe.js";
-export { StreamingMessageContainer } from "./components/StreamingMessageContainer.js";
-// Sandbox Runtime Providers
-export { ArtifactsRuntimeProvider } from "./components/sandbox/ArtifactsRuntimeProvider.js";
-export { AttachmentsRuntimeProvider } from "./components/sandbox/AttachmentsRuntimeProvider.js";
-export {
- type ConsoleLog,
- ConsoleRuntimeProvider,
-} from "./components/sandbox/ConsoleRuntimeProvider.js";
-export {
- type DownloadableFile,
- FileDownloadRuntimeProvider,
-} from "./components/sandbox/FileDownloadRuntimeProvider.js";
-export { RuntimeMessageBridge } from "./components/sandbox/RuntimeMessageBridge.js";
-export { RUNTIME_MESSAGE_ROUTER } from "./components/sandbox/RuntimeMessageRouter.js";
-export type { SandboxRuntimeProvider } from "./components/sandbox/SandboxRuntimeProvider.js";
-export { ThinkingBlock } from "./components/ThinkingBlock.js";
-export { ApiKeyPromptDialog } from "./dialogs/ApiKeyPromptDialog.js";
-export { AttachmentOverlay } from "./dialogs/AttachmentOverlay.js";
-// Dialogs
-export { ModelSelector } from "./dialogs/ModelSelector.js";
-export { PersistentStorageDialog } from "./dialogs/PersistentStorageDialog.js";
-export { ProvidersModelsTab } from "./dialogs/ProvidersModelsTab.js";
-export { SessionListDialog } from "./dialogs/SessionListDialog.js";
-export {
- ApiKeysTab,
- ProxyTab,
- SettingsDialog,
- SettingsTab,
-} from "./dialogs/SettingsDialog.js";
-// Prompts
-export {
- ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RO,
- ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RW,
- ATTACHMENTS_RUNTIME_DESCRIPTION,
-} from "./prompts/prompts.js";
-// Storage
-export {
- AppStorage,
- getAppStorage,
- setAppStorage,
-} from "./storage/app-storage.js";
-export { IndexedDBStorageBackend } from "./storage/backends/indexeddb-storage-backend.js";
-export { Store } from "./storage/store.js";
-export type {
- AutoDiscoveryProviderType,
- CustomProvider,
- CustomProviderType,
-} from "./storage/stores/custom-providers-store.js";
-export { CustomProvidersStore } from "./storage/stores/custom-providers-store.js";
-export { ProviderKeysStore } from "./storage/stores/provider-keys-store.js";
-export { SessionsStore } from "./storage/stores/sessions-store.js";
-export { SettingsStore } from "./storage/stores/settings-store.js";
-export type {
- IndexConfig,
- IndexedDBConfig,
- SessionData,
- SessionMetadata,
- StorageBackend,
- StorageTransaction,
- StoreConfig,
-} from "./storage/types.js";
-// Artifacts
-export { ArtifactElement } from "./tools/artifacts/ArtifactElement.js";
-export { ArtifactPill } from "./tools/artifacts/ArtifactPill.js";
-export {
- type Artifact,
- ArtifactsPanel,
- type ArtifactsParams,
-} from "./tools/artifacts/artifacts.js";
-export { ArtifactsToolRenderer } from "./tools/artifacts/artifacts-tool-renderer.js";
-export { HtmlArtifact } from "./tools/artifacts/HtmlArtifact.js";
-export { ImageArtifact } from "./tools/artifacts/ImageArtifact.js";
-export { MarkdownArtifact } from "./tools/artifacts/MarkdownArtifact.js";
-export { SvgArtifact } from "./tools/artifacts/SvgArtifact.js";
-export { TextArtifact } from "./tools/artifacts/TextArtifact.js";
-export {
- createExtractDocumentTool,
- extractDocumentTool,
-} from "./tools/extract-document.js";
-// Tools
-export {
- getToolRenderer,
- registerToolRenderer,
- renderTool,
- setShowJsonMode,
-} from "./tools/index.js";
-export {
- createJavaScriptReplTool,
- javascriptReplTool,
-} from "./tools/javascript-repl.js";
-export {
- renderCollapsibleHeader,
- renderHeader,
-} from "./tools/renderer-registry.js";
-export { BashRenderer } from "./tools/renderers/BashRenderer.js";
-export { CalculateRenderer } from "./tools/renderers/CalculateRenderer.js";
-// Tool renderers
-export { DefaultRenderer } from "./tools/renderers/DefaultRenderer.js";
-export { GetCurrentTimeRenderer } from "./tools/renderers/GetCurrentTimeRenderer.js";
-export type { ToolRenderer, ToolRenderResult } from "./tools/types.js";
-export type { Attachment } from "./utils/attachment-utils.js";
-// Utils
-export { loadAttachment } from "./utils/attachment-utils.js";
-export { clearAuthToken, getAuthToken } from "./utils/auth-token.js";
-export {
- formatCost,
- formatModelCost,
- formatTokenCount,
- formatUsage,
-} from "./utils/format.js";
-export { i18n, setLanguage, translations } from "./utils/i18n.js";
-export {
- applyProxyIfNeeded,
- createStreamFn,
- isCorsError,
- shouldUseProxyForProvider,
-} from "./utils/proxy-utils.js";
diff --git a/packages/web-ui/src/prompts/prompts.ts b/packages/web-ui/src/prompts/prompts.ts
deleted file mode 100644
index d8983c9..0000000
--- a/packages/web-ui/src/prompts/prompts.ts
+++ /dev/null
@@ -1,286 +0,0 @@
-/**
- * Centralized tool prompts/descriptions.
- * Each prompt is either a string constant or a template function.
- */
-
-// ============================================================================
-// JavaScript REPL Tool
-// ============================================================================
-
-export const JAVASCRIPT_REPL_TOOL_DESCRIPTION = (
- runtimeProviderDescriptions: string[],
-) => `# JavaScript REPL
-
-## Purpose
-Execute JavaScript code in a sandboxed browser environment with full Web APIs.
-
-## When to Use
-- Quick calculations or data transformations
-- Testing JavaScript code snippets in isolation
-- Processing data with libraries (XLSX, CSV, etc.)
-- Creating artifacts from data
-
-## Environment
-- ES2023+ JavaScript (async/await, optional chaining, nullish coalescing, etc.)
-- All browser APIs: DOM, Canvas, WebGL, Fetch, Web Workers, WebSockets, Crypto, etc.
-- Import any npm package: await import('https://esm.run/package-name')
-
-## Common Libraries
-- XLSX: const XLSX = await import('https://esm.run/xlsx');
-- CSV: const Papa = (await import('https://esm.run/papaparse')).default;
-- Chart.js: const Chart = (await import('https://esm.run/chart.js/auto')).default;
-- Three.js: const THREE = await import('https://esm.run/three');
-
-## Persistence between tool calls
-- Objects stored on global scope do not persist between calls.
-- Use artifacts as a key-value JSON object store:
- - Use createOrUpdateArtifact(filename, content) to persist data between calls. JSON objects are auto-stringified.
- - Use listArtifacts() and getArtifact(filename) to read persisted data. JSON files are auto-parsed to objects.
- - Prefer to use a single artifact throughout the session to store intermediate data (e.g. 'data.json').
-
-## Input
-- You have access to the user's attachments via listAttachments(), readTextAttachment(id), and readBinaryAttachment(id)
-- You have access to previously created artifacts via listArtifacts() and getArtifact(filename)
-
-## Output
-- All console.log() calls are captured for you to inspect. The user does not see these logs.
-- Create artifacts for file results (images, JSON, CSV, etc.) which persiste throughout the
- session and are accessible to you and the user.
-
-## Example
-const data = [10, 20, 15, 25];
-const sum = data.reduce((a, b) => a + b, 0);
-const avg = sum / data.length;
-console.log('Sum:', sum, 'Average:', avg);
-
-## Important Notes
-- Graphics: Use fixed dimensions (800x600), NOT window.innerWidth/Height
-- Chart.js: Set options: { responsive: false, animation: false }
-- Three.js: renderer.setSize(800, 600) with matching aspect ratio
-
-## Helper Functions (Automatically Available)
-
-These functions are injected into the execution environment and available globally:
-
-${runtimeProviderDescriptions.join("\n\n")}
-`;
-
-// ============================================================================
-// Artifacts Tool
-// ============================================================================
-
-export const ARTIFACTS_TOOL_DESCRIPTION = (
- runtimeProviderDescriptions: string[],
-) => `# Artifacts
-
-Create and manage persistent files that live alongside the conversation.
-
-## When to Use - Artifacts Tool vs REPL
-
-**Use artifacts tool when YOU are the author:**
-- Writing research summaries, analysis, ideas, documentation
-- Creating markdown notes for user to read
-- Building HTML applications/visualizations that present data
-- Creating HTML artifacts that render charts from programmatically generated data
-
-**Use repl + artifact storage functions when CODE processes data:**
-- Scraping workflows that extract and store data
-- Processing CSV/Excel files programmatically
-- Data transformation pipelines
-- Binary file generation requiring libraries (PDF, DOCX)
-
-**Pattern: REPL generates data → Artifacts tool creates HTML that visualizes it**
-Example: repl scrapes products → stores products.json → you author dashboard.html that reads products.json and renders Chart.js visualizations
-
-## Input
-- { action: "create", filename: "notes.md", content: "..." } - Create new file
-- { action: "update", filename: "notes.md", old_str: "...", new_str: "..." } - Update part of file (PREFERRED)
-- { action: "rewrite", filename: "notes.md", content: "..." } - Replace entire file (LAST RESORT)
-- { action: "get", filename: "data.json" } - Retrieve file content
-- { action: "delete", filename: "old.csv" } - Delete file
-- { action: "htmlArtifactLogs", filename: "app.html" } - Get console logs from HTML artifact
-
-## Returns
-Depends on action:
-- create/update/rewrite/delete: Success status or error
-- get: File content
-- htmlArtifactLogs: Console logs and errors
-
-## Supported File Types
-✅ Text-based files you author: .md, .txt, .html, .js, .css, .json, .csv, .svg
-❌ Binary files requiring libraries (use repl): .pdf, .docx
-
-## Critical - Prefer Update Over Rewrite
-❌ NEVER: get entire file + rewrite to change small sections
-✅ ALWAYS: update for targeted edits (token efficient)
-✅ Ask: Can I describe the change as old_str → new_str? Use update.
-
----
-
-## HTML Artifacts
-
-Interactive HTML applications that can visualize data from other artifacts.
-
-### Data Access
-- Can read artifacts created by repl and user attachments
-- Use to build dashboards, visualizations, interactive tools
-- See Helper Functions section below for available functions
-
-### Requirements
-- Self-contained single file
-- Import ES modules from esm.sh:
-- Use Tailwind CDN:
-- Can embed images from any domain:
- ${DialogHeader({ title: i18n("Settings") })}
-
-
-
-
- ${this.tabs.map((tab, index) =>
- this.renderMobileTab(tab, index),
- )}
-
-
-
-
-
-
-
- ${this.tabs.map((tab, index) =>
- this.renderSidebarItem(tab, index),
- )}
-
-
-
-
- ${this.tabs.map(
- (tab, index) =>
- html`
-
- ${tab}
-
`,
- )}
- 
-- MUST set background color explicitly (avoid transparent)
-- Inline CSS or Tailwind utility classes
-- No localStorage/sessionStorage
-
-### Styling
-- Use Tailwind utility classes for clean, functional designs
-- Ensure responsive layout (iframe may be resized)
-- Avoid purple gradients, AI aesthetic clichés, and emojis
-
-### Helper Functions (Automatically Available)
-
-These functions are injected into HTML artifact sandbox:
-
-${runtimeProviderDescriptions.join("\n\n")}
-`;
-
-// ============================================================================
-// Artifacts Runtime Provider
-// ============================================================================
-
-export const ARTIFACTS_RUNTIME_PROVIDER_DESCRIPTION_RW = `
-### Artifacts Storage
-
-Create, read, update, and delete files in artifacts storage.
-
-#### When to Use
-- Store intermediate results between tool calls
-- Save generated files (images, CSVs, processed data) for user to view and download
-
-#### Do NOT Use For
-- Content you author directly, like summaries of content you read (use artifacts tool instead)
-
-#### Functions
-- listArtifacts() - List all artifact filenames, returns Promise\${p.name}: $\${p.price}
\`).join('');
-document.body.innerHTML = html;
-\`\`\`
-
-Binary image:
-\`\`\`javascript
-const base64 = await getArtifact('chart.png');
-const img = document.createElement('img');
-img.src = 'data:image/png;base64,' + base64;
-document.body.appendChild(img);
-\`\`\`
-`;
-
-// ============================================================================
-// Attachments Runtime Provider
-// ============================================================================
-
-export const ATTACHMENTS_RUNTIME_DESCRIPTION = `
-### User Attachments
-
-Read files the user uploaded to the conversation.
-
-#### When to Use
-- Process user-uploaded files (CSV, JSON, Excel, images, PDFs)
-
-#### Functions
-- listAttachments() - List all attachments, returns array of {id, fileName, mimeType, size}
-- readTextAttachment(id) - Read attachment as text, returns string
-- readBinaryAttachment(id) - Read attachment as binary data, returns Uint8Array
-
-#### Example
-CSV file:
-\`\`\`javascript
-const files = listAttachments();
-const csvFile = files.find(f => f.fileName.endsWith('.csv'));
-const csvData = readTextAttachment(csvFile.id);
-const rows = csvData.split('\\n').map(row => row.split(','));
-\`\`\`
-
-Excel file:
-\`\`\`javascript
-const XLSX = await import('https://esm.run/xlsx');
-const files = listAttachments();
-const xlsxFile = files.find(f => f.fileName.endsWith('.xlsx'));
-const bytes = readBinaryAttachment(xlsxFile.id);
-const workbook = XLSX.read(bytes);
-const data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
-\`\`\`
-`;
-
-// ============================================================================
-// Extract Document Tool
-// ============================================================================
-
-export const EXTRACT_DOCUMENT_DESCRIPTION = `# Extract Document
-
-Extract plain text from documents on the web (PDF, DOCX, XLSX, PPTX).
-
-## When to Use
-User wants you to read a document at a URL.
-
-## Input
-- { url: "https://example.com/document.pdf" } - URL to PDF, DOCX, XLSX, or PPTX
-
-## Returns
-Structured plain text with page/sheet/slide delimiters.`;
diff --git a/packages/web-ui/src/storage/app-storage.ts b/packages/web-ui/src/storage/app-storage.ts
deleted file mode 100644
index fd5b056..0000000
--- a/packages/web-ui/src/storage/app-storage.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { CustomProvidersStore } from "./stores/custom-providers-store.js";
-import type { ProviderKeysStore } from "./stores/provider-keys-store.js";
-import type { SessionsStore } from "./stores/sessions-store.js";
-import type { SettingsStore } from "./stores/settings-store.js";
-import type { StorageBackend } from "./types.js";
-
-/**
- * High-level storage API providing access to all storage operations.
- * Subclasses can extend this to add domain-specific stores.
- */
-export class AppStorage {
- readonly backend: StorageBackend;
- readonly settings: SettingsStore;
- readonly providerKeys: ProviderKeysStore;
- readonly sessions: SessionsStore;
- readonly customProviders: CustomProvidersStore;
-
- constructor(
- settings: SettingsStore,
- providerKeys: ProviderKeysStore,
- sessions: SessionsStore,
- customProviders: CustomProvidersStore,
- backend: StorageBackend,
- ) {
- this.settings = settings;
- this.providerKeys = providerKeys;
- this.sessions = sessions;
- this.customProviders = customProviders;
- this.backend = backend;
- }
-
- async getQuotaInfo(): Promise<{
- usage: number;
- quota: number;
- percent: number;
- }> {
- return this.backend.getQuotaInfo();
- }
-
- async requestPersistence(): Promise
-
- `;
- }
-}
diff --git a/packages/web-ui/src/tools/artifacts/DocxArtifact.ts b/packages/web-ui/src/tools/artifacts/DocxArtifact.ts
deleted file mode 100644
index e9869ca..0000000
--- a/packages/web-ui/src/tools/artifacts/DocxArtifact.ts
+++ /dev/null
@@ -1,218 +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`
-
-
- ${this.expanded
- ? html`
-
-
- ${this.expanded
- ? html`
-
- ${repeat(
- this.logs,
- (_log, index) => index,
- (log) => html`
-
- `
- : ""}
-
- [${log.type}] ${log.text}
-
- `,
- )}
-
- ${DownloadButton({
- content: this.decodeBase64(),
- filename: this.filename,
- mimeType:
- "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
- title: i18n("Download"),
- })}
-
- `;
- }
-
- override async updated(changedProperties: Map
-
- `;
- }
-
- return html`
-
-
-
- ${i18n("Error loading document")}
-
- ${this.error}
-
-
-
- `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "docx-artifact": DocxArtifact;
- }
-}
diff --git a/packages/web-ui/src/tools/artifacts/ExcelArtifact.ts b/packages/web-ui/src/tools/artifacts/ExcelArtifact.ts
deleted file mode 100644
index 7def113..0000000
--- a/packages/web-ui/src/tools/artifacts/ExcelArtifact.ts
+++ /dev/null
@@ -1,243 +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`
-
- ${DownloadButton({
- content: this.decodeBase64(),
- filename: this.filename,
- mimeType: this.getMimeType(),
- title: i18n("Download"),
- })}
-
- `;
- }
-
- override async updated(changedProperties: Map
-
- `;
- }
-
- return html`
-
-
-
- ${i18n("Error loading spreadsheet")}
-
- ${this.error}
-
-
-
- `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "excel-artifact": ExcelArtifact;
- }
-}
diff --git a/packages/web-ui/src/tools/artifacts/GenericArtifact.ts b/packages/web-ui/src/tools/artifacts/GenericArtifact.ts
deleted file mode 100644
index 39df5d3..0000000
--- a/packages/web-ui/src/tools/artifacts/GenericArtifact.ts
+++ /dev/null
@@ -1,120 +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
- ${DownloadButton({
- content: this.decodeBase64(),
- filename: this.filename,
- mimeType: this.getMimeType(),
- title: i18n("Download"),
- })}
-
- `;
- }
-
- override render(): TemplateResult {
- return html`
-
-
- `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "generic-artifact": GenericArtifact;
- }
-}
diff --git a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
deleted file mode 100644
index 1c419b2..0000000
--- a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-import hljs from "highlight.js";
-import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, type Ref, ref } from "lit/directives/ref.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { RefreshCw } from "lucide";
-import type { SandboxIframe } from "../../components/SandboxedIframe.js";
-import {
- type MessageConsumer,
- RUNTIME_MESSAGE_ROUTER,
-} from "../../components/sandbox/RuntimeMessageRouter.js";
-import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRuntimeProvider.js";
-import { i18n } from "../../utils/i18n.js";
-import "../../components/SandboxedIframe.js";
-import { ArtifactElement } from "./ArtifactElement.js";
-import type { Console } from "./Console.js";
-import "./Console.js";
-import { icon } from "@mariozechner/mini-lit";
-import { Button } from "@mariozechner/mini-lit/dist/Button.js";
-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";
-
-@customElement("html-artifact")
-export class HtmlArtifact extends ArtifactElement {
- @property() override filename = "";
- @property({ attribute: false }) runtimeProviders: SandboxRuntimeProvider[] =
- [];
- @property({ attribute: false }) sandboxUrlProvider?: () => string;
-
- private _content = "";
- private logs: Array<{ type: "log" | "error"; text: string }> = [];
-
- // Refs for DOM elements
- public sandboxIframeRef: Ref
-
-
-
-
- ${this.filename}
- - ${i18n("Preview not available for this file type.")} - ${i18n( - "Click the download button above to view it on your computer.", - )} -
-
- ${toggle}
- ${Button({
- variant: "ghost",
- size: "sm",
- onClick: () => {
- this.logs = [];
- this.executeContent(this._content);
- },
- title: i18n("Reload HTML"),
- children: icon(RefreshCw, "sm"),
- })}
- ${copyButton}
- ${DownloadButton({
- content: downloadContent,
- filename: this.filename,
- mimeType: "text/html",
- title: i18n("Download HTML"),
- })}
-
- `;
- }
-
- override set content(value: string) {
- const oldValue = this._content;
- this._content = value;
- if (oldValue !== value) {
- // Reset logs when content changes
- this.logs = [];
- this.requestUpdate();
- // Execute content in sandbox if it exists
- if (this.sandboxIframeRef.value && value) {
- this.executeContent(value);
- }
- }
- }
-
- public executeContent(html: string) {
- const sandbox = this.sandboxIframeRef.value;
- if (!sandbox) return;
-
- // Configure sandbox URL provider if provided (for browser extensions)
- if (this.sandboxUrlProvider) {
- sandbox.sandboxUrlProvider = this.sandboxUrlProvider;
- }
-
- const sandboxId = `artifact-${this.filename}`;
-
- // Create consumer for console messages
- const consumer: MessageConsumer = {
- handleMessage: async (message: any): Promise