mesauth-angular 1.23.0 → 1.25.0

package/fesm2022/mesauth-angular.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
 import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, afterNextRender, input, booleanAttribute, computed, HostBinding, Component, output, Injector, ChangeDetectionStrategy, effect, HostListener, ElementRef, Pipe, viewChild, ViewChild, 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 { catchError, of, Subject, EMPTY, BehaviorSubject, throwError, timer, firstValueFrom, distinctUntilChanged, switchMap as switchMap$1, forkJoin } from 'rxjs';
 import { HttpClient, HttpResponse } from '@angular/common/http';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
-import { map, tap, catchError as catchError$1, switchMap } from 'rxjs/operators';
+import { map, tap, catchError as catchError$1, switchMap, filter, take } from 'rxjs/operators';
 import { Router } from '@angular/router';
 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.23.0';
+const PACKAGE_VERSION = '1.25.0';
 /**
  * Provides server-driven UI configuration loaded from the hosted manifest.
  * Components read `labels()` and `features()` signals instead of hardcoded strings.
@@ -159,6 +159,13 @@ class MesAuthService {
     notifications$ = this._notifications.asObservable();
     _approvalEvents = new Subject();
     approvalEvents$ = this._approvalEvents.asObservable();
+    /** Fires when the notification list was modified externally (e.g. AI marked-all-read). */
+    _notificationsModified = new Subject();
+    notificationsModified$ = this._notificationsModified.asObservable();
+    /** Called by AI client tools after any notification-mutating action. */
+    signalNotificationsModified() {
+        this._notificationsModified.next();
+    }
     apiBase = '';
     config = null;
     http;
@@ -446,20 +453,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
-// Track if we're currently redirecting to prevent loopback
+// Module-scope state — single instance shared across all requests because
+// HttpInterceptorFn is provided once per injector.
+// True while a 401-triggered refresh is in flight; concurrent 401 retries wait for it.
+const refreshing$ = new BehaviorSubject(false);
+// Last access token written to localStorage from an X-Refreshed-Token response header.
+// Used to collapse N duplicate writes (one per parallel response) into one notifySignedIn call.
+let lastWrittenAccessToken = null;
+// Track if we're currently redirecting to login to prevent loopback storms.
 let isRedirecting = false;
 /**
- * Functional HTTP interceptor for handling 401/403 auth errors.
- * Redirects to login page on 401, and to 403 page on 403.
- * Includes loopback prevention to avoid infinite redirects.
+ * Functional HTTP interceptor.
+ *
+ * Responsibilities:
+ *   1. Attach `Authorization: Bearer` + `X-Refresh-Token` from localStorage to requests
+ *      targeting the auth server / trusted hosts (so the server-side Authorizer middleware
+ *      can perform silent refresh and emit X-Refreshed-* response headers).
+ *   2. On every successful response, if `X-Refreshed-Token` is present, write it to
+ *      localStorage exactly once (dedup across parallel responses).
+ *   3. On 401, queue concurrent failures behind a single 1.5s wait so only ONE retry
+ *      fires per refresh window. Retries strip the stale auth headers so the interceptor
+ *      re-reads the freshly-stored tokens from localStorage.
+ *   4. On 403, redirect to /403.
  */
 const mesAuthInterceptor = (req, next) => {
     const authService = inject(MesAuthService);
     const router = inject(Router);
-    // Attach access + refresh tokens from localStorage to requests going to the auth server
-    // or any backend host running MesAuth.Authorizer (trustedHosts). This lets the authorizer
-    // middleware silently refresh tokens and emit X-Refreshed-Token response headers.
-    // Relative URLs are always considered trusted (same origin).
     const config = authService.getConfig();
     const apiBase = config?.apiBaseUrl ?? '';
     const trustedHosts = config?.trustedHosts ?? [];
@@ -473,9 +492,11 @@ const mesAuthInterceptor = (req, next) => {
             return true; // relative URL — same origin
         }
     }
