@eclipse-lyra/extension-ai-system 0.0.0

package/dist/ai-system-extension-CPLV13Lk.js

@@ -0,0 +1,2394 @@
+import { css, LitElement, html, nothing } from "lit";
+import { contributionRegistry, workspaceService, editorRegistry, appSettings, LyraPart, toastError, commandRegistry, uiContext, taskService, LyraElement, subscribe, confirmDialog, TOPIC_SETTINGS_CHANGED, SIDEBAR_AUXILIARY, TOOLBAR_BOTTOM, registerAll, TOOLBAR_MAIN_RIGHT, rootContext } from "@eclipse-lyra/core";
+import { c as CID_CHAT_PROVIDERS, d as CID_PROMPT_ENHANCERS, m as ProviderFactory, K as KEY_AI_CONFIG, E as aiService, r as TOPIC_AICONFIG_CHANGED, I as EMPTY_USAGE, t as TOPIC_AI_STREAM_COMPLETE, J as tokenUsageTracker, C as CID_AGENTS } from "./ai-service-CGdlV3FV.js";
+import { property, customElement, 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 { repeat } from "lit/directives/repeat.js";
+const GENERAL_SYS_PROMPT = "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";
+const providers = [
+  { 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>" }
+];
+for (const { label, ...provider } of providers) {
+  contributionRegistry.registerContribution(CID_CHAT_PROVIDERS, {
+    target: CID_CHAT_PROVIDERS,
+    label,
+    provider
+  });
+}
+const appStateEnhancer = {
+  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}
+
+***App's state:***
+${JSON.stringify(appState, null, 2)}`;
+    } catch {
+      return prompt;
+    }
+  }
+};
+contributionRegistry.registerContribution(CID_PROMPT_ENHANCERS, {
+  label: "App State Enhancer",
+  enhancer: appStateEnhancer
+});
+class SessionManager {
+  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();
+  }
+}
+class StreamManager {
+  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;
+  }
+}
+const VIEW_SETTINGS_KEY = "aiViewChat";
+class ProviderManager {
+  constructor(aiService2) {
+    this.aiService = aiService2;
+    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 current = await appSettings.get(VIEW_SETTINGS_KEY) || {};
+    const settings = { ...current };
+    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) {
+      const updated = { ...provider, model, ...apiKey !== void 0 && { apiKey } };
+      this.selectedProvider = updated;
+      await this.updateProviderInAIConfig(providerName, { model, ...apiKey !== void 0 && { apiKey } });
+      await this.aiService.setDefaultProvider(providerName);
+    }
+  }
+  async updateProviderInAIConfig(providerName, updates) {
+    const aiConfig = await appSettings.get(KEY_AI_CONFIG) || {};
+    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() {
+    const settings = await appSettings.get(VIEW_SETTINGS_KEY) || {};
+    return settings.toolApprovalAllowlist || [];
+  }
+  async fetchModels(providerName) {
+    const provider = this.providers.find((p) => p.name === providerName);
+    if (!provider) return;
+    this.loadingModels = true;
+    this.availableModels = [];
+    try {
+      const baseProvider = this.providerFactory.getProvider(provider);
+      this.availableModels = await baseProvider.getAvailableModels?.(provider) ?? [];
+    } finally {
+      this.loadingModels = false;
+    }
+  }
+}
+class AgentGroupManager {
+  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;
+  }
+}
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$8(target, key, result);
+  return result;
+};
+let AIChatMessage = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    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>
+        `;
+  }
+};
+AIChatMessage.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; }
+        }
+    `;
+__decorateClass$9([
+  property({ type: Object, attribute: false })
+], AIChatMessage.prototype, "message", 2);
+__decorateClass$9([
+  property({ type: Boolean })
+], AIChatMessage.prototype, "isStreaming", 2);
+__decorateClass$9([
+  property({ type: Boolean })
+], AIChatMessage.prototype, "showHeader", 2);
+__decorateClass$9([
+  property({ type: Number, attribute: false })
+], AIChatMessage.prototype, "messageIndex", 2);
+AIChatMessage = __decorateClass$9([
+  customElement("lyra-ai-chat-message")
+], AIChatMessage);
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$7(target, key, result);
+  return result;
+};
+let AIChatInput = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    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>
+        `;
+  }
+};
+AIChatInput.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; }
+    `;
+__decorateClass$8([
+  property({ type: String })
+], AIChatInput.prototype, "value", 2);
+__decorateClass$8([
+  property({ type: Boolean })
+], AIChatInput.prototype, "disabled", 2);
+__decorateClass$8([
+  property({ type: Boolean })
+], AIChatInput.prototype, "busy", 2);
+__decorateClass$8([
+  property({ type: Boolean })
+], AIChatInput.prototype, "hasProvider", 2);
+__decorateClass$8([
+  query("wa-textarea")
+], AIChatInput.prototype, "textareaElement", 2);
+AIChatInput = __decorateClass$8([
+  customElement("lyra-ai-chat-input")
+], AIChatInput);
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$6(target, key, result);
+  return result;
+};
+let AIAgentResponseGroup = class 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;
+    const isSingle = agents.length === 1;
+    return html`
+            <div class="agent-response-group">
+                ${when(!isSingle, () => 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>
+        `;
+  }
+};
+AIAgentResponseGroup.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); } }
+    `;
+__decorateClass$7([
+  property({ type: Object, attribute: false })
+], AIAgentResponseGroup.prototype, "group", 2);
+__decorateClass$7([
+  property({ type: Function, attribute: false })
+], AIAgentResponseGroup.prototype, "findStreamingMessage", 2);
+AIAgentResponseGroup = __decorateClass$7([
+  customElement("lyra-ai-agent-response-group")
+], AIAgentResponseGroup);
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$5(target, key, result);
+  return result;
+};
+let AIToolApproval = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    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];
+      const summaryText = toolCalls.length === 1 ? `AI wants to execute: ${first?.function.name}()` : `AI wants to execute ${toolCalls.length} tools`;
+      return html`
+                        <wa-details class="approval-item">
+                            <span slot="summary" class="approval-summary">
+                                <span>${summaryText}</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 || "{}");
+        const isSelected = approval.alwaysAllowSelections.get(tc.id) || false;
+        return html`
+                                            <li class="tool-item">
+                                                <label class="always-allow-label">
+                                                    <wa-checkbox
+                                                        ?checked="${isSelected}"
+                                                        @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>
+        `;
+  }
+};
+AIToolApproval.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);
+        }
+    `;
+__decorateClass$6([
+  property({ type: Map, attribute: false })
+], AIToolApproval.prototype, "pendingApprovals", 2);
+AIToolApproval = __decorateClass$6([
+  customElement("lyra-ai-tool-approval")
+], AIToolApproval);
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$4(target, key, result);
+  return result;
+};
+let AIEmptyState = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    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>
+        `;
+  }
+};
+AIEmptyState.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; }
+    `;
+__decorateClass$5([
+  property({ type: String })
+], AIEmptyState.prototype, "message", 2);
+__decorateClass$5([
+  property({ type: String })
+], AIEmptyState.prototype, "hint", 2);
+AIEmptyState = __decorateClass$5([
+  customElement("lyra-ai-empty-state")
+], AIEmptyState);
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$3(target, key, result);
+  return result;
+};
+const STATUS_ICON = {
+  running: "spinner",
+  completed: "check-circle",
+  failed: "exclamation-circle",
+  skipped: "forward",
+  pending: "circle"
+};
+const 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)"
+};
+let AITaskProgressPanel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    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;
+    const progress = totalCount > 0 ? Math.round(completedCount / totalCount * 100) : 0;
+    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="${progress}" 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>
+        `;
+  }
+};
+AITaskProgressPanel.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); }
+        }
+    `;
+__decorateClass$4([
+  property({ type: Object, attribute: false })
+], AITaskProgressPanel.prototype, "plan", 2);
+__decorateClass$4([
+  state()
+], AITaskProgressPanel.prototype, "expanded", 2);
+AITaskProgressPanel = __decorateClass$4([
+  customElement("lyra-ai-task-progress-panel")
+], AITaskProgressPanel);
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$2(target, key, result);
+  return result;
+};
+const ARTIFACT_TYPE_ICON = {
+  code: "code",
+  json: "brackets-curly",
+  "file-list": "list",
+  plan: "diagram-project",
+  review: "magnifying-glass",
+  text: "file-lines"
+};
+let AIWorkspacePanel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    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>
+        `;
+  }
+};
+AIWorkspacePanel.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;
+        }
+    `;
+__decorateClass$3([
+  property({ type: Array, attribute: false })
+], AIWorkspacePanel.prototype, "artifacts", 2);
+__decorateClass$3([
+  state()
+], AIWorkspacePanel.prototype, "expanded", 2);
+__decorateClass$3([
+  state()
+], AIWorkspacePanel.prototype, "selectedArtifact", 2);
+AIWorkspacePanel = __decorateClass$3([
+  customElement("lyra-ai-workspace-panel")
+], AIWorkspacePanel);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+let LyraAIView = class extends LyraPart {
+  constructor() {
+    super(...arguments);
+    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() {
+    const config = await appSettings.get(KEY_AI_CONFIG) || {};
+    this.requireToolApproval = config.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();
+    this.updateToolbar();
+  }
+  createNewSession() {
+    this.sessionManager.createSession();
+    this.resetViewState();
+  }
+  switchToSession(sessionId) {
+    if (!this.sessionManager.switchToSession(sessionId)) return;
+    this.resetViewState();
+  }
+  deletePastSession(sessionId) {
+    this.sessionManager.deletePastSession(sessionId);
+    this.requestUpdate();
+    this.updateToolbar();
+  }
+  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.updateToolbar();
+    }
+    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) => {
+          const allAllowed = request.toolCalls.every((tc) => this.toolApprovalAllowlist.has(tc.function.name));
+          if (allAllowed) 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();
+      this.updateToolbar();
+    });
+  }
+  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;
+    const alwaysAllowed = Array.from(approval.alwaysAllowSelections.entries()).filter(([, v]) => v).map(([k]) => k);
+    alwaysAllowed.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();
+    const session = this.sessionManager.getActiveSession();
+    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;">${session?.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>
+        `;
+  }
+  render() {
+    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>
+        `;
+  }
+};
+LyraAIView.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;
+        }
+    `;
+__decorateClass$2([
+  state()
+], LyraAIView.prototype, "busy", 2);
+__decorateClass$2([
+  state()
+], LyraAIView.prototype, "inputValue", 2);
+__decorateClass$2([
+  state()
+], LyraAIView.prototype, "requireToolApproval", 2);
+__decorateClass$2([
+  state()
+], LyraAIView.prototype, "showHistory", 2);
+__decorateClass$2([
+  state()
+], LyraAIView.prototype, "currentTaskPlan", 2);
+__decorateClass$2([
+  state()
+], LyraAIView.prototype, "currentArtifacts", 2);
+__decorateClass$2([
+  state()
+], LyraAIView.prototype, "pendingToolApprovals", 2);
+LyraAIView = __decorateClass$2([
+  customElement("lyra-aiview")
+], LyraAIView);
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+let LyraTokenUsage = class extends LyraElement {
+  constructor() {
+    super(...arguments);
+    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>
+        `;
+  }
+};
+LyraTokenUsage.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 = __decorateClass$1([
+  customElement("lyra-token-usage")
+], LyraTokenUsage);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LyraAIConfigEditor = class extends LyraPart {
+  constructor() {
+    super(...arguments);
+    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>
+        `;
+  }
+  render() {
+    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>
+        `;
+  }
+};
+LyraAIConfigEditor.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);
+        }
+    `;
+__decorateClass([
+  property({ attribute: false })
+], LyraAIConfigEditor.prototype, "input", 2);
+__decorateClass([
+  state()
+], LyraAIConfigEditor.prototype, "providers", 2);
+__decorateClass([
+  state()
+], LyraAIConfigEditor.prototype, "defaultProvider", 2);
+__decorateClass([
+  state()
+], LyraAIConfigEditor.prototype, "hasChanges", 2);
+__decorateClass([
+  state()
+], LyraAIConfigEditor.prototype, "availableModels", 2);
+__decorateClass([
+  state()
+], LyraAIConfigEditor.prototype, "loadingModels", 2);
+__decorateClass([
+  state()
+], LyraAIConfigEditor.prototype, "requireToolApproval", 2);
+__decorateClass([
+  state()
+], LyraAIConfigEditor.prototype, "smartToolDetection", 2);
+__decorateClass([
+  state()
+], LyraAIConfigEditor.prototype, "editingState", 2);
+LyraAIConfigEditor = __decorateClass([
+  customElement("lyra-ai-config-editor")
+], LyraAIConfigEditor);
+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_SYS_PROMPT,
+  tools: async () => {
+    const config = await appSettings.get(KEY_AI_CONFIG);
+    return {
+      enabled: true,
+      smartToolDetection: config?.smartToolDetection ?? false
+    };
+  }
+});
+contributionRegistry.registerContribution(TOOLBAR_BOTTOM, {
+  target: TOOLBAR_BOTTOM,
+  label: "Token Usage",
+  html: "<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.widgetFactory = () => html`<lyra-ai-config-editor .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) => {
+      const editorInput = {
+        title: "AI Settings",
+        data: {},
+        key: ".system.ai-config",
+        icon: "robot",
+        state: {}
+      };
+      editorRegistry.loadEditor(editorInput).then();
+    }
+  },
+  contribution: {
+    target: TOOLBAR_MAIN_RIGHT,
+    icon: "robot",
+    label: "AI Config"
+  }
+});
+rootContext.put("aiService", aiService);
+//# sourceMappingURL=ai-system-extension-CPLV13Lk.js.map