mesauth-angular 1.19.0 → 1.21.0

package/README.md

@@ -4,6 +4,21 @@ Angular helper library to connect to a backend API and SignalR hub to surface th
 
 ## Changelog
 
+### v1.21.0 (2026-05-16) — **AI Assistant integration docs**
+- Documentation only: full integration guide for the AI Assistant module added below ([jump](#ai-assistant)). CHANGELOG backfilled for v1.19.0 + v1.20.0 entries.
+
+### v1.20.0 (2026-05-16) — **Ollama + Markdown + same-layer panel**
+- **Ollama is the default LLM provider**. Backend `OpenAiCompatibleLlmClient` POSTs to `${BaseUrl}/chat/completions` — works against Ollama (`http://localhost:11434/v1`), OpenAI, LM Studio, vLLM, Anthropic's OpenAI-compat endpoint, OpenRouter. Tool-call `arguments` parsed in both JSON-string (spec) and parsed-object (Ollama) shapes.
+- **Markdown rendering inside assistant bubbles** via new `MaAiMarkdownPipe`. Supports GFM pipe tables, fenced + inline code, lists, blockquotes, bold/italic, sanitized links. URL allowlist blocks `javascript:` / `data:`. Pipe applies only to assistant bubbles — user input stays plain text.
+- **`quickPrompts` manifest field**: hosted-manifest can override the AI panel empty-state suggestions per deployment without republishing the npm package.
+- **AI chat panel is now same-layer with the host app** — backdrop removed; `z-index: 1040` (above page chrome, below CoreUI modals at 1055). Page stays fully interactive while the panel is open.
+
+### v1.19.0 (2026-05-16) — **AI Assistant module**
+- New `src/ai/` module: `MaAiButtonComponent`, `MaAiChatPanelComponent` (right-side resizable drawer, 320–800 px), `MaAiService` (SSE via `fetch` + `ReadableStream`), `MaAiToolsRegistry`, `provideMesAuthAi(config)` provider.
+- Auto-wired into `ma-user` next to the bell/approval buttons. Toggle off with `[showAi]="false"` on `<ma-user>`.
+- Built-in client tools shipped: `navigate`, `toggle_theme`, `show_toast`, `who_am_i_client`, `reload_page`. Consumer apps register additional tools (incl. write-class) via `provideMesAuthAi({ tools: [...] })` — write tools surface an in-panel approval card.
+- Backend: `POST /ai/chat` SSE endpoint in MesAuth.Api with 7 curated server tools + 3 universal tools (`list_apps`, `list_app_functions`, `call_app_endpoint`) that proxy to consumer apps using each `Application.HostUrl`.
+
 ### v1.6.8 (2026-04-01) - **Permission Header Support**
 - **New `withXMaPerm()` RxJS operator**: Extracts `X-MA-PERM` permission header from HTTP responses, returning `{ data, allowedActions }`. Use with `observe: 'response'` on any `HttpClient` call for zero-overhead permission-gated UI.
 - **New `xMaResource()` helper**: Combines `rxResource` with automatic permission extraction for GET endpoints. Returns a signal-based resource with `.value().allowedActions`.
@@ -72,6 +87,7 @@ Angular helper library to connect to a backend API and SignalR hub to surface th
 - 🔐 **Authentication**: User login/logout with API integration
 - 🔔 **Real-time Notifications**: SignalR integration for live notifications
 - ✅ **Approval Workflows**: `<ma-approval-panel>`, `<ma-arv-container>`, `MaApprovalService` for multi-step document approval
+- 🤖 **AI Assistant**: in-browser chat panel (Ollama by default) with markdown rendering, agentic tool loop, server + client tools — see [AI Assistant](#ai-assistant)
 - 🎨 **Dark/Light Theme**: Automatic theme detection and support
 - 🖼️ **Avatar Support**: Direct API-based avatar loading
 - 🍞 **Toast Notifications**: In-app notification toasts
@@ -250,6 +266,138 @@ A standalone component for displaying a slide-out notification panel with real-t
     notificationPanel.open();
     ```
 
+## AI Assistant
+
+Since **v1.19.0** the library ships an in-browser AI chat panel that lives inside `<ma-user>`. It calls MesAuth.Api's `/ai/chat` SSE endpoint, which fronts an LLM (Ollama by default) and runs an agentic loop with two kinds of tools: **server tools** (data queries — `whoami`, `list_my_approvals`, etc.) and **client tools** (UI actions the model triggers in the browser — navigation, dialogs, custom logic the consumer registers).
+
+### 1. Backend prerequisite
+
+MesAuth.Api must be running v10.x with the `Ai:*` config block populated. Default points at local Ollama:
+
+```jsonc
+// appsettings.json (MesAuth.Api)
+"Ai": {
+  "Enabled": true,
+  "Provider": "ollama",
+  "BaseUrl": "http://localhost:11434/v1",   // any OpenAI-compatible base URL
+  "ApiKey": "",                             // optional; required for OpenAI / Anthropic compat
+  "Model": "qwen2.5:7b",                    // any tool-calling capable model
+  "MaxToolCallsPerTurn": 12,
+  "MaxTokensPerResponse": 4096,
+  "SessionTtlMinutes": 120
+}
+```
+
+Install Ollama (`brew install ollama` / `winget install Ollama.Ollama`) then `ollama pull qwen2.5:7b` (or `llama3.1:8b`, `mistral-nemo`, etc.).
+
+### 2. Frontend setup
+
+```ts
+// app.config.ts
+import { ApplicationConfig, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideMesAuth, provideMesAuthAi, mesAuthInterceptor } from 'mesauth-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(withInterceptors([mesAuthInterceptor])),
+    provideMesAuth({
+      apiBaseUrl: 'https://mes.kefico.vn/auth',
+      userBaseUrl: 'https://mes.kefico.vn/x'
+    }),
+    provideMesAuthAi({
+      enabled: true,
+      appName: 'MesExtensionSite',                // sent to the AI as host context each turn
+      systemPromptExtensions: [
+        'You are inside the MES Extension app. Use SPC tools when the user asks about lines or charts.'
+      ],
+      tools: [
+        // example custom client tool — read-only, no approval card
+        {
+          name: 'spc_open_chart',
+          description: 'Open the SPC chart for a given product line',
+          parameters: {
+            type: 'object',
+            properties: { lineId: { type: 'string', description: 'Production line id' } },
+            required: ['lineId']
+          },
+          readOnly: true,
+          handler: (args: { lineId: string }) => {
+            inject(Router).navigateByUrl(`/spc/${args.lineId}`);
+            return `Opened SPC chart for line ${args.lineId}`;
+          }
+        }
+      ]
+    })
+  ]
+};
+```
+
+That's all that's needed — the AI button appears in the existing `<ma-user>` header and the chat panel slides in from the right when clicked. No template changes required in the consumer app.
+
+### 3. Built-in client tools
+
+| Tool | What it does |
+|---|---|
+| `navigate` | `router.navigateByUrl(path)` |
+| `toggle_theme` | Flip between light/dark via `ThemeService` |
+| `show_toast` | Surface a toast via `ToastService` |
+| `who_am_i_client` | Returns the current user from the browser (synchronous, no API call) |
+| `reload_page` | `window.location.reload()` (write-class — surfaces approval card) |
+
+Override / extend by passing your own tools in `provideMesAuthAi({ tools })`. Consumer tools always take precedence over built-ins of the same name.
+
+### 4. Server-tool catalogue (provided by MesAuth.Api)
+
+| Tool | Description |
+|---|---|
+| `whoami` | Identity, roles, department of the signed-in user |
+| `list_users` | Search users by name / department / employee code |
+| `list_my_roles` | Roles assigned to the caller |
+| `list_my_approvals` | Pending approval documents waiting on the caller |
+| `list_my_notifications` | Caller's recent notifications (unread by default) |
+| `list_health_endpoints` | Registered health endpoints + latest probe status |
+| `current_time` | Server time (UTC + Vietnam local) |
+| `list_apps` | Apps the caller has any permission in |
+| `list_app_functions` | Paginated endpoints in an app the caller can call (driven by the Authorizer-registered permission catalogue) |
+| `call_app_endpoint` | **Universal proxy** — calls any registered endpoint in any consumer app on the caller's behalf. Permission is re-checked before the call. Requires `Application.HostUrl` to be set in *Auth → Client Apps*. |
+
+### 5. Customising the empty-state suggestions
+
+Edit `wwwroot/mesauth-angular/v1/manifest.json` on the MesAuth.Api server (no npm republish needed):
+
+```json
+{
+  "version": "1.21.0",
+  "quickPrompts": [
+    "Show my pending approvals",
+    "Who is the supervisor of line A1?",
+    "How do I add a new user role?"
+  ]
+}
+```
+
+### 6. Write tools + approval cards
+
+A consumer-registered tool with `readOnly: false` (or omitted) surfaces an in-panel approval card showing the constructed `args` before the call runs. The user can choose **Approve**, **Always** (remembers the verb for this session), or **Decline**. Built-in writes (`reload_page`) follow the same flow.
+
+### 7. Disabling the AI feature
+
+Three knobs:
+
+- **Per app**: `provideMesAuthAi({ enabled: false })` hides the button and the panel.
+- **Per server**: set `Ai:Enabled = false` in MesAuth.Api appsettings — the endpoint returns 503 and the panel shows a friendly error.
+- **Per `<ma-user>`**: `<ma-user [showAi]="false">` hides the button but keeps the service available for programmatic use.
+
+### 8. Cost / safety controls
+
+- Server-side cap on tool calls per turn (`Ai:MaxToolCallsPerTurn`, default 12).
+- 8 KB truncation on every tool result fed back to the LLM (prevents context blow-up).
+- Write client tools always require user approval before executing.
+- Server tools re-check user permissions via `IFuncPermService` before running — the AI cannot bypass authorization.
+- `call_app_endpoint` forwards the caller's JWT to consumer apps, so the consumer's `MesAuth.Authorizer` middleware enforces the same permission gate it would for a normal request.
+
 ## Migration Guide
 
 ### Upgrading from v0.x to v1.1.0+

package/fesm2022/mesauth-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, afterNextRender, input, booleanAttribute, computed, HostBinding, Component, output, effect, HostListener, Injector, viewChild, ViewChild, ElementRef, DestroyRef, Directive } from '@angular/core';
+import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, afterNextRender, input, booleanAttribute, computed, HostBinding, Component, output, effect, HostListener, Injector, Pipe, viewChild, ViewChild, ElementRef, DestroyRef, Directive } from '@angular/core';
 import { toObservable, toSignal, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import { catchError, of, Subject, EMPTY, timer, throwError, firstValueFrom, distinctUntilChanged, switchMap as switchMap$1, forkJoin } from 'rxjs';
 import { HttpClient, HttpResponse } from '@angular/common/http';
@@ -10,7 +10,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { DatePipe, JsonPipe } from '@angular/common';
 
 /** Current installed package version — keep in sync with package.json. */
-const PACKAGE_VERSION = '1.19.0';
+const PACKAGE_VERSION = '1.21.0';
 /**
  * Provides server-driven UI configuration loaded from the hosted manifest.
  * Components read `labels()` and `features()` signals instead of hardcoded strings.
@@ -25,6 +25,7 @@ class MaUiConfigService {
     }, ...(ngDevMode ? [{ debugName: "_features" }] : /* istanbul ignore next */ []));
     _updateRequired = signal(false, ...(ngDevMode ? [{ debugName: "_updateRequired" }] : /* istanbul ignore next */ []));
     _manifestVersion = signal(null, ...(ngDevMode ? [{ debugName: "_manifestVersion" }] : /* istanbul ignore next */ []));
+    _quickPrompts = signal([], ...(ngDevMode ? [{ debugName: "_quickPrompts" }] : /* istanbul ignore next */ []));
     /** Reactive map of UI string overrides from the server manifest. */
     labels = this._labels.asReadonly();
     /** Reactive map of feature flags from the server manifest. */
@@ -33,6 +34,8 @@ class MaUiConfigService {
     updateRequired = this._updateRequired.asReadonly();
     /** The manifest version string loaded from the server, or null if not yet loaded. */
     manifestVersion = this._manifestVersion.asReadonly();
+    /** AI panel "quick prompts" — populated from the manifest if provided, else empty. */
+    quickPrompts = this._quickPrompts.asReadonly();
     /**
      * Returns a label by key, falling back to `defaultValue` when the server
      * manifest has not provided an override.
@@ -64,6 +67,8 @@ class MaUiConfigService {
                 this._updateRequired.set(true);
             if (manifest.version)
                 this._manifestVersion.set(manifest.version);
+            if (manifest.quickPrompts)
+                this._quickPrompts.set(manifest.quickPrompts);
             // Version-check: warn dev team when a newer package is available
             const latest = manifest.latestPackageVersion;
             if (latest && latest !== PACKAGE_VERSION) {
@@ -1847,6 +1852,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Tiny hand-rolled GitHub-flavoured Markdown renderer for AI chat bubbles.
+ *
+ * Supports: headings, paragraphs (with single-newline → <br>), pipe tables,
+ * fenced + inline code, bullet/ordered lists (flat), blockquotes, bold, italic,
+ * autolinks via [text](url). All input is HTML-escaped before any markup
+ * is added, so the only HTML that reaches the DOM is what this pipe emits.
+ * Wrapped in `bypassSecurityTrustHtml` so [innerHTML] doesn't re-sanitize and
+ * strip the markup we explicitly want.
+ *
+ * Not supported (intentionally — keeps the renderer tiny and safe):
+ * nested lists, images, raw HTML, strikethrough, task lists, footnotes.
+ * If the model emits any of those, they appear as literal text.
+ */
+class MaAiMarkdownPipe {
+    sanitizer = inject(DomSanitizer);
+    transform(value) {
+        const html = renderMarkdown(value ?? '');
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: MaAiMarkdownPipe, isStandalone: true, name: "maAiMarkdown" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiMarkdownPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'maAiMarkdown' }]
+        }] });
+// ── Renderer ────────────────────────────────────────────────────────────────
+// Sentinel format that survives escapeHtml AND won't collide with markdown
+// tokens (no `*`, `_`, `[`, `]`, `(`, `)`, `>`, `#`, `-`, `|` at boundaries).
+const TOKEN_PREFIX = 'MAAIMD_TOKEN_';
+const TOKEN_SUFFIX = '_END';
+const tokenRe = new RegExp(`${TOKEN_PREFIX}(\\d+)${TOKEN_SUFFIX}`, 'g');
+function makeToken(i) { return `${TOKEN_PREFIX}${i}${TOKEN_SUFFIX}`; }
+function renderMarkdown(src) {
+    if (!src)
+        return '';
+    const blocks = [];
+    // 1. Extract fenced code blocks (raw content preserved literally, content escaped).
+    let text = src.replace(/```(\w+)?\n([\s\S]*?)```/g, (_m, lang, body) => {
+        const langClass = lang ? ` class="lang-${escapeAttr(lang)}"` : '';
+        blocks.push(`<pre class="md-pre"><code${langClass}>${escapeHtml(body.replace(/\n$/, ''))}</code></pre>`);
+        return makeToken(blocks.length - 1);
+    });
+    // 2. Extract inline `code` spans.
+    text = text.replace(/`([^`\n]+)`/g, (_m, body) => {
+        blocks.push(`<code class="md-code">${escapeHtml(body)}</code>`);
+        return makeToken(blocks.length - 1);
+    });
+    // 3. Now escape the entire remaining content. Markdown tokens (`*`, `_`, `|`,
+    // `[`, `]`, `(`, `)`, `>`, `#`, `-`) are not HTML-special, so they pass through
+    // escapeHtml untouched and remain parseable in the block/inline stage below.
+    text = escapeHtml(text);
+    // 4. Block-level pass — split on blank lines, classify each block.
+    const parts = text.split(/\n{2,}/);
+    const out = [];
+    for (const raw of parts) {
+        const trimmed = raw.replace(/^\n+|\n+$/g, '');
+        if (!trimmed)
+            continue;
+        out.push(renderBlock(trimmed));
+    }
+    // 5. Restore code placeholders.
+    let html = out.join('\n');
+    html = html.replace(tokenRe, (_m, n) => blocks[Number(n)] ?? '');
+    return html;
+}
+function renderBlock(block) {
+    const lines = block.split('\n');
+    // Heading: `# foo` … `###### foo` (single-line only).
+    if (lines.length === 1) {
+        const h = lines[0].match(/^(#{1,6})\s+(.+)$/);
+        if (h) {
+            const level = h[1].length;
+            return `<h${level} class="md-h${level}">${inline(h[2])}</h${level}>`;
+        }
+    }
+    // Table: header line + separator line + body lines.
+    if (lines.length >= 2 && isTableLine(lines[0]) && isTableSeparator(lines[1])) {
+        return renderTable(lines);
+    }
+    // Blockquote: every line starts with `> ` (or `>`).
+    if (lines.every(l => /^>\s?/.test(l))) {
+        const inner = lines.map(l => l.replace(/^>\s?/, '')).join('\n');
+        return `<blockquote class="md-quote">${inline(inner.replace(/\n/g, '<br>'))}</blockquote>`;
+    }
+    // Ordered list: every line `1. `, `2. `, …
+    if (lines.every(l => /^\d+\.\s+/.test(l))) {
+        const items = lines.map(l => `<li>${inline(l.replace(/^\d+\.\s+/, ''))}</li>`).join('');
+        return `<ol class="md-list">${items}</ol>`;
+    }
+    // Unordered list: every line `- ` or `* `.
+    if (lines.every(l => /^[-*]\s+/.test(l))) {
+        const items = lines.map(l => `<li>${inline(l.replace(/^[-*]\s+/, ''))}</li>`).join('');
+        return `<ul class="md-list">${items}</ul>`;
+    }
+    // Paragraph fallback. Single newlines become <br> for fidelity to what the AI typed.
+    return `<p class="md-p">${inline(block.replace(/\n/g, '<br>'))}</p>`;
+}
+function isTableLine(s) {
+    const t = s.trim();
+    return t.startsWith('|') && t.endsWith('|') && t.split('|').length >= 3;
+}
+function isTableSeparator(s) {
+    if (!isTableLine(s))
+        return false;
+    const cells = splitCells(s);
+    return cells.length > 0 && cells.every(c => /^:?-{1,}:?$/.test(c.trim()));
+}
+function splitCells(line) {
+    const inner = line.trim().replace(/^\|/, '').replace(/\|$/, '');
+    return inner.split('|').map(c => c.trim());
+}
+function renderTable(lines) {
+    const headerCells = splitCells(lines[0]);
+    const aligns = splitCells(lines[1]).map(c => {
+        const t = c.trim();
+        if (t.startsWith(':') && t.endsWith(':'))
+            return 'center';
+        if (t.endsWith(':'))
+            return 'right';
+        if (t.startsWith(':'))
+            return 'left';
+        return '';
+    });
+    const bodyLines = lines.slice(2).filter(l => isTableLine(l));
+    const renderRow = (cells, tag) => cells.map((c, i) => {
+        const align = aligns[i] ? ` style="text-align:${aligns[i]}"` : '';
+        return `<${tag}${align}>${inline(c)}</${tag}>`;
+    }).join('');
+    const thead = `<thead><tr>${renderRow(headerCells, 'th')}</tr></thead>`;
+    const tbody = bodyLines.length
+        ? `<tbody>${bodyLines.map(l => `<tr>${renderRow(splitCells(l), 'td')}</tr>`).join('')}</tbody>`
+        : '';
+    return `<div class="md-table-wrap"><table class="md-table">${thead}${tbody}</table></div>`;
+}
+// Inline pass: links, bold, italic. Operates on already-escaped text so markdown
+// tokens are unambiguous (no HTML entities to confuse the regexes).
+function inline(text) {
+    let s = text;
+    // Links: [label](url) — sanitize URL scheme.
+    s = s.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (_m, label, url) => {
+        const safeUrl = sanitizeUrl(url);
+        if (!safeUrl)
+            return label;
+        return `<a class="md-link" href="${escapeAttr(safeUrl)}" target="_blank" rel="noopener noreferrer">${label}</a>`;
+    });
+    // Bold: **text** or __text__
+    s = s.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+    s = s.replace(/(^|[\s(])__([^_\n]+)__(?=[\s.,;:)!?]|$)/g, '$1<strong>$2</strong>');
+    // Italic: *text* or _text_ (boundary-aware to avoid mid-word matches).
+    s = s.replace(/(^|[\s(])\*([^*\n]+)\*(?=[\s.,;:)!?]|$)/g, '$1<em>$2</em>');
+    s = s.replace(/(^|[\s(])_([^_\n]+)_(?=[\s.,;:)!?]|$)/g, '$1<em>$2</em>');
+    return s;
+}
+function escapeHtml(s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function escapeAttr(s) {
+    return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+function sanitizeUrl(url) {
+    const trimmed = url.trim();
+    // Allow http(s), mailto, root-relative, and fragments. Reject javascript:, data:, vbscript: etc.
+    if (/^(https?:|mailto:)/i.test(trimmed))
+        return trimmed;
+    if (trimmed.startsWith('/') || trimmed.startsWith('#'))
+        return trimmed;
+    return null;
+}
+
 const STORAGE_KEY = 'ma-ai-panel-width';
 const MIN_WIDTH = 320;
 const MAX_WIDTH = 800;
@@ -1863,6 +2044,18 @@ class MaAiChatPanelComponent {
     ai = inject(MaAiService);
     router = inject(Router, { optional: true });
     themeService = inject(ThemeService);
+    uiConfig = inject(MaUiConfigService);
+    /** Suggested prompts shown in the empty state — manifest overridable. */
+    quickPrompts = computed(() => {
+        const fromManifest = this.uiConfig.quickPrompts();
+        if (fromManifest && fromManifest.length > 0)
+            return fromManifest;
+        return [
+            'Who am I?',
+            'List my pending approvals',
+            'What unread notifications do I have?'
+        ];
+    }, ...(ngDevMode ? [{ debugName: "quickPrompts" }] : /* istanbul ignore next */ []));
     scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : /* istanbul ignore next */ []));
     textArea = viewChild('textArea', ...(ngDevMode ? [{ debugName: "textArea" }] : /* istanbul ignore next */ []));
     get themeClass() {
@@ -1977,11 +2170,11 @@ class MaAiChatPanelComponent {
         el.scrollTop = el.scrollHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiChatPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MaAiChatPanelComponent, isStandalone: true, selector: "ma-ai-chat-panel", host: { properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ai-backdrop\" [class.open]=\"isOpen()\" (click)=\"close()\"></div>\n<div class=\"ai-panel\" [class.open]=\"isOpen()\" [style.width.px]=\"width()\">\n\n  <!-- Resize handle (left edge) -->\n  <div class=\"ai-resize-handle\"\n       (pointerdown)=\"startResize($event)\"\n       (pointermove)=\"onResizeMove($event)\"\n       (pointerup)=\"endResize($event)\"\n       (pointercancel)=\"endResize($event)\"\n       aria-label=\"Resize panel\"\n       title=\"Drag to resize\"></div>\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"\n           fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        <path d=\"M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z\"/>\n      </svg>\n      <h3>AI Assistant</h3>\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"icon-btn\" (click)=\"newConversation()\" title=\"New conversation\" aria-label=\"New conversation\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>\n        </svg>\n      </button>\n      <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation -->\n  <div class=\"panel-content\" #scrollContainer>\n    @if (!hasMessages()) {\n      <div class=\"empty-state\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.5\">\n          <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        </svg>\n        <p>Ask anything about your account, approvals, notifications, or how to use the app.</p>\n        <div class=\"quick-prompts\">\n          <button class=\"quick-prompt\" (click)=\"draft.set('Who am I?')\">Who am I?</button>\n          <button class=\"quick-prompt\" (click)=\"draft.set('List my pending approvals')\">My approvals</button>\n          <button class=\"quick-prompt\" (click)=\"draft.set('What unread notifications do I have?')\">Unread notifications</button>\n        </div>\n      </div>\n    }\n\n    @for (m of messages(); track m.id) {\n      <div class=\"bubble\" [class.user]=\"m.role === 'user'\" [class.assistant]=\"m.role === 'assistant'\">\n        @if (m.role === 'assistant' && m.toolEvents && m.toolEvents.length > 0) {\n          <div class=\"tool-strip\">\n            @for (t of m.toolEvents; track t.id) {\n              <div class=\"tool-chip\" [class.ok]=\"t.status === 'ok'\" [class.err]=\"t.status === 'error'\"\n                   [class.running]=\"t.status === 'running'\" [class.await]=\"t.status === 'awaiting-approval'\"\n                   [class.declined]=\"t.status === 'declined'\"\n                   [title]=\"t.summary ?? ''\">\n                <span class=\"dot\"></span>\n                <span class=\"tool-name\">{{ t.side === 'server' ? '\u2699' : '\u2318' }} {{ t.name }}</span>\n                @if (t.status === 'running') { <span class=\"muted\">\u2026</span> }\n                @if (t.status === 'ok' && t.summary) { <span class=\"muted\">\u00B7 {{ t.summary }}</span> }\n                @if (t.status === 'error') { <span class=\"muted\">\u00B7 failed</span> }\n                @if (t.status === 'awaiting-approval') { <span class=\"muted\">\u00B7 awaiting approval</span> }\n                @if (t.status === 'declined') { <span class=\"muted\">\u00B7 declined</span> }\n              </div>\n            }\n          </div>\n        }\n        @if (m.text) {\n          <div class=\"bubble-text\">{{ m.text }}</div>\n        }\n        @if (m.pending && !m.text) {\n          <div class=\"thinking\"><span class=\"spinner-small\"></span> Thinking\u2026</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pending approval card -->\n  @if (pendingApproval(); as p) {\n    <div class=\"approval-card\">\n      <div class=\"approval-card-head\">\n        <strong>Approve action?</strong>\n        <code class=\"tool-name\">{{ p.name }}</code>\n      </div>\n      @if (p.args && (p.args | json) !== '{}') {\n        <pre class=\"approval-args\">{{ p.args | json }}</pre>\n      }\n      <div class=\"approval-actions\">\n        <button class=\"btn primary\" (click)=\"approve()\">Approve</button>\n        <button class=\"btn\" (click)=\"alwaysApprove()\">Always</button>\n        <button class=\"btn danger\" (click)=\"decline()\">Decline</button>\n      </div>\n    </div>\n  }\n\n  <!-- Composer -->\n  <div class=\"composer\">\n    @if (lastError()) {\n      <div class=\"composer-error\">{{ lastError() }}</div>\n    }\n    <div class=\"composer-row\">\n      <textarea #textArea\n                rows=\"1\"\n                placeholder=\"Ask the AI\u2026\"\n                [value]=\"draft()\"\n                (input)=\"onTextareaInput($event)\"\n                (keydown)=\"onTextareaKey($event)\"\n                [disabled]=\"streaming()\"></textarea>\n      @if (streaming()) {\n        <button class=\"send-btn cancel\" (click)=\"cancel()\" title=\"Cancel\" aria-label=\"Cancel\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\"/></svg>\n        </button>\n      } @else {\n        <button class=\"send-btn\" (click)=\"send()\" [disabled]=\"!draft().trim()\" title=\"Send\" aria-label=\"Send\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"/></svg>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n", ":host{--primary: #c4b5fd;--primary-strong: #a78bfa;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-bubble-user: #312e81;--bg-bubble-assistant: #232336;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #7c3aed;--primary-strong: #6d28d9;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f3ff;--bg-hover: #ede9fe;--bg-bubble-user: #ede9fe;--bg-bubble-assistant: #f5f5f5;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.ai-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:1029}.ai-backdrop.open{display:block}.ai-panel{position:fixed;top:0;right:0;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);will-change:transform,width}.ai-panel.open{transform:translate(0)}.ai-resize-handle{position:absolute;top:0;left:-4px;width:8px;height:100%;cursor:ew-resize;z-index:1;background:transparent}.ai-resize-handle:hover{background:linear-gradient(to right,transparent,rgba(124,58,237,.25),transparent)}.header-actions{display:flex;align-items:center;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-content{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.quick-prompts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}.quick-prompt{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 10px;border-radius:14px;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.quick-prompt:hover{background:var(--bg-hover);color:var(--text-primary)}.bubble{max-width:90%;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--bg-bubble-user);color:var(--text-primary)}.bubble.assistant{align-self:flex-start;background:var(--bg-bubble-assistant);color:var(--text-primary)}.bubble-text{display:block}.thinking{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12.5px}.spinner-small{width:12px;height:12px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.tool-strip{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.tool-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--bg-hover);font-size:11.5px;color:var(--text-secondary);border:1px solid var(--border-color);align-self:flex-start}.tool-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}.tool-chip.running .dot{background:var(--primary);animation:pulse 1s ease-in-out infinite}.tool-chip.ok .dot{background:var(--success)}.tool-chip.err .dot{background:var(--error)}.tool-chip.await .dot{background:#f59e0b}.tool-chip.declined .dot{background:var(--text-muted)}.tool-chip .tool-name{font-weight:600;color:var(--text-primary)}.tool-chip .muted{color:var(--text-muted)}@keyframes pulse{50%{opacity:.4}}.approval-card{flex-shrink:0;margin:8px 14px;padding:12px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--bg-secondary)}.approval-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--text-primary)}.approval-card-head code{background:var(--bg-hover);padding:2px 6px;border-radius:6px;font-size:12px;color:var(--primary)}.approval-args{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:8px;font-size:11.5px;max-height:100px;overflow:auto;margin:0 0 8px;color:var(--text-secondary)}.approval-actions{display:flex;gap:6px;flex-wrap:wrap}.btn{flex:1;padding:6px 10px;font-size:12.5px;font-weight:600;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-hover)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.primary:hover{background:var(--primary-strong)}.btn.danger{color:var(--error)}.btn.danger:hover{background:#ef53501a}.composer{flex-shrink:0;border-top:1px solid var(--border-color);padding:10px 12px;background:var(--bg-secondary)}.composer-error{color:var(--error);font-size:12px;margin-bottom:6px}.composer-row{display:flex;align-items:flex-end;gap:8px}.composer textarea{flex:1;resize:none;padding:8px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;min-height:36px;max-height:160px;line-height:1.4}.composer textarea:focus{border-color:var(--primary)}.composer textarea:disabled{opacity:.6}.send-btn{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.send-btn:hover:not(:disabled){background:var(--primary-strong)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.send-btn.cancel{background:var(--error)}.send-btn.cancel:hover{filter:brightness(1.1)}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MaAiChatPanelComponent, isStandalone: true, selector: "ma-ai-chat-panel", host: { properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ai-panel\" [class.open]=\"isOpen()\" [style.width.px]=\"width()\">\n\n  <!-- Resize handle (left edge) -->\n  <div class=\"ai-resize-handle\"\n       (pointerdown)=\"startResize($event)\"\n       (pointermove)=\"onResizeMove($event)\"\n       (pointerup)=\"endResize($event)\"\n       (pointercancel)=\"endResize($event)\"\n       aria-label=\"Resize panel\"\n       title=\"Drag to resize\"></div>\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"\n           fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        <path d=\"M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z\"/>\n      </svg>\n      <h3>AI Assistant</h3>\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"icon-btn\" (click)=\"newConversation()\" title=\"New conversation\" aria-label=\"New conversation\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>\n        </svg>\n      </button>\n      <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation -->\n  <div class=\"panel-content\" #scrollContainer>\n    @if (!hasMessages()) {\n      <div class=\"empty-state\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.5\">\n          <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        </svg>\n        <p>Ask anything about your account, approvals, notifications, or how to use the app.</p>\n        <div class=\"quick-prompts\">\n          @for (q of quickPrompts(); track q) {\n            <button class=\"quick-prompt\" (click)=\"draft.set(q)\">{{ q }}</button>\n          }\n        </div>\n      </div>\n    }\n\n    @for (m of messages(); track m.id) {\n      <div class=\"bubble\" [class.user]=\"m.role === 'user'\" [class.assistant]=\"m.role === 'assistant'\">\n        @if (m.role === 'assistant' && m.toolEvents && m.toolEvents.length > 0) {\n          <div class=\"tool-strip\">\n            @for (t of m.toolEvents; track t.id) {\n              <div class=\"tool-chip\" [class.ok]=\"t.status === 'ok'\" [class.err]=\"t.status === 'error'\"\n                   [class.running]=\"t.status === 'running'\" [class.await]=\"t.status === 'awaiting-approval'\"\n                   [class.declined]=\"t.status === 'declined'\"\n                   [title]=\"t.summary ?? ''\">\n                <span class=\"dot\"></span>\n                <span class=\"tool-name\">{{ t.side === 'server' ? '\u2699' : '\u2318' }} {{ t.name }}</span>\n                @if (t.status === 'running') { <span class=\"muted\">\u2026</span> }\n                @if (t.status === 'ok' && t.summary) { <span class=\"muted\">\u00B7 {{ t.summary }}</span> }\n                @if (t.status === 'error') { <span class=\"muted\">\u00B7 failed</span> }\n                @if (t.status === 'awaiting-approval') { <span class=\"muted\">\u00B7 awaiting approval</span> }\n                @if (t.status === 'declined') { <span class=\"muted\">\u00B7 declined</span> }\n              </div>\n            }\n          </div>\n        }\n        @if (m.text) {\n          @if (m.role === 'assistant') {\n            <div class=\"bubble-text md-body\" [innerHTML]=\"m.text | maAiMarkdown\"></div>\n          } @else {\n            <div class=\"bubble-text\">{{ m.text }}</div>\n          }\n        }\n        @if (m.pending && !m.text) {\n          <div class=\"thinking\"><span class=\"spinner-small\"></span> Thinking\u2026</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pending approval card -->\n  @if (pendingApproval(); as p) {\n    <div class=\"approval-card\">\n      <div class=\"approval-card-head\">\n        <strong>Approve action?</strong>\n        <code class=\"tool-name\">{{ p.name }}</code>\n      </div>\n      @if (p.args && (p.args | json) !== '{}') {\n        <pre class=\"approval-args\">{{ p.args | json }}</pre>\n      }\n      <div class=\"approval-actions\">\n        <button class=\"btn primary\" (click)=\"approve()\">Approve</button>\n        <button class=\"btn\" (click)=\"alwaysApprove()\">Always</button>\n        <button class=\"btn danger\" (click)=\"decline()\">Decline</button>\n      </div>\n    </div>\n  }\n\n  <!-- Composer -->\n  <div class=\"composer\">\n    @if (lastError()) {\n      <div class=\"composer-error\">{{ lastError() }}</div>\n    }\n    <div class=\"composer-row\">\n      <textarea #textArea\n                rows=\"1\"\n                placeholder=\"Ask the AI\u2026\"\n                [value]=\"draft()\"\n                (input)=\"onTextareaInput($event)\"\n                (keydown)=\"onTextareaKey($event)\"\n                [disabled]=\"streaming()\"></textarea>\n      @if (streaming()) {\n        <button class=\"send-btn cancel\" (click)=\"cancel()\" title=\"Cancel\" aria-label=\"Cancel\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\"/></svg>\n        </button>\n      } @else {\n        <button class=\"send-btn\" (click)=\"send()\" [disabled]=\"!draft().trim()\" title=\"Send\" aria-label=\"Send\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"/></svg>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n", ":host{--primary: #c4b5fd;--primary-strong: #a78bfa;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-bubble-user: #312e81;--bg-bubble-assistant: #232336;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #7c3aed;--primary-strong: #6d28d9;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f3ff;--bg-hover: #ede9fe;--bg-bubble-user: #ede9fe;--bg-bubble-assistant: #f5f5f5;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.ai-panel{position:fixed;top:0;right:0;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1040;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);will-change:transform,width;pointer-events:none}.ai-panel.open{transform:translate(0);pointer-events:auto}.ai-resize-handle{position:absolute;top:0;left:-4px;width:8px;height:100%;cursor:ew-resize;z-index:1;background:transparent}.ai-resize-handle:hover{background:linear-gradient(to right,transparent,rgba(124,58,237,.25),transparent)}.header-actions{display:flex;align-items:center;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-content{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.quick-prompts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}.quick-prompt{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 10px;border-radius:14px;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.quick-prompt:hover{background:var(--bg-hover);color:var(--text-primary)}.bubble{max-width:90%;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--bg-bubble-user);color:var(--text-primary)}.bubble.assistant{align-self:flex-start;background:var(--bg-bubble-assistant);color:var(--text-primary)}.bubble-text{display:block}.thinking{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12.5px}.spinner-small{width:12px;height:12px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.tool-strip{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.tool-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--bg-hover);font-size:11.5px;color:var(--text-secondary);border:1px solid var(--border-color);align-self:flex-start}.tool-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}.tool-chip.running .dot{background:var(--primary);animation:pulse 1s ease-in-out infinite}.tool-chip.ok .dot{background:var(--success)}.tool-chip.err .dot{background:var(--error)}.tool-chip.await .dot{background:#f59e0b}.tool-chip.declined .dot{background:var(--text-muted)}.tool-chip .tool-name{font-weight:600;color:var(--text-primary)}.tool-chip .muted{color:var(--text-muted)}@keyframes pulse{50%{opacity:.4}}.approval-card{flex-shrink:0;margin:8px 14px;padding:12px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--bg-secondary)}.approval-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--text-primary)}.approval-card-head code{background:var(--bg-hover);padding:2px 6px;border-radius:6px;font-size:12px;color:var(--primary)}.approval-args{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:8px;font-size:11.5px;max-height:100px;overflow:auto;margin:0 0 8px;color:var(--text-secondary)}.approval-actions{display:flex;gap:6px;flex-wrap:wrap}.btn{flex:1;padding:6px 10px;font-size:12.5px;font-weight:600;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-hover)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.primary:hover{background:var(--primary-strong)}.btn.danger{color:var(--error)}.btn.danger:hover{background:#ef53501a}.composer{flex-shrink:0;border-top:1px solid var(--border-color);padding:10px 12px;background:var(--bg-secondary)}.composer-error{color:var(--error);font-size:12px;margin-bottom:6px}.composer-row{display:flex;align-items:flex-end;gap:8px}.composer textarea{flex:1;resize:none;padding:8px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;min-height:36px;max-height:160px;line-height:1.4}.composer textarea:focus{border-color:var(--primary)}.composer textarea:disabled{opacity:.6}.send-btn{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.send-btn:hover:not(:disabled){background:var(--primary-strong)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.send-btn.cancel{background:var(--error)}.send-btn.cancel:hover{filter:brightness(1.1)}.md-body{font-size:13.5px;line-height:1.55}.md-body .md-p{margin:0 0 8px}.md-body .md-p:last-child{margin-bottom:0}.md-body .md-h1,.md-body .md-h2,.md-body .md-h3,.md-body .md-h4,.md-body .md-h5,.md-body .md-h6{margin:12px 0 6px;font-weight:700;color:var(--text-primary);line-height:1.3}.md-body .md-h1{font-size:17px}.md-body .md-h2{font-size:15.5px}.md-body .md-h3{font-size:14.5px}.md-body .md-h4,.md-body .md-h5,.md-body .md-h6{font-size:13.5px}.md-body strong{font-weight:700}.md-body em{font-style:italic}.md-body .md-link{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.md-body .md-link:hover{color:var(--primary-strong)}.md-body .md-list{margin:0 0 8px;padding-left:22px}.md-body .md-list li{margin:2px 0}.md-body .md-list li::marker{color:var(--text-muted)}.md-body .md-quote{margin:0 0 8px;padding:6px 10px;border-left:3px solid var(--primary);background:var(--bg-hover);color:var(--text-secondary);border-radius:0 6px 6px 0}.md-body .md-code{background:var(--bg-hover);border:1px solid var(--border-color);border-radius:4px;padding:1px 5px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--primary)}.md-body .md-pre{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:10px 12px;margin:0 0 8px;overflow-x:auto;font-size:12px;line-height:1.5}.md-body .md-pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text-primary);background:none;border:none;padding:0}.md-body .md-table-wrap{margin:0 0 8px;overflow-x:auto;border:1px solid var(--border-color);border-radius:8px}.md-body .md-table{border-collapse:collapse;width:100%;font-size:12.5px}.md-body .md-table th,.md-body .md-table td{padding:6px 10px;border-bottom:1px solid var(--border-color);vertical-align:top;text-align:left}.md-body .md-table th{background:var(--bg-secondary);color:var(--text-primary);font-weight:600}.md-body .md-table tr:last-child td{border-bottom:none}.md-body .md-table tbody tr:hover{background:var(--bg-hover)}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: MaAiMarkdownPipe, name: "maAiMarkdown" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiChatPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-ai-chat-panel', imports: [JsonPipe], template: "<div class=\"ai-backdrop\" [class.open]=\"isOpen()\" (click)=\"close()\"></div>\n<div class=\"ai-panel\" [class.open]=\"isOpen()\" [style.width.px]=\"width()\">\n\n  <!-- Resize handle (left edge) -->\n  <div class=\"ai-resize-handle\"\n       (pointerdown)=\"startResize($event)\"\n       (pointermove)=\"onResizeMove($event)\"\n       (pointerup)=\"endResize($event)\"\n       (pointercancel)=\"endResize($event)\"\n       aria-label=\"Resize panel\"\n       title=\"Drag to resize\"></div>\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"\n           fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        <path d=\"M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z\"/>\n      </svg>\n      <h3>AI Assistant</h3>\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"icon-btn\" (click)=\"newConversation()\" title=\"New conversation\" aria-label=\"New conversation\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>\n        </svg>\n      </button>\n      <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation -->\n  <div class=\"panel-content\" #scrollContainer>\n    @if (!hasMessages()) {\n      <div class=\"empty-state\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.5\">\n          <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        </svg>\n        <p>Ask anything about your account, approvals, notifications, or how to use the app.</p>\n        <div class=\"quick-prompts\">\n          <button class=\"quick-prompt\" (click)=\"draft.set('Who am I?')\">Who am I?</button>\n          <button class=\"quick-prompt\" (click)=\"draft.set('List my pending approvals')\">My approvals</button>\n          <button class=\"quick-prompt\" (click)=\"draft.set('What unread notifications do I have?')\">Unread notifications</button>\n        </div>\n      </div>\n    }\n\n    @for (m of messages(); track m.id) {\n      <div class=\"bubble\" [class.user]=\"m.role === 'user'\" [class.assistant]=\"m.role === 'assistant'\">\n        @if (m.role === 'assistant' && m.toolEvents && m.toolEvents.length > 0) {\n          <div class=\"tool-strip\">\n            @for (t of m.toolEvents; track t.id) {\n              <div class=\"tool-chip\" [class.ok]=\"t.status === 'ok'\" [class.err]=\"t.status === 'error'\"\n                   [class.running]=\"t.status === 'running'\" [class.await]=\"t.status === 'awaiting-approval'\"\n                   [class.declined]=\"t.status === 'declined'\"\n                   [title]=\"t.summary ?? ''\">\n                <span class=\"dot\"></span>\n                <span class=\"tool-name\">{{ t.side === 'server' ? '\u2699' : '\u2318' }} {{ t.name }}</span>\n                @if (t.status === 'running') { <span class=\"muted\">\u2026</span> }\n                @if (t.status === 'ok' && t.summary) { <span class=\"muted\">\u00B7 {{ t.summary }}</span> }\n                @if (t.status === 'error') { <span class=\"muted\">\u00B7 failed</span> }\n                @if (t.status === 'awaiting-approval') { <span class=\"muted\">\u00B7 awaiting approval</span> }\n                @if (t.status === 'declined') { <span class=\"muted\">\u00B7 declined</span> }\n              </div>\n            }\n          </div>\n        }\n        @if (m.text) {\n          <div class=\"bubble-text\">{{ m.text }}</div>\n        }\n        @if (m.pending && !m.text) {\n          <div class=\"thinking\"><span class=\"spinner-small\"></span> Thinking\u2026</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pending approval card -->\n  @if (pendingApproval(); as p) {\n    <div class=\"approval-card\">\n      <div class=\"approval-card-head\">\n        <strong>Approve action?</strong>\n        <code class=\"tool-name\">{{ p.name }}</code>\n      </div>\n      @if (p.args && (p.args | json) !== '{}') {\n        <pre class=\"approval-args\">{{ p.args | json }}</pre>\n      }\n      <div class=\"approval-actions\">\n        <button class=\"btn primary\" (click)=\"approve()\">Approve</button>\n        <button class=\"btn\" (click)=\"alwaysApprove()\">Always</button>\n        <button class=\"btn danger\" (click)=\"decline()\">Decline</button>\n      </div>\n    </div>\n  }\n\n  <!-- Composer -->\n  <div class=\"composer\">\n    @if (lastError()) {\n      <div class=\"composer-error\">{{ lastError() }}</div>\n    }\n    <div class=\"composer-row\">\n      <textarea #textArea\n                rows=\"1\"\n                placeholder=\"Ask the AI\u2026\"\n                [value]=\"draft()\"\n                (input)=\"onTextareaInput($event)\"\n                (keydown)=\"onTextareaKey($event)\"\n                [disabled]=\"streaming()\"></textarea>\n      @if (streaming()) {\n        <button class=\"send-btn cancel\" (click)=\"cancel()\" title=\"Cancel\" aria-label=\"Cancel\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\"/></svg>\n        </button>\n      } @else {\n        <button class=\"send-btn\" (click)=\"send()\" [disabled]=\"!draft().trim()\" title=\"Send\" aria-label=\"Send\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"/></svg>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n", ":host{--primary: #c4b5fd;--primary-strong: #a78bfa;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-bubble-user: #312e81;--bg-bubble-assistant: #232336;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #7c3aed;--primary-strong: #6d28d9;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f3ff;--bg-hover: #ede9fe;--bg-bubble-user: #ede9fe;--bg-bubble-assistant: #f5f5f5;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.ai-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:1029}.ai-backdrop.open{display:block}.ai-panel{position:fixed;top:0;right:0;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);will-change:transform,width}.ai-panel.open{transform:translate(0)}.ai-resize-handle{position:absolute;top:0;left:-4px;width:8px;height:100%;cursor:ew-resize;z-index:1;background:transparent}.ai-resize-handle:hover{background:linear-gradient(to right,transparent,rgba(124,58,237,.25),transparent)}.header-actions{display:flex;align-items:center;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-content{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.quick-prompts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}.quick-prompt{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 10px;border-radius:14px;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.quick-prompt:hover{background:var(--bg-hover);color:var(--text-primary)}.bubble{max-width:90%;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--bg-bubble-user);color:var(--text-primary)}.bubble.assistant{align-self:flex-start;background:var(--bg-bubble-assistant);color:var(--text-primary)}.bubble-text{display:block}.thinking{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12.5px}.spinner-small{width:12px;height:12px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.tool-strip{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.tool-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--bg-hover);font-size:11.5px;color:var(--text-secondary);border:1px solid var(--border-color);align-self:flex-start}.tool-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}.tool-chip.running .dot{background:var(--primary);animation:pulse 1s ease-in-out infinite}.tool-chip.ok .dot{background:var(--success)}.tool-chip.err .dot{background:var(--error)}.tool-chip.await .dot{background:#f59e0b}.tool-chip.declined .dot{background:var(--text-muted)}.tool-chip .tool-name{font-weight:600;color:var(--text-primary)}.tool-chip .muted{color:var(--text-muted)}@keyframes pulse{50%{opacity:.4}}.approval-card{flex-shrink:0;margin:8px 14px;padding:12px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--bg-secondary)}.approval-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--text-primary)}.approval-card-head code{background:var(--bg-hover);padding:2px 6px;border-radius:6px;font-size:12px;color:var(--primary)}.approval-args{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:8px;font-size:11.5px;max-height:100px;overflow:auto;margin:0 0 8px;color:var(--text-secondary)}.approval-actions{display:flex;gap:6px;flex-wrap:wrap}.btn{flex:1;padding:6px 10px;font-size:12.5px;font-weight:600;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-hover)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.primary:hover{background:var(--primary-strong)}.btn.danger{color:var(--error)}.btn.danger:hover{background:#ef53501a}.composer{flex-shrink:0;border-top:1px solid var(--border-color);padding:10px 12px;background:var(--bg-secondary)}.composer-error{color:var(--error);font-size:12px;margin-bottom:6px}.composer-row{display:flex;align-items:flex-end;gap:8px}.composer textarea{flex:1;resize:none;padding:8px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;min-height:36px;max-height:160px;line-height:1.4}.composer textarea:focus{border-color:var(--primary)}.composer textarea:disabled{opacity:.6}.send-btn{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.send-btn:hover:not(:disabled){background:var(--primary-strong)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.send-btn.cancel{background:var(--error)}.send-btn.cancel:hover{filter:brightness(1.1)}\n"] }]
+            args: [{ selector: 'ma-ai-chat-panel', imports: [JsonPipe, MaAiMarkdownPipe], template: "<div class=\"ai-panel\" [class.open]=\"isOpen()\" [style.width.px]=\"width()\">\n\n  <!-- Resize handle (left edge) -->\n  <div class=\"ai-resize-handle\"\n       (pointerdown)=\"startResize($event)\"\n       (pointermove)=\"onResizeMove($event)\"\n       (pointerup)=\"endResize($event)\"\n       (pointercancel)=\"endResize($event)\"\n       aria-label=\"Resize panel\"\n       title=\"Drag to resize\"></div>\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"\n           fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        <path d=\"M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z\"/>\n      </svg>\n      <h3>AI Assistant</h3>\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"icon-btn\" (click)=\"newConversation()\" title=\"New conversation\" aria-label=\"New conversation\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>\n        </svg>\n      </button>\n      <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation -->\n  <div class=\"panel-content\" #scrollContainer>\n    @if (!hasMessages()) {\n      <div class=\"empty-state\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.5\">\n          <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        </svg>\n        <p>Ask anything about your account, approvals, notifications, or how to use the app.</p>\n        <div class=\"quick-prompts\">\n          @for (q of quickPrompts(); track q) {\n            <button class=\"quick-prompt\" (click)=\"draft.set(q)\">{{ q }}</button>\n          }\n        </div>\n      </div>\n    }\n\n    @for (m of messages(); track m.id) {\n      <div class=\"bubble\" [class.user]=\"m.role === 'user'\" [class.assistant]=\"m.role === 'assistant'\">\n        @if (m.role === 'assistant' && m.toolEvents && m.toolEvents.length > 0) {\n          <div class=\"tool-strip\">\n            @for (t of m.toolEvents; track t.id) {\n              <div class=\"tool-chip\" [class.ok]=\"t.status === 'ok'\" [class.err]=\"t.status === 'error'\"\n                   [class.running]=\"t.status === 'running'\" [class.await]=\"t.status === 'awaiting-approval'\"\n                   [class.declined]=\"t.status === 'declined'\"\n                   [title]=\"t.summary ?? ''\">\n                <span class=\"dot\"></span>\n                <span class=\"tool-name\">{{ t.side === 'server' ? '\u2699' : '\u2318' }} {{ t.name }}</span>\n                @if (t.status === 'running') { <span class=\"muted\">\u2026</span> }\n                @if (t.status === 'ok' && t.summary) { <span class=\"muted\">\u00B7 {{ t.summary }}</span> }\n                @if (t.status === 'error') { <span class=\"muted\">\u00B7 failed</span> }\n                @if (t.status === 'awaiting-approval') { <span class=\"muted\">\u00B7 awaiting approval</span> }\n                @if (t.status === 'declined') { <span class=\"muted\">\u00B7 declined</span> }\n              </div>\n            }\n          </div>\n        }\n        @if (m.text) {\n          @if (m.role === 'assistant') {\n            <div class=\"bubble-text md-body\" [innerHTML]=\"m.text | maAiMarkdown\"></div>\n          } @else {\n            <div class=\"bubble-text\">{{ m.text }}</div>\n          }\n        }\n        @if (m.pending && !m.text) {\n          <div class=\"thinking\"><span class=\"spinner-small\"></span> Thinking\u2026</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pending approval card -->\n  @if (pendingApproval(); as p) {\n    <div class=\"approval-card\">\n      <div class=\"approval-card-head\">\n        <strong>Approve action?</strong>\n        <code class=\"tool-name\">{{ p.name }}</code>\n      </div>\n      @if (p.args && (p.args | json) !== '{}') {\n        <pre class=\"approval-args\">{{ p.args | json }}</pre>\n      }\n      <div class=\"approval-actions\">\n        <button class=\"btn primary\" (click)=\"approve()\">Approve</button>\n        <button class=\"btn\" (click)=\"alwaysApprove()\">Always</button>\n        <button class=\"btn danger\" (click)=\"decline()\">Decline</button>\n      </div>\n    </div>\n  }\n\n  <!-- Composer -->\n  <div class=\"composer\">\n    @if (lastError()) {\n      <div class=\"composer-error\">{{ lastError() }}</div>\n    }\n    <div class=\"composer-row\">\n      <textarea #textArea\n                rows=\"1\"\n                placeholder=\"Ask the AI\u2026\"\n                [value]=\"draft()\"\n                (input)=\"onTextareaInput($event)\"\n                (keydown)=\"onTextareaKey($event)\"\n                [disabled]=\"streaming()\"></textarea>\n      @if (streaming()) {\n        <button class=\"send-btn cancel\" (click)=\"cancel()\" title=\"Cancel\" aria-label=\"Cancel\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\"/></svg>\n        </button>\n      } @else {\n        <button class=\"send-btn\" (click)=\"send()\" [disabled]=\"!draft().trim()\" title=\"Send\" aria-label=\"Send\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"/></svg>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n", ":host{--primary: #c4b5fd;--primary-strong: #a78bfa;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-bubble-user: #312e81;--bg-bubble-assistant: #232336;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #7c3aed;--primary-strong: #6d28d9;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f3ff;--bg-hover: #ede9fe;--bg-bubble-user: #ede9fe;--bg-bubble-assistant: #f5f5f5;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.ai-panel{position:fixed;top:0;right:0;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1040;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);will-change:transform,width;pointer-events:none}.ai-panel.open{transform:translate(0);pointer-events:auto}.ai-resize-handle{position:absolute;top:0;left:-4px;width:8px;height:100%;cursor:ew-resize;z-index:1;background:transparent}.ai-resize-handle:hover{background:linear-gradient(to right,transparent,rgba(124,58,237,.25),transparent)}.header-actions{display:flex;align-items:center;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-content{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.quick-prompts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}.quick-prompt{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 10px;border-radius:14px;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.quick-prompt:hover{background:var(--bg-hover);color:var(--text-primary)}.bubble{max-width:90%;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--bg-bubble-user);color:var(--text-primary)}.bubble.assistant{align-self:flex-start;background:var(--bg-bubble-assistant);color:var(--text-primary)}.bubble-text{display:block}.thinking{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12.5px}.spinner-small{width:12px;height:12px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.tool-strip{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.tool-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--bg-hover);font-size:11.5px;color:var(--text-secondary);border:1px solid var(--border-color);align-self:flex-start}.tool-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}.tool-chip.running .dot{background:var(--primary);animation:pulse 1s ease-in-out infinite}.tool-chip.ok .dot{background:var(--success)}.tool-chip.err .dot{background:var(--error)}.tool-chip.await .dot{background:#f59e0b}.tool-chip.declined .dot{background:var(--text-muted)}.tool-chip .tool-name{font-weight:600;color:var(--text-primary)}.tool-chip .muted{color:var(--text-muted)}@keyframes pulse{50%{opacity:.4}}.approval-card{flex-shrink:0;margin:8px 14px;padding:12px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--bg-secondary)}.approval-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--text-primary)}.approval-card-head code{background:var(--bg-hover);padding:2px 6px;border-radius:6px;font-size:12px;color:var(--primary)}.approval-args{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:8px;font-size:11.5px;max-height:100px;overflow:auto;margin:0 0 8px;color:var(--text-secondary)}.approval-actions{display:flex;gap:6px;flex-wrap:wrap}.btn{flex:1;padding:6px 10px;font-size:12.5px;font-weight:600;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-hover)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.primary:hover{background:var(--primary-strong)}.btn.danger{color:var(--error)}.btn.danger:hover{background:#ef53501a}.composer{flex-shrink:0;border-top:1px solid var(--border-color);padding:10px 12px;background:var(--bg-secondary)}.composer-error{color:var(--error);font-size:12px;margin-bottom:6px}.composer-row{display:flex;align-items:flex-end;gap:8px}.composer textarea{flex:1;resize:none;padding:8px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;min-height:36px;max-height:160px;line-height:1.4}.composer textarea:focus{border-color:var(--primary)}.composer textarea:disabled{opacity:.6}.send-btn{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.send-btn:hover:not(:disabled){background:var(--primary-strong)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.send-btn.cancel{background:var(--error)}.send-btn.cancel:hover{filter:brightness(1.1)}.md-body{font-size:13.5px;line-height:1.55}.md-body .md-p{margin:0 0 8px}.md-body .md-p:last-child{margin-bottom:0}.md-body .md-h1,.md-body .md-h2,.md-body .md-h3,.md-body .md-h4,.md-body .md-h5,.md-body .md-h6{margin:12px 0 6px;font-weight:700;color:var(--text-primary);line-height:1.3}.md-body .md-h1{font-size:17px}.md-body .md-h2{font-size:15.5px}.md-body .md-h3{font-size:14.5px}.md-body .md-h4,.md-body .md-h5,.md-body .md-h6{font-size:13.5px}.md-body strong{font-weight:700}.md-body em{font-style:italic}.md-body .md-link{color:var(--primary);text-decoration:underline;text-underline-offset:2px}.md-body .md-link:hover{color:var(--primary-strong)}.md-body .md-list{margin:0 0 8px;padding-left:22px}.md-body .md-list li{margin:2px 0}.md-body .md-list li::marker{color:var(--text-muted)}.md-body .md-quote{margin:0 0 8px;padding:6px 10px;border-left:3px solid var(--primary);background:var(--bg-hover);color:var(--text-secondary);border-radius:0 6px 6px 0}.md-body .md-code{background:var(--bg-hover);border:1px solid var(--border-color);border-radius:4px;padding:1px 5px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--primary)}.md-body .md-pre{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:10px 12px;margin:0 0 8px;overflow-x:auto;font-size:12px;line-height:1.5}.md-body .md-pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text-primary);background:none;border:none;padding:0}.md-body .md-table-wrap{margin:0 0 8px;overflow-x:auto;border:1px solid var(--border-color);border-radius:8px}.md-body .md-table{border-collapse:collapse;width:100%;font-size:12.5px}.md-body .md-table th,.md-body .md-table td{padding:6px 10px;border-bottom:1px solid var(--border-color);vertical-align:top;text-align:left}.md-body .md-table th{background:var(--bg-secondary);color:var(--text-primary);font-weight:600}.md-body .md-table tr:last-child td{border-bottom:none}.md-body .md-table tbody tr:hover{background:var(--bg-hover)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], textArea: [{ type: i0.ViewChild, args: ['textArea', { isSignal: true }] }], themeClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -3066,5 +3259,5 @@ async function runReturnViaPostMessageIfRequested(authService) {
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_ACTIONS, AVATAR_FRAMES, ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, DEFAULT_AI_CONFIG, MES_AUTH_AI_CONFIG, MES_AUTH_CONFIG, MaAiButtonComponent, MaAiChatPanelComponent, MaAiService, MaAiToolsRegistry, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaAvatarComponent, MaIconComponent, MaThemeDirective, MaUiConfigService, MaUserComponent, MaUserMenuColor, MaUserMenuComponent, MaUserXComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, PACKAGE_VERSION, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, extractXMaPerm, mesAuthInterceptor, provideMesAuth, provideMesAuthAi, runReturnViaPostMessageIfRequested, runSsoCheckHandshake, withXMaPerm, xMaResource };
+export { ALL_ACTIONS, AVATAR_FRAMES, ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, DEFAULT_AI_CONFIG, MES_AUTH_AI_CONFIG, MES_AUTH_CONFIG, MaAiButtonComponent, MaAiChatPanelComponent, MaAiMarkdownPipe, MaAiService, MaAiToolsRegistry, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaAvatarComponent, MaIconComponent, MaThemeDirective, MaUiConfigService, MaUserComponent, MaUserMenuColor, MaUserMenuComponent, MaUserXComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, PACKAGE_VERSION, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, extractXMaPerm, mesAuthInterceptor, provideMesAuth, provideMesAuthAi, renderMarkdown, runReturnViaPostMessageIfRequested, runSsoCheckHandshake, withXMaPerm, xMaResource };
 //# sourceMappingURL=mesauth-angular.mjs.map