-    let authReq = req;
-    if (typeof localStorage !== 'undefined' && isTrusted(req.url)) {
-        let headers = req.headers;
+    // ---- Build the outgoing request, attaching localStorage tokens for trusted hosts.
+    function attachAuthHeaders(r) {
+        if (typeof localStorage === 'undefined' || !isTrusted(r.url))
+            return r;
+        let headers = r.headers;
         if (!headers.has('Authorization')) {
             const accessToken = localStorage.getItem('mes_auth_token');
             if (accessToken)
@@ -486,39 +507,50 @@ const mesAuthInterceptor = (req, next) => {
             if (refreshToken)
                 headers = headers.set('X-Refresh-Token', refreshToken);
         }
-        if (headers !== req.headers)
-            authReq = req.clone({ headers });
+        return headers !== r.headers ? r.clone({ headers }) : r;
+    }
+    // Strip the headers we set so a retry forces re-read from localStorage (which by then
+    // contains the refreshed tokens written by the X-Refreshed-Token response handler).
+    function stripAuthHeaders(r) {
+        return r.clone({
+            headers: r.headers.delete('Authorization').delete('X-Refresh-Token')
+        });
     }
+    const authReq = attachAuthHeaders(req);
     return next(authReq).pipe(tap(event => {
         if (event instanceof HttpResponse) {
             const newAccessToken = event.headers.get('X-Refreshed-Token');
-            if (newAccessToken) {
+            if (newAccessToken && newAccessToken !== lastWrittenAccessToken) {
+                lastWrittenAccessToken = newAccessToken;
                 const newRefreshToken = event.headers.get('X-Refreshed-Refresh-Token') ?? undefined;
                 authService.notifySignedIn(newAccessToken, newRefreshToken);
             }
         }
     }), catchError$1((error) => {
         const status = error.status;
-        // Check if we should handle this error and prevent loopback
-        if ((status === 401 || status === 403) && !isRedirecting) {
-            const config = authService.getConfig();
-            const baseUrl = config?.userBaseUrl || '';
-            const currentUrl = router.url + (window.location.hash || '');
-            const returnUrl = encodeURIComponent(currentUrl);
-            // Avoid loops if already on auth/unauth pages
-            const isLoginPage = currentUrl.includes('/login');
-            const is403Page = currentUrl.includes('/403');
-            const isAuthPage = currentUrl.includes('/auth');
-            // Public pages that should never trigger a 401 redirect (e.g., register, password reset)
-            const isPublicPage = currentUrl.includes('/register')
-                || currentUrl.includes('/forgot-password')
-                || currentUrl.includes('/reset-password');
-            // Skip redirect for the initial /auth/me check (app startup when not logged in)
-            const isMeAuthPage = req.url.includes('/auth/me');
-            if (status === 401 && !isLoginPage && !isAuthPage && !isMeAuthPage && !isPublicPage) {
-                // Wait 1.5s for the concurrent refresh's Set-Cookie to be processed, then retry once.
-                // If retry also gets 401, redirect to login.
-                return timer(1500).pipe(switchMap(() => next(req)), catchError$1((retryError) => {
+        if (!(status === 401 || status === 403) || isRedirecting) {
+            return throwError(() => error);
+        }
+        const baseUrl = config?.userBaseUrl || '';
+        const currentUrl = router.url + (window.location.hash || '');
+        const returnUrl = encodeURIComponent(currentUrl);
+        const isLoginPage = currentUrl.includes('/login');
+        const is403Page = currentUrl.includes('/403');
+        const isAuthPage = currentUrl.includes('/auth');
+        const isPublicPage = currentUrl.includes('/register')
+            || currentUrl.includes('/forgot-password')
+            || currentUrl.includes('/reset-password');
+        const isMeAuthPage = req.url.includes('/auth/me');
+        if (status === 401 && !isLoginPage && !isAuthPage && !isMeAuthPage && !isPublicPage) {
+            // Single-flight: the first 401 opens a 1.5s window during which all other 401s
+            // wait for the refresh signal to flip back to false, then retry once.
+            if (!refreshing$.value) {
+                refreshing$.next(true);
+                return timer(1500).pipe(switchMap(() => next(stripAuthHeaders(req))), tap({
+                    next: () => refreshing$.next(false),
+                    error: () => refreshing$.next(false),
+                    complete: () => refreshing$.next(false)
+                }), catchError$1((retryError) => {
                     if (retryError.status === 401) {
                         isRedirecting = true;
                         setTimeout(() => { isRedirecting = false; }, 5000);
@@ -527,32 +559,29 @@ const mesAuthInterceptor = (req, next) => {
                     return throwError(() => retryError);
                 }));
             }
-            else if (status === 403 && !is403Page) {
-                isRedirecting = true;
-                setTimeout(() => { isRedirecting = false; }, 5000);
-                let redirectUrl = `${baseUrl}/403?returnUrl=${returnUrl}`;
-                if (error.error && error.error.required) {
-                    redirectUrl += `&required=${encodeURIComponent(error.error.required)}`;
+            // Refresh already in flight — wait for it to finish, then retry once with
+            // headers stripped so the interceptor re-reads the now-fresh tokens.
+            return refreshing$.pipe(filter(v => !v), take(1), switchMap(() => next(stripAuthHeaders(req))), catchError$1((retryError) => {
+                if (retryError.status === 401 && !isRedirecting) {
+                    isRedirecting = true;
+                    setTimeout(() => { isRedirecting = false; }, 5000);
+                    window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
                 }
-                window.location.href = redirectUrl;
+                return throwError(() => retryError);
+            }));
+        }
+        if (status === 403 && !is403Page) {
+            isRedirecting = true;
+            setTimeout(() => { isRedirecting = false; }, 5000);
+            let redirectUrl = `${baseUrl}/403?returnUrl=${returnUrl}`;
+            if (error.error && error.error.required) {
+                redirectUrl += `&required=${encodeURIComponent(error.error.required)}`;
             }
+            window.location.href = redirectUrl;
         }
         return throwError(() => error);
     }));
 };
-function appendPermissions(body, allowedActions) {
-    if (body === null || body === undefined) {
-        return { 'x-ma-perms': allowedActions };
-    }
-    if (Array.isArray(body)) {
-        return { data: body, 'x-ma-perms': allowedActions };
-    }
-    if (typeof body === 'object') {
-        return { ...body, 'x-ma-perms': allowedActions };
-    }
-    // Primitive (string, number, boolean)
-    return { data: body, 'x-ma-perms': allowedActions };
-}
 
 class MesAuthModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MesAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -887,6 +916,35 @@ class MaAiToolsRegistry {
                 window.location.reload();
                 return 'Reloading page…';
             }
+        },
+        {
+            name: 'refresh_notification_count',
+            description: 'Refresh the notification badge count in the UI. Call this after any action that changes the user\'s notification state (mark as read, delete).',
+            parameters: { type: 'object', properties: {} },
+            readOnly: true,
+            handler: () => {
+                const auth = this.injector.get(MesAuthService);
+                auth.signalNotificationsModified();
+                return 'Notification count refresh triggered.';
+            }
+        },
+        {
+            name: 'ask_user',
+            description: 'Ask the user a question and wait for their answer before proceeding. Use when you need to disambiguate (e.g. which item to act on) or confirm a significant bulk action. Provide concise options when possible.',
+            parameters: {
+                type: 'object',
+                properties: {
+                    message: { type: 'string', description: 'The question to display to the user.' },
+                    options: {
+                        type: 'array',
+                        items: { type: 'string' },
+                        description: 'Optional list of answer choices shown as buttons. If omitted, a free-text input is shown.'
+                    }
+                },
+                required: ['message']
+            },
+            readOnly: false,
+            handler: () => 'ok' // never called — MaAiService intercepts ask_user before runTool
         }
     ];
     /** All tools, deduplicated by name (consumer wins on conflict). */
@@ -938,6 +996,8 @@ class MaAiService {
     streaming = signal(false, ...(ngDevMode ? [{ debugName: "streaming" }] : /* istanbul ignore next */ []));
     /** When non-null, a write-class client tool is awaiting user confirmation. */
     pendingApproval = signal(null, ...(ngDevMode ? [{ debugName: "pendingApproval" }] : /* istanbul ignore next */ []));
+    /** When non-null, the AI called ask_user and is waiting for the user's answer. */
+    pendingQuestion = signal(null, ...(ngDevMode ? [{ debugName: "pendingQuestion" }] : /* istanbul ignore next */ []));
     lastError = signal(null, ...(ngDevMode ? [{ debugName: "lastError" }] : /* istanbul ignore next */ []));
     sessionId = null;
     /** Verbs the user already chose "always approve" for in this session. */
@@ -954,6 +1014,7 @@ class MaAiService {
         this.sessionId = null;
         this.messages.set([]);
         this.pendingApproval.set(null);
+        this.pendingQuestion.set(null);
         this.lastError.set(null);
         this.alwaysApproved.clear();
     }
@@ -967,6 +1028,16 @@ class MaAiService {
         this.currentAssistantId = null;
         // If a client-tool call was awaiting the user, clearing it lets them start over.
         this.pendingApproval.set(null);
+        this.pendingQuestion.set(null);
+    }
+    /** Send the user's answer to a pending ask_user question back to the orchestrator. */
+    async resolveQuestion(answer) {
+        const q = this.pendingQuestion();
+        if (!q)
+            return;
+        this.pendingQuestion.set(null);
+        this.markToolStatus(q.callId, 'ok', answer);
+        await this.continueWithToolResult(q.callId, true, answer);
     }
     /** User typed and submitted a message. */
     async send(text, currentRoute) {
@@ -1105,20 +1176,38 @@ class MaAiService {
                 this.markToolStatus(ev.id, ev.ok ? 'ok' : 'error', ev.summary);
                 break;
             case 'client_tool_call':
-                this.appendToolEvent({
-                    id: ev.id,
-                    name: ev.name,
-                    side: 'client',
-                    status: ev.readOnly ? 'running' : 'awaiting-approval',
-                    args: ev.args,
-                    readOnly: ev.readOnly
-                });
-                if (ev.readOnly || this.alwaysApproved.has(this.verbOf(ev.name))) {
-                    // Auto-run; the next /ai/chat call will deliver the result.
-                    await this.executeClientTool(ev.id, ev.name, ev.args);
+                if (ev.name === 'ask_user') {
+                    // Special handling: show a question card instead of the approval card.
+                    this.appendToolEvent({
+                        id: ev.id,
+                        name: ev.name,
+                        side: 'client',
+                        status: 'awaiting-approval',
+                        args: ev.args,
+                        readOnly: false
+                    });
+                    this.pendingQuestion.set({
+                        callId: ev.id,
+                        message: ev.args?.message ?? 'How would you like to proceed?',
+                        options: Array.isArray(ev.args?.options) ? ev.args.options : undefined
+                    });
                 }
                 else {
-                    this.pendingApproval.set({ callId: ev.id, name: ev.name, args: ev.args, side: 'client' });
+                    this.appendToolEvent({
+                        id: ev.id,
+                        name: ev.name,
+                        side: 'client',
+                        status: ev.readOnly ? 'running' : 'awaiting-approval',
+                        args: ev.args,
+                        readOnly: ev.readOnly
+                    });
+                    if (ev.readOnly || this.alwaysApproved.has(this.verbOf(ev.name))) {
+                        // Auto-run; the next /ai/chat call will deliver the result.
+                        await this.executeClientTool(ev.id, ev.name, ev.args);
+                    }
+                    else {
+                        this.pendingApproval.set({ callId: ev.id, name: ev.name, args: ev.args, side: 'client' });
+                    }
                 }
                 break;
             case 'error':
@@ -1606,6 +1695,7 @@ class UserProfileComponent {
         const currentUserSig = toSignal(this.authService.currentUser$, { initialValue: null });
         const approvalEvent = toSignal(this.authService.approvalEvents$);
         const notification = toSignal(this.authService.notifications$);
+        const notificationsModified = toSignal(this.authService.notificationsModified$, { initialValue: undefined });
         effect(() => {
             const user = currentUserSig();
             this.currentUser.set(user);
@@ -1624,7 +1714,12 @@ class UserProfileComponent {
                 this.loadPendingApprovalCount();
         });
         effect(() => {
-            notification(); // track SignalR notification events
+            notification(); // track incoming SignalR notifications
+            if (currentUserSig())
+                this.loadUnreadCount();
+        });
+        effect(() => {
+            notificationsModified(); // track AI-driven notification mutations
             if (currentUserSig())
                 this.loadUnreadCount();
         });
@@ -2644,8 +2739,10 @@ class MaAiChatPanelComponent {
     messages = this.ai.messages;
     streaming = this.ai.streaming;
     pendingApproval = this.ai.pendingApproval;
+    pendingQuestion = this.ai.pendingQuestion;
     lastError = this.ai.lastError;
     hasMessages = computed(() => this.messages().length > 0, ...(ngDevMode ? [{ debugName: "hasMessages" }] : /* istanbul ignore next */ []));
+    questionInput = signal('', ...(ngDevMode ? [{ debugName: "questionInput" }] : /* istanbul ignore next */ []));
     // Resize state
     isDragging = false;
     dragStartX = 0;
@@ -2730,6 +2827,14 @@ class MaAiChatPanelComponent {
     approve() { this.ai.resolvePendingApproval('approve'); }
     alwaysApprove() { this.ai.resolvePendingApproval('always'); }
     decline() { this.ai.resolvePendingApproval('decline'); }
+    answerQuestion(answer) { this.ai.resolveQuestion(answer); }
+    submitQuestionInput() {
+        const text = this.questionInput().trim();
+        if (!text)
+            return;
+        this.questionInput.set('');
+        this.ai.resolveQuestion(text);
+    }
     // ── resize handle ─────────────────────────────────────────────────────────
     startResize(ev) {
         this.isDragging = true;
@@ -2776,11 +2881,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-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=\"M12 5v14\"/><path d=\"M5 12h14\"/>\n        </svg>\n      </button>\n      <button class=\"icon-btn\" (click)=\"toggleHistory()\" [class.active]=\"historyOpen()\" title=\"History\" aria-label=\"History\">\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          <circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/>\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  @if (historyOpen()) {\n    <ma-ai-history-list (resumed)=\"onHistoryResumed($event)\"></ma-ai-history-list>\n  }\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\n  <!-- Footer with hints (lifts the composer off the absolute bottom of the viewport) -->\n  <div class=\"ai-footer\">\n    <span class=\"hint\">\n      <kbd>Enter</kbd> send \u00B7 <kbd>Shift</kbd>+<kbd>Enter</kbd> new line\n    </span>\n    <span class=\"hint dim\">AI can make mistakes &mdash; verify important info</span>\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)}.ai-footer{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px 10px;background:var(--bg-secondary);border-top:1px solid var(--border-color);font-size:11px;color:var(--text-secondary);line-height:1.4;text-align:center}.ai-footer .hint{display:inline-block}.ai-footer .hint.dim{color:var(--text-muted);font-size:10.5px}.ai-footer kbd{display:inline-block;padding:0 5px;margin:0 1px;border:1px solid var(--border-color);border-bottom-width:2px;border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.4}.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: "component", type: MaAiHistoryListComponent, selector: "ma-ai-history-list", outputs: ["resumed"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: MaAiMarkdownPipe, name: "maAiMarkdown" }] });
+    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=\"M12 5v14\"/><path d=\"M5 12h14\"/>\n        </svg>\n      </button>\n      <button class=\"icon-btn\" (click)=\"toggleHistory()\" [class.active]=\"historyOpen()\" title=\"History\" aria-label=\"History\">\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          <circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/>\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  @if (historyOpen()) {\n    <ma-ai-history-list (resumed)=\"onHistoryResumed($event)\"></ma-ai-history-list>\n  }\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  <!-- Question card (ask_user tool) -->\n  @if (pendingQuestion(); as q) {\n    <div class=\"question-card\">\n      <p class=\"question-text\">{{ q.message }}</p>\n      @if (q.options && q.options.length > 0) {\n        <div class=\"question-options\">\n          @for (opt of q.options; track opt) {\n            <button class=\"btn question-option\" (click)=\"answerQuestion(opt)\">{{ opt }}</button>\n          }\n        </div>\n      } @else {\n        <div class=\"question-input-row\">\n          <input type=\"text\"\n                 class=\"question-input\"\n                 placeholder=\"Type your answer\u2026\"\n                 [value]=\"questionInput()\"\n                 (input)=\"questionInput.set($any($event.target).value)\"\n                 (keydown.enter)=\"submitQuestionInput()\"\n                 autofocus />\n          <button class=\"btn primary\" (click)=\"submitQuestionInput()\" [disabled]=\"!questionInput().trim()\">Send</button>\n        </div>\n      }\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\n  <!-- Footer with hints (lifts the composer off the absolute bottom of the viewport) -->\n  <div class=\"ai-footer\">\n    <span class=\"hint\">\n      <kbd>Enter</kbd> send \u00B7 <kbd>Shift</kbd>+<kbd>Enter</kbd> new line\n    </span>\n    <span class=\"hint dim\">AI can make mistakes &mdash; verify important info</span>\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}.question-card{flex-shrink:0;margin:8px 14px;padding:12px 14px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary)}.question-text{margin:0 0 10px;font-size:13px;color:var(--text-primary);line-height:1.5}.question-options{display:flex;flex-wrap:wrap;gap:6px}.question-option{flex:0 1 auto}.question-input-row{display:flex;gap:6px;align-items:center}.question-input{flex:1;padding:6px 10px;font-size:13px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);outline:none}.question-input:focus{border-color:var(--primary)}.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)}.ai-footer{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px 10px;background:var(--bg-secondary);border-top:1px solid var(--border-color);font-size:11px;color:var(--text-secondary);line-height:1.4;text-align:center}.ai-footer .hint{display:inline-block}.ai-footer .hint.dim{color:var(--text-muted);font-size:10.5px}.ai-footer kbd{display:inline-block;padding:0 5px;margin:0 1px;border:1px solid var(--border-color);border-bottom-width:2px;border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.4}.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: "component", type: MaAiHistoryListComponent, selector: "ma-ai-history-list", outputs: ["resumed"] }, { 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, MaAiMarkdownPipe, MaAiHistoryListComponent], 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=\"M12 5v14\"/><path d=\"M5 12h14\"/>\n        </svg>\n      </button>\n      <button class=\"icon-btn\" (click)=\"toggleHistory()\" [class.active]=\"historyOpen()\" title=\"History\" aria-label=\"History\">\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          <circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/>\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  @if (historyOpen()) {\n    <ma-ai-history-list (resumed)=\"onHistoryResumed($event)\"></ma-ai-history-list>\n  }\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\n  <!-- Footer with hints (lifts the composer off the absolute bottom of the viewport) -->\n  <div class=\"ai-footer\">\n    <span class=\"hint\">\n      <kbd>Enter</kbd> send \u00B7 <kbd>Shift</kbd>+<kbd>Enter</kbd> new line\n    </span>\n    <span class=\"hint dim\">AI can make mistakes &mdash; verify important info</span>\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)}.ai-footer{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px 10px;background:var(--bg-secondary);border-top:1px solid var(--border-color);font-size:11px;color:var(--text-secondary);line-height:1.4;text-align:center}.ai-footer .hint{display:inline-block}.ai-footer .hint.dim{color:var(--text-muted);font-size:10.5px}.ai-footer kbd{display:inline-block;padding:0 5px;margin:0 1px;border:1px solid var(--border-color);border-bottom-width:2px;border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.4}.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"] }]
+            args: [{ selector: 'ma-ai-chat-panel', imports: [JsonPipe, MaAiMarkdownPipe, MaAiHistoryListComponent], 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=\"M12 5v14\"/><path d=\"M5 12h14\"/>\n        </svg>\n      </button>\n      <button class=\"icon-btn\" (click)=\"toggleHistory()\" [class.active]=\"historyOpen()\" title=\"History\" aria-label=\"History\">\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          <circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/>\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  @if (historyOpen()) {\n    <ma-ai-history-list (resumed)=\"onHistoryResumed($event)\"></ma-ai-history-list>\n  }\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  <!-- Question card (ask_user tool) -->\n  @if (pendingQuestion(); as q) {\n    <div class=\"question-card\">\n      <p class=\"question-text\">{{ q.message }}</p>\n      @if (q.options && q.options.length > 0) {\n        <div class=\"question-options\">\n          @for (opt of q.options; track opt) {\n            <button class=\"btn question-option\" (click)=\"answerQuestion(opt)\">{{ opt }}</button>\n          }\n        </div>\n      } @else {\n        <div class=\"question-input-row\">\n          <input type=\"text\"\n                 class=\"question-input\"\n                 placeholder=\"Type your answer\u2026\"\n                 [value]=\"questionInput()\"\n                 (input)=\"questionInput.set($any($event.target).value)\"\n                 (keydown.enter)=\"submitQuestionInput()\"\n                 autofocus />\n          <button class=\"btn primary\" (click)=\"submitQuestionInput()\" [disabled]=\"!questionInput().trim()\">Send</button>\n        </div>\n      }\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\n  <!-- Footer with hints (lifts the composer off the absolute bottom of the viewport) -->\n  <div class=\"ai-footer\">\n    <span class=\"hint\">\n      <kbd>Enter</kbd> send \u00B7 <kbd>Shift</kbd>+<kbd>Enter</kbd> new line\n    </span>\n    <span class=\"hint dim\">AI can make mistakes &mdash; verify important info</span>\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}.question-card{flex-shrink:0;margin:8px 14px;padding:12px 14px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-secondary)}.question-text{margin:0 0 10px;font-size:13px;color:var(--text-primary);line-height:1.5}.question-options{display:flex;flex-wrap:wrap;gap:6px}.question-option{flex:0 1 auto}.question-input-row{display:flex;gap:6px;align-items:center}.question-input{flex:1;padding:6px 10px;font-size:13px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);outline:none}.question-input:focus{border-color:var(--primary)}.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)}.ai-footer{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px 10px;background:var(--bg-secondary);border-top:1px solid var(--border-color);font-size:11px;color:var(--text-secondary);line-height:1.4;text-align:center}.ai-footer .hint{display:inline-block}.ai-footer .hint.dim{color:var(--text-muted);font-size:10.5px}.ai-footer kbd{display:inline-block;padding:0 5px;margin:0 1px;border:1px solid var(--border-color);border-bottom-width:2px;border-radius:4px;background:var(--bg-primary);color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.4}.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']
@@ -3008,6 +3113,7 @@ class NotificationBadgeComponent {
     constructor() {
         const currentUser = toSignal(this.authService.currentUser$, { initialValue: null });
         const latestNotification = toSignal(this.authService.notifications$);
+        const notificationsModified = toSignal(this.authService.notificationsModified$, { initialValue: undefined });
         effect(() => {
             if (!currentUser()) {
                 this.unreadCount.set(0);
@@ -3016,7 +3122,12 @@ class NotificationBadgeComponent {
             this.loadUnreadCount();
         });
         effect(() => {
-            latestNotification(); // track SignalR notification events
+            latestNotification(); // track incoming SignalR notifications
+            if (currentUser())
+                this.loadUnreadCount();
+        });
+        effect(() => {
+            notificationsModified(); // track AI-driven notification mutations
             if (currentUser())
                 this.loadUnreadCount();
         });