@mariozechner/pi-web-ui 0.5.48 → 0.7.1

package/dist/utils/model-discovery.js

@@ -0,0 +1,243 @@
+import { LMStudioClient } from "@lmstudio/sdk";
+import { Ollama } from "ollama/browser";
+/**
+ * Discover models from an Ollama server.
+ * @param baseUrl - Base URL of the Ollama server (e.g., "http://localhost:11434")
+ * @param apiKey - Optional API key (currently unused by Ollama)
+ * @returns Array of discovered models
+ */
+export async function discoverOllamaModels(baseUrl, _apiKey) {
+    try {
+        // Create Ollama client
+        const ollama = new Ollama({ host: baseUrl });
+        // Get list of available models
+        const { models } = await ollama.list();
+        // Fetch details for each model and convert to Model format
+        const ollamaModelPromises = models.map(async (model) => {
+            try {
+                // Get model details
+                const details = await ollama.show({
+                    model: model.name,
+                });
+                // Check capabilities - filter out models that don't support tools
+                const capabilities = details.capabilities || [];
+                if (!capabilities.includes("tools")) {
+                    console.debug(`Skipping model ${model.name}: does not support tools`);
+                    return null;
+                }
+                // Extract model info
+                const modelInfo = details.model_info || {};
+                // Get context window size - look for architecture-specific keys
+                const architecture = modelInfo["general.architecture"] || "";
+                const contextKey = `${architecture}.context_length`;
+                const contextWindow = parseInt(modelInfo[contextKey] || "8192", 10);
+                // Ollama caps max tokens at 10x context length
+                const maxTokens = contextWindow * 10;
+                // Ollama only supports completions API
+                const ollamaModel = {
+                    id: model.name,
+                    name: model.name,
+                    api: "openai-completions",
+                    provider: "", // Will be set by caller
+                    baseUrl: `${baseUrl}/v1`,
+                    reasoning: capabilities.includes("thinking"),
+                    input: ["text"],
+                    cost: {
+                        input: 0,
+                        output: 0,
+                        cacheRead: 0,
+                        cacheWrite: 0,
+                    },
+                    contextWindow: contextWindow,
+                    maxTokens: maxTokens,
+                };
+                return ollamaModel;
+            }
+            catch (err) {
+                console.error(`Failed to fetch details for model ${model.name}:`, err);
+                return null;
+            }
+        });
+        const results = await Promise.all(ollamaModelPromises);
+        return results.filter((m) => m !== null);
+    }
+    catch (err) {
+        console.error("Failed to discover Ollama models:", err);
+        throw new Error(`Ollama discovery failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+}
+/**
+ * Discover models from a llama.cpp server via OpenAI-compatible /v1/models endpoint.
+ * @param baseUrl - Base URL of the llama.cpp server (e.g., "http://localhost:8080")
+ * @param apiKey - Optional API key
+ * @returns Array of discovered models
+ */
+export async function discoverLlamaCppModels(baseUrl, apiKey) {
+    try {
+        const headers = {
+            "Content-Type": "application/json",
+        };
+        if (apiKey) {
+            headers.Authorization = `Bearer ${apiKey}`;
+        }
+        const response = await fetch(`${baseUrl}/v1/models`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (!data.data || !Array.isArray(data.data)) {
+            throw new Error("Invalid response format from llama.cpp server");
+        }
+        return data.data.map((model) => {
+            // llama.cpp doesn't always provide context window info
+            const contextWindow = model.context_length || 8192;
+            const maxTokens = model.max_tokens || 4096;
+            const llamaModel = {
+                id: model.id,
+                name: model.id,
+                api: "openai-completions",
+                provider: "", // Will be set by caller
+                baseUrl: `${baseUrl}/v1`,
+                reasoning: false,
+                input: ["text"],
+                cost: {
+                    input: 0,
+                    output: 0,
+                    cacheRead: 0,
+                    cacheWrite: 0,
+                },
+                contextWindow: contextWindow,
+                maxTokens: maxTokens,
+            };
+            return llamaModel;
+        });
+    }
+    catch (err) {
+        console.error("Failed to discover llama.cpp models:", err);
+        throw new Error(`llama.cpp discovery failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+}
+/**
+ * Discover models from a vLLM server via OpenAI-compatible /v1/models endpoint.
+ * @param baseUrl - Base URL of the vLLM server (e.g., "http://localhost:8000")
+ * @param apiKey - Optional API key
+ * @returns Array of discovered models
+ */
+export async function discoverVLLMModels(baseUrl, apiKey) {
+    try {
+        const headers = {
+            "Content-Type": "application/json",
+        };
+        if (apiKey) {
+            headers.Authorization = `Bearer ${apiKey}`;
+        }
+        const response = await fetch(`${baseUrl}/v1/models`, {
+            method: "GET",
+            headers,
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (!data.data || !Array.isArray(data.data)) {
+            throw new Error("Invalid response format from vLLM server");
+        }
+        return data.data.map((model) => {
+            // vLLM provides max_model_len which is the context window
+            const contextWindow = model.max_model_len || 8192;
+            const maxTokens = Math.min(contextWindow, 4096); // Cap max tokens
+            const vllmModel = {
+                id: model.id,
+                name: model.id,
+                api: "openai-completions",
+                provider: "", // Will be set by caller
+                baseUrl: `${baseUrl}/v1`,
+                reasoning: false,
+                input: ["text"],
+                cost: {
+                    input: 0,
+                    output: 0,
+                    cacheRead: 0,
+                    cacheWrite: 0,
+                },
+                contextWindow: contextWindow,
+                maxTokens: maxTokens,
+            };
+            return vllmModel;
+        });
+    }
+    catch (err) {
+        console.error("Failed to discover vLLM models:", err);
+        throw new Error(`vLLM discovery failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+}
+/**
+ * Discover models from an LM Studio server using the LM Studio SDK.
+ * @param baseUrl - Base URL of the LM Studio server (e.g., "http://localhost:1234")
+ * @param apiKey - Optional API key (unused for LM Studio SDK)
+ * @returns Array of discovered models
+ */
+export async function discoverLMStudioModels(baseUrl, _apiKey) {
+    try {
+        // Extract host and port from baseUrl
+        const url = new URL(baseUrl);
+        const port = url.port ? parseInt(url.port, 10) : 1234;
+        // Create LM Studio client
+        const client = new LMStudioClient({ baseUrl: `ws://${url.hostname}:${port}` });
+        // List all downloaded models
+        const models = await client.system.listDownloadedModels();
+        // Filter to only LLM models and map to our Model format
+        return models
+            .filter((model) => model.type === "llm")
+            .map((model) => {
+            const contextWindow = model.maxContextLength;
+            // Use 10x context length like Ollama does
+            const maxTokens = contextWindow;
+            const lmStudioModel = {
+                id: model.path,
+                name: model.displayName || model.path,
+                api: "openai-completions",
+                provider: "", // Will be set by caller
+                baseUrl: `${baseUrl}/v1`,
+                reasoning: model.trainedForToolUse || false,
+                input: model.vision ? ["text", "image"] : ["text"],
+                cost: {
+                    input: 0,
+                    output: 0,
+                    cacheRead: 0,
+                    cacheWrite: 0,
+                },
+                contextWindow: contextWindow,
+                maxTokens: maxTokens,
+            };
+            return lmStudioModel;
+        });
+    }
+    catch (err) {
+        console.error("Failed to discover LM Studio models:", err);
+        throw new Error(`LM Studio discovery failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+}
+/**
+ * Convenience function to discover models based on provider type.
+ * @param type - Provider type
+ * @param baseUrl - Base URL of the server
+ * @param apiKey - Optional API key
+ * @returns Array of discovered models
+ */
+export async function discoverModels(type, baseUrl, apiKey) {
+    switch (type) {
+        case "ollama":
+            return discoverOllamaModels(baseUrl, apiKey);
+        case "llama.cpp":
+            return discoverLlamaCppModels(baseUrl, apiKey);
+        case "vllm":
+            return discoverVLLMModels(baseUrl, apiKey);
+        case "lmstudio":
+            return discoverLMStudioModels(baseUrl, apiKey);
+    }
+}
+//# sourceMappingURL=model-discovery.js.map

package/dist/utils/model-discovery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-discovery.js","sourceRoot":"","sources":["../../src/utils/model-discovery.ts"],"names":[],"mappings":"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"}

package/dist/utils/proxy-utils.d.ts

@@ -0,0 +1,37 @@
+import type { Api, Model } from "@mariozechner/pi-ai";
+/**
+ * Centralized proxy decision logic.
+ *
+ * Determines whether to use a CORS proxy for LLM API requests based on:
+ * - Provider name
+ * - API key pattern (for providers where it matters)
+ */
+/**
+ * Check if a provider/API key combination requires a CORS proxy.
+ *
+ * @param provider - Provider name (e.g., "anthropic", "openai", "zai")
+ * @param apiKey - API key for the provider
+ * @returns true if proxy is required, false otherwise
+ */
+export declare function shouldUseProxyForProvider(provider: string, apiKey: string): boolean;
+/**
+ * Apply CORS proxy to a model's baseUrl if needed.
+ *
+ * @param model - The model to potentially proxy
+ * @param apiKey - API key for the provider
+ * @param proxyUrl - CORS proxy URL (e.g., "https://proxy.mariozechner.at/proxy")
+ * @returns Model with modified baseUrl if proxy is needed, otherwise original model
+ */
+export declare function applyProxyIfNeeded<T extends Api>(model: Model<T>, apiKey: string, proxyUrl?: string): Model<T>;
+/**
+ * Check if an error is likely a CORS error.
+ *
+ * CORS errors in browsers typically manifest as:
+ * - TypeError with message "Failed to fetch"
+ * - NetworkError
+ *
+ * @param error - The error to check
+ * @returns true if error is likely a CORS error
+ */
+export declare function isCorsError(error: unknown): boolean;
+//# sourceMappingURL=proxy-utils.d.ts.map

package/dist/utils/proxy-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"proxy-utils.d.ts","sourceRoot":"","sources":["../../src/utils/proxy-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;;;;;GAMG;AAEH;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CA2BnF;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAqB9G;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAwBnD"}

package/dist/utils/proxy-utils.js

@@ -0,0 +1,97 @@
+/**
+ * Centralized proxy decision logic.
+ *
+ * Determines whether to use a CORS proxy for LLM API requests based on:
+ * - Provider name
+ * - API key pattern (for providers where it matters)
+ */
+/**
+ * Check if a provider/API key combination requires a CORS proxy.
+ *
+ * @param provider - Provider name (e.g., "anthropic", "openai", "zai")
+ * @param apiKey - API key for the provider
+ * @returns true if proxy is required, false otherwise
+ */
+export function shouldUseProxyForProvider(provider, apiKey) {
+    switch (provider.toLowerCase()) {
+        case "zai":
+            // Z-AI always requires proxy
+            return true;
+        case "anthropic":
+            // Anthropic OAuth tokens (sk-ant-oat-*) require proxy
+            // Regular API keys (sk-ant-api-*) do NOT require proxy
+            return apiKey.startsWith("sk-ant-oat");
+        // These providers work without proxy
+        case "openai":
+        case "google":
+        case "groq":
+        case "openrouter":
+        case "cerebras":
+        case "xai":
+        case "ollama":
+        case "lmstudio":
+            return false;
+        // Unknown providers - assume no proxy needed
+        // This allows new providers to work by default
+        default:
+            return false;
+    }
+}
+/**
+ * Apply CORS proxy to a model's baseUrl if needed.
+ *
+ * @param model - The model to potentially proxy
+ * @param apiKey - API key for the provider
+ * @param proxyUrl - CORS proxy URL (e.g., "https://proxy.mariozechner.at/proxy")
+ * @returns Model with modified baseUrl if proxy is needed, otherwise original model
+ */
+export function applyProxyIfNeeded(model, apiKey, proxyUrl) {
+    // If no proxy URL configured, return original model
+    if (!proxyUrl) {
+        return model;
+    }
+    // If model has no baseUrl, can't proxy it
+    if (!model.baseUrl) {
+        return model;
+    }
+    // Check if this provider/key needs proxy
+    if (!shouldUseProxyForProvider(model.provider, apiKey)) {
+        return model;
+    }
+    // Apply proxy to baseUrl
+    return {
+        ...model,
+        baseUrl: `${proxyUrl}/?url=${encodeURIComponent(model.baseUrl)}`,
+    };
+}
+/**
+ * Check if an error is likely a CORS error.
+ *
+ * CORS errors in browsers typically manifest as:
+ * - TypeError with message "Failed to fetch"
+ * - NetworkError
+ *
+ * @param error - The error to check
+ * @returns true if error is likely a CORS error
+ */
+export function isCorsError(error) {
+    if (!(error instanceof Error)) {
+        return false;
+    }
+    // Check for common CORS error patterns
+    const message = error.message.toLowerCase();
+    // "Failed to fetch" is the standard CORS error in most browsers
+    if (error.name === "TypeError" && message.includes("failed to fetch")) {
+        return true;
+    }
+    // Some browsers report "NetworkError"
+    if (error.name === "NetworkError") {
+        return true;
+    }
+    // CORS-specific messages
+    if (message.includes("cors") || message.includes("cross-origin")) {
+        return true;
+    }
+    return false;
+}
+//# sourceMappingURL=proxy-utils.js.map

package/dist/utils/proxy-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"proxy-utils.js","sourceRoot":"","sources":["../../src/utils/proxy-utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH;;;;;;GAMG;AACH,MAAM,UAAU,yBAAyB,CAAC,QAAgB,EAAE,MAAc;IACzE,QAAQ,QAAQ,CAAC,WAAW,EAAE,EAAE,CAAC;QAChC,KAAK,KAAK;YACT,6BAA6B;YAC7B,OAAO,IAAI,CAAC;QAEb,KAAK,WAAW;YACf,sDAAsD;YACtD,uDAAuD;YACvD,OAAO,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QAExC,qCAAqC;QACrC,KAAK,QAAQ,CAAC;QACd,KAAK,QAAQ,CAAC;QACd,KAAK,MAAM,CAAC;QACZ,KAAK,YAAY,CAAC;QAClB,KAAK,UAAU,CAAC;QAChB,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ,CAAC;QACd,KAAK,UAAU;YACd,OAAO,KAAK,CAAC;QAEd,6CAA6C;QAC7C,+CAA+C;QAC/C;YACC,OAAO,KAAK,CAAC;IACf,CAAC;AACF,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,kBAAkB,CAAgB,KAAe,EAAE,MAAc,EAAE,QAAiB;IACnG,oDAAoD;IACpD,IAAI,CAAC,QAAQ,EAAE,CAAC;QACf,OAAO,KAAK,CAAC;IACd,CAAC;IAED,0CAA0C;IAC1C,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACpB,OAAO,KAAK,CAAC;IACd,CAAC;IAED,yCAAyC;IACzC,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC;QACxD,OAAO,KAAK,CAAC;IACd,CAAC;IAED,yBAAyB;IACzB,OAAO;QACN,GAAG,KAAK;QACR,OAAO,EAAE,GAAG,QAAQ,SAAS,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;KAChE,CAAC;AACH,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,KAAc;IACzC,IAAI,CAAC,CAAC,KAAK,YAAY,KAAK,CAAC,EAAE,CAAC;QAC/B,OAAO,KAAK,CAAC;IACd,CAAC;IAED,uCAAuC;IACvC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IAE5C,gEAAgE;IAChE,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;QACvE,OAAO,IAAI,CAAC;IACb,CAAC;IAED,sCAAsC;IACtC,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC;IACb,CAAC;IAED,yBAAyB;IACzB,IAAI,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;QAClE,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,KAAK,CAAC;AACd,CAAC"}

package/example/package.json

@@ -9,10 +9,10 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@mariozechner/mini-lit": "^0.1.7",
+    "@mariozechner/mini-lit": "^0.2.0",
     "@mariozechner/pi-ai": "file:../../ai",
     "@mariozechner/pi-web-ui": "file:../",
-    "@tailwindcss/vite": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.17",
     "lit": "^3.3.1",
     "lucide": "^0.544.0"
   },

package/example/src/custom-messages.ts

@@ -1,8 +1,8 @@
-import { Alert } from "@mariozechner/mini-lit";
 import type { Message } from "@mariozechner/pi-ai";
 import { html } from "lit";
 import { registerMessageRenderer } from "@mariozechner/pi-web-ui";
 import type { AppMessage, MessageRenderer } from "@mariozechner/pi-web-ui";
+import { Alert } from "@mariozechner/mini-lit/dist/Alert.js";
 
 // ============================================================================
 // 1. EXTEND AppMessage TYPE VIA DECLARATION MERGING

package/example/src/main.ts

@@ -1,19 +1,19 @@
-import { Button, icon, Input } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/ThemeToggle.js";
 import { getModel } from "@mariozechner/pi-ai";
 import {
 	Agent,
 	type AgentState,
 	ApiKeyPromptDialog,
-	ApiKeysTab,
 	type AppMessage,
 	AppStorage,
 	ChatPanel,
 	createJavaScriptReplTool,
+	CustomProvidersStore,
 	IndexedDBStorageBackend,
 	// PersistentStorageDialog, // TODO: Fix - currently broken
 	ProviderKeysStore,
 	ProviderTransport,
+	ProvidersModelsTab,
 	ProxyTab,
 	SessionListDialog,
 	SessionsStore,
@@ -25,6 +25,9 @@ import { html, render } from "lit";
 import { Bell, History, Plus, Settings } from "lucide";
 import "./app.css";
 import { createSystemNotification, customMessageTransformer, registerCustomMessageRenderers } from "./custom-messages.js";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { icon } from "@mariozechner/mini-lit";
+import { Input } from "@mariozechner/mini-lit/dist/Input.js";
 
 // Register custom message renderers
 registerCustomMessageRenderers();
@@ -33,24 +36,32 @@ registerCustomMessageRenderers();
 const settings = new SettingsStore();
 const providerKeys = new ProviderKeysStore();
 const sessions = new SessionsStore();
+const customProviders = new CustomProvidersStore();
 
 // Gather configs
-const configs = [settings.getConfig(), SessionsStore.getMetadataConfig(), providerKeys.getConfig(), sessions.getConfig()];
+const configs = [
+	settings.getConfig(),
+	SessionsStore.getMetadataConfig(),
+	providerKeys.getConfig(),
+	customProviders.getConfig(),
+	sessions.getConfig(),
+];
 
 // Create backend
 const backend = new IndexedDBStorageBackend({
 	dbName: "pi-web-ui-example",
-	version: 1,
+	version: 2, // Incremented for custom-providers store
 	stores: configs,
 });
 
 // Wire backend to stores
 settings.setBackend(backend);
 providerKeys.setBackend(backend);
+customProviders.setBackend(backend);
 sessions.setBackend(backend);
 
 // Create and set app storage
-const storage = new AppStorage(settings, providerKeys, sessions, backend);
+const storage = new AppStorage(settings, providerKeys, sessions, customProviders, backend);
 setAppStorage(storage);
 
 let currentSessionId: string | undefined;
@@ -349,7 +360,7 @@ const renderApp = () => {
 						variant: "ghost",
 						size: "sm",
 						children: icon(Settings, "sm"),
-						onClick: () => SettingsDialog.open([new ApiKeysTab(), new ProxyTab()]),
+						onClick: () => SettingsDialog.open([new ProvidersModelsTab(), new ProxyTab()]),
 						title: "Settings",
 					})}
 				</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mariozechner/pi-web-ui",
-	"version": "0.5.48",
+	"version": "0.7.1",
 	"description": "Reusable web UI components for AI chat interfaces powered by @mariozechner/pi-ai",
 	"type": "module",
 	"main": "dist/index.js",
@@ -13,25 +13,26 @@
 		"clean": "rm -rf dist",
 		"build": "tsc -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\"",
-		"typecheck": "tsc --noEmit && cd example && tsc --noEmit",
-		"check": "npm run typecheck"
+		"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": "tsc --noEmit && cd example && tsc --noEmit"
 	},
 	"dependencies": {
-		"@mariozechner/pi-ai": "^0.5.43",
-		"@mariozechner/pi-tui": "^0.5.48",
+		"@lmstudio/sdk": "^1.5.0",
+		"@mariozechner/pi-ai": "^0.6.0",
+		"@mariozechner/pi-tui": "^0.7.1",
 		"docx-preview": "^0.3.7",
 		"jszip": "^3.10.1",
-		"lit": "^3.3.1",
 		"lucide": "^0.544.0",
 		"ollama": "^0.6.0",
 		"pdfjs-dist": "^5.4.296",
 		"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
 	},
 	"peerDependencies": {
-		"@mariozechner/mini-lit": "^0.1.10"
+		"@mariozechner/mini-lit": "^0.2.0",
+		"lit": "^3.3.1"
 	},
 	"devDependencies": {
-		"@mariozechner/mini-lit": "^0.1.10",
+		"@mariozechner/mini-lit": "^0.2.0",
 		"@tailwindcss/cli": "^4.0.0-beta.14",
 		"concurrently": "^9.2.1",
 		"typescript": "^5.7.3"

package/src/ChatPanel.ts

@@ -1,5 +1,5 @@
-import { Badge, html } from "@mariozechner/mini-lit";
-import { LitElement } from "lit";
+import { Badge } from "@mariozechner/mini-lit/dist/Badge.js";
+import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import type { Agent } from "./agent/agent.js";
 import "./components/AgentInterface.js";
@@ -59,6 +59,7 @@ export class ChatPanel extends LitElement {
 		config?: {
 			onApiKeyRequired?: (provider: string) => Promise<boolean>;
 			onBeforeSend?: () => void | Promise<void>;
+			onCostClick?: () => void;
 			sandboxUrlProvider?: () => string;
 			toolsFactory?: (
 				agent: Agent,
@@ -79,6 +80,7 @@ export class ChatPanel extends LitElement {
 		this.agentInterface.showThemeToggle = false;
 		this.agentInterface.onApiKeyRequired = config?.onApiKeyRequired;
 		this.agentInterface.onBeforeSend = config?.onBeforeSend;
+		this.agentInterface.onCostClick = config?.onCostClick;
 
 		// Set up artifacts panel
 		this.artifactsPanel = new ArtifactsPanel();

package/src/agent/transports/ProviderTransport.ts

@@ -6,11 +6,12 @@ import {
 	type UserMessage,
 } from "@mariozechner/pi-ai";
 import { getAppStorage } from "../../storage/app-storage.js";
+import { applyProxyIfNeeded } from "../../utils/proxy-utils.js";
 import type { AgentRunConfig, AgentTransport } from "./types.js";
 
 /**
  * Transport that calls LLM providers directly.
- * Optionally routes calls through a CORS proxy if enabled in settings.
+ * Uses CORS proxy only for providers that require it (Anthropic OAuth, Z-AI).
  */
 export class ProviderTransport implements AgentTransport {
 	async *run(messages: Message[], userMessage: Message, cfg: AgentRunConfig, signal?: AbortSignal) {
@@ -20,18 +21,12 @@ export class ProviderTransport implements AgentTransport {
 			throw new Error("no-api-key");
 		}
 
-		// Check if CORS proxy is enabled
+		// Get proxy URL from settings (if available)
 		const proxyEnabled = await getAppStorage().settings.get<boolean>("proxy.enabled");
 		const proxyUrl = await getAppStorage().settings.get<string>("proxy.url");
 
-		// Clone model and modify baseUrl if proxy is enabled
-		let model = cfg.model;
-		if (proxyEnabled && proxyUrl && cfg.model.baseUrl) {
-			model = {
-				...cfg.model,
-				baseUrl: `${proxyUrl}/?url=${encodeURIComponent(cfg.model.baseUrl)}`,
-			};
-		}
+		// Apply proxy only if this provider/key combination requires it
+		const model = applyProxyIfNeeded(cfg.model, apiKey, proxyEnabled ? proxyUrl || undefined : undefined);
 
 		// Messages are already LLM-compatible (filtered by Agent)
 		const context: AgentContext = {

package/src/app.css

@@ -42,3 +42,27 @@ body {
 .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%;
+}