@eclipse-lyra/extension-ai-system 0.7.57 → 0.7.58

package/dist/ai-system-extension-DnrA-ECv.js

@@ -0,0 +1,2326 @@
+import { A as CID_AGENTS, B as TOPIC_AICONFIG_CHANGED, H as TOPIC_AI_STREAM_COMPLETE, M as CID_PROMPT_ENHANCERS, P as KEY_AI_CONFIG, b as ProviderFactory, j as CID_CHAT_PROVIDERS, n as EMPTY_USAGE, r as tokenUsageTracker, t as aiService } from "./ai-service-CQaQJORq.js";
+import { LyraElement, LyraPart, SIDEBAR_AUXILIARY, TOOLBAR_BOTTOM, TOOLBAR_MAIN_RIGHT, TOPIC_SETTINGS_CHANGED, appSettings, commandRegistry, confirmDialog, contributionRegistry, editorRegistry, registerAll, rootContext, subscribe, taskService, toastError, uiContext, workspaceService } from "@eclipse-lyra/core";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { marked } from "marked";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/general-assistant-prompt.txt?raw
+var general_assistant_prompt_default = "You are an assistant in a web application with workspace, editors, and AI chat.\n\n**Tools:**\nCommands are exposed as AI-callable tools. Tools are context-aware - available commands depend on active editor, selected files, and workspace state.\n\n**Tool Usage Rules:**\n1. If tools are available and match the request, use them - don't describe manual steps\n2. Read tool descriptions/parameters to select the correct tool\n3. Call tools in sequence for multi-step tasks\n4. After successful tool execution, provide a final response - don't loop or call more tools unless explicitly requested\n5. If no tools are available, explain what context is needed\n\nKeep responses concise. Use tools when available rather than discussing alternatives.\n\n";
+//#endregion
+//#region src/chat-provider-contributions.ts
+for (const { label, ...provider } of [
+	{
+		label: "Ollama (Local)",
+		name: "ollama",
+		model: "gemma3:12b",
+		chatApiEndpoint: "https://<your-server>/v1/chat/completions",
+		apiKey: ""
+	},
+	{
+		label: "OpenWebUI (Self Hosted)",
+		name: "openwebui",
+		model: "gemma3:12b",
+		chatApiEndpoint: "https://<your-server>/api/v1/chat/completion",
+		apiKey: ""
+	},
+	{
+		label: "OpenAI",
+		name: "openai",
+		model: "gpt-4.1",
+		chatApiEndpoint: "https://api.openai.com/v1/chat/completions",
+		apiKey: "<your api key>"
+	},
+	{
+		label: "Groq",
+		name: "groq",
+		model: "llama-3.1-8b-instant",
+		chatApiEndpoint: "https://api.groq.com/openai/v1/chat/completions",
+		apiKey: "<your api key>"
+	},
+	{
+		label: "Cerebras",
+		name: "cerebras",
+		model: "llama3.1-8b",
+		chatApiEndpoint: "https://api.cerebras.ai/v1/chat/completions",
+		apiKey: "<your api key>"
+	},
+	{
+		label: "WebLLM",
+		name: "webllm",
+		model: "gemma-2-9b-it-q4f16_1-MLC",
+		chatApiEndpoint: "",
+		apiKey: "",
+		parameters: { context_window_size: 4096 }
+	},
+	{
+		label: "Mistral",
+		name: "mistral",
+		model: "mistral-large-latest",
+		chatApiEndpoint: "https://api.mistral.ai/v1/chat/completions",
+		apiKey: "<your api key>"
+	},
+	{
+		label: "LiteLLM",
+		name: "litellm",
+		model: "gpt-3.5-turbo",
+		chatApiEndpoint: "https://<your-server>/v1/chat/completions",
+		apiKey: "<your api key>"
+	}
+]) contributionRegistry.registerContribution(CID_CHAT_PROVIDERS, {
+	target: CID_CHAT_PROVIDERS,
+	label,
+	provider
+});
+//#endregion
+//#region src/prompt-enhancer-contributions.ts
+contributionRegistry.registerContribution(CID_PROMPT_ENHANCERS, {
+	label: "App State Enhancer",
+	enhancer: {
+		priority: 20,
+		enhance: async (prompt, _context) => {
+			try {
+				const workspace = await workspaceService.getWorkspace();
+				const activeEditor = editorRegistry.getEditorArea()?.getActiveEditor();
+				const appState = {
+					workspace: workspace?.getName() || null,
+					activeEditor: activeEditor ? {
+						title: activeEditor.input?.title || null,
+						editorId: activeEditor.input?.editorId || null
+					} : null
+				};
+				return `${prompt}\n\n***App's state:***\n${JSON.stringify(appState, null, 2)}`;
+			} catch {
+				return prompt;
+			}
+		}
+	}
+});
+//#endregion
+//#region src/view/session-manager.ts
+var SessionManager = class {
+	constructor() {
+		this.activeSession = null;
+		this.pastSessions = [];
+	}
+	async load() {
+		const saved = await appSettings.get("aiChatSessions");
+		if (!saved) return;
+		if (saved.active && Array.isArray(saved.history)) this.activeSession = saved.active;
+		else if (saved.activeSessionId && Array.isArray(saved.sessions)) {
+			this.activeSession = saved.sessions.find((s) => s.id === saved.activeSessionId) || null;
+			this.pastSessions = saved.sessions.filter((s) => s.id !== saved.activeSessionId);
+		} else if (Array.isArray(saved.all)) {
+			const [first, ...rest] = saved.all.sort((a, b) => b.updatedAt - a.updatedAt);
+			this.activeSession = first || null;
+			this.pastSessions = rest;
+		}
+	}
+	async persist() {
+		const all = [];
+		if (this.activeSession) all.push(this.activeSession);
+		all.push(...this.pastSessions);
+		await appSettings.set("aiChatSessions", {
+			all,
+			activeSessionId: this.activeSession?.id || null
+		});
+	}
+	createSession() {
+		const session = {
+			id: `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+			history: [],
+			title: "New Chat",
+			createdAt: Date.now(),
+			updatedAt: Date.now()
+		};
+		if (this.activeSession) this.pastSessions.unshift(this.activeSession);
+		this.activeSession = session;
+		this.persist();
+		return session;
+	}
+	getActiveSession() {
+		return this.activeSession;
+	}
+	getActiveSessionId() {
+		return this.activeSession?.id || "";
+	}
+	switchToSession(sessionId) {
+		if (this.activeSession?.id === sessionId) return true;
+		const idx = this.pastSessions.findIndex((s) => s.id === sessionId);
+		if (idx === -1) return false;
+		const [target] = this.pastSessions.splice(idx, 1);
+		if (!target) return false;
+		if (this.activeSession) this.pastSessions.unshift(this.activeSession);
+		this.activeSession = target;
+		this.persist();
+		return true;
+	}
+	getPastSessions() {
+		return this.pastSessions;
+	}
+	deletePastSession(sessionId) {
+		const idx = this.pastSessions.findIndex((s) => s.id === sessionId);
+		if (idx === -1) return false;
+		this.pastSessions.splice(idx, 1);
+		this.persist();
+		return true;
+	}
+	addMessage(message) {
+		if (!this.activeSession) return;
+		this.activeSession.history.push(message);
+		this.activeSession.updatedAt = Date.now();
+		this.persist();
+	}
+	setTitle(title) {
+		if (!this.activeSession) return;
+		this.activeSession.title = title;
+		this.persist();
+	}
+	generateTitle(prompt) {
+		const trimmed = prompt.trim();
+		if (!trimmed) return "New Chat";
+		return trimmed.length <= 30 ? trimmed : trimmed.substring(0, 30).trim() + "...";
+	}
+	deleteActiveAndSwitchToFirst() {
+		if (!this.activeSession) return;
+		this.activeSession = this.pastSessions.shift() || null;
+		if (!this.activeSession) this.createSession();
+		this.persist();
+	}
+};
+//#endregion
+//#region src/view/stream-manager.ts
+var StreamManager = class {
+	constructor(onUpdate) {
+		this.streamingMessages = /* @__PURE__ */ new Map();
+		this.currentIndex = -1;
+		this.pendingUpdate = false;
+		this.onUpdate = onUpdate;
+	}
+	createStreamingMessage(role) {
+		const index = ++this.currentIndex;
+		this.streamingMessages.set(index, {
+			message: {
+				role,
+				content: ""
+			},
+			isStreaming: true
+		});
+		return index;
+	}
+	updateStreamingMessage(index, token) {
+		const msg = this.streamingMessages.get(index);
+		if (!msg) return;
+		msg.message.content += token;
+		this.scheduleUpdate();
+	}
+	completeStreamingMessage(index, message) {
+		const msg = this.streamingMessages.get(index);
+		if (!msg) return;
+		msg.message = message;
+		msg.isStreaming = false;
+	}
+	removeStreamingMessage(index) {
+		this.streamingMessages.delete(index);
+	}
+	findStreamingMessage(role) {
+		return Array.from(this.streamingMessages.values()).find((m) => m.message.role === role)?.message;
+	}
+	getAllStreamingMessages() {
+		return Array.from(this.streamingMessages.values());
+	}
+	scheduleUpdate() {
+		if (this.pendingUpdate) return;
+		this.pendingUpdate = true;
+		this.rafHandle = requestAnimationFrame(() => {
+			this.pendingUpdate = false;
+			this.onUpdate?.();
+		});
+	}
+	cancelUpdates() {
+		if (this.rafHandle !== void 0) {
+			cancelAnimationFrame(this.rafHandle);
+			this.rafHandle = void 0;
+			this.pendingUpdate = false;
+		}
+	}
+	reset() {
+		this.streamingMessages.clear();
+		this.cancelUpdates();
+		this.currentIndex = -1;
+	}
+};
+//#endregion
+//#region src/view/provider-manager.ts
+var VIEW_SETTINGS_KEY = "aiViewChat";
+var ProviderManager = class {
+	constructor(aiService) {
+		this.aiService = aiService;
+		this.providers = [];
+		this.availableModels = [];
+		this.loadingModels = false;
+		this.providerFactory = new ProviderFactory();
+	}
+	async initialize() {
+		this.providers = await this.aiService.getProviders() || [];
+		const defaultProvider = await this.aiService.getDefaultProvider();
+		if (defaultProvider) this.selectedProvider = defaultProvider;
+	}
+	getProviders() {
+		return this.providers;
+	}
+	getSelectedProvider() {
+		return this.selectedProvider;
+	}
+	setSelectedProvider(provider) {
+		this.selectedProvider = provider;
+	}
+	getAvailableModels() {
+		return this.availableModels;
+	}
+	isLoadingModels() {
+		return this.loadingModels;
+	}
+	async saveSettings(providerName, model, apiKey, requireToolApproval, toolApprovalAllowlist) {
+		const settings = { ...await appSettings.get(VIEW_SETTINGS_KEY) || {} };
+		if (requireToolApproval !== void 0) settings.requireToolApproval = requireToolApproval;
+		if (toolApprovalAllowlist !== void 0) settings.toolApprovalAllowlist = toolApprovalAllowlist;
+		await appSettings.set(VIEW_SETTINGS_KEY, settings);
+		const provider = this.providers.find((p) => p.name === providerName);
+		if (provider) {
+			this.selectedProvider = {
+				...provider,
+				model,
+				...apiKey !== void 0 && { apiKey }
+			};
+			await this.updateProviderInAIConfig(providerName, {
+				model,
+				...apiKey !== void 0 && { apiKey }
+			});
+			await this.aiService.setDefaultProvider(providerName);
+		}
+	}
+	async updateProviderInAIConfig(providerName, updates) {
+		const aiConfig = await appSettings.get("aiConfig") || {};
+		if (!aiConfig.providers || !Array.isArray(aiConfig.providers)) return;
+		const idx = aiConfig.providers.findIndex((p) => p.name === providerName);
+		if (idx >= 0) {
+			aiConfig.providers[idx] = {
+				...aiConfig.providers[idx],
+				...updates
+			};
+			await appSettings.set(KEY_AI_CONFIG, aiConfig);
+		}
+	}
+	async loadToolApprovalAllowlist() {
+		return (await appSettings.get(VIEW_SETTINGS_KEY) || {}).toolApprovalAllowlist || [];
+	}
+	async fetchModels(providerName) {
+		const provider = this.providers.find((p) => p.name === providerName);
+		if (!provider) return;
+		this.loadingModels = true;
+		this.availableModels = [];
+		try {
+			this.availableModels = await this.providerFactory.getProvider(provider).getAvailableModels?.(provider) ?? [];
+		} finally {
+			this.loadingModels = false;
+		}
+	}
+};
+//#endregion
+//#region src/view/agent-group-manager.ts
+var AgentGroupManager = class {
+	constructor() {
+		this.groups = /* @__PURE__ */ new Map();
+	}
+	createGroup(sessionId, userMessageIndex, userMessage, roles, getAgentMetadata) {
+		const groupId = `group-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+		this.currentGroupId = groupId;
+		const group = {
+			id: groupId,
+			sessionId,
+			userMessageIndex,
+			userMessage,
+			timestamp: /* @__PURE__ */ new Date(),
+			agents: /* @__PURE__ */ new Map(),
+			messageIndices: /* @__PURE__ */ new Map()
+		};
+		roles.forEach((role) => {
+			const { label, icon } = getAgentMetadata(role);
+			group.agents.set(role, {
+				role,
+				label,
+				icon,
+				status: "streaming"
+			});
+		});
+		this.groups.set(groupId, group);
+		return groupId;
+	}
+	getGroup(groupId) {
+		return this.groups.get(groupId);
+	}
+	updateAgentStatus(groupId, role, status, message, messageIndex) {
+		const group = this.groups.get(groupId);
+		if (!group) return;
+		const agentInfo = group.agents.get(role);
+		if (!agentInfo) return;
+		agentInfo.status = status;
+		if (message) agentInfo.message = message;
+		if (messageIndex !== void 0) {
+			agentInfo.messageIndex = messageIndex;
+			group.messageIndices.set(role, messageIndex);
+		}
+	}
+	getGroupsForSession(sessionId) {
+		return Array.from(this.groups.values()).filter((g) => g.sessionId === sessionId);
+	}
+	findGroupForUserMessage(sessionId, userMessageIndex, userMessage) {
+		return Array.from(this.groups.values()).find((g) => g.sessionId === sessionId && g.userMessageIndex === userMessageIndex && g.userMessage === userMessage);
+	}
+	findGroupForMessage(sessionId, messageRole, messageIndex) {
+		return Array.from(this.groups.values()).find((g) => g.sessionId === sessionId && g.messageIndices.get(messageRole) === messageIndex);
+	}
+	getCurrentGroupId() {
+		return this.currentGroupId;
+	}
+	setCurrentGroupId(groupId) {
+		this.currentGroupId = groupId;
+	}
+	clearCurrentGroup() {
+		this.currentGroupId = void 0;
+	}
+	getAllGroups() {
+		return Array.from(this.groups.values());
+	}
+	clearAll() {
+		this.groups.clear();
+		this.currentGroupId = void 0;
+	}
+};
+//#endregion
+//#region src/view/components/ai-chat-message.ts
+var AIChatMessage = class AIChatMessage extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isStreaming = false;
+		this.showHeader = true;
+	}
+	updated(_changedProperties) {
+		super.updated(_changedProperties);
+		if (_changedProperties.has("message") || !this.hasAttribute("data-is-user")) this.updateAlignment();
+	}
+	updateAlignment() {
+		if (this.message) this.setAttribute("data-is-user", String(this.message.role === "user"));
+	}
+	copyToClipboard(text) {
+		navigator.clipboard.writeText(text).catch((err) => console.error("Failed to copy:", err));
+	}
+	processMarkdownContent(markdownHtml) {
+		if (markdownHtml.includes("code-blocwrapper")) return markdownHtml;
+		return markdownHtml.replace(/<pre><code([^>]*)>([\s\S]*?)<\/code><\/pre>/gi, (_, attrs, codeText) => `
+            <div class="code-blocwrapper">
+                <div class="code-blocheader">
+                    <wa-copy-button value="${this.escapeHtmlAttribute(codeText.trim())}" size="small" label="Copy code"></wa-copy-button>
+                </div>
+                <div class="code-bloccontent">
+                    <pre><code${attrs}>${codeText}</code></pre>
+                </div>
+            </div>`);
+	}
+	escapeHtmlAttribute(text) {
+		return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+	}
+	handleResend(e) {
+		e?.preventDefault();
+		e?.stopPropagation();
+		if (!this.message) return;
+		this.dispatchEvent(new CustomEvent("resend", {
+			detail: {
+				message: this.message,
+				messageIndex: this.messageIndex
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		if (!this.message) return html``;
+		const message = this.message;
+		const isUser = message.role === "user";
+		return html`
+            <div class="message-wrapper ${isUser ? "user" : "assistant"} ${this.isStreaming ? "streaming" : ""}">
+                ${when(this.showHeader && !isUser, () => html`
+                    <div class="message-header">
+                        <div class="message-meta">
+                            <wa-icon name="robot" label="${message.role}"></wa-icon>
+                            <span class="role-name">${message.role}</span>
+                        </div>
+                    <div class="message-actions">
+                        <wa-button variant="neutral" appearance="plain" size="small" title="Copy"
+                            @click="${() => this.copyToClipboard(message.content)}">
+                            <wa-icon slot="label" name="copy" label="Copy"></wa-icon>
+                        </wa-button>
+                    </div>
+                    </div>
+                `)}
+                <div class="message-content-wrapper ${isUser ? "user" : ""}">
+                    <div class="message-content">
+                        ${unsafeHTML(this.processMarkdownContent(marked.parse(message.content || "")))}
+                        ${when(this.isStreaming, () => html`<span class="streaming-cursor">▋</span>`)}
+                    </div>
+                    ${when(isUser, () => html`
+                        <wa-button variant="neutral" appearance="plain" size="small" title="Copy"
+                            @click="${() => this.copyToClipboard(message.content)}">
+                            <wa-icon name="copy" label="Copy"></wa-icon>
+                        </wa-button>
+                        <wa-button variant="neutral" appearance="plain" size="small" title="Resend"
+                            @click="${(e) => this.handleResend(e)}">
+                            <wa-icon name="rotate-right" label="Resend"></wa-icon>
+                        </wa-button>
+                    `)}
+                </div>
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            max-width: 85%;
+            box-sizing: border-box;
+            animation: slideIn 0.2s ease-out;
+        }
+
+        :host([data-is-user="true"]) { align-self: flex-end; }
+        :host([data-is-user="false"]) { align-self: flex-start; }
+
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .message-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .message-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0 0.5rem;
+        }
+
+        .message-meta {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.875rem;
+            color: var(--wa-color-text-quiet);
+        }
+
+        .role-name { text-transform: capitalize; }
+
+        .message-actions {
+            display: flex;
+            gap: 0.25rem;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+
+        .message-wrapper:hover .message-actions,
+        :host:hover .message-actions { opacity: 1; }
+
+        .message-content-wrapper {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.5rem;
+            width: 100%;
+        }
+
+        .message-content-wrapper.user {
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .message-content {
+            padding: 0.5rem 0.75rem;
+            border-radius: 0.25rem;
+            background-color: var(--wa-color-surface-default);
+            word-break: breaword;
+            overflow-wrap: breaword;
+            max-width: 100%;
+            box-sizing: border-box;
+            line-height: 1.3;
+            font-size: 0.9rem;
+        }
+
+        .message-content-wrapper.user .message-content {
+            padding: 0.0625rem 0.75rem;
+            background-color: var(--wa-color-brand-fill-quiet);
+            color: var(--wa-color-text-normal);
+            line-height: 1.4;
+            flex: 1;
+        }
+
+        .message-content p { margin: 0; padding: 0; }
+        .message-content ul, .message-content ol { margin: 0.25rem 0; padding-left: 1.25rem; }
+        .message-content li { margin: 0.125rem 0; padding: 0; line-height: 1.3; }
+        .message-content :first-child { margin-top: 0; padding-top: 0; }
+        .message-content :last-child { margin-bottom: 0; padding-bottom: 0; }
+
+        .message-content pre {
+            white-space: pre-wrap;
+            word-break: breaall;
+            max-width: 100%;
+            box-sizing: border-box;
+            overflow-x: auto;
+            margin: 0;
+        }
+
+        .message-content code {
+            font-family: 'Courier New', monospace;
+            background-color: var(--wa-color-surface-lowered);
+            padding: 0.125rem 0.25rem;
+            border-radius: 0.125rem;
+        }
+
+        .message-content pre code { background-color: transparent; padding: 0; display: block; }
+
+        .code-blocwrapper {
+            margin: 0.75rem 0;
+            border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
+            border-radius: var(--wa-border-radius-m);
+            background-color: var(--wa-color-surface-lowered);
+            overflow: hidden;
+        }
+
+        .code-blocheader {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding: 0.375rem 0.5rem;
+            border-bottom: solid var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
+            background-color: var(--wa-color-surface-default);
+        }
+
+        .code-bloccontent { padding: 0.75rem; overflow-x: auto; }
+        .code-bloccontent pre { margin: 0; background-color: transparent; }
+        .code-bloccontent code { background-color: transparent; padding: 0; }
+
+        .streaming-cursor {
+            display: inline-block;
+            animation: blink 1s infinite;
+            color: var(--wa-color-brand-50);
+        }
+
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0; }
+        }
+    `;
+	}
+};
+_decorate([property({
+	type: Object,
+	attribute: false
+})], AIChatMessage.prototype, "message", void 0);
+_decorate([property({ type: Boolean })], AIChatMessage.prototype, "isStreaming", void 0);
+_decorate([property({ type: Boolean })], AIChatMessage.prototype, "showHeader", void 0);
+_decorate([property({
+	type: Number,
+	attribute: false
+})], AIChatMessage.prototype, "messageIndex", void 0);
+AIChatMessage = _decorate([customElement("lyra-ai-chat-message")], AIChatMessage);
+//#endregion
+//#region src/view/components/ai-chat-input.ts
+var AIChatInput = class AIChatInput extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.disabled = false;
+		this.busy = false;
+		this.hasProvider = true;
+	}
+	onInput(event) {
+		this.value = event.target.value;
+		this.dispatchEvent(new CustomEvent("input-change", {
+			detail: { value: this.value },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	onKeyDown(event) {
+		if (event.key === "Enter" && !event.shiftKey) {
+			event.preventDefault();
+			this.send();
+		}
+	}
+	async send() {
+		if (!this.value.trim() || this.disabled || !this.hasProvider) return;
+		const messageValue = this.value;
+		this.value = "";
+		this.requestUpdate();
+		await this.updateComplete;
+		if (this.textareaElement) {
+			this.textareaElement.value = "";
+			this.textareaElement.focus();
+		}
+		this.dispatchEvent(new CustomEvent("send", {
+			detail: { value: messageValue },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	cancel() {
+		this.dispatchEvent(new CustomEvent("cancel", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+            <div class="input-container">
+                <div class="input-row">
+                    <wa-textarea
+                        placeholder="Type a message... (Enter to send, Shift+Enter for new line)"
+                        size="small"
+                        resize="auto"
+                        rows="1"
+                        .value="${this.value}"
+                        ?disabled="${this.disabled || !this.hasProvider}"
+                        @input="${this.onInput}"
+                        @keydown="${this.onKeyDown}">
+                    </wa-textarea>
+                    ${when(this.busy, () => html`
+                        <wa-button appearance="plain" size="small" @click="${this.cancel}">
+                            <wa-icon name="stop" label="Stop"></wa-icon>
+                        </wa-button>
+                    `)}
+                </div>
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host { display: block; width: 100%; }
+        .input-container { margin-bottom: 0.25rem; margin-left: 0.25rem; }
+        .input-row { display: flex; gap: 0.5rem; align-items: flex-end; }
+        wa-textarea { flex: 1; min-width: 0; }
+    `;
+	}
+};
+_decorate([property({ type: String })], AIChatInput.prototype, "value", void 0);
+_decorate([property({ type: Boolean })], AIChatInput.prototype, "disabled", void 0);
+_decorate([property({ type: Boolean })], AIChatInput.prototype, "busy", void 0);
+_decorate([property({ type: Boolean })], AIChatInput.prototype, "hasProvider", void 0);
+_decorate([query("wa-textarea")], AIChatInput.prototype, "textareaElement", void 0);
+AIChatInput = _decorate([customElement("lyra-ai-chat-input")], AIChatInput);
+//#endregion
+//#region src/view/components/ai-agent-response-group.ts
+var AIAgentResponseGroup = class AIAgentResponseGroup extends LitElement {
+	copyToClipboard(text) {
+		navigator.clipboard.writeText(text).catch((err) => console.error("Failed to copy:", err));
+	}
+	renderStatusIcon(status) {
+		switch (status) {
+			case "streaming": return html`<wa-icon name="spinner" class="spinning"></wa-icon>`;
+			case "completed": return html`<wa-icon name="check-circle" class="status-success"></wa-icon>`;
+			case "error": return html`<wa-icon name="exclamation-circle" class="status-error"></wa-icon>`;
+		}
+	}
+	renderCard(agentInfo, message) {
+		if (!message) return html`
+                <div class="agent-card status-${agentInfo.status}">
+                    <div class="agent-card-header">
+                        <wa-icon name="${agentInfo.icon}" label="${agentInfo.label}"></wa-icon>
+                        <span>${agentInfo.label}</span>
+                        ${this.renderStatusIcon(agentInfo.status)}
+                    </div>
+                    <div class="agent-card-content waiting">Waiting for response...</div>
+                </div>
+            `;
+		return html`
+            <div class="agent-card status-${agentInfo.status}">
+                <div class="agent-card-header">
+                    <wa-icon name="${agentInfo.icon}" label="${agentInfo.label}"></wa-icon>
+                    <span>${agentInfo.label}</span>
+                    ${this.renderStatusIcon(agentInfo.status)}
+                    <div class="agent-card-actions">
+                        <wa-button variant="neutral" appearance="plain" size="small" title="Copy"
+                            @click="${() => this.copyToClipboard(message.content || "")}">
+                            <wa-icon name="copy" label="Copy"></wa-icon>
+                        </wa-button>
+                    </div>
+                </div>
+                <div class="agent-card-content">
+                    <lyra-ai-chat-message
+                        .message="${message}"
+                        .isStreaming="${agentInfo.status === "streaming"}"
+                        .showHeader="${false}"
+                        .messageIndex="${agentInfo.messageIndex}">
+                    </lyra-ai-chat-message>
+                </div>
+            </div>
+        `;
+	}
+	render() {
+		if (!this.group) return html``;
+		const agents = Array.from(this.group.agents.values());
+		const completedCount = agents.filter((a) => a.status === "completed").length;
+		const streamingCount = agents.filter((a) => a.status === "streaming").length;
+		const errorCount = agents.filter((a) => a.status === "error").length;
+		const allDone = agents.length > 0 && completedCount + errorCount === agents.length;
+		return html`
+            <div class="agent-response-group">
+                ${when(!(agents.length === 1), () => html`
+                    <div class="group-header">
+                        <wa-icon name="robot" label="Multiple Agents"></wa-icon>
+                        <span>Multiple Agents</span>
+                        <span class="status-badge">
+                            ${when(streamingCount > 0, () => html`<span class="streaming">${streamingCount} responding</span>`)}
+                            ${when(allDone, () => html`<span class="done">All completed (${completedCount})</span>`)}
+                        </span>
+                    </div>
+                `)}
+                <div class="group-content">
+                    ${repeat(agents, (a) => a.role, (agentInfo) => {
+			const message = agentInfo.message || (agentInfo.status === "streaming" && this.findStreamingMessage ? this.findStreamingMessage(agentInfo.role) : void 0);
+			return this.renderCard(agentInfo, message);
+		})}
+                </div>
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host { display: block; width: 100%; box-sizing: border-box; }
+
+        .agent-response-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            width: 100%;
+        }
+
+        .group-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 0.75rem;
+            background-color: var(--wa-color-surface-lowered);
+            border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+            font-weight: 500;
+        }
+
+        .status-badge {
+            display: flex;
+            gap: 0.5rem;
+            margin-left: auto;
+            font-size: 0.875rem;
+        }
+
+        .streaming { color: var(--wa-color-brand-50); }
+        .done { color: var(--wa-color-success-70); font-weight: 600; }
+
+        .group-content {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            width: 100%;
+        }
+
+        .agent-card {
+            display: flex;
+            flex-direction: column;
+            border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+            background-color: var(--wa-color-surface-default);
+        }
+
+        .agent-card.status-streaming { border-color: var(--wa-color-brand-border-quiet); }
+        .agent-card.status-completed { border-color: var(--wa-color-success-border-quiet); }
+        .agent-card.status-error { border-color: var(--wa-color-danger-border-quiet); }
+
+        .agent-card-header {
+            display: flex;
+            align-items: center;
+            gap: 0.375rem;
+            padding: 0.375rem 0.5rem;
+            border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
+            background-color: var(--wa-color-surface-lowered);
+            font-weight: 500;
+            font-size: 0.875rem;
+        }
+
+        .agent-card-actions { margin-left: auto; display: flex; gap: 0.25rem; }
+        .agent-card-content { padding: 0.375rem; }
+        .waiting { padding: 1rem; text-align: center; color: var(--wa-color-text-quiet); }
+
+        .spinning { animation: spin 1s linear infinite; }
+        .status-success { color: var(--wa-color-success-60); }
+        .status-error { color: var(--wa-color-danger-60); }
+
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+    `;
+	}
+};
+_decorate([property({
+	type: Object,
+	attribute: false
+})], AIAgentResponseGroup.prototype, "group", void 0);
+_decorate([property({
+	type: Function,
+	attribute: false
+})], AIAgentResponseGroup.prototype, "findStreamingMessage", void 0);
+AIAgentResponseGroup = _decorate([customElement("lyra-ai-agent-response-group")], AIAgentResponseGroup);
+//#endregion
+//#region src/view/components/ai-tool-approval.ts
+var AIToolApproval = class AIToolApproval extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.pendingApprovals = /* @__PURE__ */ new Map();
+	}
+	approve(approvalId, approval) {
+		this.dispatchEvent(new CustomEvent("approve", {
+			detail: {
+				approvalId,
+				approval
+			},
+			bubbles: true,
+			composed: true
+		}));
+		approval.resolve(true);
+		this.pendingApprovals.delete(approvalId);
+		this.requestUpdate();
+	}
+	deny(approvalId, approval) {
+		approval.resolve(false);
+		this.pendingApprovals.delete(approvalId);
+		this.requestUpdate();
+	}
+	formatArgs(argsStr) {
+		let parsed = {};
+		try {
+			parsed = JSON.parse(argsStr);
+		} catch {}
+		return Object.entries(parsed).map(([k, v]) => `${k}=${JSON.stringify(v)}`).join(", ");
+	}
+	render() {
+		if (this.pendingApprovals.size === 0) return html``;
+		return html`
+            <div class="approval-container">
+                ${Array.from(this.pendingApprovals.entries()).map(([id, approval]) => {
+			const toolCalls = approval.request.toolCalls;
+			const first = toolCalls[0];
+			return html`
+                        <wa-details class="approval-item">
+                            <span slot="summary" class="approval-summary">
+                                <span>${toolCalls.length === 1 ? `AI wants to execute: ${first?.function.name}()` : `AI wants to execute ${toolCalls.length} tools`}</span>
+                                <div class="approval-inline-actions">
+                                    <wa-button appearance="plain" size="small" variant="neutral"
+                                        @click="${(e) => {
+				e.stopPropagation();
+				this.deny(id, approval);
+			}}">
+                                        <wa-icon name="xmark" label="Deny"></wa-icon>
+                                    </wa-button>
+                                    <wa-button appearance="plain" size="small" variant="success"
+                                        @click="${async (e) => {
+				e.stopPropagation();
+				this.approve(id, approval);
+			}}">
+                                        <wa-icon name="check" label="Approve"></wa-icon>
+                                    </wa-button>
+                                </div>
+                            </span>
+                            <div class="approval-detail">
+                                <strong>${approval.role} wants to execute:</strong>
+                                <ul class="tool-list">
+                                    ${repeat(toolCalls, (tc) => tc.id, (tc) => {
+				const argsStr = this.formatArgs(tc.function.arguments || "{}");
+				return html`
+                                            <li class="tool-item">
+                                                <label class="always-allow-label">
+                                                    <wa-checkbox
+                                                        ?checked="${approval.alwaysAllowSelections.get(tc.id) || false}"
+                                                        @change="${(e) => {
+					approval.alwaysAllowSelections.set(tc.id, e.target.checked);
+					this.requestUpdate();
+				}}">
+                                                    </wa-checkbox>
+                                                    <span>Always allow</span>
+                                                </label>
+                                                <code>${tc.function.name}(${argsStr})</code>
+                                            </li>
+                                        `;
+			})}
+                                </ul>
+                            </div>
+                        </wa-details>
+                    `;
+		})}
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host { display: block; }
+
+        .approval-container {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            padding: 0.75rem 1rem;
+            border-top: solid var(--wa-border-width-s) var(--wa-color-warning-border-normal);
+            background-color: var(--wa-color-warning-fill-quiet);
+        }
+
+        .approval-summary {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 1rem;
+            width: 100%;
+        }
+
+        .approval-inline-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
+
+        .approval-detail {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            padding: 0.75rem 0;
+            font-size: 0.875rem;
+        }
+
+        .tool-list { margin: 0.5rem 0 0 1.5rem; padding: 0; list-style: disc; }
+
+        .tool-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin: 0.5rem 0;
+        }
+
+        .always-allow-label {
+            display: flex;
+            align-items: center;
+            gap: 0.375rem;
+            cursor: pointer;
+        }
+
+        code {
+            font-family: var(--wa-font-mono);
+            font-size: 0.875rem;
+            padding: 0.125rem 0.25rem;
+            background-color: var(--wa-color-neutral-fill-subtle);
+            border-radius: var(--wa-border-radius-s);
+        }
+    `;
+	}
+};
+_decorate([property({
+	type: Map,
+	attribute: false
+})], AIToolApproval.prototype, "pendingApprovals", void 0);
+AIToolApproval = _decorate([customElement("lyra-ai-tool-approval")], AIToolApproval);
+//#endregion
+//#region src/view/components/ai-empty-state.ts
+var AIEmptyState = class AIEmptyState extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.message = "No AI provider configured";
+		this.hint = "Click the settings icon to configure an AI provider";
+	}
+	render() {
+		return html`
+            <div class="empty-state">
+                <wa-icon name="robot" style="font-size: 3rem; opacity: 0.3;"></wa-icon>
+                <p>${this.message}</p>
+                <p class="hint">${this.hint}</p>
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            text-align: center;
+            color: var(--wa-color-text-quiet);
+        }
+
+        .empty-state p { margin: 0.5rem 0; }
+        .hint { font-size: 0.875rem; opacity: 0.7; }
+    `;
+	}
+};
+_decorate([property({ type: String })], AIEmptyState.prototype, "message", void 0);
+_decorate([property({ type: String })], AIEmptyState.prototype, "hint", void 0);
+AIEmptyState = _decorate([customElement("lyra-ai-empty-state")], AIEmptyState);
+//#endregion
+//#region src/view/task-progress-panel.ts
+var STATUS_ICON = {
+	running: "spinner",
+	completed: "check-circle",
+	failed: "exclamation-circle",
+	skipped: "forward",
+	pending: "circle"
+};
+var STATUS_COLOR = {
+	running: "var(--wa-color-brand-50)",
+	completed: "var(--wa-color-success-60)",
+	failed: "var(--wa-color-danger-60)",
+	skipped: "var(--wa-color-neutral-40)",
+	pending: "var(--wa-color-neutral-40)"
+};
+var AITaskProgressPanel = class AITaskProgressPanel extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.expanded = true;
+	}
+	render() {
+		if (!this.plan) return html``;
+		const completedCount = this.plan.steps.filter((s) => s.status === "completed").length;
+		const totalCount = this.plan.steps.length;
+		return html`
+            <div class="taspanel">
+                <div class="panel-header" @click="${() => {
+			this.expanded = !this.expanded;
+		}}">
+                    <wa-icon name="diagram-project" label="Task Plan"></wa-icon>
+                    <span class="panel-title">Task Plan</span>
+                    <span class="progress-text">${completedCount}/${totalCount}</span>
+                    <wa-progress-bar value="${totalCount > 0 ? Math.round(completedCount / totalCount * 100) : 0}" class="progress-bar"></wa-progress-bar>
+                    <wa-icon name="${this.expanded ? "chevron-up" : "chevron-down"}" label="toggle"></wa-icon>
+                </div>
+                ${when(this.expanded, () => html`
+                    <div class="panel-body">
+                        ${repeat(this.plan.steps, (s) => s.id, (step) => html`
+                            <div class="step-row">
+                                <wa-icon
+                                    name="${STATUS_ICON[step.status] ?? "circle"}"
+                                    style="color: ${STATUS_COLOR[step.status] ?? "var(--wa-color-neutral-40)"}; ${step.status === "running" ? "animation: spin 1s linear infinite;" : ""}">
+                                </wa-icon>
+                                <div class="step-info">
+                                    <span class="step-role">${step.role}</span>
+                                    <span class="step-task">${step.subTask}</span>
+                                </div>
+                                ${when(step.revisions > 0, () => html`
+                                    <span class="revisions-badge">${step.revisions} rev</span>
+                                `)}
+                            </div>
+                        `)}
+                    </div>
+                `)}
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host { display: block; }
+
+        .taspanel {
+            border: solid var(--wa-border-width-s) var(--wa-color-brand-border-quiet);
+            border-radius: var(--wa-border-radius-m);
+            background: var(--wa-color-surface-default);
+            margin: 0.5rem 0;
+        }
+
+        .panel-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 0.75rem;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .panel-title {
+            font-weight: 500;
+            flex: 0 0 auto;
+        }
+
+        .progress-text {
+            font-size: 0.8rem;
+            color: var(--wa-color-text-quiet);
+        }
+
+        .progress-bar {
+            flex: 1;
+            min-width: 60px;
+        }
+
+        .panel-body {
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+            padding: 0.5rem 0.75rem;
+            border-top: solid var(--wa-border-width-s) var(--wa-color-neutral-border-subtle);
+        }
+
+        .step-row {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.5rem;
+            padding: 0.25rem 0;
+        }
+
+        .step-info {
+            display: flex;
+            flex-direction: column;
+            gap: 0.125rem;
+            flex: 1;
+            min-width: 0;
+        }
+
+        .step-role {
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--wa-color-text-quiet);
+            text-transform: uppercase;
+        }
+
+        .step-task {
+            font-size: 0.85rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .revisions-badge {
+            font-size: 0.7rem;
+            padding: 0.1rem 0.3rem;
+            background: var(--wa-color-warning-fill-quiet);
+            border-radius: var(--wa-border-radius-s);
+            color: var(--wa-color-warning-70);
+            flex-shrink: 0;
+        }
+
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+    `;
+	}
+};
+_decorate([property({
+	type: Object,
+	attribute: false
+})], AITaskProgressPanel.prototype, "plan", void 0);
+_decorate([state()], AITaskProgressPanel.prototype, "expanded", void 0);
+AITaskProgressPanel = _decorate([customElement("lyra-ai-task-progress-panel")], AITaskProgressPanel);
+//#endregion
+//#region src/view/workspace-panel.ts
+var ARTIFACT_TYPE_ICON = {
+	code: "code",
+	json: "brackets-curly",
+	"file-list": "list",
+	plan: "diagram-project",
+	review: "magnifying-glass",
+	text: "file-lines"
+};
+var AIWorkspacePanel = class AIWorkspacePanel extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.artifacts = [];
+		this.expanded = false;
+	}
+	render() {
+		if (this.artifacts.length === 0) return html``;
+		return html`
+            <div class="workspace-panel">
+                <div class="panel-header" @click="${() => {
+			this.expanded = !this.expanded;
+			this.selectedArtifact = void 0;
+		}}">
+                    <wa-icon name="folder-open" label="Workspace"></wa-icon>
+                    <span class="panel-title">Workspace</span>
+                    <span class="count-badge">${this.artifacts.length} artifact${this.artifacts.length !== 1 ? "s" : ""}</span>
+                    <wa-icon name="${this.expanded ? "chevron-up" : "chevron-down"}" label="toggle"></wa-icon>
+                </div>
+                ${when(this.expanded, () => html`
+                    <div class="panel-body">
+                        <div class="artifact-list">
+                            ${repeat(this.artifacts, (a) => a.id, (artifact) => html`
+                                <div
+                                    class="artifact-item ${this.selectedArtifact?.id === artifact.id ? "selected" : ""}"
+                                    @click="${() => {
+			this.selectedArtifact = this.selectedArtifact?.id === artifact.id ? void 0 : artifact;
+		}}">
+                                    <wa-icon name="${ARTIFACT_TYPE_ICON[artifact.type] ?? "file-lines"}" label="${artifact.type}"></wa-icon>
+                                    <div class="artifact-meta">
+                                        <span class="artifact-id">${artifact.id}</span>
+                                        <span class="artifact-producer">by ${artifact.producedBy}</span>
+                                    </div>
+                                    <span class="artifact-type">${artifact.type}</span>
+                                </div>
+                                ${when(this.selectedArtifact?.id === artifact.id, () => html`
+                                    <div class="artifact-content">
+                                        <pre>${artifact.content}</pre>
+                                    </div>
+                                `)}
+                            `)}
+                        </div>
+                    </div>
+                `)}
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host { display: block; }
+
+        .workspace-panel {
+            border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-subtle);
+            border-radius: var(--wa-border-radius-m);
+            background: var(--wa-color-surface-default);
+            margin: 0.5rem 0;
+        }
+
+        .panel-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 0.75rem;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .panel-title { font-weight: 500; }
+
+        .count-badge {
+            font-size: 0.8rem;
+            color: var(--wa-color-text-quiet);
+            margin-left: auto;
+        }
+
+        .panel-body {
+            border-top: solid var(--wa-border-width-s) var(--wa-color-neutral-border-subtle);
+        }
+
+        .artifact-list { display: flex; flex-direction: column; }
+
+        .artifact-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.4rem 0.75rem;
+            cursor: pointer;
+        }
+
+        .artifact-item:hover { background: var(--wa-color-surface-lowered); }
+        .artifact-item.selected { background: var(--wa-color-brand-fill-quiet); }
+
+        .artifact-meta {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-width: 0;
+        }
+
+        .artifact-id {
+            font-size: 0.85rem;
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .artifact-producer {
+            font-size: 0.75rem;
+            color: var(--wa-color-text-quiet);
+        }
+
+        .artifact-type {
+            font-size: 0.75rem;
+            padding: 0.1rem 0.3rem;
+            background: var(--wa-color-surface-lowered);
+            border-radius: var(--wa-border-radius-s);
+        }
+
+        .artifact-content {
+            padding: 0.5rem 0.75rem;
+            border-top: solid var(--wa-border-width-s) var(--wa-color-neutral-border-subtle);
+            background: var(--wa-color-surface-lowered);
+        }
+
+        .artifact-content pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-break: breaword;
+            font-size: 0.8rem;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+    `;
+	}
+};
+_decorate([property({
+	type: Array,
+	attribute: false
+})], AIWorkspacePanel.prototype, "artifacts", void 0);
+_decorate([state()], AIWorkspacePanel.prototype, "expanded", void 0);
+_decorate([state()], AIWorkspacePanel.prototype, "selectedArtifact", void 0);
+AIWorkspacePanel = _decorate([customElement("lyra-ai-workspace-panel")], AIWorkspacePanel);
+//#endregion
+//#region src/view/aiview.ts
+var LyraAIView = class LyraAIView extends LyraPart {
+	constructor(..._args) {
+		super(..._args);
+		this.sessionManager = new SessionManager();
+		this.streamManager = new StreamManager(() => {
+			this.requestUpdate();
+			if (this.scrollDebounceTimer) clearTimeout(this.scrollDebounceTimer);
+			this.scrollDebounceTimer = setTimeout(async () => {
+				await this.updateComplete;
+				this.scrollToBottom();
+				this.scrollDebounceTimer = void 0;
+			}, 100);
+		});
+		this.providerManager = new ProviderManager(aiService);
+		this.agentGroupManager = new AgentGroupManager();
+		this.busy = false;
+		this.inputValue = "";
+		this.requireToolApproval = true;
+		this.showHistory = false;
+		this.currentArtifacts = [];
+		this.pendingToolApprovals = /* @__PURE__ */ new Map();
+		this.toolApprovalAllowlist = /* @__PURE__ */ new Set();
+	}
+	async doBeforeUI() {
+		this.subscribe(TOPIC_AICONFIG_CHANGED, () => this.onAIConfigChanged());
+		await this.sessionManager.load();
+		if (!this.sessionManager.getActiveSession()) this.sessionManager.createSession();
+		await this.providerManager.initialize();
+		await this.loadSettings();
+		this.requestUpdate();
+	}
+	async onAIConfigChanged() {
+		await this.providerManager.initialize();
+		await this.loadSettings();
+		this.requestUpdate();
+	}
+	async loadSettings() {
+		this.requireToolApproval = (await appSettings.get("aiConfig") || {}).requireToolApproval !== false;
+		const allowlist = await this.providerManager.loadToolApprovalAllowlist();
+		this.toolApprovalAllowlist = new Set(allowlist);
+	}
+	async scrollToBottom() {
+		await this.updateComplete;
+		const scroller = this.shadowRoot?.querySelector("wa-scroller.chat-messages");
+		if (!scroller) return;
+		const container = scroller.shadowRoot?.querySelector(".scroll-container");
+		if (container) container.scrollTop = container.scrollHeight;
+		else if (scroller.scrollTo) scroller.scrollTo({
+			top: scroller.scrollHeight,
+			behavior: "smooth"
+		});
+	}
+	resetViewState() {
+		this.inputValue = "";
+		this.showHistory = false;
+		this.currentTaskPlan = void 0;
+		this.currentArtifacts = [];
+		this.requestUpdate();
+	}
+	createNewSession() {
+		this.sessionManager.createSession();
+		this.resetViewState();
+	}
+	switchToSession(sessionId) {
+		if (!this.sessionManager.switchToSession(sessionId)) return;
+		this.resetViewState();
+	}
+	deletePastSession(sessionId) {
+		this.sessionManager.deletePastSession(sessionId);
+		this.requestUpdate();
+	}
+	async sendMessage() {
+		const prompt = this.inputValue.trim();
+		if (!prompt || this.busy) return;
+		this.inputValue = "";
+		await this.handlePrompt(prompt);
+	}
+	async handleResend(message) {
+		if (!message || message.role !== "user") return;
+		await this.handlePrompt(message.content);
+	}
+	cancelStream() {
+		this.abortController?.abort();
+		this.abortController = void 0;
+		this.busy = false;
+		this.streamManager.cancelUpdates();
+	}
+	async handlePrompt(prompt) {
+		if (prompt.startsWith("/")) {
+			await this.runCommand(prompt.substring(1));
+			return;
+		}
+		const selectedProvider = this.providerManager.getSelectedProvider();
+		if (!selectedProvider) {
+			toastError("Please configure an AI provider in settings");
+			return;
+		}
+		const session = this.sessionManager.getActiveSession();
+		if (!session) return;
+		const message = aiService.createMessage(prompt);
+		this.sessionManager.addMessage(message);
+		if (session.history.length === 1) this.sessionManager.setTitle(this.sessionManager.generateTitle(prompt));
+		this.requestUpdate();
+		await this.updateComplete;
+		this.scrollToBottom();
+		this.busy = true;
+		this.currentTaskPlan = void 0;
+		this.currentArtifacts = [];
+		this.abortController = new AbortController();
+		const streamingAgents = /* @__PURE__ */ new Map();
+		const chatContext = { history: [...session.history] };
+		const sessionId = session.id;
+		const execContext = commandRegistry.createExecutionContext();
+		const callContext = uiContext.createChild({ ...execContext });
+		const contributions = aiService.getAgentContributions();
+		if (contributions.length === 0) {
+			toastError("No agents are registered.");
+			this.busy = false;
+			return;
+		}
+		const matchingAgents = contributions.filter((c) => !c.canHandle || c.canHandle({
+			...callContext.getProxy(),
+			userPrompt: prompt
+		})).sort((a, b) => (b.priority || 0) - (a.priority || 0));
+		if (matchingAgents.length === 0) {
+			toastError(`No agents available. Available: ${contributions.map((c) => c.role).join(", ")}`);
+			this.busy = false;
+			return;
+		}
+		const roles = matchingAgents.map((a) => a.role);
+		const currentSession = this.sessionManager.getActiveSession();
+		if (!currentSession) return;
+		const groupId = this.agentGroupManager.createGroup(sessionId, currentSession.history.length - 1, message, roles, (role) => {
+			const contrib = contributions.find((c) => c.role === role);
+			return {
+				label: contrib?.label || role,
+				icon: contrib?.icon || "robot"
+			};
+		});
+		taskService.runAsync("Calling AI assistant", async () => {
+			return aiService.executeAgentWorkflow({
+				chatContext,
+				chatConfig: selectedProvider,
+				callContext,
+				execution: "parallel",
+				stream: true,
+				signal: this.abortController.signal,
+				roles,
+				requireToolApproval: this.requireToolApproval,
+				onToolApprovalRequest: async (role, request) => {
+					if (request.toolCalls.every((tc) => this.toolApprovalAllowlist.has(tc.function.name))) return true;
+					return new Promise((resolve) => {
+						const approvalId = `approval-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+						const pending = {
+							role,
+							request,
+							resolve,
+							alwaysAllowSelections: /* @__PURE__ */ new Map()
+						};
+						this.pendingToolApprovals.set(approvalId, pending);
+						this.requestUpdate();
+					});
+				},
+				onAgentStart: async (role) => {
+					const streamIndex = this.streamManager.createStreamingMessage(role);
+					streamingAgents.set(role, streamIndex);
+					this.agentGroupManager.updateAgentStatus(groupId, role, "streaming");
+					this.requestUpdate();
+					await this.updateComplete;
+					this.scrollToBottom();
+				},
+				onToken: (role, token) => {
+					const streamIndex = streamingAgents.get(role);
+					if (streamIndex !== void 0) this.streamManager.updateStreamingMessage(streamIndex, token);
+				},
+				onAgentComplete: async (role, completedMessage) => {
+					const targetSession = this.sessionManager.getActiveSession();
+					if (!targetSession || targetSession.id !== sessionId) return;
+					const streamIndex = streamingAgents.get(role);
+					if (streamIndex !== void 0) {
+						this.streamManager.completeStreamingMessage(streamIndex, completedMessage);
+						const messageIndex = targetSession.history.length;
+						this.sessionManager.addMessage(completedMessage);
+						streamingAgents.delete(role);
+						this.streamManager.removeStreamingMessage(streamIndex);
+						this.agentGroupManager.updateAgentStatus(groupId, role, "completed", completedMessage, messageIndex);
+						this.requestUpdate();
+						await this.updateComplete;
+						this.scrollToBottom();
+					}
+				},
+				onAgentError: (role, error) => {
+					const streamIndex = streamingAgents.get(role);
+					if (streamIndex !== void 0) {
+						this.streamManager.removeStreamingMessage(streamIndex);
+						streamingAgents.delete(role);
+					}
+					this.agentGroupManager.updateAgentStatus(groupId, role, "error", {
+						role,
+						content: `Error: ${error.message}`
+					});
+					this.requestUpdate();
+					toastError(`Agent ${role} error: ${error.message}`);
+				}
+			}).then(() => {
+				this.agentGroupManager.clearCurrentGroup();
+			});
+		}).catch((error) => {
+			if (error?.name !== "AbortError") toastError(`${error}`);
+		}).finally(async () => {
+			this.busy = false;
+			this.abortController = void 0;
+			this.streamManager.reset();
+			this.agentGroupManager.clearCurrentGroup();
+			this.requestUpdate();
+		});
+	}
+	async runCommand(prompt) {
+		const splits = prompt.trim().split(/\s+/);
+		if (splits.length === 0) return;
+		const commandId = splits.shift();
+		const command = commandRegistry.getCommand(commandId);
+		if (!command) {
+			toastError(`Command not found: ${commandId}`);
+			return;
+		}
+		const params = {};
+		splits.forEach((c, i) => {
+			if (command.parameters?.[i]) params[command.parameters[i].name] = c;
+		});
+		await commandRegistry.execute(commandId, commandRegistry.createExecutionContext(params));
+		this.requestUpdate();
+	}
+	handleToolApproval(e) {
+		const { approvalId, approval } = e.detail;
+		Array.from(approval.alwaysAllowSelections.entries()).filter(([, v]) => v).map(([k]) => k).forEach((name) => this.toolApprovalAllowlist.add(name));
+		this.pendingToolApprovals.delete(approvalId);
+		this.requestUpdate();
+	}
+	renderMessage(message, index, isStreaming = false) {
+		return html`
+            <lyra-ai-chat-message
+                .message="${message}"
+                .isStreaming="${isStreaming}"
+                .showHeader="${true}"
+                .messageIndex="${index}"
+                @resend="${(e) => this.handleResend(e.detail.message)}">
+            </lyra-ai-chat-message>
+        `;
+	}
+	renderToolbar() {
+		const past = this.sessionManager.getPastSessions();
+		return html`
+            <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.875rem;font-weight:500;padding:0 0.25rem;">${this.sessionManager.getActiveSession()?.title || "New Chat"}</span>
+            <wa-button appearance="plain" size="small" title="New chat"
+                @click="${() => this.createNewSession()}">
+                <wa-icon name="plus" label="New chat"></wa-icon>
+            </wa-button>
+            ${past.length > 0 ? html`
+                <wa-dropdown
+                    ?open="${this.showHistory}"
+                    @wa-after-hide="${() => {
+			this.showHistory = false;
+		}}"
+                    placement="bottom-start">
+                    <wa-button slot="trigger" appearance="plain" size="small" with-caret
+                        title="Chat history"
+                        @click="${() => {
+			this.showHistory = !this.showHistory;
+		}}">
+                        <wa-icon name="clock-rotate-left" label="History"></wa-icon>
+                    </wa-button>
+                    ${past.map((s) => html`
+                        <wa-dropdown-item @click="${() => this.switchToSession(s.id)}">
+                            <wa-icon name="message" label="Session" slot="icon"></wa-icon>
+                            <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${s.title || "Unnamed Chat"}</span>
+                            <wa-button slot="details" appearance="plain" size="small" title="Delete"
+                                @click="${(e) => {
+			e.stopPropagation();
+			this.deletePastSession(s.id);
+		}}">
+                                <wa-icon name="trash" label="Delete"></wa-icon>
+                            </wa-button>
+                        </wa-dropdown-item>
+                    `)}
+                </wa-dropdown>
+            ` : nothing}
+            <lyra-command cmd="open_ai_config" icon="gear" title="AI Settings"></lyra-command>
+        `;
+	}
+	renderContent() {
+		const session = this.sessionManager.getActiveSession();
+		const selectedProvider = this.providerManager.getSelectedProvider();
+		return html`
+            <div class="chat-container">
+                <wa-scroller class="chat-messages" orientation="vertical">
+                    <div class="chat-content">
+                        ${when(!selectedProvider, () => html`
+                            <lyra-ai-empty-state
+                                message="No AI provider configured"
+                                hint='Click the settings icon below to configure an AI provider'>
+                            </lyra-ai-empty-state>
+                        `, () => when(!session || session.history.length === 0, () => html`
+                            <lyra-ai-empty-state message="How can I help you?" hint=""></lyra-ai-empty-state>
+                        `, () => html`
+                            ${session.history.map((message, idx) => {
+			const group = this.agentGroupManager.findGroupForUserMessage(session.id, idx, message);
+			if (group && message.role === "user") return html`
+                                        <lyra-ai-chat-message
+                                            .message="${message}"
+                                            .isStreaming="${false}"
+                                            .showHeader="${true}"
+                                            .messageIndex="${idx}"
+                                            @resend="${(e) => this.handleResend(e.detail.message)}">
+                                        </lyra-ai-chat-message>
+                                        <lyra-ai-agent-response-group
+                                            .group="${group}"
+                                            .findStreamingMessage="${(role) => this.streamManager.findStreamingMessage(role)}">
+                                        </lyra-ai-agent-response-group>
+                                    `;
+			if (this.agentGroupManager.findGroupForMessage(session.id, message.role, idx)) return html``;
+			return this.renderMessage(message, idx);
+		})}
+
+                            ${this.streamManager.getAllStreamingMessages().filter((m) => !this.agentGroupManager.getAllGroups().some((g) => g.sessionId === session.id && g.agents.has(m.message.role))).map((m) => this.renderMessage(m.message, -1, m.isStreaming))}
+
+                            ${when(this.busy && this.streamManager.getAllStreamingMessages().length === 0, () => html`
+                                <div class="thinking-indicator">
+                                    <wa-progress-ring indeterminate size="small"></wa-progress-ring>
+                                    <span>Thinking…</span>
+                                </div>
+                            `)}
+                        `))}
+
+                        ${when(this.currentTaskPlan, () => html`
+                            <lyra-ai-task-progress-panel .plan="${this.currentTaskPlan}"></lyra-ai-task-progress-panel>
+                        `)}
+
+                        ${when(this.currentArtifacts.length > 0, () => html`
+                            <lyra-ai-workspace-panel .artifacts="${this.currentArtifacts}"></lyra-ai-workspace-panel>
+                        `)}
+                    </div>
+                </wa-scroller>
+
+                ${when(this.pendingToolApprovals.size > 0, () => html`
+                    <lyra-ai-tool-approval
+                        .pendingApprovals="${this.pendingToolApprovals}"
+                        @approve="${(e) => this.handleToolApproval(e)}">
+                    </lyra-ai-tool-approval>
+                `)}
+
+                <div class="input-area">
+                    <lyra-ai-chat-input
+                        .value="${this.inputValue}"
+                        .busy="${this.busy}"
+                        .disabled="${!selectedProvider}"
+                        .hasProvider="${!!selectedProvider}"
+                        @input-change="${(e) => {
+			this.inputValue = e.detail.value;
+		}}"
+                        @send="${(e) => {
+			this.inputValue = e.detail.value;
+			this.sendMessage();
+		}}"
+                        @cancel="${() => this.cancelStream()}">
+                    </lyra-ai-chat-input>
+                </div>
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            overflow: hidden;
+            background: var(--wa-color-surface-default);
+        }
+
+        .chat-container {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .chat-messages {
+            flex: 1;
+            overflow: hidden;
+        }
+
+        .chat-content {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            padding: 1rem;
+            min-height: 100%;
+            box-sizing: border-box;
+        }
+
+        .thinking-indicator {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 0.75rem;
+            color: var(--wa-color-text-quiet);
+            font-size: 0.875rem;
+        }
+
+        .input-area {
+            padding: 0.5rem;
+            border-top: solid var(--wa-border-width-s) var(--wa-color-neutral-border-subtle);
+            flex-shrink: 0;
+        }
+    `;
+	}
+};
+_decorate([state()], LyraAIView.prototype, "busy", void 0);
+_decorate([state()], LyraAIView.prototype, "inputValue", void 0);
+_decorate([state()], LyraAIView.prototype, "requireToolApproval", void 0);
+_decorate([state()], LyraAIView.prototype, "showHistory", void 0);
+_decorate([state()], LyraAIView.prototype, "currentTaskPlan", void 0);
+_decorate([state()], LyraAIView.prototype, "currentArtifacts", void 0);
+_decorate([state()], LyraAIView.prototype, "pendingToolApprovals", void 0);
+LyraAIView = _decorate([customElement("lyra-aiview")], LyraAIView);
+//#endregion
+//#region src/view/token-usage.ts
+var LyraTokenUsage = class LyraTokenUsage extends LyraElement {
+	constructor(..._args) {
+		super(..._args);
+		this.totalUsage = { ...EMPTY_USAGE };
+		this.providerUsage = {};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.loadUsage();
+		subscribe(TOPIC_AI_STREAM_COMPLETE, () => {
+			this.loadUsage();
+		});
+	}
+	async loadUsage() {
+		this.totalUsage = await tokenUsageTracker.getTotalUsage();
+		this.providerUsage = await tokenUsageTracker.getAllProviderUsage();
+		this.requestUpdate();
+	}
+	formatNumber(num) {
+		if (num >= 1e6) return (num / 1e6).toFixed(2) + "M";
+		if (num >= 1e3) return (num / 1e3).toFixed(1) + "K";
+		return num.toString();
+	}
+	async handleReset() {
+		if (await confirmDialog("Reset all token usage statistics?")) {
+			await tokenUsageTracker.reset();
+			await this.loadUsage();
+		}
+	}
+	renderStatItem(label, value) {
+		return html`
+            <div class="stat-item">
+                <span class="stat-label">${label}</span>
+                <span class="stat-value">${this.formatNumber(value)}</span>
+            </div>
+        `;
+	}
+	render() {
+		if (this.totalUsage.totalTokens === 0) return html``;
+		return html`
+            <wa-dropdown placement="top-end" distance="8">
+                <wa-button slot="trigger" appearance="plain" size="small" title="Token usage">
+                    <wa-icon name="database" label="Tokens" slot="start"></wa-icon>
+                    ${this.formatNumber(this.totalUsage.totalTokens)} tokens
+                </wa-button>
+
+                <h3>Token Usage</h3>
+
+                <h6>Total</h6>
+                <wa-dropdown-item>
+                    <span>All providers</span>
+                    <div class="stats-row">
+                        ${this.renderStatItem("Prompt", this.totalUsage.promptTokens)}
+                        ${this.renderStatItem("Completion", this.totalUsage.completionTokens)}
+                        ${this.renderStatItem("Total", this.totalUsage.totalTokens)}
+                        ${this.renderStatItem("Requests", this.totalUsage.requestCount)}
+                    </div>
+                </wa-dropdown-item>
+
+                ${Object.keys(this.providerUsage).length > 0 ? html`
+                    <wa-divider></wa-divider>
+                    <h6>By Provider</h6>
+                    ${Object.entries(this.providerUsage).map(([name, usage]) => html`
+                        <wa-dropdown-item>
+                            <span class="provider-name">${name}</span>
+                            <div class="stats-row">
+                                ${this.renderStatItem("Prompt", usage.promptTokens)}
+                                ${this.renderStatItem("Completion", usage.completionTokens)}
+                                ${this.renderStatItem("Total", usage.totalTokens)}
+                                ${this.renderStatItem("Req", usage.requestCount)}
+                            </div>
+                        </wa-dropdown-item>
+                    `)}
+                ` : ""}
+
+                <wa-divider></wa-divider>
+                <wa-dropdown-item variant="danger" @click="${() => this.handleReset()}">
+                    <wa-icon name="trash" slot="icon"></wa-icon>
+                    Reset statistics
+                </wa-dropdown-item>
+            </wa-dropdown>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host { display: inline-block; }
+
+        wa-dropdown::part(menu) { min-width: 320px; max-width: 420px; }
+
+        h3 {
+            padding: var(--wa-space-s) var(--wa-space-m);
+            margin: 0;
+            font-weight: 600;
+            font-size: 0.95em;
+        }
+
+        h6 {
+            padding: var(--wa-space-xs) var(--wa-space-m);
+            margin: 0;
+            font-weight: 600;
+            font-size: 0.85em;
+            color: var(--wa-color-neutral-text-subtle);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .provider-name { font-weight: 500; }
+
+        .stats-row { display: flex; gap: var(--wa-space-m); font-size: 0.875rem; }
+
+        .stat-item {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+
+        .stat-label { font-size: 0.8em; color: var(--wa-color-neutral-text-subtle); }
+        .stat-value { font-weight: 600; }
+    `;
+	}
+};
+LyraTokenUsage = _decorate([customElement("lyra-token-usage")], LyraTokenUsage);
+//#endregion
+//#region src/view/components/ai-config-editor.ts
+var LyraAIConfigEditor = class LyraAIConfigEditor extends LyraPart {
+	constructor(..._args) {
+		super(..._args);
+		this.providers = [];
+		this.defaultProvider = "";
+		this.hasChanges = false;
+		this.availableModels = [];
+		this.loadingModels = false;
+		this.requireToolApproval = true;
+		this.smartToolDetection = false;
+		this.editingState = {};
+		this.providerFactory = new ProviderFactory();
+	}
+	async doInitUI() {
+		await this.loadConfig();
+		subscribe(TOPIC_AICONFIG_CHANGED, () => this.loadConfig());
+		subscribe(TOPIC_SETTINGS_CHANGED, () => this.loadConfig());
+	}
+	async loadConfig() {
+		const config = await appSettings.get(KEY_AI_CONFIG);
+		this.aiConfig = config;
+		const contributed = contributionRegistry.getContributions(CID_CHAT_PROVIDERS).map((c) => c.provider);
+		const configProviders = config?.providers || [];
+		const existingNames = new Set(configProviders.map((p) => p.name));
+		this.providers = [...configProviders, ...contributed.filter((p) => !existingNames.has(p.name))];
+		this.defaultProvider = config?.defaultProvider || "";
+		this.requireToolApproval = config?.requireToolApproval !== false;
+		this.smartToolDetection = config?.smartToolDetection !== void 0 ? config.smartToolDetection : false;
+		this.editingState = {};
+		this.hasChanges = false;
+		this.markDirty(false);
+	}
+	getEditValue(index, field) {
+		const editing = this.editingState[index];
+		if (editing && field in editing) return editing[field] ?? "";
+		const provider = this.providers[index];
+		return provider ? provider[field] ?? "" : "";
+	}
+	setEditValue(index, field, value) {
+		this.editingState = {
+			...this.editingState,
+			[index]: {
+				...this.editingState[index] || {},
+				[field]: value
+			}
+		};
+		this.providers = this.providers.map((p, i) => i === index ? {
+			...p,
+			[field]: value
+		} : p);
+		this.markDirtyAndUpdate();
+	}
+	markDirtyAndUpdate() {
+		this.hasChanges = true;
+		this.markDirty(true);
+	}
+	async fetchModels(index) {
+		const provider = this.providers[index];
+		if (!provider) return;
+		this.loadingModels = true;
+		this.availableModels = [];
+		try {
+			const instance = this.providerFactory.getProvider(provider);
+			if (instance.getAvailableModels) {
+				const models = await instance.getAvailableModels(provider);
+				this.availableModels = Array.isArray(models) ? models : [];
+			}
+		} finally {
+			this.loadingModels = false;
+		}
+	}
+	async saveConfig() {
+		const updatedConfig = {
+			...this.aiConfig ?? {},
+			defaultProvider: this.defaultProvider,
+			providers: this.providers,
+			requireToolApproval: this.requireToolApproval,
+			smartToolDetection: this.smartToolDetection
+		};
+		await appSettings.set(KEY_AI_CONFIG, updatedConfig);
+		this.aiConfig = updatedConfig;
+		this.hasChanges = false;
+		this.markDirty(false);
+	}
+	async save() {
+		if (!this.hasChanges) return;
+		await this.saveConfig();
+	}
+	addProvider() {
+		this.providers = [...this.providers, {
+			name: "new-provider",
+			model: "",
+			apiKey: "",
+			chatApiEndpoint: ""
+		}];
+		this.markDirtyAndUpdate();
+	}
+	async deleteProvider(index) {
+		const provider = this.providers[index];
+		if (!await confirmDialog(`Delete provider "${provider.name}"?`)) return;
+		if (this.defaultProvider === provider.name) this.defaultProvider = "";
+		this.providers = this.providers.filter((_, i) => i !== index);
+		this.markDirtyAndUpdate();
+	}
+	renderProviderField(index, field, type = "text") {
+		const value = this.getEditValue(index, field);
+		return html`
+            <wa-input
+                type="${type}"
+                ?password-toggle="${type === "password"}"
+                .value="${value}"
+                @input="${(e) => this.setEditValue(index, field, e.target.value)}">
+            </wa-input>
+        `;
+	}
+	renderContent() {
+		return html`
+            <div class="editor">
+                <div class="editor-header">
+                    <h2>AI Providers</h2>
+                    <wa-button variant="brand" appearance="filled" @click="${this.addProvider}">
+                        Add Provider
+                    </wa-button>
+                </div>
+
+                ${when(this.providers.length === 0, () => html`
+                    <div class="empty-state"><p>No providers configured.</p></div>
+                `, () => html`
+                    <div class="providers-list">
+                        ${repeat(this.providers, (_, i) => i, (provider, index) => html`
+                            <div class="provider-card">
+                                <div class="provider-card-header ${this.defaultProvider === provider.name ? "is-default" : ""}">
+                                    <span class="provider-name">${provider.name}</span>
+                                    ${this.defaultProvider === provider.name ? html`<span class="default-badge">Default</span>` : html`<wa-button appearance="plain" size="small" title="Set as default"
+                                                @click="${() => {
+			this.defaultProvider = provider.name;
+			this.markDirtyAndUpdate();
+		}}">
+                                                Set default
+                                            </wa-button>`}
+                                    <wa-button variant="danger" appearance="plain" size="small"
+                                        @click="${() => this.deleteProvider(index)}">
+                                        Delete
+                                    </wa-button>
+                                </div>
+                                <div class="provider-fields">
+                                    <div class="field-row">
+                                        <label>Name</label>
+                                        ${this.renderProviderField(index, "name")}
+                                    </div>
+                                    <div class="field-row">
+                                        <label>Model</label>
+                                        <div class="model-row">
+                                            ${this.renderProviderField(index, "model")}
+                                            <wa-button appearance="plain" size="small"
+                                                @click="${async () => {
+			await this.fetchModels(index);
+		}}"
+                                                title="Fetch available models">
+                                                <wa-icon name="refresh" label="Refresh"></wa-icon>
+                                            </wa-button>
+                                        </div>
+                                        ${when(this.loadingModels, () => html`
+                                            <wa-progress-ring indeterminate size="small"></wa-progress-ring>
+                                        `)}
+                                        ${when(this.availableModels.length > 0, () => html`
+                                            <wa-dropdown
+                                                @wa-select="${(e) => {
+			if (e.detail.item?.value) this.setEditValue(index, "model", e.detail.item.value);
+		}}">
+                                                <wa-button slot="trigger" size="small" appearance="plain" with-caret>
+                                                    Select model
+                                                </wa-button>
+                                                ${this.availableModels.map((m) => html`
+                                                    <wa-dropdown-item value="${m.id}">${m.name || m.id}</wa-dropdown-item>
+                                                `)}
+                                            </wa-dropdown>
+                                        `)}
+                                    </div>
+                                    <div class="field-row">
+                                        <label>API Endpoint</label>
+                                        ${this.renderProviderField(index, "chatApiEndpoint")}
+                                    </div>
+                                    <div class="field-row">
+                                        <label>API Key</label>
+                                        ${this.renderProviderField(index, "apiKey", "password")}
+                                    </div>
+                                </div>
+                            </div>
+                        `)}
+                    </div>
+                `)}
+
+                <div class="settings-section">
+                    <h3>Tool Settings</h3>
+                    <wa-checkbox
+                        ?checked="${this.requireToolApproval}"
+                        @change="${(e) => {
+			this.requireToolApproval = e.target.checked;
+			this.markDirtyAndUpdate();
+		}}">
+                        Require approval before executing tools
+                    </wa-checkbox>
+                    <wa-checkbox
+                        ?checked="${this.smartToolDetection}"
+                        @change="${(e) => {
+			this.smartToolDetection = e.target.checked;
+			this.markDirtyAndUpdate();
+		}}">
+                        Smart tool detection (use ML to detect when tools are needed)
+                    </wa-checkbox>
+                </div>
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host { display: block; height: 100%; overflow: auto; }
+
+        .editor {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            padding: 1rem;
+        }
+
+        .editor-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .editor-header h2 { margin: 0; font-size: 1.25rem; }
+
+        .providers-list { display: flex; flex-direction: column; gap: 1rem; }
+
+        .provider-card {
+            border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-loud);
+            border-radius: var(--wa-border-radius-m);
+            overflow: hidden;
+        }
+
+        .provider-card-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.5rem 0.75rem;
+            background: var(--wa-color-surface-lowered);
+            border-bottom: solid var(--wa-border-width-s) var(--wa-color-neutral-border-subtle);
+        }
+
+        .provider-card-header.is-default {
+            background: var(--wa-color-brand-fill-quiet);
+            border-bottom-color: var(--wa-color-brand-border-quiet);
+        }
+
+        .default-badge {
+            font-size: 0.75rem;
+            font-weight: 600;
+            padding: 0.1rem 0.4rem;
+            background: var(--wa-color-brand-fill-loud);
+            color: var(--wa-color-brand-on-loud);
+            border-radius: var(--wa-border-radius-s);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+        }
+
+        .provider-name {
+            font-weight: 500;
+            flex: 1;
+        }
+
+        .provider-fields {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            padding: 0.75rem;
+        }
+
+        .field-row {
+            display: grid;
+            grid-template-columns: 120px 1fr;
+            align-items: start;
+            gap: 0.5rem;
+        }
+
+        .field-row label {
+            font-size: 0.875rem;
+            color: var(--wa-color-text-quiet);
+            padding-top: 0.4rem;
+        }
+
+        .model-row { display: flex; gap: 0.25rem; align-items: center; }
+        .model-row wa-input { flex: 1; }
+
+        .settings-section {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            padding-top: 1rem;
+            border-top: solid var(--wa-border-width-s) var(--wa-color-neutral-border-subtle);
+        }
+
+        .settings-section h3 { margin: 0 0 0.5rem 0; font-size: 1rem; }
+
+        .empty-state {
+            display: flex;
+            justify-content: center;
+            padding: 3rem;
+            color: var(--wa-color-text-subtle);
+        }
+    `;
+	}
+};
+_decorate([property({ attribute: false })], LyraAIConfigEditor.prototype, "input", void 0);
+_decorate([state()], LyraAIConfigEditor.prototype, "providers", void 0);
+_decorate([state()], LyraAIConfigEditor.prototype, "defaultProvider", void 0);
+_decorate([state()], LyraAIConfigEditor.prototype, "hasChanges", void 0);
+_decorate([state()], LyraAIConfigEditor.prototype, "availableModels", void 0);
+_decorate([state()], LyraAIConfigEditor.prototype, "loadingModels", void 0);
+_decorate([state()], LyraAIConfigEditor.prototype, "requireToolApproval", void 0);
+_decorate([state()], LyraAIConfigEditor.prototype, "smartToolDetection", void 0);
+_decorate([state()], LyraAIConfigEditor.prototype, "editingState", void 0);
+LyraAIConfigEditor = _decorate([customElement("lyra-ai-config-editor")], LyraAIConfigEditor);
+//#endregion
+//#region src/ai-system-extension.ts
+contributionRegistry.registerContribution(SIDEBAR_AUXILIARY, {
+	name: "aiview",
+	label: "AI Assistant",
+	icon: "robot",
+	component: (id) => html`<lyra-aiview id="${id}"></lyra-aiview>`
+});
+contributionRegistry.registerContribution(CID_AGENTS, {
+	label: "App Support",
+	description: "General-purpose assistant that can answer questions and execute app commands",
+	role: "appsupport",
+	priority: 100,
+	icon: "question-circle",
+	sysPrompt: general_assistant_prompt_default,
+	tools: async () => {
+		return {
+			enabled: true,
+			smartToolDetection: (await appSettings.get("aiConfig"))?.smartToolDetection ?? false
+		};
+	}
+});
+contributionRegistry.registerContribution(TOOLBAR_BOTTOM, {
+	target: TOOLBAR_BOTTOM,
+	label: "Token Usage",
+	component: "<lyra-token-usage></lyra-token-usage>"
+});
+editorRegistry.registerEditorInputHandler({
+	editorId: "system.ai-config-editor",
+	label: "AI Config",
+	ranking: 1e3,
+	canHandle: (input) => input.key === ".system.ai-config",
+	handle: async (input) => {
+		input.component = (id) => html`<lyra-ai-config-editor id="${id}" .input=${input}></lyra-ai-config-editor>`;
+		return input;
+	}
+});
+registerAll({
+	command: {
+		id: "open_ai_config",
+		name: "Open AI Configuration",
+		description: "Open the AI system configuration editor",
+		parameters: []
+	},
+	handler: { execute: (_context) => {
+		editorRegistry.loadEditor({
+			title: "AI Settings",
+			data: {},
+			key: ".system.ai-config",
+			icon: "robot",
+			state: {}
+		}).then();
+	} },
+	contribution: {
+		target: TOOLBAR_MAIN_RIGHT,
+		icon: "robot",
+		label: "AI Config"
+	}
+});
+rootContext.put("aiService", aiService);
+//#endregion
+
+//# sourceMappingURL=ai-system-extension-DnrA-ECv.js.map