mesauth-angular 1.22.0 → 1.24.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, effect, HostListener, ElementRef, Injector, Pipe, viewChild, ViewChild, DestroyRef, Directive } 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.21.0';
+const PACKAGE_VERSION = '1.24.0';
 /**
  * Provides server-driven UI configuration loaded from the hosted manifest.
  * Components read `labels()` and `features()` signals instead of hardcoded strings.
@@ -446,20 +446,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 +485,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 +500,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 +552,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 });
@@ -772,201 +794,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
   `, styles: [":host{display:inline-flex}.ai-btn{background:none;border:none;cursor:pointer;color:var(--cui-body-color, #6e6e9a);width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.ai-btn:hover{background:var(--cui-tertiary-bg, rgba(120,120,200,.12));color:#7c3aed}\n"] }]
         }], propDecorators: { clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
-class UserProfileComponent {
-    inputAvatarShape = input('circle', ...(ngDevMode ? [{ debugName: "inputAvatarShape" }] : /* istanbul ignore next */ []));
-    showBell = input(true, ...(ngDevMode ? [{ debugName: "showBell" }] : /* istanbul ignore next */ []));
-    showApproval = input(true, ...(ngDevMode ? [{ debugName: "showApproval" }] : /* istanbul ignore next */ []));
-    showName = input(false, ...(ngDevMode ? [{ debugName: "showName" }] : /* istanbul ignore next */ []));
-    showAi = input(true, ...(ngDevMode ? [{ debugName: "showAi" }] : /* istanbul ignore next */ []));
-    showSignature = input([false, false], ...(ngDevMode ? [{ debugName: "showSignature" }] : /* istanbul ignore next */ []));
-    signatureHeight = input(40, ...(ngDevMode ? [{ debugName: "signatureHeight" }] : /* istanbul ignore next */ []));
-    notificationClick = output();
-    approvalClick = output();
-    aiClick = output();
-    get themeClass() {
-        return `theme-${this.themeService.currentTheme()}`;
-    }
-    currentUser = signal(null, ...(ngDevMode ? [{ debugName: "currentUser" }] : /* istanbul ignore next */ []));
-    unreadCount = signal(0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []));
-    pendingApprovalCount = signal(0, ...(ngDevMode ? [{ debugName: "pendingApprovalCount" }] : /* istanbul ignore next */ []));
-    dropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
-    avatarRefresh = signal(Date.now(), ...(ngDevMode ? [{ debugName: "avatarRefresh" }] : /* istanbul ignore next */ []));
-    // Avatar style derived from per-user preferences
-    navAvatarSize = computed(() => this.currentUser()?.avatarSize ?? 'md', ...(ngDevMode ? [{ debugName: "navAvatarSize" }] : /* istanbul ignore next */ []));
-    // Dropdown is always one step larger than the nav avatar
-    dropAvatarSize = computed(() => {
-        const s = this.navAvatarSize();
-        return s === 'sm' ? 'md' : s === 'md' ? 'lg' : 'xl';
-    }, ...(ngDevMode ? [{ debugName: "dropAvatarSize" }] : /* istanbul ignore next */ []));
-    avatarShape = computed(() => this.currentUser()?.avatarShape ?? this.inputAvatarShape(), ...(ngDevMode ? [{ debugName: "avatarShape" }] : /* istanbul ignore next */ []));
-    avatarFrame = computed(() => this.currentUser()?.avatarFrame ?? null, ...(ngDevMode ? [{ debugName: "avatarFrame" }] : /* istanbul ignore next */ []));
-    avatarRatio = computed(() => this.currentUser()?.avatarRatio ?? 'ar-11', ...(ngDevMode ? [{ debugName: "avatarRatio" }] : /* istanbul ignore next */ []));
-    givenStyle = computed(() => this.currentUser()?.givenColor || 'indigo', ...(ngDevMode ? [{ debugName: "givenStyle" }] : /* istanbul ignore next */ []));
-    signatureBroken = signal(false, ...(ngDevMode ? [{ debugName: "signatureBroken" }] : /* istanbul ignore next */ []));
-    signatureUrl = computed(() => {
-        if (!this.showSignature().some(s => s) || this.signatureBroken())
-            return null;
-        const baseRaw = this.authService.getConfig()?.apiBaseUrl ?? '';
-        const base = baseRaw.replace(/\/$/, '');
-        const u = this.currentUser();
-        const id = u?.userId ?? u?.id;
-        if (!id || !base)
-            return null;
-        return `${base}/auth/${id}/signature`;
-    }, ...(ngDevMode ? [{ debugName: "signatureUrl" }] : /* istanbul ignore next */ []));
-    authService = inject(MesAuthService);
-    router = inject(Router);
-    themeService = inject(ThemeService);
-    http = inject(HttpClient);
-    constructor() {
-        const currentUserSig = toSignal(this.authService.currentUser$, { initialValue: null });
-        const approvalEvent = toSignal(this.authService.approvalEvents$);
-        const notification = toSignal(this.authService.notifications$);
-        effect(() => {
-            const user = currentUserSig();
-            this.currentUser.set(user);
-            this.avatarRefresh.set(Date.now());
-            if (!user) {
-                this.unreadCount.set(0);
-                this.pendingApprovalCount.set(0);
-                return;
-            }
-            this.loadUnreadCount();
-            this.loadPendingApprovalCount();
-        });
-        effect(() => {
-            approvalEvent(); // track SignalR approval events
-            if (currentUserSig())
-                this.loadPendingApprovalCount();
-        });
-        effect(() => {
-            notification(); // track SignalR notification events
-            if (currentUserSig())
-                this.loadUnreadCount();
-        });
-    }
-    loadUnreadCount() {
-        this.authService.getUnreadCount().subscribe({
-            next: (response) => this.unreadCount.set(response.unreadCount || 0),
-            error: () => { }
-        });
-    }
-    loadPendingApprovalCount() {
-        const config = this.authService.getConfig();
-        if (!config)
-            return;
-        const url = `${config.apiBaseUrl.replace(/\/$/, '')}/approval/dashboard`;
-        this.http.get(url, { withCredentials: config.withCredentials ?? true }).subscribe({
-            next: (r) => this.pendingApprovalCount.set(r?.pendingCount ?? 0),
-            error: () => { }
-        });
-    }
-    onApprovalClick() {
-        this.approvalClick.emit();
-    }
-    onAiClick() {
-        this.aiClick.emit();
-    }
-    getAvatarUrl(user) {
-        // Use the refresh signal to force update
-        const refresh = this.avatarRefresh();
-        const config = this.authService.getConfig();
-        const baseUrl = config?.apiBaseUrl || '';
-        if (user.avatarPath) {
-            if (user.avatarPath.startsWith('http://') || user.avatarPath.startsWith('https://')) {
-                return user.avatarPath;
-            }
-            return `${baseUrl.replace(/\/$/, '')}${user.avatarPath}?t=${refresh}`;
-        }
-        const userId = user.userId;
-        if (userId && baseUrl) {
-            return `${baseUrl.replace(/\/$/, '')}/auth/${userId}/avatar?t=${refresh}`;
-        }
-        const displayName = user.userName || user.userId || 'User';
-        return `https://ui-avatars.com/api/?name=${encodeURIComponent(displayName)}&background=1976d2&color=fff`;
-    }
-    getLastNameInitial(user) {
-        const fullName = user.fullName || user.userName || 'U';
-        const parts = fullName.split(' ');
-        const lastPart = parts[parts.length - 1];
-        return lastPart.charAt(0).toUpperCase();
-    }
-    toggleDropdown() {
-        this.dropdownOpen.set(!this.dropdownOpen());
-    }
-    closeDropdown() {
-        this.dropdownOpen.set(false);
-    }
-    onDocumentClick(event) {
-        const target = event.target;
-        const clickedInside = target.closest('.user-menu-wrapper');
-        if (!clickedInside) {
-            this.dropdownOpen.set(false);
-            return;
-        }
-        if (target.closest('.ma-user-menu-btn')) {
-            this.dropdownOpen.set(false);
-        }
-    }
-    onLogin() {
-        const config = this.authService.getConfig();
-        const baseUrl = config?.userBaseUrl || '';
-        const returnUrl = encodeURIComponent(this.router.url);
-        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
-    }
-    onViewProfile() {
-        const config = this.authService.getConfig();
-        const baseUrl = config?.userBaseUrl || '';
-        const currentUrl = window.location.href;
-        this.openInNewTabIfSameOrigin(currentUrl, `${baseUrl}/profile`);
-        this.dropdownOpen.set(false);
-    }
-    openInNewTabIfSameOrigin(currentUrl, destinationUrl) {
-        // Check if current page URL starts with the destination URL
-        if (!destinationUrl.startsWith(currentUrl)) {
-            window.open(destinationUrl, "_blank", "noopener,noreferrer");
-        }
-        else {
-            // Optional: redirect in same tab
-            window.location.href = destinationUrl;
-        }
-    }
-    onLogout() {
-        this.authService.logout().subscribe({
-            next: () => {
-                this.dropdownOpen.set(false);
-                const config = this.authService.getConfig();
-                const baseUrl = config?.userBaseUrl || '';
-                const returnUrl = encodeURIComponent(window.location.href);
-                window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
-            },
-            error: () => {
-                const config = this.authService.getConfig();
-                const baseUrl = config?.userBaseUrl || '';
-                window.location.href = `${baseUrl}/login`;
-            }
-        });
-    }
-    onNotificationClick() {
-        this.notificationClick.emit();
-    }
-    onSigErr(_ev) {
-        this.signatureBroken.set(true);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", inputs: { inputAvatarShape: { classPropertyName: "inputAvatarShape", publicName: "inputAvatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, showAi: { classPropertyName: "showAi", publicName: "showAi", isSignal: true, isRequired: false, transformFunction: null }, showSignature: { classPropertyName: "showSignature", publicName: "showSignature", isSignal: true, isRequired: false, transformFunction: null }, signatureHeight: { classPropertyName: "signatureHeight", publicName: "signatureHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick", aiClick: "aiClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Ask AI -->\n      @if (showAi()) {\n        <ma-ai-button (clicked)=\"onAiClick()\"></ma-ai-button>\n      }\n\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  @if (showSignature()[1] && signatureUrl(); as sigUrl) {\n                      <img class=\"ma-ux-signature\"\n                          [src]=\"sigUrl\"\n                          [style.height.px]=\"signatureHeight()\"\n                          (error)=\"onSigErr($event)\"\n                          alt=\"signature\" />\n                  }\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n       @if (showSignature()[0] && signatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }, { kind: "component", type: MaAiButtonComponent, selector: "ma-ai-button", outputs: ["clicked"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ma-user-profile', imports: [MaAvatarComponent, MaAiButtonComponent], template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Ask AI -->\n      @if (showAi()) {\n        <ma-ai-button (clicked)=\"onAiClick()\"></ma-ai-button>\n      }\n\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  @if (showSignature()[1] && signatureUrl(); as sigUrl) {\n                      <img class=\"ma-ux-signature\"\n                          [src]=\"sigUrl\"\n                          [style.height.px]=\"signatureHeight()\"\n                          (error)=\"onSigErr($event)\"\n                          alt=\"signature\" />\n                  }\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n       @if (showSignature()[0] && signatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAvatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], showAi: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAi", required: false }] }], showSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSignature", required: false }] }], signatureHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "signatureHeight", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], approvalClick: [{ type: i0.Output, args: ["approvalClick"] }], aiClick: [{ type: i0.Output, args: ["aiClick"] }], themeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
 class ToastService {
     _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
     toasts = this._toasts.asReadonly();
@@ -993,900 +820,1459 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class ToastContainerComponent {
-    get themeClass() {
-        return `theme-${this.themeService.currentTheme()}`;
-    }
-    toastService = inject(ToastService);
-    themeService = inject(ThemeService);
-    toasts = this.toastService.toasts;
-    close(id) {
-        this.toastService.remove(id);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"toast-container\">\n  @for (toast of toasts(); track toast.id) {\n    <div class=\"toast toast-{{ toast.type }}\">\n\n      <!-- Type icon -->\n      <div class=\"toast-icon\">\n        @if (toast.type === 'info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n        }\n        @if (toast.type === 'success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n          </svg>\n        }\n        @if (toast.type === 'warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n          </svg>\n        }\n        @if (toast.type === 'error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n          </svg>\n        }\n      </div>\n\n      <!-- Content -->\n      <div class=\"toast-content\">\n        @if (toast.title) {\n          <div class=\"toast-title\">{{ toast.title }}</div>\n        }\n        <div class=\"toast-message\" [innerHTML]=\"toast.message\"></div>\n      </div>\n\n      <!-- Close -->\n      <button class=\"toast-close\" (click)=\"close(toast.id)\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" 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\n      <!-- Auto-dismiss progress bar \u2014 hidden when duration <= 0 (persistent toast) -->\n      @if (toast.duration == null || toast.duration > 0) {\n        <div class=\"toast-progress\" [style.animation-duration]=\"(toast.duration ?? 5000) + 'ms'\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:10px}.toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 13px 16px 16px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 8px 28px var(--shadow-lg),0 2px 8px var(--shadow);pointer-events:auto;min-width:300px;max-width:420px;overflow:hidden;animation:toast-in .35s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translate(36px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}.toast-info:before{background:var(--info-color)}.toast-success:before{background:var(--success-color)}.toast-warning:before{background:var(--warning-color)}.toast-error:before{background:var(--error-color)}.toast-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-left:2px}.toast-info .toast-icon{color:var(--info-color);background:var(--info-bg)}.toast-success .toast-icon{color:var(--success-color);background:var(--success-bg)}.toast-warning .toast-icon{color:var(--warning-color);background:var(--warning-bg)}.toast-error .toast-icon{color:var(--error-color);background:var(--error-bg)}.toast-content{flex:1;min-width:0;padding-top:1px}.toast-title{font-weight:700;font-size:13.5px;margin-bottom:3px;line-height:1.3}.toast-info .toast-title{color:var(--info-color)}.toast-success .toast-title{color:var(--success-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-error .toast-title{color:var(--error-color)}.toast-message{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}.toast-message h3{margin:0 0 4px;font-size:13.5px;color:inherit}.toast-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:color .15s,background-color .15s}.toast-close:hover{color:var(--text-primary);background:var(--border-color)}.toast-progress{position:absolute;bottom:0;left:4px;right:0;height:3px;border-radius:0 0 12px;animation:toast-progress linear forwards;opacity:.7}.toast-info .toast-progress{background:var(--info-color)}.toast-success .toast-progress{background:var(--success-color)}.toast-warning .toast-progress{background:var(--warning-color)}.toast-error .toast-progress{background:var(--error-color)}@keyframes toast-progress{0%{width:calc(100% - 4px)}to{width:0}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ToastContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ma-toast-container', imports: [], template: "<div class=\"toast-container\">\n  @for (toast of toasts(); track toast.id) {\n    <div class=\"toast toast-{{ toast.type }}\">\n\n      <!-- Type icon -->\n      <div class=\"toast-icon\">\n        @if (toast.type === 'info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n        }\n        @if (toast.type === 'success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n          </svg>\n        }\n        @if (toast.type === 'warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n          </svg>\n        }\n        @if (toast.type === 'error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n          </svg>\n        }\n      </div>\n\n      <!-- Content -->\n      <div class=\"toast-content\">\n        @if (toast.title) {\n          <div class=\"toast-title\">{{ toast.title }}</div>\n        }\n        <div class=\"toast-message\" [innerHTML]=\"toast.message\"></div>\n      </div>\n\n      <!-- Close -->\n      <button class=\"toast-close\" (click)=\"close(toast.id)\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" 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\n      <!-- Auto-dismiss progress bar \u2014 hidden when duration <= 0 (persistent toast) -->\n      @if (toast.duration == null || toast.duration > 0) {\n        <div class=\"toast-progress\" [style.animation-duration]=\"(toast.duration ?? 5000) + 'ms'\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:10px}.toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 13px 16px 16px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 8px 28px var(--shadow-lg),0 2px 8px var(--shadow);pointer-events:auto;min-width:300px;max-width:420px;overflow:hidden;animation:toast-in .35s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translate(36px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}.toast-info:before{background:var(--info-color)}.toast-success:before{background:var(--success-color)}.toast-warning:before{background:var(--warning-color)}.toast-error:before{background:var(--error-color)}.toast-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-left:2px}.toast-info .toast-icon{color:var(--info-color);background:var(--info-bg)}.toast-success .toast-icon{color:var(--success-color);background:var(--success-bg)}.toast-warning .toast-icon{color:var(--warning-color);background:var(--warning-bg)}.toast-error .toast-icon{color:var(--error-color);background:var(--error-bg)}.toast-content{flex:1;min-width:0;padding-top:1px}.toast-title{font-weight:700;font-size:13.5px;margin-bottom:3px;line-height:1.3}.toast-info .toast-title{color:var(--info-color)}.toast-success .toast-title{color:var(--success-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-error .toast-title{color:var(--error-color)}.toast-message{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}.toast-message h3{margin:0 0 4px;font-size:13.5px;color:inherit}.toast-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:color .15s,background-color .15s}.toast-close:hover{color:var(--text-primary);background:var(--border-color)}.toast-progress{position:absolute;bottom:0;left:4px;right:0;height:3px;border-radius:0 0 12px;animation:toast-progress linear forwards;opacity:.7}.toast-info .toast-progress{background:var(--info-color)}.toast-success .toast-progress{background:var(--success-color)}.toast-warning .toast-progress{background:var(--warning-color)}.toast-error .toast-progress{background:var(--error-color)}@keyframes toast-progress{0%{width:calc(100% - 4px)}to{width:0}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] }]
-        }], propDecorators: { themeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class NotificationPanelComponent {
-    notificationRead = output();
-    get themeClass() {
-        return `theme-${this.themeService.currentTheme()}`;
-    }
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    activeTab = signal('unread', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []));
-    selectedNotification = signal(null, ...(ngDevMode ? [{ debugName: "selectedNotification" }] : /* istanbul ignore next */ []));
-    selectedNotificationHtml = signal(null, ...(ngDevMode ? [{ debugName: "selectedNotificationHtml" }] : /* istanbul ignore next */ []));
-    selectedNotificationDate = signal('', ...(ngDevMode ? [{ debugName: "selectedNotificationDate" }] : /* istanbul ignore next */ []));
-    // Stable time-ago strings keyed by notification id - refreshed every 30s via signal
-    dateLabels = signal(new Map(), ...(ngDevMode ? [{ debugName: "dateLabels" }] : /* istanbul ignore next */ []));
-    unreadNotifications = computed(() => this.notifications().filter(n => !n.isRead), ...(ngDevMode ? [{ debugName: "unreadNotifications" }] : /* istanbul ignore next */ []));
-    readNotifications = computed(() => this.notifications().filter(n => n.isRead), ...(ngDevMode ? [{ debugName: "readNotifications" }] : /* istanbul ignore next */ []));
-    currentNotifications = computed(() => this.activeTab() === 'unread' ? this.unreadNotifications() : this.readNotifications(), ...(ngDevMode ? [{ debugName: "currentNotifications" }] : /* istanbul ignore next */ []));
-    dateTimer = null;
-    // Normalize type to string - API may return integer or string
-    // Backend enum: Info=0, Success=1, Warning=2, Error=3
-    typeOf(notification) {
-        const t = notification.type;
-        if (t === 0 || t === 'Info')
-            return 'Info';
-        if (t === 1 || t === 'Success')
-            return 'Success';
-        if (t === 2 || t === 'Warning')
-            return 'Warning';
-        if (t === 3 || t === 'Error')
-            return 'Error';
-        return 'Info';
-    }
-    toastType(type) {
-        const t = this.typeOf({ type });
-        return t.toLowerCase();
+/**
+ * Resolves the full set of client tools available to the AI: built-ins + consumer-registered.
+ * Handlers are invoked through `runTool(name, args)` which automatically threads the Injector
+ * so consumer handlers can use inject() patterns.
+ */
+class MaAiToolsRegistry {
+    config = inject(MES_AUTH_AI_CONFIG, { optional: true }) ?? DEFAULT_AI_CONFIG;
+    injector = inject(Injector);
+    /** Built-in client tools shipped by the library. */
+    builtIn = [
+        {
+            name: 'navigate',
+            description: 'Navigate the user to a path within the application. Use relative paths starting with /.',
+            parameters: {
+                type: 'object',
+                properties: {
+                    path: { type: 'string', description: 'Path to navigate to, e.g. "/auth/users"' }
+                },
+                required: ['path']
+            },
+            readOnly: true,
+            handler: (args) => {
+                const router = this.injector.get(Router, null);
+                if (!router)
+                    return 'Router is not available in this app.';
+                router.navigateByUrl(args.path);
+                return `Navigated to ${args.path}`;
+            }
+        },
+        {
+            name: 'toggle_theme',
+            description: 'Toggle between light and dark theme.',
+            parameters: { type: 'object', properties: {} },
+            readOnly: true,
+            handler: () => {
+                const theme = this.injector.get(ThemeService);
+                const next = theme.currentTheme() === 'light' ? 'dark' : 'light';
+                theme.setFixTheme(next);
+                return `Theme switched to ${next}.`;
+            }
+        },
+        {
+            name: 'show_toast',
+            description: 'Show a small toast notification at the top of the screen.',
+            parameters: {
+                type: 'object',
+                properties: {
+                    message: { type: 'string', description: 'Toast body text' },
+                    title: { type: 'string', description: 'Optional title' },
+                    severity: { type: 'string', enum: ['info', 'success', 'warning', 'error'], description: 'Toast severity' }
+                },
+                required: ['message']
+            },
+            readOnly: true,
+            handler: (args) => {
+                const toast = this.injector.get(ToastService);
+                toast.show(args.message, args.title, args.severity ?? 'info');
+                return 'Toast shown.';
+            }
+        },
+        {
+            name: 'who_am_i_client',
+            description: 'Get the currently signed-in user as seen by the browser (id, name, roles loaded so far).',
+            parameters: { type: 'object', properties: {} },
+            readOnly: true,
+            handler: () => {
+                const auth = this.injector.get(MesAuthService);
+                const u = auth.currentUser;
+                if (!u)
+                    return 'No user signed in.';
+                return JSON.stringify({
+                    id: u.userId ?? u.id,
+                    userName: u.userName,
+                    fullName: u.fullName,
+                    department: u.department,
+                    position: u.position,
+                    email: u.email
+                });
+            }
+        },
+        {
+            name: 'reload_page',
+            description: 'Reload the current browser page. Use as a last resort if state seems stuck.',
+            parameters: { type: 'object', properties: {} },
+            readOnly: false,
+            handler: () => {
+                window.location.reload();
+                return 'Reloading page…';
+            }
+        }
+    ];
+    /** All tools, deduplicated by name (consumer wins on conflict). */
+    list() {
+        const fromConfig = this.config.tools ?? [];
+        const byName = new Map();
+        for (const t of this.builtIn)
+            byName.set(t.name, t);
+        for (const t of fromConfig)
+            byName.set(t.name, t);
+        return Array.from(byName.values());
     }
-    sanitizer = inject(DomSanitizer);
-    authService = inject(MesAuthService);
-    toastService = inject(ToastService);
-    themeService = inject(ThemeService);
-    host = inject(ElementRef);
-    constructor() {
-        this.loadNotifications();
-        // Refresh time-ago labels every 30s - signal mutation triggers CD in zoneless
-        this.dateTimer = setInterval(() => this.refreshDateLabels(), 30000);
-        const latestNotification = toSignal(this.authService.notifications$);
-        effect(() => {
-            const notification = latestNotification();
-            if (!notification)
-                return;
-            this.toastService.show(notification.message || '', notification.title, this.toastType(notification.type), 5000);
-            this.loadNotifications();
-        });
-        // Close when the user clicks outside the panel - matches ma-approval-panel UX.
-        effect((onCleanup) => {
-            if (!this.isOpen())
-                return;
-            const onDocClick = (ev) => {
-                const panel = this.host.nativeElement.querySelector('.notification-panel');
-                if (panel && !panel.contains(ev.target))
-                    this.close();
-            };
-            // Defer to skip the same click that opened the panel.
-            const tid = setTimeout(() => document.addEventListener('mousedown', onDocClick), 0);
-            onCleanup(() => {
-                clearTimeout(tid);
-                document.removeEventListener('mousedown', onDocClick);
-            });
-        });
+    resolve(name) {
+        return this.list().find(t => t.name === name);
     }
-    ngOnDestroy() {
-        if (this.dateTimer !== null) {
-            clearInterval(this.dateTimer);
-            this.dateTimer = null;
+    /** Run a registered client tool and serialize its result for posting back to the agent loop. */
+    async runTool(name, args) {
+        const tool = this.resolve(name);
+        if (!tool)
+            return { ok: false, result: `Unknown client tool: ${name}` };
+        try {
+            const raw = await Promise.resolve(tool.handler(args ?? {}));
+            const result = typeof raw === 'string' ? raw : JSON.stringify(raw ?? null);
+            return { ok: true, result };
+        }
+        catch (err) {
+            return { ok: false, result: err?.message ?? String(err) };
         }
     }
-    loadNotifications() {
-        this.authService.getNotifications(1, 50, true).subscribe({
-            next: (response) => {
-                this.notifications.set(response.items || []);
-                this.refreshDateLabels();
-            },
-            error: () => { }
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Drives the chat panel.
+ *
+ * Uses `fetch` + `ReadableStream` (not `EventSource`, which can't POST a body) to talk to
+ * `/ai/chat` SSE. State lives in signals so the panel can re-render reactively.
+ */
+class MaAiService {
+    auth = inject(MesAuthService);
+    aiConfig = inject(MES_AUTH_AI_CONFIG, { optional: true }) ?? DEFAULT_AI_CONFIG;
+    tools = inject(MaAiToolsRegistry);
+    messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    lastError = signal(null, ...(ngDevMode ? [{ debugName: "lastError" }] : /* istanbul ignore next */ []));
+    sessionId = null;
+    /** Verbs the user already chose "always approve" for in this session. */
+    alwaysApproved = new Set();
+    abortController = null;
+    /** ID of the current assistant bubble we're streaming tokens into. */
+    currentAssistantId = null;
+    get enabled() {
+        return this.aiConfig.enabled !== false;
     }
-    open() {
-        this.isOpen.set(true);
-        this.activeTab.set('unread');
+    /** Start a brand-new conversation. */
+    resetSession() {
+        this.cancel();
+        this.sessionId = null;
+        this.messages.set([]);
+        this.pendingApproval.set(null);
+        this.lastError.set(null);
+        this.alwaysApproved.clear();
     }
-    close() {
-        this.isOpen.set(false);
+    /** Cancel the in-flight stream (if any). The session id is preserved so the user can resume. */
+    cancel() {
+        if (this.abortController) {
+            this.abortController.abort();
+            this.abortController = null;
+        }
+        this.streaming.set(false);
+        this.currentAssistantId = null;
+        // If a client-tool call was awaiting the user, clearing it lets them start over.
+        this.pendingApproval.set(null);
     }
-    switchTab(tab) {
-        this.activeTab.set(tab);
+    /** User typed and submitted a message. */
+    async send(text, currentRoute) {
+        if (!text.trim())
+            return;
+        this.lastError.set(null);
+        this.appendBubble({ id: this.uid(), role: 'user', text });
+        await this.runStream({ message: text }, currentRoute);
     }
-    openDetails(notification) {
-        this.selectedNotification.set(notification);
-        const html = notification.messageHtml || notification.message || '';
-        this.selectedNotificationHtml.set(this.sanitizer.bypassSecurityTrustHtml(html));
-        this.selectedNotificationDate.set(this.formatDate(notification.createdAt));
-        if (!notification.isRead) {
-            this.authService.markAsRead(notification.id).subscribe({
-                next: () => {
-                    this.notifications.update(notifs => notifs.map(n => n.id === notification.id ? { ...n, isRead: true } : n));
-                    this.notificationRead.emit();
-                },
-                error: () => { }
-            });
+    /**
+     * Approve (or decline) a pending client tool call. If approved (and alwaysApprove),
+     * remember the verb so we skip the prompt next time in this session.
+     */
+    async resolvePendingApproval(decision) {
+        const pending = this.pendingApproval();
+        if (!pending)
+            return;
+        this.pendingApproval.set(null);
+        if (decision === 'decline') {
+            await this.continueWithToolResult(pending.callId, false, 'User declined this tool call.');
+            this.markToolStatus(pending.callId, 'declined');
+            return;
+        }
+        if (decision === 'always') {
+            this.alwaysApproved.add(this.verbOf(pending.name));
         }
+        await this.executeClientTool(pending.callId, pending.name, pending.args);
     }
-    closeDetails() {
-        this.selectedNotification.set(null);
-        this.selectedNotificationHtml.set(null);
-        this.selectedNotificationDate.set('');
-    }
-    openUrl() {
-        const url = this.selectedNotification()?.url?.trim();
-        if (url) {
-            window.open(url, '_blank', 'noopener,noreferrer');
+    // ── private ────────────────────────────────────────────────────────────────
+    async runStream(payload, currentRoute) {
+        if (!this.enabled) {
+            this.lastError.set('AI assistant is disabled.');
+            return;
+        }
+        const config = this.auth.getConfig();
+        const base = config?.apiBaseUrl?.replace(/\/$/, '') ?? '';
+        if (!base) {
+            this.lastError.set('MesAuth is not configured.');
+            return;
+        }
+        // Start a fresh assistant bubble that we stream tokens into.
+        const assistantId = this.uid();
+        this.currentAssistantId = assistantId;
+        this.appendBubble({ id: assistantId, role: 'assistant', text: '', pending: true, toolEvents: [] });
+        this.streaming.set(true);
+        this.abortController = new AbortController();
+        try {
+            const res = await fetch(`${base}/ai/chat`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
+                credentials: config?.withCredentials !== false ? 'include' : 'same-origin',
+                body: JSON.stringify({
+                    sessionId: this.sessionId,
+                    message: payload.message,
+                    toolResult: payload.toolResult,
+                    clientTools: this.tools.list().map(t => ({
+                        name: t.name,
+                        description: t.description,
+                        parameters: t.parameters,
+                        readOnly: t.readOnly === true
+                    })),
+                    context: { currentRoute, appName: this.aiConfig.appName }
+                }),
+                signal: this.abortController.signal
+            });
+            if (!res.ok || !res.body) {
+                const detail = await res.text().catch(() => '');
+                throw new Error(`AI request failed (${res.status}). ${detail}`);
+            }
+            await this.readSse(res.body);
+        }
+        catch (err) {
+            if (err?.name === 'AbortError') {
+                // user cancelled
+            }
+            else {
+                this.lastError.set(err?.message ?? String(err));
+                this.finalizeAssistant(`[error: ${err?.message ?? err}]`);
+            }
+        }
+        finally {
+            this.streaming.set(false);
+            this.abortController = null;
         }
     }
-    markAsRead(notificationId, event) {
-        if (event)
-            event.stopPropagation();
-        this.authService.markAsRead(notificationId).subscribe({
-            next: () => {
-                this.notifications.update(notifs => notifs.map(n => n.id === notificationId ? { ...n, isRead: true } : n));
-                this.notificationRead.emit();
-            },
-            error: () => { }
-        });
-    }
-    markAllAsRead() {
-        this.authService.markAllAsRead().subscribe({
-            next: () => {
-                this.notifications.update(notifs => notifs.map(n => ({ ...n, isRead: true })));
-                this.notificationRead.emit();
-            },
-            error: () => { }
-        });
-    }
-    deleteAllRead() {
-        const readIds = this.notifications().filter(n => n.isRead).map(n => n.id);
-        const deletePromises = readIds.map(id => firstValueFrom(this.authService.deleteNotification(id)));
-        Promise.all(deletePromises).then(() => {
-            this.notifications.update(notifs => notifs.filter(n => !n.isRead));
-        }).catch(() => {
-            this.loadNotifications();
-        });
+    async readSse(body) {
+        const reader = body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        while (true) {
+            const { value, done } = await reader.read();
+            if (done)
+                break;
+            buffer += decoder.decode(value, { stream: true });
+            // SSE events are separated by a blank line.
+            let idx;
+            while ((idx = buffer.indexOf('\n\n')) !== -1) {
+                const rawEvent = buffer.slice(0, idx);
+                buffer = buffer.slice(idx + 2);
+                const dataLine = rawEvent.split('\n').find(l => l.startsWith('data:'));
+                if (!dataLine)
+                    continue;
+                const json = dataLine.slice(5).trim();
+                if (!json)
+                    continue;
+                let ev;
+                try {
+                    ev = JSON.parse(json);
+                }
+                catch {
+                    continue;
+                }
+                await this.handleEvent(ev);
+            }
+        }
     }
-    deleteAllUnread() {
-        const unreadIds = this.notifications().filter(n => !n.isRead).map(n => n.id);
-        const deletePromises = unreadIds.map(id => firstValueFrom(this.authService.deleteNotification(id)));
-        Promise.all(deletePromises).then(() => {
-            this.notifications.update(notifs => notifs.filter(n => n.isRead));
-            this.notificationRead.emit();
-        }).catch(() => {
-            this.loadNotifications();
-        });
+    async handleEvent(ev) {
+        switch (ev.type) {
+            case 'session':
+                this.sessionId = ev.sessionId;
+                break;
+            case 'token':
+                this.appendToken(ev.text);
+                break;
+            case 'tool_call_started':
+                this.appendToolEvent({
+                    id: ev.id,
+                    name: ev.name,
+                    side: ev.side,
+                    status: 'running',
+                    args: ev.args,
+                    readOnly: ev.readOnly
+                });
+                break;
+            case 'tool_call_completed':
+                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);
+                }
+                else {
+                    this.pendingApproval.set({ callId: ev.id, name: ev.name, args: ev.args, side: 'client' });
+                }
+                break;
+            case 'error':
+                this.lastError.set(ev.message);
+                this.finalizeAssistant(`[error: ${ev.message}]`);
+                break;
+            case 'done':
+                this.finalizeAssistant();
+                break;
+        }
     }
-    delete(notificationId, event) {
-        event.stopPropagation();
-        const wasUnread = this.notifications().some(n => n.id === notificationId && !n.isRead);
-        this.authService.deleteNotification(notificationId).subscribe({
-            next: () => {
-                this.notifications.update(notifs => notifs.filter(n => n.id !== notificationId));
-                if (wasUnread)
-                    this.notificationRead.emit();
-            },
-            error: () => { }
-        });
+    async executeClientTool(callId, name, args) {
+        this.markToolStatus(callId, 'running');
+        const { ok, result } = await this.tools.runTool(name, args);
+        this.markToolStatus(callId, ok ? 'ok' : 'error', this.summarize(result));
+        await this.continueWithToolResult(callId, ok, result);
     }
-    formatDate(dateString) {
-        return this.computeTimeAgo(dateString, new Date());
+    async continueWithToolResult(callId, ok, result) {
+        // Open a new SSE stream that delivers the tool result.
+        await this.runStream({ toolResult: { callId, ok, result } });
     }
-    // Pure computation - takes now as param so it never calls new Date() internally
-    computeTimeAgo(dateString, now) {
-        const normalizedDateString = this.parseUtcDate(dateString);
-        const date = new Date(normalizedDateString);
-        if (isNaN(date.getTime()))
-            return 'Invalid date';
-        const diffMs = now.getTime() - date.getTime();
-        const diffMins = Math.floor(diffMs / 60000);
-        const diffHours = Math.floor(diffMs / 3600000);
-        const diffDays = Math.floor(diffMs / 86400000);
-        if (diffMins < 1)
-            return 'Now';
-        if (diffMins < 60)
-            return `${diffMins}m ago`;
-        if (diffHours < 24)
-            return `${diffHours}h ago`;
-        if (diffDays < 7)
-            return `${diffDays}d ago`;
-        return date.toLocaleDateString();
+    // ── bubble helpers ────────────────────────────────────────────────────────
+    appendBubble(b) {
+        this.messages.update(arr => [...arr, b]);
     }
-    // Rebuild dateLabels map and store as a new signal value so CD is triggered
-    refreshDateLabels() {
-        const now = new Date();
-        const newLabels = new Map();
-        for (const n of this.notifications()) {
-            newLabels.set(n.id, this.computeTimeAgo(n.createdAt, now));
+    appendToken(text) {
+        if (!this.currentAssistantId) {
+            const id = this.uid();
+            this.currentAssistantId = id;
+            this.appendBubble({ id, role: 'assistant', text, pending: true, toolEvents: [] });
+            return;
         }
-        this.dateLabels.set(newLabels);
+        const id = this.currentAssistantId;
+        this.messages.update(arr => arr.map(m => m.id === id ? { ...m, text: m.text + text } : m));
     }
-    // Parse date string from server (stored in UTC but without 'Z' suffix or 'T' separator)
-    parseUtcDate(dateStr) {
-        let normalized = dateStr.includes('T') ? dateStr : dateStr.replace(' ', 'T');
-        if (!normalized.endsWith('Z') && !normalized.includes('+') && !normalized.includes('-', 10)) {
-            normalized += 'Z';
+    appendToolEvent(ev) {
+        if (!this.currentAssistantId) {
+            const id = this.uid();
+            this.currentAssistantId = id;
+            this.appendBubble({ id, role: 'assistant', text: '', pending: true, toolEvents: [ev] });
+            return;
         }
-        return normalized;
+        const id = this.currentAssistantId;
+        this.messages.update(arr => arr.map(m => m.id === id
+            ? { ...m, toolEvents: [...(m.toolEvents ?? []), ev] }
+            : m));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", outputs: { notificationRead: "notificationRead" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"notification-panel\" [class.open]=\"isOpen()\">\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\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n        <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n      </svg>\n      <h3>Notifications</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" title=\"Close\" aria-label=\"Close notifications\">\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.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\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'unread'\" (click)=\"switchTab('unread')\">\n      Unread\n      @if (unreadNotifications().length > 0) {\n        <span class=\"tab-badge\">{{ unreadNotifications().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'read'\" (click)=\"switchTab('read')\">\n      Read\n      @if (readNotifications().length > 0) {\n        <span class=\"tab-badge read-badge\">{{ readNotifications().length }}</span>\n      }\n    </button>\n  </div>\n\n  <!-- Notifications List -->\n  <div class=\"notifications-list\">\n    @if (currentNotifications().length > 0) {\n      @for (notification of currentNotifications(); track notification.id) {\n        <div\n          class=\"notification-item\"\n          [class.unread]=\"!notification.isRead\"\n          (click)=\"openDetails(notification)\"\n        >\n          @let t = typeOf(notification);\n          <div class=\"notif-accent\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\"></div>\n          <div class=\"notif-type-icon\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\">\n            @if (t === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (t === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            }\n            @if (t === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n              </svg>\n            }\n            @if (t === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <div class=\"notification-content\">\n            <div class=\"notification-title\">{{ notification.title }}</div>\n            <div class=\"notification-message\">{{ notification.message }}</div>\n            <div class=\"notification-meta\">\n              <span class=\"app-name\">{{ notification.sourceAppName }}</span>\n              <span class=\"time\">{{ dateLabels().get(notification.id) }}</span>\n            </div>\n          </div>\n          @if (!notification.isRead) {\n            <button class=\"icon-btn read-btn\" (click)=\"markAsRead(notification.id, $event)\" title=\"Mark as read\" aria-label=\"Mark as read\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            </button>\n          }\n          @if (notification.isRead) {\n            <button class=\"icon-btn delete-btn\" (click)=\"delete(notification.id, $event)\" title=\"Delete\" aria-label=\"Delete notification\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      <div class=\"empty-state\">\n        <svg class=\"empty-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n        </svg>\n        <p>No {{ activeTab() }} notifications</p>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions -->\n  @if (currentNotifications().length > 0) {\n    <div class=\"panel-footer\">\n      @if (activeTab() === 'unread') {\n        <div class=\"footer-actions\">\n          @if (unreadNotifications().length > 0) {\n            <button class=\"action-btn\" (click)=\"markAllAsRead()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n              Mark all read\n            </button>\n            <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllUnread()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n              Delete all\n            </button>\n          }\n        </div>\n      }\n      @if (activeTab() === 'read' && readNotifications().length > 0) {\n        <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllRead()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n          Delete all\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<!-- Details Modal -->\n@if (selectedNotification()) {\n  <div class=\"modal-overlay\" (click)=\"closeDetails()\">\n    <div class=\"modal-container\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\"\n        [class.modal-type-info]=\"typeOf(selectedNotification()!) === 'Info'\"\n        [class.modal-type-success]=\"typeOf(selectedNotification()!) === 'Success'\"\n        [class.modal-type-warning]=\"typeOf(selectedNotification()!) === 'Warning'\"\n        [class.modal-type-error]=\"typeOf(selectedNotification()!) === 'Error'\">\n        <div class=\"modal-header-left\">\n          <div class=\"modal-type-icon\">\n            @if (typeOf(selectedNotification()!) === 'Info') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Success') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Warning') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Error') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <h3>{{ selectedNotification()!.title }}</h3>\n        </div>\n        <button class=\"close-btn\" (click)=\"closeDetails()\" title=\"Close\" aria-label=\"Close notification detail\">\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.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 class=\"modal-meta\">\n        <span class=\"app-name\">{{ selectedNotification()!.sourceAppName }}</span>\n        <span class=\"time\">{{ selectedNotificationDate() }}</span>\n      </div>\n      <div class=\"modal-body\" [innerHTML]=\"selectedNotificationHtml()\"></div>\n      <div class=\"modal-footer\">\n        @if (selectedNotification()?.url?.trim()) {\n          <button class=\"action-btn see-details-btn\" (click)=\"openUrl()\">See Details</button>\n        }\n        <button class=\"action-btn\" (click)=\"closeDetails()\">Close</button>\n      </div>\n    </div>\n  </div>\n}\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{display:block;position:relative;--primary: #1976d2;--primary-hover: #1565c0;--success: #43a047;--error: #f44336;--error-hover: #d32f2f;--info-color: #2196f3;--info-bg: rgba(33, 150, 243, .1);--success-bg: rgba(67, 160, 71, .1);--warning-color: #f57c00;--warning-bg: rgba(245, 124, 0, .1);--error-bg: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--bg-unread: rgba(25, 118, 210, .06);--border-color: #e0e0e0;--border-light: #eeeeee;--shadow: rgba(0, 0, 0, .15)}.tab-btn:not(.active) .tab-badge{background:var(--error)}.read-badge{background:var(--text-muted)}.notification-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.notification-panel.open{right:var(--ma-ai-panel-width, 0px)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--bg-primary);transition:background-color .15s;position:relative}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-unread)}.notif-accent{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:0 2px 2px 0;opacity:.3}.notification-item.unread .notif-accent{opacity:1}.notif-accent.type-info{background:var(--info-color)}.notif-accent.type-success{background:var(--success)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error)}.notif-type-icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:10px}.notif-type-icon.type-info{color:var(--info-color);background:var(--info-bg)}.notif-type-icon.type-success{color:var(--success);background:var(--success-bg)}.notif-type-icon.type-warning{color:var(--warning-color);background:var(--warning-bg)}.notif-type-icon.type-error{color:var(--error);background:var(--error-bg)}.notification-content{flex:1;min-width:0;padding:12px 8px 12px 12px}.notification-title{font-weight:600;color:var(--text-primary);font-size:13.5px;margin-bottom:3px;line-height:1.35}.notification-message{color:var(--text-secondary);font-size:12px;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.app-name{font-weight:600;color:var(--primary)}.icon-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-right:8px;transition:color .15s,background-color .15s;color:var(--text-muted)}.read-btn:hover{color:var(--success);background:#43a0471a}.delete-btn:hover{color:var(--error);background:#f443361a}.panel-footer{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;transition:background-color .18s,transform .12s}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.delete-all-btn{background:var(--error)}.delete-all-btn:hover{background:var(--error-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1060;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container{background:var(--bg-primary);border-radius:14px;width:92%;max-width:860px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000040;animation:modal-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px 14px 0 0;border-top:3px solid transparent}.modal-header.modal-type-info{border-top-color:var(--info-color)}.modal-header.modal-type-success{border-top-color:var(--success)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error)}.modal-header-left{display:flex;align-items:center;gap:10px;min-width:0}.modal-type-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.modal-type-info .modal-type-icon{color:var(--info-color);background:var(--info-bg)}.modal-type-success .modal-type-icon{color:var(--success);background:var(--success-bg)}.modal-type-warning .modal-type-icon{color:var(--warning-color);background:var(--warning-bg)}.modal-type-error .modal-type-icon{color:var(--error);background:var(--error-bg)}.modal-header h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{display:flex;justify-content:space-between;padding:8px 20px;font-size:11.5px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.modal-body{padding:20px;overflow-y:auto;flex:1;color:var(--text-primary);font-size:14px;line-height:1.65}.modal-footer{padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 14px 14px;display:flex;justify-content:flex-end;gap:8px}.modal-footer .action-btn{width:auto;padding:8px 24px}.modal-footer .see-details-btn{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-color)}.modal-footer .see-details-btn:hover{opacity:.85}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NotificationPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ma-notification-panel', imports: [], template: "<div class=\"notification-panel\" [class.open]=\"isOpen()\">\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\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n        <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n      </svg>\n      <h3>Notifications</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" title=\"Close\" aria-label=\"Close notifications\">\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.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\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'unread'\" (click)=\"switchTab('unread')\">\n      Unread\n      @if (unreadNotifications().length > 0) {\n        <span class=\"tab-badge\">{{ unreadNotifications().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'read'\" (click)=\"switchTab('read')\">\n      Read\n      @if (readNotifications().length > 0) {\n        <span class=\"tab-badge read-badge\">{{ readNotifications().length }}</span>\n      }\n    </button>\n  </div>\n\n  <!-- Notifications List -->\n  <div class=\"notifications-list\">\n    @if (currentNotifications().length > 0) {\n      @for (notification of currentNotifications(); track notification.id) {\n        <div\n          class=\"notification-item\"\n          [class.unread]=\"!notification.isRead\"\n          (click)=\"openDetails(notification)\"\n        >\n          @let t = typeOf(notification);\n          <div class=\"notif-accent\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\"></div>\n          <div class=\"notif-type-icon\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\">\n            @if (t === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (t === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            }\n            @if (t === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n              </svg>\n            }\n            @if (t === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <div class=\"notification-content\">\n            <div class=\"notification-title\">{{ notification.title }}</div>\n            <div class=\"notification-message\">{{ notification.message }}</div>\n            <div class=\"notification-meta\">\n              <span class=\"app-name\">{{ notification.sourceAppName }}</span>\n              <span class=\"time\">{{ dateLabels().get(notification.id) }}</span>\n            </div>\n          </div>\n          @if (!notification.isRead) {\n            <button class=\"icon-btn read-btn\" (click)=\"markAsRead(notification.id, $event)\" title=\"Mark as read\" aria-label=\"Mark as read\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            </button>\n          }\n          @if (notification.isRead) {\n            <button class=\"icon-btn delete-btn\" (click)=\"delete(notification.id, $event)\" title=\"Delete\" aria-label=\"Delete notification\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      <div class=\"empty-state\">\n        <svg class=\"empty-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n        </svg>\n        <p>No {{ activeTab() }} notifications</p>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions -->\n  @if (currentNotifications().length > 0) {\n    <div class=\"panel-footer\">\n      @if (activeTab() === 'unread') {\n        <div class=\"footer-actions\">\n          @if (unreadNotifications().length > 0) {\n            <button class=\"action-btn\" (click)=\"markAllAsRead()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n              Mark all read\n            </button>\n            <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllUnread()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n              Delete all\n            </button>\n          }\n        </div>\n      }\n      @if (activeTab() === 'read' && readNotifications().length > 0) {\n        <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllRead()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n          Delete all\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<!-- Details Modal -->\n@if (selectedNotification()) {\n  <div class=\"modal-overlay\" (click)=\"closeDetails()\">\n    <div class=\"modal-container\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\"\n        [class.modal-type-info]=\"typeOf(selectedNotification()!) === 'Info'\"\n        [class.modal-type-success]=\"typeOf(selectedNotification()!) === 'Success'\"\n        [class.modal-type-warning]=\"typeOf(selectedNotification()!) === 'Warning'\"\n        [class.modal-type-error]=\"typeOf(selectedNotification()!) === 'Error'\">\n        <div class=\"modal-header-left\">\n          <div class=\"modal-type-icon\">\n            @if (typeOf(selectedNotification()!) === 'Info') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Success') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Warning') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Error') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <h3>{{ selectedNotification()!.title }}</h3>\n        </div>\n        <button class=\"close-btn\" (click)=\"closeDetails()\" title=\"Close\" aria-label=\"Close notification detail\">\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.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 class=\"modal-meta\">\n        <span class=\"app-name\">{{ selectedNotification()!.sourceAppName }}</span>\n        <span class=\"time\">{{ selectedNotificationDate() }}</span>\n      </div>\n      <div class=\"modal-body\" [innerHTML]=\"selectedNotificationHtml()\"></div>\n      <div class=\"modal-footer\">\n        @if (selectedNotification()?.url?.trim()) {\n          <button class=\"action-btn see-details-btn\" (click)=\"openUrl()\">See Details</button>\n        }\n        <button class=\"action-btn\" (click)=\"closeDetails()\">Close</button>\n      </div>\n    </div>\n  </div>\n}\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{display:block;position:relative;--primary: #1976d2;--primary-hover: #1565c0;--success: #43a047;--error: #f44336;--error-hover: #d32f2f;--info-color: #2196f3;--info-bg: rgba(33, 150, 243, .1);--success-bg: rgba(67, 160, 71, .1);--warning-color: #f57c00;--warning-bg: rgba(245, 124, 0, .1);--error-bg: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--bg-unread: rgba(25, 118, 210, .06);--border-color: #e0e0e0;--border-light: #eeeeee;--shadow: rgba(0, 0, 0, .15)}.tab-btn:not(.active) .tab-badge{background:var(--error)}.read-badge{background:var(--text-muted)}.notification-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.notification-panel.open{right:var(--ma-ai-panel-width, 0px)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--bg-primary);transition:background-color .15s;position:relative}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-unread)}.notif-accent{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:0 2px 2px 0;opacity:.3}.notification-item.unread .notif-accent{opacity:1}.notif-accent.type-info{background:var(--info-color)}.notif-accent.type-success{background:var(--success)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error)}.notif-type-icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:10px}.notif-type-icon.type-info{color:var(--info-color);background:var(--info-bg)}.notif-type-icon.type-success{color:var(--success);background:var(--success-bg)}.notif-type-icon.type-warning{color:var(--warning-color);background:var(--warning-bg)}.notif-type-icon.type-error{color:var(--error);background:var(--error-bg)}.notification-content{flex:1;min-width:0;padding:12px 8px 12px 12px}.notification-title{font-weight:600;color:var(--text-primary);font-size:13.5px;margin-bottom:3px;line-height:1.35}.notification-message{color:var(--text-secondary);font-size:12px;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.app-name{font-weight:600;color:var(--primary)}.icon-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-right:8px;transition:color .15s,background-color .15s;color:var(--text-muted)}.read-btn:hover{color:var(--success);background:#43a0471a}.delete-btn:hover{color:var(--error);background:#f443361a}.panel-footer{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;transition:background-color .18s,transform .12s}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.delete-all-btn{background:var(--error)}.delete-all-btn:hover{background:var(--error-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1060;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container{background:var(--bg-primary);border-radius:14px;width:92%;max-width:860px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000040;animation:modal-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px 14px 0 0;border-top:3px solid transparent}.modal-header.modal-type-info{border-top-color:var(--info-color)}.modal-header.modal-type-success{border-top-color:var(--success)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error)}.modal-header-left{display:flex;align-items:center;gap:10px;min-width:0}.modal-type-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.modal-type-info .modal-type-icon{color:var(--info-color);background:var(--info-bg)}.modal-type-success .modal-type-icon{color:var(--success);background:var(--success-bg)}.modal-type-warning .modal-type-icon{color:var(--warning-color);background:var(--warning-bg)}.modal-type-error .modal-type-icon{color:var(--error);background:var(--error-bg)}.modal-header h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{display:flex;justify-content:space-between;padding:8px 20px;font-size:11.5px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.modal-body{padding:20px;overflow-y:auto;flex:1;color:var(--text-primary);font-size:14px;line-height:1.65}.modal-footer{padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 14px 14px;display:flex;justify-content:flex-end;gap:8px}.modal-footer .action-btn{width:auto;padding:8px 24px}.modal-footer .see-details-btn{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-color)}.modal-footer .see-details-btn:hover{opacity:.85}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { notificationRead: [{ type: i0.Output, args: ["notificationRead"] }], themeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MaApprovalService {
-    apiBase = '';
-    http;
-    config = null;
-    constructor() { }
-    init(config, httpClient) {
-        this.config = config;
-        this.http = httpClient;
-        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
-    }
-    get opts() {
-        return { withCredentials: this.config?.withCredentials ?? true };
-    }
-    // ====================== Dashboard ======================
-    getDashboard() {
-        return this.http.get(`${this.apiBase}/approval/dashboard`, this.opts);
-    }
-    // ====================== Pending & My Requests ======================
-    getPendingApprovals(page = 1, pageSize = 20) {
-        return this.http.get(`${this.apiBase}/approval/pending?page=${page}&pageSize=${pageSize}`, this.opts);
-    }
-    getMyRequests(page = 1, pageSize = 20, status) {
-        let url = `${this.apiBase}/approval/my-requests?page=${page}&pageSize=${pageSize}`;
-        if (status !== undefined)
-            url += `&status=${status}`;
-        return this.http.get(url, this.opts);
+    markToolStatus(callId, status, summary) {
+        this.messages.update(arr => arr.map(m => ({
+            ...m,
+            toolEvents: m.toolEvents?.map(t => t.id === callId ? { ...t, status, summary: summary ?? t.summary } : t)
+        })));
     }
-    // ====================== Document ======================
-    getDocument(id) {
-        return this.http.get(`${this.apiBase}/approval/documents/${id}`, this.opts);
+    finalizeAssistant(extra) {
+        const id = this.currentAssistantId;
+        if (!id)
+            return;
+        this.messages.update(arr => arr.map(m => m.id === id
+            ? { ...m, pending: false, text: extra ? (m.text + (m.text ? '\n' : '') + extra) : m.text }
+            : m));
+        this.currentAssistantId = null;
     }
-    getDocumentHistory(id) {
-        return this.http.get(`${this.apiBase}/approval/documents/${id}/history`, this.opts);
+    verbOf(name) {
+        return name.split('_')[0] ?? name;
     }
-    getDocumentContentUrl(id) {
-        return `${this.apiBase}/approval/documents/${id}/content`;
+    summarize(s) {
+        const flat = s.replace(/\s+/g, ' ').trim();
+        return flat.length <= 80 ? flat : flat.slice(0, 80) + '…';
     }
-    getDocumentThumbnailUrl(id) {
-        return `${this.apiBase}/approval/documents/${id}/thumbnail`;
+    uid() {
+        return Math.random().toString(36).slice(2) + Date.now().toString(36);
     }
-    // ====================== Actions ======================
-    approve(documentId, comment) {
-        const body = { comment };
-        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/approve`, body, this.opts);
+    // ── conversation history (DB-backed via MesAuth.Api) ─────────────────────
+    /** GET /ai/conversations — list this user's past conversations (most recent first). */
+    async listConversations(take = 50) {
+        return this.apiGet(`/ai/conversations?take=${take}`) ?? [];
     }
-    reject(documentId, comment) {
-        const body = { comment };
-        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/reject`, body, this.opts);
+    /** GET /ai/conversations/{id} — fetch and hydrate a past conversation into the panel. */
+    async resumeConversation(id) {
+        const detail = await this.apiGet(`/ai/conversations/${encodeURIComponent(id)}`);
+        if (!detail)
+            return false;
+        this.cancel();
+        this.sessionId = detail.id;
+        this.messages.set(this.hydrateBubbles(detail.messages));
+        this.pendingApproval.set(null);
+        this.lastError.set(null);
+        this.alwaysApproved.clear();
+        return true;
     }
-    delegate(documentId, toUserId, reason) {
-        const body = { toUserId, reason };
-        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/delegate`, body, this.opts);
+    /** DELETE /ai/conversations/{id} */
+    async deleteConversation(id) {
+        return this.apiSend('DELETE', `/ai/conversations/${encodeURIComponent(id)}`);
     }
-    cancel(documentId, reason) {
-        let url = `${this.apiBase}/approval/documents/${documentId}`;
-        if (reason)
-            url += `?reason=${encodeURIComponent(reason)}`;
-        return this.http.delete(url, this.opts);
+    // ── user lessons (system-prompt injections) ──────────────────────────────
+    async listLessons() {
+        return this.apiGet(`/ai/lessons`) ?? [];
     }
-    // ====================== Templates ======================
-    getTemplates(appId) {
-        let url = `${this.apiBase}/approval/templates`;
-        if (appId)
-            url += `?appId=${encodeURIComponent(appId)}`;
-        return this.http.get(url, this.opts);
+    async createLesson(text) {
+        return this.apiSend('POST', `/ai/lessons`, { text });
     }
-    getTemplate(id) {
-        return this.http.get(`${this.apiBase}/approval/templates/${id}`, this.opts);
+    async updateLesson(id, patch) {
+        return this.apiSend('PUT', `/ai/lessons/${encodeURIComponent(id)}`, patch);
     }
-    createTemplate(request) {
-        return this.http.post(`${this.apiBase}/approval/templates`, request, this.opts);
+    async deleteLesson(id) {
+        return this.apiSend('DELETE', `/ai/lessons/${encodeURIComponent(id)}`);
     }
-    updateTemplate(id, request) {
-        return this.http.put(`${this.apiBase}/approval/templates/${id}`, request, this.opts);
+    // ── private HTTP plumbing (mirrors runStream's credentials handling) ─────
+    baseUrl() {
+        const config = this.auth.getConfig();
+        const base = config?.apiBaseUrl?.replace(/\/$/, '') ?? '';
+        return base ? base : null;
     }
-    deleteTemplate(id) {
-        return this.http.delete(`${this.apiBase}/approval/templates/${id}`, this.opts);
+    async apiGet(path) {
+        const base = this.baseUrl();
+        if (!base)
+            return null;
+        const config = this.auth.getConfig();
+        try {
+            const res = await fetch(`${base}${path}`, {
+                method: 'GET',
+                headers: { 'Accept': 'application/json' },
+                credentials: config?.withCredentials !== false ? 'include' : 'same-origin',
+            });
+            if (!res.ok)
+                return null;
+            return await res.json();
+        }
+        catch {
+            return null;
+        }
     }
-    previewRole(orgCode, level) {
-        return this.http.get(`${this.apiBase}/approval/roles/preview?orgCode=${encodeURIComponent(orgCode)}&level=${encodeURIComponent(level)}`, this.opts);
+    async apiSend(method, path, body) {
+        const base = this.baseUrl();
+        if (!base)
+            return method === 'DELETE' ? false : null;
+        const config = this.auth.getConfig();
+        try {
+            const res = await fetch(`${base}${path}`, {
+                method,
+                headers: body !== undefined
+                    ? { 'Accept': 'application/json', 'Content-Type': 'application/json' }
+                    : { 'Accept': 'application/json' },
+                credentials: config?.withCredentials !== false ? 'include' : 'same-origin',
+                body: body !== undefined ? JSON.stringify(body) : undefined,
+            });
+            if (!res.ok)
+                return method === 'DELETE' ? false : null;
+            if (method === 'DELETE')
+                return true;
+            const text = await res.text();
+            return text ? JSON.parse(text) : null;
+        }
+        catch {
+            return method === 'DELETE' ? false : null;
+        }
     }
-    // ====================== Create (used by ma-arv-container) ======================
-    createApproval(request) {
-        return this.http.post(`${this.apiBase}/approval/documents`, request, this.opts);
+    /**
+     * Rebuild ChatBubble[] from a stored transcript. Tool messages don't appear as their
+     * own bubbles — they were emitted as chips on the preceding assistant bubble — but we
+     * reconstruct that linkage best-effort so the resumed view roughly matches what the
+     * user originally saw.
+     */
+    hydrateBubbles(messages) {
+        const bubbles = [];
+        let lastAssistant = null;
+        for (const m of messages) {
+            if (m.role === 'user') {
+                const b = { id: this.uid(), role: 'user', text: m.content ?? '' };
+                bubbles.push(b);
+                lastAssistant = null;
+            }
+            else if (m.role === 'assistant') {
+                const toolEvents = (m.toolCalls ?? []).map(tc => ({
+                    id: tc.id,
+                    name: tc.name,
+                    side: (tc.side === 'client' ? 'client' : 'server'),
+                    status: 'ok',
+                    args: tc.args,
+                }));
+                const b = {
+                    id: this.uid(),
+                    role: 'assistant',
+                    text: m.content ?? '',
+                    toolEvents: toolEvents.length > 0 ? toolEvents : undefined,
+                };
+                bubbles.push(b);
+                lastAssistant = b;
+            }
+            else if (m.role === 'tool' && lastAssistant) {
+                const ev = lastAssistant.toolEvents?.find(e => e.id === (m.toolCallId ?? ''));
+                if (ev) {
+                    ev.status = m.toolIsError ? 'error' : 'ok';
+                    const flat = (m.content ?? '').replace(/\s+/g, ' ').trim();
+                    ev.summary = flat.length <= 80 ? flat : flat.slice(0, 80) + '…';
+                }
+            }
+        }
+        return bubbles;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-// ====================== Enums ======================
-var ApprovalStepMode;
-(function (ApprovalStepMode) {
-    ApprovalStepMode[ApprovalStepMode["Sequential"] = 0] = "Sequential";
-    ApprovalStepMode[ApprovalStepMode["Parallel"] = 1] = "Parallel";
-})(ApprovalStepMode || (ApprovalStepMode = {}));
-var ApprovalDocumentStatus;
-(function (ApprovalDocumentStatus) {
-    ApprovalDocumentStatus[ApprovalDocumentStatus["Draft"] = 0] = "Draft";
-    ApprovalDocumentStatus[ApprovalDocumentStatus["Pending"] = 1] = "Pending";
-    ApprovalDocumentStatus[ApprovalDocumentStatus["Approved"] = 2] = "Approved";
-    ApprovalDocumentStatus[ApprovalDocumentStatus["Rejected"] = 3] = "Rejected";
-    ApprovalDocumentStatus[ApprovalDocumentStatus["Cancelled"] = 4] = "Cancelled";
-    ApprovalDocumentStatus[ApprovalDocumentStatus["Expired"] = 5] = "Expired";
-})(ApprovalDocumentStatus || (ApprovalDocumentStatus = {}));
-var ApprovalStepStatus;
-(function (ApprovalStepStatus) {
-    ApprovalStepStatus[ApprovalStepStatus["Waiting"] = 0] = "Waiting";
-    ApprovalStepStatus[ApprovalStepStatus["Active"] = 1] = "Active";
-    ApprovalStepStatus[ApprovalStepStatus["Approved"] = 2] = "Approved";
-    ApprovalStepStatus[ApprovalStepStatus["Rejected"] = 3] = "Rejected";
-    ApprovalStepStatus[ApprovalStepStatus["Delegated"] = 4] = "Delegated";
-    ApprovalStepStatus[ApprovalStepStatus["Expired"] = 5] = "Expired";
-    ApprovalStepStatus[ApprovalStepStatus["Skipped"] = 6] = "Skipped";
-})(ApprovalStepStatus || (ApprovalStepStatus = {}));
-var ApprovalActionType;
-(function (ApprovalActionType) {
-    ApprovalActionType[ApprovalActionType["Created"] = 0] = "Created";
-    ApprovalActionType[ApprovalActionType["Submitted"] = 1] = "Submitted";
-    ApprovalActionType[ApprovalActionType["Approved"] = 2] = "Approved";
-    ApprovalActionType[ApprovalActionType["Rejected"] = 3] = "Rejected";
-    ApprovalActionType[ApprovalActionType["Delegated"] = 4] = "Delegated";
-    ApprovalActionType[ApprovalActionType["Cancelled"] = 5] = "Cancelled";
-    ApprovalActionType[ApprovalActionType["Commented"] = 6] = "Commented";
-    ApprovalActionType[ApprovalActionType["Expired"] = 7] = "Expired";
-    ApprovalActionType[ApprovalActionType["StepAdvanced"] = 8] = "StepAdvanced";
-})(ApprovalActionType || (ApprovalActionType = {}));
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class MaApprovalPanelComponent {
-    approvalActioned = output();
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+/**
+ * Modal editor for the signed-in user's AI "lessons" — long-lived instructions
+ * injected into the LLM system prompt every turn. Opened from the user profile
+ * dropdown via a dedicated button.
+ *
+ * Library-only styling (no @angular/forms — we use [value] + (input) per
+ * mesauth-angular conventions).
+ */
+class MaAiLessonsEditorComponent {
+    ai = inject(MaAiService);
+    themeService = inject(ThemeService);
+    lessons = signal([], ...(ngDevMode ? [{ debugName: "lessons" }] : /* istanbul ignore next */ []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    activeTab = signal('processing', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-    processingItems = signal([], ...(ngDevMode ? [{ debugName: "processingItems" }] : /* istanbul ignore next */ []));
-    approvedItems = signal([], ...(ngDevMode ? [{ debugName: "approvedItems" }] : /* istanbul ignore next */ []));
-    rejectedItems = signal([], ...(ngDevMode ? [{ debugName: "rejectedItems" }] : /* istanbul ignore next */ []));
-    mesAuth = inject(MesAuthService);
-    http = inject(HttpClient);
-    router = inject(Router);
-    host = inject(ElementRef);
-    approvalSvc = null;
-    constructor() {
-        const config = this.mesAuth.getConfig();
-        if (config) {
-            this.approvalSvc = new MaApprovalService();
-            this.approvalSvc.init(config, this.http);
+    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    cancel = output();
+    // Tracks the latest in-progress text edit per lesson so blur commits the right value.
+    pendingText = new Map();
+    get themeClass() {
+        return `theme-${this.themeService.currentTheme()}`;
+    }
+    async ngOnInit() {
+        this.loading.set(true);
+        try {
+            const list = await this.ai.listLessons();
+            this.lessons.set(list ?? []);
+        }
+        finally {
+            this.loading.set(false);
         }
-        const approvalEvent = toSignal(this.mesAuth.approvalEvents$);
-        effect(() => {
-            approvalEvent(); // track SignalR approval events
-            if (this.isOpen())
-                this.loadCurrentTab();
-        });
-        // Close when the user clicks outside the panel (mirrors the old backdrop UX
-        // now that the backdrop has been removed).
-        effect((onCleanup) => {
-            if (!this.isOpen())
-                return;
-            const onDocClick = (ev) => {
-                const panel = this.host.nativeElement.querySelector('.approval-panel');
-                if (panel && !panel.contains(ev.target))
-                    this.close();
-            };
-            // Defer to skip the same click that opened the panel.
-            const tid = setTimeout(() => document.addEventListener('mousedown', onDocClick), 0);
-            onCleanup(() => {
-                clearTimeout(tid);
-                document.removeEventListener('mousedown', onDocClick);
-            });
-        });
     }
-    open() {
-        this.isOpen.set(true);
-        this.loadAllTabs();
+    onBackdropClick(ev) {
+        if (ev.target === ev.currentTarget)
+            this.cancel.emit();
     }
-    close() {
-        this.isOpen.set(false);
+    onDraftInput(ev) {
+        this.draft.set(ev.target.value);
     }
-    toggle() {
-        if (this.isOpen())
-            this.close();
-        else
-            this.open();
+    async add() {
+        const text = this.draft().trim();
+        if (!text)
+            return;
+        this.saving.set(true);
+        this.error.set(null);
+        try {
+            const created = await this.ai.createLesson(text);
+            if (!created) {
+                this.error.set('Failed to save preference.');
+                return;
+            }
+            this.lessons.update(arr => [created, ...arr]);
+            this.draft.set('');
+        }
+        finally {
+            this.saving.set(false);
+        }
     }
-    switchTab(tab) {
-        this.activeTab.set(tab);
-        this.loadCurrentTab();
+    onTextInput(lesson, ev) {
+        this.pendingText.set(lesson.id, ev.target.value);
     }
-    loadAllTabs() {
-        this.loading.set(true);
-        if (!this.approvalSvc) {
-            this.loading.set(false);
+    async commitText(lesson) {
+        const next = this.pendingText.get(lesson.id);
+        this.pendingText.delete(lesson.id);
+        if (next === undefined)
             return;
-        }
-        let pending = 3;
-        const done = () => { if (--pending === 0)
-            this.loading.set(false); };
-        this.approvalSvc.getPendingApprovals(1, 100).subscribe({
-            next: r => { this.processingItems.set(r.items); done(); },
-            error: () => done()
+        const trimmed = next.trim();
+        if (!trimmed || trimmed === lesson.text)
+            return;
+        const updated = await this.ai.updateLesson(lesson.id, { text: trimmed });
+        if (updated) {
+            this.lessons.update(arr => arr.map(l => l.id === lesson.id ? updated : l));
+        }
+    }
+    async toggle(lesson, ev) {
+        const enabled = ev.target.checked;
+        const updated = await this.ai.updateLesson(lesson.id, { enabled });
+        if (updated) {
+            this.lessons.update(arr => arr.map(l => l.id === lesson.id ? updated : l));
+        }
+    }
+    async remove(lesson) {
+        const ok = await this.ai.deleteLesson(lesson.id);
+        if (ok) {
+            this.lessons.update(arr => arr.filter(l => l.id !== lesson.id));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiLessonsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MaAiLessonsEditorComponent, isStandalone: true, selector: "ma-ai-lessons-editor", outputs: { cancel: "cancel" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+    <div class="lessons-backdrop" (click)="onBackdropClick($event)">
+      <div class="lessons-modal" role="dialog" aria-modal="true" aria-labelledby="lessonsTitle">
+        <div class="lessons-head">
+          <div>
+            <h3 id="lessonsTitle">AI preferences</h3>
+            <p class="lessons-sub">
+              Long-lived instructions the AI will follow in every conversation.
+              Each row is injected as a bullet point into the system prompt.
+            </p>
+          </div>
+          <button class="lessons-close" (click)="cancel.emit()" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+                 fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="lessons-body">
+          @if (loading()) {
+            <div class="lessons-empty">Loading…</div>
+          } @else if (lessons().length === 0) {
+            <div class="lessons-empty">No preferences yet. Add one below or ask the AI to "remember" something.</div>
+          } @else {
+            @for (l of lessons(); track l.id) {
+              <div class="lesson-row" [class.disabled]="!l.enabled">
+                <label class="lesson-toggle" [title]="l.enabled ? 'Disable' : 'Enable'">
+                  <input type="checkbox" [checked]="l.enabled" (change)="toggle(l, $event)" />
+                  <span class="lesson-toggle-slider"></span>
+                </label>
+                <textarea class="lesson-text"
+                          rows="2"
+                          [value]="l.text"
+                          (input)="onTextInput(l, $event)"
+                          (blur)="commitText(l)"></textarea>
+                <span class="lesson-source" [class.llm]="l.source === 'llm'">
+                  {{ l.source === 'llm' ? 'AI' : 'You' }}
+                </span>
+                <button class="lesson-del" (click)="remove(l)" title="Delete" aria-label="Delete">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+                       fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="3 6 5 6 21 6"/>
+                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+                  </svg>
+                </button>
+              </div>
+            }
+          }
+        </div>
+
+        <div class="lessons-add">
+          <textarea class="lesson-text"
+                    rows="2"
+                    placeholder="e.g. Always reply in Vietnamese."
+                    [value]="draft()"
+                    (input)="onDraftInput($event)"></textarea>
+          <button class="lesson-add-btn" (click)="add()" [disabled]="!draft().trim() || saving()">
+            Add
+          </button>
+        </div>
+
+        @if (error()) { <div class="lesson-error">{{ error() }}</div> }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{--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;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}:host(.theme-dark){--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;--border-color: #383850;--shadow: rgba(0,0,0,.4)}.lessons-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1060;padding:20px}.lessons-modal{background:var(--bg-primary);color:var(--text-primary);width:100%;max-width:640px;max-height:86vh;border-radius:12px;box-shadow:0 18px 60px var(--shadow);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-color)}.lessons-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px;border-bottom:1px solid var(--border-color)}.lessons-head h3{margin:0 0 4px;font-size:16px;font-weight:600}.lessons-sub{margin:0;font-size:12.5px;color:var(--text-secondary);line-height:1.5}.lessons-close{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center}.lessons-close:hover{color:var(--text-primary);background:var(--bg-hover)}.lessons-body{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:10px}.lessons-empty{padding:20px 4px;font-size:13px;color:var(--text-muted);text-align:center}.lesson-row{display:grid;grid-template-columns:36px 1fr auto 28px;align-items:center;gap:10px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:10px}.lesson-row.disabled .lesson-text{opacity:.55}.lesson-toggle{position:relative;display:inline-block;width:32px;height:18px;cursor:pointer}.lesson-toggle input{opacity:0;width:0;height:0}.lesson-toggle-slider{position:absolute;inset:0;background:var(--border-color);border-radius:999px;transition:background .15s}.lesson-toggle-slider:before{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .15s}.lesson-toggle input:checked+.lesson-toggle-slider{background:var(--primary)}.lesson-toggle input:checked+.lesson-toggle-slider:before{transform:translate(14px)}.lesson-text{width:100%;resize:vertical;min-height:36px;padding:8px 10px;font-size:13px;line-height:1.5;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;font-family:inherit}.lesson-text:focus{outline:none;border-color:var(--primary)}.lesson-source{font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--bg-hover);color:var(--text-secondary);white-space:nowrap}.lesson-source.llm{background:var(--primary);color:#fff}.lesson-del{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center}.lesson-del:hover{color:var(--error);background:var(--bg-hover)}.lessons-add{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 20px 16px;border-top:1px solid var(--border-color);background:var(--bg-primary)}.lesson-add-btn{background:var(--primary);color:#fff;border:none;border-radius:6px;padding:0 18px;cursor:pointer;font-size:13px;font-weight:600}.lesson-add-btn:hover:not(:disabled){background:var(--primary-strong)}.lesson-add-btn:disabled{opacity:.5;cursor:not-allowed}.lesson-error{padding:8px 20px;font-size:12px;color:var(--error);border-top:1px solid var(--border-color);background:var(--bg-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiLessonsEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-ai-lessons-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="lessons-backdrop" (click)="onBackdropClick($event)">
+      <div class="lessons-modal" role="dialog" aria-modal="true" aria-labelledby="lessonsTitle">
+        <div class="lessons-head">
+          <div>
+            <h3 id="lessonsTitle">AI preferences</h3>
+            <p class="lessons-sub">
+              Long-lived instructions the AI will follow in every conversation.
+              Each row is injected as a bullet point into the system prompt.
+            </p>
+          </div>
+          <button class="lessons-close" (click)="cancel.emit()" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+                 fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <div class="lessons-body">
+          @if (loading()) {
+            <div class="lessons-empty">Loading…</div>
+          } @else if (lessons().length === 0) {
+            <div class="lessons-empty">No preferences yet. Add one below or ask the AI to "remember" something.</div>
+          } @else {
+            @for (l of lessons(); track l.id) {
+              <div class="lesson-row" [class.disabled]="!l.enabled">
+                <label class="lesson-toggle" [title]="l.enabled ? 'Disable' : 'Enable'">
+                  <input type="checkbox" [checked]="l.enabled" (change)="toggle(l, $event)" />
+                  <span class="lesson-toggle-slider"></span>
+                </label>
+                <textarea class="lesson-text"
+                          rows="2"
+                          [value]="l.text"
+                          (input)="onTextInput(l, $event)"
+                          (blur)="commitText(l)"></textarea>
+                <span class="lesson-source" [class.llm]="l.source === 'llm'">
+                  {{ l.source === 'llm' ? 'AI' : 'You' }}
+                </span>
+                <button class="lesson-del" (click)="remove(l)" title="Delete" aria-label="Delete">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+                       fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="3 6 5 6 21 6"/>
+                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+                  </svg>
+                </button>
+              </div>
+            }
+          }
+        </div>
+
+        <div class="lessons-add">
+          <textarea class="lesson-text"
+                    rows="2"
+                    placeholder="e.g. Always reply in Vietnamese."
+                    [value]="draft()"
+                    (input)="onDraftInput($event)"></textarea>
+          <button class="lesson-add-btn" (click)="add()" [disabled]="!draft().trim() || saving()">
+            Add
+          </button>
+        </div>
+
+        @if (error()) { <div class="lesson-error">{{ error() }}</div> }
+      </div>
+    </div>
+  `, styles: [":host{--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;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}:host(.theme-dark){--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;--border-color: #383850;--shadow: rgba(0,0,0,.4)}.lessons-backdrop{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1060;padding:20px}.lessons-modal{background:var(--bg-primary);color:var(--text-primary);width:100%;max-width:640px;max-height:86vh;border-radius:12px;box-shadow:0 18px 60px var(--shadow);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-color)}.lessons-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px;border-bottom:1px solid var(--border-color)}.lessons-head h3{margin:0 0 4px;font-size:16px;font-weight:600}.lessons-sub{margin:0;font-size:12.5px;color:var(--text-secondary);line-height:1.5}.lessons-close{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center}.lessons-close:hover{color:var(--text-primary);background:var(--bg-hover)}.lessons-body{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:10px}.lessons-empty{padding:20px 4px;font-size:13px;color:var(--text-muted);text-align:center}.lesson-row{display:grid;grid-template-columns:36px 1fr auto 28px;align-items:center;gap:10px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:10px}.lesson-row.disabled .lesson-text{opacity:.55}.lesson-toggle{position:relative;display:inline-block;width:32px;height:18px;cursor:pointer}.lesson-toggle input{opacity:0;width:0;height:0}.lesson-toggle-slider{position:absolute;inset:0;background:var(--border-color);border-radius:999px;transition:background .15s}.lesson-toggle-slider:before{content:\"\";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .15s}.lesson-toggle input:checked+.lesson-toggle-slider{background:var(--primary)}.lesson-toggle input:checked+.lesson-toggle-slider:before{transform:translate(14px)}.lesson-text{width:100%;resize:vertical;min-height:36px;padding:8px 10px;font-size:13px;line-height:1.5;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;font-family:inherit}.lesson-text:focus{outline:none;border-color:var(--primary)}.lesson-source{font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--bg-hover);color:var(--text-secondary);white-space:nowrap}.lesson-source.llm{background:var(--primary);color:#fff}.lesson-del{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center}.lesson-del:hover{color:var(--error);background:var(--bg-hover)}.lessons-add{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 20px 16px;border-top:1px solid var(--border-color);background:var(--bg-primary)}.lesson-add-btn{background:var(--primary);color:#fff;border:none;border-radius:6px;padding:0 18px;cursor:pointer;font-size:13px;font-weight:600}.lesson-add-btn:hover:not(:disabled){background:var(--primary-strong)}.lesson-add-btn:disabled{opacity:.5;cursor:not-allowed}.lesson-error{padding:8px 20px;font-size:12px;color:var(--error);border-top:1px solid var(--border-color);background:var(--bg-secondary)}\n"] }]
+        }], propDecorators: { cancel: [{ type: i0.Output, args: ["cancel"] }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UserProfileComponent {
+    inputAvatarShape = input('circle', ...(ngDevMode ? [{ debugName: "inputAvatarShape" }] : /* istanbul ignore next */ []));
+    showBell = input(true, ...(ngDevMode ? [{ debugName: "showBell" }] : /* istanbul ignore next */ []));
+    showApproval = input(true, ...(ngDevMode ? [{ debugName: "showApproval" }] : /* istanbul ignore next */ []));
+    showName = input(false, ...(ngDevMode ? [{ debugName: "showName" }] : /* istanbul ignore next */ []));
+    showAi = input(true, ...(ngDevMode ? [{ debugName: "showAi" }] : /* istanbul ignore next */ []));
+    showSignature = input([false, false], ...(ngDevMode ? [{ debugName: "showSignature" }] : /* istanbul ignore next */ []));
+    signatureHeight = input(40, ...(ngDevMode ? [{ debugName: "signatureHeight" }] : /* istanbul ignore next */ []));
+    notificationClick = output();
+    approvalClick = output();
+    aiClick = output();
+    get themeClass() {
+        return `theme-${this.themeService.currentTheme()}`;
+    }
+    currentUser = signal(null, ...(ngDevMode ? [{ debugName: "currentUser" }] : /* istanbul ignore next */ []));
+    unreadCount = signal(0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []));
+    pendingApprovalCount = signal(0, ...(ngDevMode ? [{ debugName: "pendingApprovalCount" }] : /* istanbul ignore next */ []));
+    dropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
+    avatarRefresh = signal(Date.now(), ...(ngDevMode ? [{ debugName: "avatarRefresh" }] : /* istanbul ignore next */ []));
+    lessonsOpen = signal(false, ...(ngDevMode ? [{ debugName: "lessonsOpen" }] : /* istanbul ignore next */ []));
+    // Avatar style derived from per-user preferences
+    navAvatarSize = computed(() => this.currentUser()?.avatarSize ?? 'md', ...(ngDevMode ? [{ debugName: "navAvatarSize" }] : /* istanbul ignore next */ []));
+    // Dropdown is always one step larger than the nav avatar
+    dropAvatarSize = computed(() => {
+        const s = this.navAvatarSize();
+        return s === 'sm' ? 'md' : s === 'md' ? 'lg' : 'xl';
+    }, ...(ngDevMode ? [{ debugName: "dropAvatarSize" }] : /* istanbul ignore next */ []));
+    avatarShape = computed(() => this.currentUser()?.avatarShape ?? this.inputAvatarShape(), ...(ngDevMode ? [{ debugName: "avatarShape" }] : /* istanbul ignore next */ []));
+    avatarFrame = computed(() => this.currentUser()?.avatarFrame ?? null, ...(ngDevMode ? [{ debugName: "avatarFrame" }] : /* istanbul ignore next */ []));
+    avatarRatio = computed(() => this.currentUser()?.avatarRatio ?? 'ar-11', ...(ngDevMode ? [{ debugName: "avatarRatio" }] : /* istanbul ignore next */ []));
+    givenStyle = computed(() => this.currentUser()?.givenColor || 'indigo', ...(ngDevMode ? [{ debugName: "givenStyle" }] : /* istanbul ignore next */ []));
+    signatureBroken = signal(false, ...(ngDevMode ? [{ debugName: "signatureBroken" }] : /* istanbul ignore next */ []));
+    signatureUrl = computed(() => {
+        if (!this.showSignature().some(s => s) || this.signatureBroken())
+            return null;
+        const baseRaw = this.authService.getConfig()?.apiBaseUrl ?? '';
+        const base = baseRaw.replace(/\/$/, '');
+        const u = this.currentUser();
+        const id = u?.userId ?? u?.id;
+        if (!id || !base)
+            return null;
+        return `${base}/auth/${id}/signature`;
+    }, ...(ngDevMode ? [{ debugName: "signatureUrl" }] : /* istanbul ignore next */ []));
+    authService = inject(MesAuthService);
+    router = inject(Router);
+    themeService = inject(ThemeService);
+    http = inject(HttpClient);
+    constructor() {
+        const currentUserSig = toSignal(this.authService.currentUser$, { initialValue: null });
+        const approvalEvent = toSignal(this.authService.approvalEvents$);
+        const notification = toSignal(this.authService.notifications$);
+        effect(() => {
+            const user = currentUserSig();
+            this.currentUser.set(user);
+            this.avatarRefresh.set(Date.now());
+            if (!user) {
+                this.unreadCount.set(0);
+                this.pendingApprovalCount.set(0);
+                return;
+            }
+            this.loadUnreadCount();
+            this.loadPendingApprovalCount();
         });
-        this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Approved).subscribe({
-            next: r => { this.approvedItems.set(r.items); done(); },
-            error: () => done()
+        effect(() => {
+            approvalEvent(); // track SignalR approval events
+            if (currentUserSig())
+                this.loadPendingApprovalCount();
         });
-        this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Rejected).subscribe({
-            next: r => { this.rejectedItems.set(r.items); done(); },
-            error: () => done()
+        effect(() => {
+            notification(); // track SignalR notification events
+            if (currentUserSig())
+                this.loadUnreadCount();
         });
     }
-    loadCurrentTab() {
-        if (!this.approvalSvc)
+    loadUnreadCount() {
+        this.authService.getUnreadCount().subscribe({
+            next: (response) => this.unreadCount.set(response.unreadCount || 0),
+            error: () => { }
+        });
+    }
+    loadPendingApprovalCount() {
+        const config = this.authService.getConfig();
+        if (!config)
             return;
-        if (this.activeTab() === 'processing') {
-            this.approvalSvc.getPendingApprovals(1, 100).subscribe({
-                next: r => this.processingItems.set(r.items),
-                error: () => { }
-            });
+        const url = `${config.apiBaseUrl.replace(/\/$/, '')}/approval/dashboard`;
+        this.http.get(url, { withCredentials: config.withCredentials ?? true }).subscribe({
+            next: (r) => this.pendingApprovalCount.set(r?.pendingCount ?? 0),
+            error: () => { }
+        });
+    }
+    onApprovalClick() {
+        this.approvalClick.emit();
+    }
+    onAiClick() {
+        this.aiClick.emit();
+    }
+    getAvatarUrl(user) {
+        // Use the refresh signal to force update
+        const refresh = this.avatarRefresh();
+        const config = this.authService.getConfig();
+        const baseUrl = config?.apiBaseUrl || '';
+        if (user.avatarPath) {
+            if (user.avatarPath.startsWith('http://') || user.avatarPath.startsWith('https://')) {
+                return user.avatarPath;
+            }
+            return `${baseUrl.replace(/\/$/, '')}${user.avatarPath}?t=${refresh}`;
         }
-        else if (this.activeTab() === 'approved') {
-            this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Approved).subscribe({
-                next: r => this.approvedItems.set(r.items),
-                error: () => { }
-            });
+        const userId = user.userId;
+        if (userId && baseUrl) {
+            return `${baseUrl.replace(/\/$/, '')}/auth/${userId}/avatar?t=${refresh}`;
+        }
+        const displayName = user.userName || user.userId || 'User';
+        return `https://ui-avatars.com/api/?name=${encodeURIComponent(displayName)}&background=1976d2&color=fff`;
+    }
+    getLastNameInitial(user) {
+        const fullName = user.fullName || user.userName || 'U';
+        const parts = fullName.split(' ');
+        const lastPart = parts[parts.length - 1];
+        return lastPart.charAt(0).toUpperCase();
+    }
+    toggleDropdown() {
+        this.dropdownOpen.set(!this.dropdownOpen());
+    }
+    closeDropdown() {
+        this.dropdownOpen.set(false);
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        const clickedInside = target.closest('.user-menu-wrapper');
+        if (!clickedInside) {
+            this.dropdownOpen.set(false);
+            return;
+        }
+        if (target.closest('.ma-user-menu-btn')) {
+            this.dropdownOpen.set(false);
+        }
+    }
+    onLogin() {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.userBaseUrl || '';
+        const returnUrl = encodeURIComponent(this.router.url);
+        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+    }
+    onViewProfile() {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.userBaseUrl || '';
+        const currentUrl = window.location.href;
+        this.openInNewTabIfSameOrigin(currentUrl, `${baseUrl}/profile`);
+        this.dropdownOpen.set(false);
+    }
+    openInNewTabIfSameOrigin(currentUrl, destinationUrl) {
+        // Check if current page URL starts with the destination URL
+        if (!destinationUrl.startsWith(currentUrl)) {
+            window.open(destinationUrl, "_blank", "noopener,noreferrer");
         }
         else {
-            this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Rejected).subscribe({
-                next: r => this.rejectedItems.set(r.items),
-                error: () => { }
-            });
+            // Optional: redirect in same tab
+            window.location.href = destinationUrl;
         }
     }
-    navigateToDetail(id) {
-        this.close();
-        this.router.navigate(['/auth/approval/detail', id]);
-        this.approvalActioned.emit();
+    onLogout() {
+        this.authService.logout().subscribe({
+            next: () => {
+                this.dropdownOpen.set(false);
+                const config = this.authService.getConfig();
+                const baseUrl = config?.userBaseUrl || '';
+                const returnUrl = encodeURIComponent(window.location.href);
+                window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+            },
+            error: () => {
+                const config = this.authService.getConfig();
+                const baseUrl = config?.userBaseUrl || '';
+                window.location.href = `${baseUrl}/login`;
+            }
+        });
     }
-    showMore(status) {
-        this.close();
-        this.router.navigate(['/auth/approval/my-requests'], { queryParams: { status } });
+    onNotificationClick() {
+        this.notificationClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MaApprovalPanelComponent, isStandalone: true, selector: "ma-approval-panel", outputs: { approvalActioned: "approvalActioned" }, ngImport: i0, template: "<div class=\"approval-panel\" [class.open]=\"isOpen()\">\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\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\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\" 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\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems().length > 0) {\n        <span class=\"tab-badge\">{{ processingItems().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading()) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading() && activeTab() === 'processing') {\n      @if (processingItems().length === 0) {\n        <div class=\"empty-state\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.4\"><path d=\"M9 11l3 3L22 4\"/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/></svg>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems(); track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading() && activeTab() === 'approved') {\n      @if (approvedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems(); track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading() && activeTab() === 'rejected') {\n      @if (rejectedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems(); track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\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: #90caf9;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #1565c0;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-hover: #e8eaf6;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.approval-panel{position:fixed;top:0;right:-380px;width:380px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.approval-panel.open{right:var(--ma-ai-panel-width, 0px)}.panel-content{flex:1;overflow-y:auto;padding:8px 0}.approval-item{padding:14px 18px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.approval-item:hover{background:var(--bg-hover)}.approval-item:last-child{border-bottom:none}.item-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:flex;gap:4px;flex-wrap:wrap}.item-footer{display:flex;align-items:center;gap:8px}.item-time{font-size:11px;color:var(--text-muted);margin-right:auto}.item-link{font-size:12px;color:var(--primary);font-weight:500}.status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.3px}.approved-badge{background:#66bb6a26;color:var(--success)}.rejected-badge{background:#ef53501f;color:var(--error)}.show-more{text-align:center;padding:14px;font-size:13px;color:var(--primary);cursor:pointer;font-weight:500}.show-more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
+    openLessons() {
+        this.lessonsOpen.set(true);
+        this.dropdownOpen.set(false);
+    }
+    closeLessons() {
+        this.lessonsOpen.set(false);
+    }
+    onSigErr(_ev) {
+        this.signatureBroken.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", inputs: { inputAvatarShape: { classPropertyName: "inputAvatarShape", publicName: "inputAvatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, showAi: { classPropertyName: "showAi", publicName: "showAi", isSignal: true, isRequired: false, transformFunction: null }, showSignature: { classPropertyName: "showSignature", publicName: "showSignature", isSignal: true, isRequired: false, transformFunction: null }, signatureHeight: { classPropertyName: "signatureHeight", publicName: "signatureHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick", aiClick: "aiClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Ask AI -->\n      @if (showAi()) {\n        <ma-ai-button (clicked)=\"onAiClick()\"></ma-ai-button>\n      }\n\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  @if (showSignature()[1] && signatureUrl(); as sigUrl) {\n                      <img class=\"ma-ux-signature\"\n                          [src]=\"sigUrl\"\n                          [style.height.px]=\"signatureHeight()\"\n                          (error)=\"onSigErr($event)\"\n                          alt=\"signature\" />\n                  }\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  @if (showAi()) {\n                    <button class=\"icon-action\" (click)=\"openLessons()\" title=\"AI preferences\" aria-label=\"AI preferences\">\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\" 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                    </button>\n                  }\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n       @if (showSignature()[0] && signatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n    </div>\n  }\n  @if (lessonsOpen()) {\n    <ma-ai-lessons-editor (cancel)=\"closeLessons()\"></ma-ai-lessons-editor>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }, { kind: "component", type: MaAiButtonComponent, selector: "ma-ai-button", outputs: ["clicked"] }, { kind: "component", type: MaAiLessonsEditorComponent, selector: "ma-ai-lessons-editor", outputs: ["cancel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-approval-panel', imports: [DatePipe], template: "<div class=\"approval-panel\" [class.open]=\"isOpen()\">\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\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\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\" 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\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems().length > 0) {\n        <span class=\"tab-badge\">{{ processingItems().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading()) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading() && activeTab() === 'processing') {\n      @if (processingItems().length === 0) {\n        <div class=\"empty-state\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.4\"><path d=\"M9 11l3 3L22 4\"/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/></svg>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems(); track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading() && activeTab() === 'approved') {\n      @if (approvedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems(); track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading() && activeTab() === 'rejected') {\n      @if (rejectedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems(); track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\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: #90caf9;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #1565c0;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-hover: #e8eaf6;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.approval-panel{position:fixed;top:0;right:-380px;width:380px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.approval-panel.open{right:var(--ma-ai-panel-width, 0px)}.panel-content{flex:1;overflow-y:auto;padding:8px 0}.approval-item{padding:14px 18px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.approval-item:hover{background:var(--bg-hover)}.approval-item:last-child{border-bottom:none}.item-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:flex;gap:4px;flex-wrap:wrap}.item-footer{display:flex;align-items:center;gap:8px}.item-time{font-size:11px;color:var(--text-muted);margin-right:auto}.item-link{font-size:12px;color:var(--primary);font-weight:500}.status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.3px}.approved-badge{background:#66bb6a26;color:var(--success)}.rejected-badge{background:#ef53501f;color:var(--error)}.show-more{text-align:center;padding:14px;font-size:13px;color:var(--primary);cursor:pointer;font-weight:500}.show-more:hover{text-decoration:underline}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { approvalActioned: [{ type: i0.Output, args: ["approvalActioned"] }] } });
+            args: [{ selector: 'ma-user-profile', imports: [MaAvatarComponent, MaAiButtonComponent, MaAiLessonsEditorComponent], template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Ask AI -->\n      @if (showAi()) {\n        <ma-ai-button (clicked)=\"onAiClick()\"></ma-ai-button>\n      }\n\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  @if (showSignature()[1] && signatureUrl(); as sigUrl) {\n                      <img class=\"ma-ux-signature\"\n                          [src]=\"sigUrl\"\n                          [style.height.px]=\"signatureHeight()\"\n                          (error)=\"onSigErr($event)\"\n                          alt=\"signature\" />\n                  }\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  @if (showAi()) {\n                    <button class=\"icon-action\" (click)=\"openLessons()\" title=\"AI preferences\" aria-label=\"AI preferences\">\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\" 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                    </button>\n                  }\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n       @if (showSignature()[0] && signatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n    </div>\n  }\n  @if (lessonsOpen()) {\n    <ma-ai-lessons-editor (cancel)=\"closeLessons()\"></ma-ai-lessons-editor>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAvatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], showAi: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAi", required: false }] }], showSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSignature", required: false }] }], signatureHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "signatureHeight", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], approvalClick: [{ type: i0.Output, args: ["approvalClick"] }], aiClick: [{ type: i0.Output, args: ["aiClick"] }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
 
-/**
- * Resolves the full set of client tools available to the AI: built-ins + consumer-registered.
- * Handlers are invoked through `runTool(name, args)` which automatically threads the Injector
- * so consumer handlers can use inject() patterns.
- */
-class MaAiToolsRegistry {
-    config = inject(MES_AUTH_AI_CONFIG, { optional: true }) ?? DEFAULT_AI_CONFIG;
-    injector = inject(Injector);
-    /** Built-in client tools shipped by the library. */
-    builtIn = [
-        {
-            name: 'navigate',
-            description: 'Navigate the user to a path within the application. Use relative paths starting with /.',
-            parameters: {
-                type: 'object',
-                properties: {
-                    path: { type: 'string', description: 'Path to navigate to, e.g. "/auth/users"' }
-                },
-                required: ['path']
-            },
-            readOnly: true,
-            handler: (args) => {
-                const router = this.injector.get(Router, null);
-                if (!router)
-                    return 'Router is not available in this app.';
-                router.navigateByUrl(args.path);
-                return `Navigated to ${args.path}`;
-            }
-        },
-        {
-            name: 'toggle_theme',
-            description: 'Toggle between light and dark theme.',
-            parameters: { type: 'object', properties: {} },
-            readOnly: true,
-            handler: () => {
-                const theme = this.injector.get(ThemeService);
-                const next = theme.currentTheme() === 'light' ? 'dark' : 'light';
-                theme.setFixTheme(next);
-                return `Theme switched to ${next}.`;
-            }
-        },
-        {
-            name: 'show_toast',
-            description: 'Show a small toast notification at the top of the screen.',
-            parameters: {
-                type: 'object',
-                properties: {
-                    message: { type: 'string', description: 'Toast body text' },
-                    title: { type: 'string', description: 'Optional title' },
-                    severity: { type: 'string', enum: ['info', 'success', 'warning', 'error'], description: 'Toast severity' }
-                },
-                required: ['message']
-            },
-            readOnly: true,
-            handler: (args) => {
-                const toast = this.injector.get(ToastService);
-                toast.show(args.message, args.title, args.severity ?? 'info');
-                return 'Toast shown.';
-            }
-        },
-        {
-            name: 'who_am_i_client',
-            description: 'Get the currently signed-in user as seen by the browser (id, name, roles loaded so far).',
-            parameters: { type: 'object', properties: {} },
-            readOnly: true,
-            handler: () => {
-                const auth = this.injector.get(MesAuthService);
-                const u = auth.currentUser;
-                if (!u)
-                    return 'No user signed in.';
-                return JSON.stringify({
-                    id: u.userId ?? u.id,
-                    userName: u.userName,
-                    fullName: u.fullName,
-                    department: u.department,
-                    position: u.position,
-                    email: u.email
-                });
-            }
-        },
-        {
-            name: 'reload_page',
-            description: 'Reload the current browser page. Use as a last resort if state seems stuck.',
-            parameters: { type: 'object', properties: {} },
-            readOnly: false,
-            handler: () => {
-                window.location.reload();
-                return 'Reloading page…';
-            }
-        }
-    ];
-    /** All tools, deduplicated by name (consumer wins on conflict). */
-    list() {
-        const fromConfig = this.config.tools ?? [];
-        const byName = new Map();
-        for (const t of this.builtIn)
-            byName.set(t.name, t);
-        for (const t of fromConfig)
-            byName.set(t.name, t);
-        return Array.from(byName.values());
-    }
-    resolve(name) {
-        return this.list().find(t => t.name === name);
+class ToastContainerComponent {
+    get themeClass() {
+        return `theme-${this.themeService.currentTheme()}`;
     }
-    /** Run a registered client tool and serialize its result for posting back to the agent loop. */
-    async runTool(name, args) {
-        const tool = this.resolve(name);
-        if (!tool)
-            return { ok: false, result: `Unknown client tool: ${name}` };
-        try {
-            const raw = await Promise.resolve(tool.handler(args ?? {}));
-            const result = typeof raw === 'string' ? raw : JSON.stringify(raw ?? null);
-            return { ok: true, result };
-        }
-        catch (err) {
-            return { ok: false, result: err?.message ?? String(err) };
-        }
+    toastService = inject(ToastService);
+    themeService = inject(ThemeService);
+    toasts = this.toastService.toasts;
+    close(id) {
+        this.toastService.remove(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"toast-container\">\n  @for (toast of toasts(); track toast.id) {\n    <div class=\"toast toast-{{ toast.type }}\">\n\n      <!-- Type icon -->\n      <div class=\"toast-icon\">\n        @if (toast.type === 'info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n        }\n        @if (toast.type === 'success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n          </svg>\n        }\n        @if (toast.type === 'warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n          </svg>\n        }\n        @if (toast.type === 'error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n          </svg>\n        }\n      </div>\n\n      <!-- Content -->\n      <div class=\"toast-content\">\n        @if (toast.title) {\n          <div class=\"toast-title\">{{ toast.title }}</div>\n        }\n        <div class=\"toast-message\" [innerHTML]=\"toast.message\"></div>\n      </div>\n\n      <!-- Close -->\n      <button class=\"toast-close\" (click)=\"close(toast.id)\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" 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\n      <!-- Auto-dismiss progress bar \u2014 hidden when duration <= 0 (persistent toast) -->\n      @if (toast.duration == null || toast.duration > 0) {\n        <div class=\"toast-progress\" [style.animation-duration]=\"(toast.duration ?? 5000) + 'ms'\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:10px}.toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 13px 16px 16px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 8px 28px var(--shadow-lg),0 2px 8px var(--shadow);pointer-events:auto;min-width:300px;max-width:420px;overflow:hidden;animation:toast-in .35s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translate(36px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}.toast-info:before{background:var(--info-color)}.toast-success:before{background:var(--success-color)}.toast-warning:before{background:var(--warning-color)}.toast-error:before{background:var(--error-color)}.toast-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-left:2px}.toast-info .toast-icon{color:var(--info-color);background:var(--info-bg)}.toast-success .toast-icon{color:var(--success-color);background:var(--success-bg)}.toast-warning .toast-icon{color:var(--warning-color);background:var(--warning-bg)}.toast-error .toast-icon{color:var(--error-color);background:var(--error-bg)}.toast-content{flex:1;min-width:0;padding-top:1px}.toast-title{font-weight:700;font-size:13.5px;margin-bottom:3px;line-height:1.3}.toast-info .toast-title{color:var(--info-color)}.toast-success .toast-title{color:var(--success-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-error .toast-title{color:var(--error-color)}.toast-message{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}.toast-message h3{margin:0 0 4px;font-size:13.5px;color:inherit}.toast-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:color .15s,background-color .15s}.toast-close:hover{color:var(--text-primary);background:var(--border-color)}.toast-progress{position:absolute;bottom:0;left:4px;right:0;height:3px;border-radius:0 0 12px;animation:toast-progress linear forwards;opacity:.7}.toast-info .toast-progress{background:var(--info-color)}.toast-success .toast-progress{background:var(--success-color)}.toast-warning .toast-progress{background:var(--warning-color)}.toast-error .toast-progress{background:var(--error-color)}@keyframes toast-progress{0%{width:calc(100% - 4px)}to{width:0}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-toast-container', imports: [], template: "<div class=\"toast-container\">\n  @for (toast of toasts(); track toast.id) {\n    <div class=\"toast toast-{{ toast.type }}\">\n\n      <!-- Type icon -->\n      <div class=\"toast-icon\">\n        @if (toast.type === 'info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n        }\n        @if (toast.type === 'success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n          </svg>\n        }\n        @if (toast.type === 'warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n          </svg>\n        }\n        @if (toast.type === 'error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n          </svg>\n        }\n      </div>\n\n      <!-- Content -->\n      <div class=\"toast-content\">\n        @if (toast.title) {\n          <div class=\"toast-title\">{{ toast.title }}</div>\n        }\n        <div class=\"toast-message\" [innerHTML]=\"toast.message\"></div>\n      </div>\n\n      <!-- Close -->\n      <button class=\"toast-close\" (click)=\"close(toast.id)\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" 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\n      <!-- Auto-dismiss progress bar \u2014 hidden when duration <= 0 (persistent toast) -->\n      @if (toast.duration == null || toast.duration > 0) {\n        <div class=\"toast-progress\" [style.animation-duration]=\"(toast.duration ?? 5000) + 'ms'\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none;display:flex;flex-direction:column;gap:10px}.toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 13px 16px 16px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 8px 28px var(--shadow-lg),0 2px 8px var(--shadow);pointer-events:auto;min-width:300px;max-width:420px;overflow:hidden;animation:toast-in .35s cubic-bezier(.16,1,.3,1)}@keyframes toast-in{0%{opacity:0;transform:translate(36px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}.toast-info:before{background:var(--info-color)}.toast-success:before{background:var(--success-color)}.toast-warning:before{background:var(--warning-color)}.toast-error:before{background:var(--error-color)}.toast-icon{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-left:2px}.toast-info .toast-icon{color:var(--info-color);background:var(--info-bg)}.toast-success .toast-icon{color:var(--success-color);background:var(--success-bg)}.toast-warning .toast-icon{color:var(--warning-color);background:var(--warning-bg)}.toast-error .toast-icon{color:var(--error-color);background:var(--error-bg)}.toast-content{flex:1;min-width:0;padding-top:1px}.toast-title{font-weight:700;font-size:13.5px;margin-bottom:3px;line-height:1.3}.toast-info .toast-title{color:var(--info-color)}.toast-success .toast-title{color:var(--success-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-error .toast-title{color:var(--error-color)}.toast-message{font-size:12.5px;line-height:1.45;color:var(--text-secondary)}.toast-message h3{margin:0 0 4px;font-size:13.5px;color:inherit}.toast-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:color .15s,background-color .15s}.toast-close:hover{color:var(--text-primary);background:var(--border-color)}.toast-progress{position:absolute;bottom:0;left:4px;right:0;height:3px;border-radius:0 0 12px;animation:toast-progress linear forwards;opacity:.7}.toast-info .toast-progress{background:var(--info-color)}.toast-success .toast-progress{background:var(--success-color)}.toast-warning .toast-progress{background:var(--warning-color)}.toast-error .toast-progress{background:var(--error-color)}@keyframes toast-progress{0%{width:calc(100% - 4px)}to{width:0}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] }]
+        }], propDecorators: { themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
-/**
- * Drives the chat panel.
- *
- * Uses `fetch` + `ReadableStream` (not `EventSource`, which can't POST a body) to talk to
- * `/ai/chat` SSE. State lives in signals so the panel can re-render reactively.
- */
-class MaAiService {
-    auth = inject(MesAuthService);
-    aiConfig = inject(MES_AUTH_AI_CONFIG, { optional: true }) ?? DEFAULT_AI_CONFIG;
-    tools = inject(MaAiToolsRegistry);
-    messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
-    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 */ []));
-    lastError = signal(null, ...(ngDevMode ? [{ debugName: "lastError" }] : /* istanbul ignore next */ []));
-    sessionId = null;
-    /** Verbs the user already chose "always approve" for in this session. */
-    alwaysApproved = new Set();
-    abortController = null;
-    /** ID of the current assistant bubble we're streaming tokens into. */
-    currentAssistantId = null;
-    get enabled() {
-        return this.aiConfig.enabled !== false;
+class NotificationPanelComponent {
+    notificationRead = output();
+    get themeClass() {
+        return `theme-${this.themeService.currentTheme()}`;
     }
-    /** Start a brand-new conversation. */
-    resetSession() {
-        this.cancel();
-        this.sessionId = null;
-        this.messages.set([]);
-        this.pendingApproval.set(null);
-        this.lastError.set(null);
-        this.alwaysApproved.clear();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    activeTab = signal('unread', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []));
+    selectedNotification = signal(null, ...(ngDevMode ? [{ debugName: "selectedNotification" }] : /* istanbul ignore next */ []));
+    selectedNotificationHtml = signal(null, ...(ngDevMode ? [{ debugName: "selectedNotificationHtml" }] : /* istanbul ignore next */ []));
+    selectedNotificationDate = signal('', ...(ngDevMode ? [{ debugName: "selectedNotificationDate" }] : /* istanbul ignore next */ []));
+    // Stable time-ago strings keyed by notification id - refreshed every 30s via signal
+    dateLabels = signal(new Map(), ...(ngDevMode ? [{ debugName: "dateLabels" }] : /* istanbul ignore next */ []));
+    unreadNotifications = computed(() => this.notifications().filter(n => !n.isRead), ...(ngDevMode ? [{ debugName: "unreadNotifications" }] : /* istanbul ignore next */ []));
+    readNotifications = computed(() => this.notifications().filter(n => n.isRead), ...(ngDevMode ? [{ debugName: "readNotifications" }] : /* istanbul ignore next */ []));
+    currentNotifications = computed(() => this.activeTab() === 'unread' ? this.unreadNotifications() : this.readNotifications(), ...(ngDevMode ? [{ debugName: "currentNotifications" }] : /* istanbul ignore next */ []));
+    dateTimer = null;
+    // Normalize type to string - API may return integer or string
+    // Backend enum: Info=0, Success=1, Warning=2, Error=3
+    typeOf(notification) {
+        const t = notification.type;
+        if (t === 0 || t === 'Info')
+            return 'Info';
+        if (t === 1 || t === 'Success')
+            return 'Success';
+        if (t === 2 || t === 'Warning')
+            return 'Warning';
+        if (t === 3 || t === 'Error')
+            return 'Error';
+        return 'Info';
     }
-    /** Cancel the in-flight stream (if any). The session id is preserved so the user can resume. */
-    cancel() {
-        if (this.abortController) {
-            this.abortController.abort();
-            this.abortController = null;
-        }
-        this.streaming.set(false);
-        this.currentAssistantId = null;
-        // If a client-tool call was awaiting the user, clearing it lets them start over.
-        this.pendingApproval.set(null);
+    toastType(type) {
+        const t = this.typeOf({ type });
+        return t.toLowerCase();
     }
-    /** User typed and submitted a message. */
-    async send(text, currentRoute) {
-        if (!text.trim())
-            return;
-        this.lastError.set(null);
-        this.appendBubble({ id: this.uid(), role: 'user', text });
-        await this.runStream({ message: text }, currentRoute);
+    sanitizer = inject(DomSanitizer);
+    authService = inject(MesAuthService);
+    toastService = inject(ToastService);
+    themeService = inject(ThemeService);
+    host = inject(ElementRef);
+    constructor() {
+        this.loadNotifications();
+        // Refresh time-ago labels every 30s - signal mutation triggers CD in zoneless
+        this.dateTimer = setInterval(() => this.refreshDateLabels(), 30000);
+        const latestNotification = toSignal(this.authService.notifications$);
+        effect(() => {
+            const notification = latestNotification();
+            if (!notification)
+                return;
+            this.toastService.show(notification.message || '', notification.title, this.toastType(notification.type), 5000);
+            this.loadNotifications();
+        });
+        // Close when the user clicks outside the panel - matches ma-approval-panel UX.
+        effect((onCleanup) => {
+            if (!this.isOpen())
+                return;
+            const onDocClick = (ev) => {
+                const panel = this.host.nativeElement.querySelector('.notification-panel');
+                if (panel && !panel.contains(ev.target))
+                    this.close();
+            };
+            // Defer to skip the same click that opened the panel.
+            const tid = setTimeout(() => document.addEventListener('mousedown', onDocClick), 0);
+            onCleanup(() => {
+                clearTimeout(tid);
+                document.removeEventListener('mousedown', onDocClick);
+            });
+        });
     }
-    /**
-     * Approve (or decline) a pending client tool call. If approved (and alwaysApprove),
-     * remember the verb so we skip the prompt next time in this session.
-     */
-    async resolvePendingApproval(decision) {
-        const pending = this.pendingApproval();
-        if (!pending)
-            return;
-        this.pendingApproval.set(null);
-        if (decision === 'decline') {
-            await this.continueWithToolResult(pending.callId, false, 'User declined this tool call.');
-            this.markToolStatus(pending.callId, 'declined');
-            return;
-        }
-        if (decision === 'always') {
-            this.alwaysApproved.add(this.verbOf(pending.name));
+    ngOnDestroy() {
+        if (this.dateTimer !== null) {
+            clearInterval(this.dateTimer);
+            this.dateTimer = null;
         }
-        await this.executeClientTool(pending.callId, pending.name, pending.args);
     }
-    // ── private ────────────────────────────────────────────────────────────────
-    async runStream(payload, currentRoute) {
-        if (!this.enabled) {
-            this.lastError.set('AI assistant is disabled.');
-            return;
-        }
-        const config = this.auth.getConfig();
-        const base = config?.apiBaseUrl?.replace(/\/$/, '') ?? '';
-        if (!base) {
-            this.lastError.set('MesAuth is not configured.');
-            return;
-        }
-        // Start a fresh assistant bubble that we stream tokens into.
-        const assistantId = this.uid();
-        this.currentAssistantId = assistantId;
-        this.appendBubble({ id: assistantId, role: 'assistant', text: '', pending: true, toolEvents: [] });
-        this.streaming.set(true);
-        this.abortController = new AbortController();
-        try {
-            const res = await fetch(`${base}/ai/chat`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
-                credentials: config?.withCredentials !== false ? 'include' : 'same-origin',
-                body: JSON.stringify({
-                    sessionId: this.sessionId,
-                    message: payload.message,
-                    toolResult: payload.toolResult,
-                    clientTools: this.tools.list().map(t => ({
-                        name: t.name,
-                        description: t.description,
-                        parameters: t.parameters,
-                        readOnly: t.readOnly === true
-                    })),
-                    context: { currentRoute, appName: this.aiConfig.appName }
-                }),
-                signal: this.abortController.signal
+    loadNotifications() {
+        this.authService.getNotifications(1, 50, true).subscribe({
+            next: (response) => {
+                this.notifications.set(response.items || []);
+                this.refreshDateLabels();
+            },
+            error: () => { }
+        });
+    }
+    open() {
+        this.isOpen.set(true);
+        this.activeTab.set('unread');
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    switchTab(tab) {
+        this.activeTab.set(tab);
+    }
+    openDetails(notification) {
+        this.selectedNotification.set(notification);
+        const html = notification.messageHtml || notification.message || '';
+        this.selectedNotificationHtml.set(this.sanitizer.bypassSecurityTrustHtml(html));
+        this.selectedNotificationDate.set(this.formatDate(notification.createdAt));
+        if (!notification.isRead) {
+            this.authService.markAsRead(notification.id).subscribe({
+                next: () => {
+                    this.notifications.update(notifs => notifs.map(n => n.id === notification.id ? { ...n, isRead: true } : n));
+                    this.notificationRead.emit();
+                },
+                error: () => { }
             });
-            if (!res.ok || !res.body) {
-                const detail = await res.text().catch(() => '');
-                throw new Error(`AI request failed (${res.status}). ${detail}`);
-            }
-            await this.readSse(res.body);
         }
-        catch (err) {
-            if (err?.name === 'AbortError') {
-                // user cancelled
-            }
-            else {
-                this.lastError.set(err?.message ?? String(err));
-                this.finalizeAssistant(`[error: ${err?.message ?? err}]`);
-            }
+    }
+    closeDetails() {
+        this.selectedNotification.set(null);
+        this.selectedNotificationHtml.set(null);
+        this.selectedNotificationDate.set('');
+    }
+    openUrl() {
+        const url = this.selectedNotification()?.url?.trim();
+        if (url) {
+            window.open(url, '_blank', 'noopener,noreferrer');
         }
-        finally {
-            this.streaming.set(false);
-            this.abortController = null;
+    }
+    markAsRead(notificationId, event) {
+        if (event)
+            event.stopPropagation();
+        this.authService.markAsRead(notificationId).subscribe({
+            next: () => {
+                this.notifications.update(notifs => notifs.map(n => n.id === notificationId ? { ...n, isRead: true } : n));
+                this.notificationRead.emit();
+            },
+            error: () => { }
+        });
+    }
+    markAllAsRead() {
+        this.authService.markAllAsRead().subscribe({
+            next: () => {
+                this.notifications.update(notifs => notifs.map(n => ({ ...n, isRead: true })));
+                this.notificationRead.emit();
+            },
+            error: () => { }
+        });
+    }
+    deleteAllRead() {
+        const readIds = this.notifications().filter(n => n.isRead).map(n => n.id);
+        const deletePromises = readIds.map(id => firstValueFrom(this.authService.deleteNotification(id)));
+        Promise.all(deletePromises).then(() => {
+            this.notifications.update(notifs => notifs.filter(n => !n.isRead));
+        }).catch(() => {
+            this.loadNotifications();
+        });
+    }
+    deleteAllUnread() {
+        const unreadIds = this.notifications().filter(n => !n.isRead).map(n => n.id);
+        const deletePromises = unreadIds.map(id => firstValueFrom(this.authService.deleteNotification(id)));
+        Promise.all(deletePromises).then(() => {
+            this.notifications.update(notifs => notifs.filter(n => n.isRead));
+            this.notificationRead.emit();
+        }).catch(() => {
+            this.loadNotifications();
+        });
+    }
+    delete(notificationId, event) {
+        event.stopPropagation();
+        const wasUnread = this.notifications().some(n => n.id === notificationId && !n.isRead);
+        this.authService.deleteNotification(notificationId).subscribe({
+            next: () => {
+                this.notifications.update(notifs => notifs.filter(n => n.id !== notificationId));
+                if (wasUnread)
+                    this.notificationRead.emit();
+            },
+            error: () => { }
+        });
+    }
+    formatDate(dateString) {
+        return this.computeTimeAgo(dateString, new Date());
+    }
+    // Pure computation - takes now as param so it never calls new Date() internally
+    computeTimeAgo(dateString, now) {
+        const normalizedDateString = this.parseUtcDate(dateString);
+        const date = new Date(normalizedDateString);
+        if (isNaN(date.getTime()))
+            return 'Invalid date';
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return 'Now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return date.toLocaleDateString();
+    }
+    // Rebuild dateLabels map and store as a new signal value so CD is triggered
+    refreshDateLabels() {
+        const now = new Date();
+        const newLabels = new Map();
+        for (const n of this.notifications()) {
+            newLabels.set(n.id, this.computeTimeAgo(n.createdAt, now));
         }
+        this.dateLabels.set(newLabels);
     }
-    async readSse(body) {
-        const reader = body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
-        while (true) {
-            const { value, done } = await reader.read();
-            if (done)
-                break;
-            buffer += decoder.decode(value, { stream: true });
-            // SSE events are separated by a blank line.
-            let idx;
-            while ((idx = buffer.indexOf('\n\n')) !== -1) {
-                const rawEvent = buffer.slice(0, idx);
-                buffer = buffer.slice(idx + 2);
-                const dataLine = rawEvent.split('\n').find(l => l.startsWith('data:'));
-                if (!dataLine)
-                    continue;
-                const json = dataLine.slice(5).trim();
-                if (!json)
-                    continue;
-                let ev;
-                try {
-                    ev = JSON.parse(json);
-                }
-                catch {
-                    continue;
-                }
-                await this.handleEvent(ev);
-            }
+    // Parse date string from server (stored in UTC but without 'Z' suffix or 'T' separator)
+    parseUtcDate(dateStr) {
+        let normalized = dateStr.includes('T') ? dateStr : dateStr.replace(' ', 'T');
+        if (!normalized.endsWith('Z') && !normalized.includes('+') && !normalized.includes('-', 10)) {
+            normalized += 'Z';
+        }
+        return normalized;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", outputs: { notificationRead: "notificationRead" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"notification-panel\" [class.open]=\"isOpen()\">\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\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n        <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n      </svg>\n      <h3>Notifications</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" title=\"Close\" aria-label=\"Close notifications\">\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.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\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'unread'\" (click)=\"switchTab('unread')\">\n      Unread\n      @if (unreadNotifications().length > 0) {\n        <span class=\"tab-badge\">{{ unreadNotifications().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'read'\" (click)=\"switchTab('read')\">\n      Read\n      @if (readNotifications().length > 0) {\n        <span class=\"tab-badge read-badge\">{{ readNotifications().length }}</span>\n      }\n    </button>\n  </div>\n\n  <!-- Notifications List -->\n  <div class=\"notifications-list\">\n    @if (currentNotifications().length > 0) {\n      @for (notification of currentNotifications(); track notification.id) {\n        <div\n          class=\"notification-item\"\n          [class.unread]=\"!notification.isRead\"\n          (click)=\"openDetails(notification)\"\n        >\n          @let t = typeOf(notification);\n          <div class=\"notif-accent\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\"></div>\n          <div class=\"notif-type-icon\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\">\n            @if (t === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (t === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            }\n            @if (t === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n              </svg>\n            }\n            @if (t === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <div class=\"notification-content\">\n            <div class=\"notification-title\">{{ notification.title }}</div>\n            <div class=\"notification-message\">{{ notification.message }}</div>\n            <div class=\"notification-meta\">\n              <span class=\"app-name\">{{ notification.sourceAppName }}</span>\n              <span class=\"time\">{{ dateLabels().get(notification.id) }}</span>\n            </div>\n          </div>\n          @if (!notification.isRead) {\n            <button class=\"icon-btn read-btn\" (click)=\"markAsRead(notification.id, $event)\" title=\"Mark as read\" aria-label=\"Mark as read\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            </button>\n          }\n          @if (notification.isRead) {\n            <button class=\"icon-btn delete-btn\" (click)=\"delete(notification.id, $event)\" title=\"Delete\" aria-label=\"Delete notification\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      <div class=\"empty-state\">\n        <svg class=\"empty-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n        </svg>\n        <p>No {{ activeTab() }} notifications</p>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions -->\n  @if (currentNotifications().length > 0) {\n    <div class=\"panel-footer\">\n      @if (activeTab() === 'unread') {\n        <div class=\"footer-actions\">\n          @if (unreadNotifications().length > 0) {\n            <button class=\"action-btn\" (click)=\"markAllAsRead()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n              Mark all read\n            </button>\n            <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllUnread()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n              Delete all\n            </button>\n          }\n        </div>\n      }\n      @if (activeTab() === 'read' && readNotifications().length > 0) {\n        <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllRead()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n          Delete all\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<!-- Details Modal -->\n@if (selectedNotification()) {\n  <div class=\"modal-overlay\" (click)=\"closeDetails()\">\n    <div class=\"modal-container\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\"\n        [class.modal-type-info]=\"typeOf(selectedNotification()!) === 'Info'\"\n        [class.modal-type-success]=\"typeOf(selectedNotification()!) === 'Success'\"\n        [class.modal-type-warning]=\"typeOf(selectedNotification()!) === 'Warning'\"\n        [class.modal-type-error]=\"typeOf(selectedNotification()!) === 'Error'\">\n        <div class=\"modal-header-left\">\n          <div class=\"modal-type-icon\">\n            @if (typeOf(selectedNotification()!) === 'Info') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Success') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Warning') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Error') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <h3>{{ selectedNotification()!.title }}</h3>\n        </div>\n        <button class=\"close-btn\" (click)=\"closeDetails()\" title=\"Close\" aria-label=\"Close notification detail\">\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.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 class=\"modal-meta\">\n        <span class=\"app-name\">{{ selectedNotification()!.sourceAppName }}</span>\n        <span class=\"time\">{{ selectedNotificationDate() }}</span>\n      </div>\n      <div class=\"modal-body\" [innerHTML]=\"selectedNotificationHtml()\"></div>\n      <div class=\"modal-footer\">\n        @if (selectedNotification()?.url?.trim()) {\n          <button class=\"action-btn see-details-btn\" (click)=\"openUrl()\">See Details</button>\n        }\n        <button class=\"action-btn\" (click)=\"closeDetails()\">Close</button>\n      </div>\n    </div>\n  </div>\n}\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{display:block;position:relative;--primary: #1976d2;--primary-hover: #1565c0;--success: #43a047;--error: #f44336;--error-hover: #d32f2f;--info-color: #2196f3;--info-bg: rgba(33, 150, 243, .1);--success-bg: rgba(67, 160, 71, .1);--warning-color: #f57c00;--warning-bg: rgba(245, 124, 0, .1);--error-bg: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--bg-unread: rgba(25, 118, 210, .06);--border-color: #e0e0e0;--border-light: #eeeeee;--shadow: rgba(0, 0, 0, .15)}.tab-btn:not(.active) .tab-badge{background:var(--error)}.read-badge{background:var(--text-muted)}.notification-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.notification-panel.open{right:var(--ma-ai-panel-width, 0px)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--bg-primary);transition:background-color .15s;position:relative}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-unread)}.notif-accent{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:0 2px 2px 0;opacity:.3}.notification-item.unread .notif-accent{opacity:1}.notif-accent.type-info{background:var(--info-color)}.notif-accent.type-success{background:var(--success)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error)}.notif-type-icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:10px}.notif-type-icon.type-info{color:var(--info-color);background:var(--info-bg)}.notif-type-icon.type-success{color:var(--success);background:var(--success-bg)}.notif-type-icon.type-warning{color:var(--warning-color);background:var(--warning-bg)}.notif-type-icon.type-error{color:var(--error);background:var(--error-bg)}.notification-content{flex:1;min-width:0;padding:12px 8px 12px 12px}.notification-title{font-weight:600;color:var(--text-primary);font-size:13.5px;margin-bottom:3px;line-height:1.35}.notification-message{color:var(--text-secondary);font-size:12px;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.app-name{font-weight:600;color:var(--primary)}.icon-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-right:8px;transition:color .15s,background-color .15s;color:var(--text-muted)}.read-btn:hover{color:var(--success);background:#43a0471a}.delete-btn:hover{color:var(--error);background:#f443361a}.panel-footer{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;transition:background-color .18s,transform .12s}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.delete-all-btn{background:var(--error)}.delete-all-btn:hover{background:var(--error-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1060;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container{background:var(--bg-primary);border-radius:14px;width:92%;max-width:860px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000040;animation:modal-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px 14px 0 0;border-top:3px solid transparent}.modal-header.modal-type-info{border-top-color:var(--info-color)}.modal-header.modal-type-success{border-top-color:var(--success)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error)}.modal-header-left{display:flex;align-items:center;gap:10px;min-width:0}.modal-type-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.modal-type-info .modal-type-icon{color:var(--info-color);background:var(--info-bg)}.modal-type-success .modal-type-icon{color:var(--success);background:var(--success-bg)}.modal-type-warning .modal-type-icon{color:var(--warning-color);background:var(--warning-bg)}.modal-type-error .modal-type-icon{color:var(--error);background:var(--error-bg)}.modal-header h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{display:flex;justify-content:space-between;padding:8px 20px;font-size:11.5px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.modal-body{padding:20px;overflow-y:auto;flex:1;color:var(--text-primary);font-size:14px;line-height:1.65}.modal-footer{padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 14px 14px;display:flex;justify-content:flex-end;gap:8px}.modal-footer .action-btn{width:auto;padding:8px 24px}.modal-footer .see-details-btn{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-color)}.modal-footer .see-details-btn:hover{opacity:.85}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NotificationPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-notification-panel', imports: [], template: "<div class=\"notification-panel\" [class.open]=\"isOpen()\">\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\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n        <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n      </svg>\n      <h3>Notifications</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" title=\"Close\" aria-label=\"Close notifications\">\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.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\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'unread'\" (click)=\"switchTab('unread')\">\n      Unread\n      @if (unreadNotifications().length > 0) {\n        <span class=\"tab-badge\">{{ unreadNotifications().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'read'\" (click)=\"switchTab('read')\">\n      Read\n      @if (readNotifications().length > 0) {\n        <span class=\"tab-badge read-badge\">{{ readNotifications().length }}</span>\n      }\n    </button>\n  </div>\n\n  <!-- Notifications List -->\n  <div class=\"notifications-list\">\n    @if (currentNotifications().length > 0) {\n      @for (notification of currentNotifications(); track notification.id) {\n        <div\n          class=\"notification-item\"\n          [class.unread]=\"!notification.isRead\"\n          (click)=\"openDetails(notification)\"\n        >\n          @let t = typeOf(notification);\n          <div class=\"notif-accent\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\"></div>\n          <div class=\"notif-type-icon\"\n            [class.type-info]=\"t === 'Info'\"\n            [class.type-success]=\"t === 'Success'\"\n            [class.type-warning]=\"t === 'Warning'\"\n            [class.type-error]=\"t === 'Error'\">\n            @if (t === 'Info') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (t === 'Success') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            }\n            @if (t === 'Warning') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n              </svg>\n            }\n            @if (t === 'Error') {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <div class=\"notification-content\">\n            <div class=\"notification-title\">{{ notification.title }}</div>\n            <div class=\"notification-message\">{{ notification.message }}</div>\n            <div class=\"notification-meta\">\n              <span class=\"app-name\">{{ notification.sourceAppName }}</span>\n              <span class=\"time\">{{ dateLabels().get(notification.id) }}</span>\n            </div>\n          </div>\n          @if (!notification.isRead) {\n            <button class=\"icon-btn read-btn\" (click)=\"markAsRead(notification.id, $event)\" title=\"Mark as read\" aria-label=\"Mark as read\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n            </button>\n          }\n          @if (notification.isRead) {\n            <button class=\"icon-btn delete-btn\" (click)=\"delete(notification.id, $event)\" title=\"Delete\" aria-label=\"Delete notification\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n              </svg>\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      <div class=\"empty-state\">\n        <svg class=\"empty-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n          <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n        </svg>\n        <p>No {{ activeTab() }} notifications</p>\n      </div>\n    }\n  </div>\n\n  <!-- Footer Actions -->\n  @if (currentNotifications().length > 0) {\n    <div class=\"panel-footer\">\n      @if (activeTab() === 'unread') {\n        <div class=\"footer-actions\">\n          @if (unreadNotifications().length > 0) {\n            <button class=\"action-btn\" (click)=\"markAllAsRead()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n              Mark all read\n            </button>\n            <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllUnread()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n              Delete all\n            </button>\n          }\n        </div>\n      }\n      @if (activeTab() === 'read' && readNotifications().length > 0) {\n        <button class=\"action-btn delete-all-btn\" (click)=\"deleteAllRead()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/></svg>\n          Delete all\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<!-- Details Modal -->\n@if (selectedNotification()) {\n  <div class=\"modal-overlay\" (click)=\"closeDetails()\">\n    <div class=\"modal-container\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\"\n        [class.modal-type-info]=\"typeOf(selectedNotification()!) === 'Info'\"\n        [class.modal-type-success]=\"typeOf(selectedNotification()!) === 'Success'\"\n        [class.modal-type-warning]=\"typeOf(selectedNotification()!) === 'Warning'\"\n        [class.modal-type-error]=\"typeOf(selectedNotification()!) === 'Error'\">\n        <div class=\"modal-header-left\">\n          <div class=\"modal-type-icon\">\n            @if (typeOf(selectedNotification()!) === 'Info') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Success') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/><polyline points=\"22 4 12 14.01 9 11.01\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Warning') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              </svg>\n            }\n            @if (typeOf(selectedNotification()!) === 'Error') {\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\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n              </svg>\n            }\n          </div>\n          <h3>{{ selectedNotification()!.title }}</h3>\n        </div>\n        <button class=\"close-btn\" (click)=\"closeDetails()\" title=\"Close\" aria-label=\"Close notification detail\">\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.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 class=\"modal-meta\">\n        <span class=\"app-name\">{{ selectedNotification()!.sourceAppName }}</span>\n        <span class=\"time\">{{ selectedNotificationDate() }}</span>\n      </div>\n      <div class=\"modal-body\" [innerHTML]=\"selectedNotificationHtml()\"></div>\n      <div class=\"modal-footer\">\n        @if (selectedNotification()?.url?.trim()) {\n          <button class=\"action-btn see-details-btn\" (click)=\"openUrl()\">See Details</button>\n        }\n        <button class=\"action-btn\" (click)=\"closeDetails()\">Close</button>\n      </div>\n    </div>\n  </div>\n}\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{display:block;position:relative;--primary: #1976d2;--primary-hover: #1565c0;--success: #43a047;--error: #f44336;--error-hover: #d32f2f;--info-color: #2196f3;--info-bg: rgba(33, 150, 243, .1);--success-bg: rgba(67, 160, 71, .1);--warning-color: #f57c00;--warning-bg: rgba(245, 124, 0, .1);--error-bg: rgba(244, 67, 54, .1);--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f0f4ff;--bg-unread: rgba(25, 118, 210, .06);--border-color: #e0e0e0;--border-light: #eeeeee;--shadow: rgba(0, 0, 0, .15)}.tab-btn:not(.active) .tab-badge{background:var(--error)}.read-badge{background:var(--text-muted)}.notification-panel{position:fixed;top:0;right:-360px;width:360px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.notification-panel.open{right:var(--ma-ai-panel-width, 0px)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-light);cursor:pointer;background:var(--bg-primary);transition:background-color .15s;position:relative}.notification-item:hover{background:var(--bg-hover)}.notification-item.unread{background:var(--bg-unread)}.notif-accent{width:3px;align-self:stretch;flex-shrink:0;background:transparent;border-radius:0 2px 2px 0;opacity:.3}.notification-item.unread .notif-accent{opacity:1}.notif-accent.type-info{background:var(--info-color)}.notif-accent.type-success{background:var(--success)}.notif-accent.type-warning{background:var(--warning-color)}.notif-accent.type-error{background:var(--error)}.notif-type-icon{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;align-self:center;margin-left:10px}.notif-type-icon.type-info{color:var(--info-color);background:var(--info-bg)}.notif-type-icon.type-success{color:var(--success);background:var(--success-bg)}.notif-type-icon.type-warning{color:var(--warning-color);background:var(--warning-bg)}.notif-type-icon.type-error{color:var(--error);background:var(--error-bg)}.notification-content{flex:1;min-width:0;padding:12px 8px 12px 12px}.notification-title{font-weight:600;color:var(--text-primary);font-size:13.5px;margin-bottom:3px;line-height:1.35}.notification-message{color:var(--text-secondary);font-size:12px;line-height:1.45;margin-bottom:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.app-name{font-weight:600;color:var(--primary)}.icon-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-right:8px;transition:color .15s,background-color .15s;color:var(--text-muted)}.read-btn:hover{color:var(--success);background:#43a0471a}.delete-btn:hover{color:var(--error);background:#f443361a}.panel-footer{padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;transition:background-color .18s,transform .12s}.action-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.delete-all-btn{background:var(--error)}.delete-all-btn:hover{background:var(--error-hover)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1060;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-container{background:var(--bg-primary);border-radius:14px;width:92%;max-width:860px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000040;animation:modal-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);border-radius:14px 14px 0 0;border-top:3px solid transparent}.modal-header.modal-type-info{border-top-color:var(--info-color)}.modal-header.modal-type-success{border-top-color:var(--success)}.modal-header.modal-type-warning{border-top-color:var(--warning-color)}.modal-header.modal-type-error{border-top-color:var(--error)}.modal-header-left{display:flex;align-items:center;gap:10px;min-width:0}.modal-type-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}.modal-type-info .modal-type-icon{color:var(--info-color);background:var(--info-bg)}.modal-type-success .modal-type-icon{color:var(--success);background:var(--success-bg)}.modal-type-warning .modal-type-icon{color:var(--warning-color);background:var(--warning-bg)}.modal-type-error .modal-type-icon{color:var(--error);background:var(--error-bg)}.modal-header h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{display:flex;justify-content:space-between;padding:8px 20px;font-size:11.5px;color:var(--text-muted);border-bottom:1px solid var(--border-light)}.modal-body{padding:20px;overflow-y:auto;flex:1;color:var(--text-primary);font-size:14px;line-height:1.65}.modal-footer{padding:12px 20px;border-top:1px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 14px 14px;display:flex;justify-content:flex-end;gap:8px}.modal-footer .action-btn{width:auto;padding:8px 24px}.modal-footer .see-details-btn{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-color)}.modal-footer .see-details-btn:hover{opacity:.85}@media(max-width:600px){.notification-panel{width:100%;right:-100%}.modal-container{width:95%;max-height:90vh}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { notificationRead: [{ type: i0.Output, args: ["notificationRead"] }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MaApprovalService {
+    apiBase = '';
+    http;
+    config = null;
+    constructor() { }
+    init(config, httpClient) {
+        this.config = config;
+        this.http = httpClient;
+        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
+    }
+    get opts() {
+        return { withCredentials: this.config?.withCredentials ?? true };
+    }
+    // ====================== Dashboard ======================
+    getDashboard() {
+        return this.http.get(`${this.apiBase}/approval/dashboard`, this.opts);
+    }
+    // ====================== Pending & My Requests ======================
+    getPendingApprovals(page = 1, pageSize = 20) {
+        return this.http.get(`${this.apiBase}/approval/pending?page=${page}&pageSize=${pageSize}`, this.opts);
+    }
+    getMyRequests(page = 1, pageSize = 20, status) {
+        let url = `${this.apiBase}/approval/my-requests?page=${page}&pageSize=${pageSize}`;
+        if (status !== undefined)
+            url += `&status=${status}`;
+        return this.http.get(url, this.opts);
+    }
+    // ====================== Document ======================
+    getDocument(id) {
+        return this.http.get(`${this.apiBase}/approval/documents/${id}`, this.opts);
+    }
+    getDocumentHistory(id) {
+        return this.http.get(`${this.apiBase}/approval/documents/${id}/history`, this.opts);
+    }
+    getDocumentContentUrl(id) {
+        return `${this.apiBase}/approval/documents/${id}/content`;
+    }
+    getDocumentThumbnailUrl(id) {
+        return `${this.apiBase}/approval/documents/${id}/thumbnail`;
+    }
+    // ====================== Actions ======================
+    approve(documentId, comment) {
+        const body = { comment };
+        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/approve`, body, this.opts);
+    }
+    reject(documentId, comment) {
+        const body = { comment };
+        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/reject`, body, this.opts);
+    }
+    delegate(documentId, toUserId, reason) {
+        const body = { toUserId, reason };
+        return this.http.post(`${this.apiBase}/approval/documents/${documentId}/delegate`, body, this.opts);
+    }
+    cancel(documentId, reason) {
+        let url = `${this.apiBase}/approval/documents/${documentId}`;
+        if (reason)
+            url += `?reason=${encodeURIComponent(reason)}`;
+        return this.http.delete(url, this.opts);
+    }
+    // ====================== Templates ======================
+    getTemplates(appId) {
+        let url = `${this.apiBase}/approval/templates`;
+        if (appId)
+            url += `?appId=${encodeURIComponent(appId)}`;
+        return this.http.get(url, this.opts);
+    }
+    getTemplate(id) {
+        return this.http.get(`${this.apiBase}/approval/templates/${id}`, this.opts);
+    }
+    createTemplate(request) {
+        return this.http.post(`${this.apiBase}/approval/templates`, request, this.opts);
+    }
+    updateTemplate(id, request) {
+        return this.http.put(`${this.apiBase}/approval/templates/${id}`, request, this.opts);
+    }
+    deleteTemplate(id) {
+        return this.http.delete(`${this.apiBase}/approval/templates/${id}`, this.opts);
+    }
+    previewRole(orgCode, level) {
+        return this.http.get(`${this.apiBase}/approval/roles/preview?orgCode=${encodeURIComponent(orgCode)}&level=${encodeURIComponent(level)}`, this.opts);
+    }
+    // ====================== Create (used by ma-arv-container) ======================
+    createApproval(request) {
+        return this.http.post(`${this.apiBase}/approval/documents`, request, this.opts);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// ====================== Enums ======================
+var ApprovalStepMode;
+(function (ApprovalStepMode) {
+    ApprovalStepMode[ApprovalStepMode["Sequential"] = 0] = "Sequential";
+    ApprovalStepMode[ApprovalStepMode["Parallel"] = 1] = "Parallel";
+})(ApprovalStepMode || (ApprovalStepMode = {}));
+var ApprovalDocumentStatus;
+(function (ApprovalDocumentStatus) {
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Draft"] = 0] = "Draft";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Pending"] = 1] = "Pending";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Approved"] = 2] = "Approved";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Rejected"] = 3] = "Rejected";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Cancelled"] = 4] = "Cancelled";
+    ApprovalDocumentStatus[ApprovalDocumentStatus["Expired"] = 5] = "Expired";
+})(ApprovalDocumentStatus || (ApprovalDocumentStatus = {}));
+var ApprovalStepStatus;
+(function (ApprovalStepStatus) {
+    ApprovalStepStatus[ApprovalStepStatus["Waiting"] = 0] = "Waiting";
+    ApprovalStepStatus[ApprovalStepStatus["Active"] = 1] = "Active";
+    ApprovalStepStatus[ApprovalStepStatus["Approved"] = 2] = "Approved";
+    ApprovalStepStatus[ApprovalStepStatus["Rejected"] = 3] = "Rejected";
+    ApprovalStepStatus[ApprovalStepStatus["Delegated"] = 4] = "Delegated";
+    ApprovalStepStatus[ApprovalStepStatus["Expired"] = 5] = "Expired";
+    ApprovalStepStatus[ApprovalStepStatus["Skipped"] = 6] = "Skipped";
+})(ApprovalStepStatus || (ApprovalStepStatus = {}));
+var ApprovalActionType;
+(function (ApprovalActionType) {
+    ApprovalActionType[ApprovalActionType["Created"] = 0] = "Created";
+    ApprovalActionType[ApprovalActionType["Submitted"] = 1] = "Submitted";
+    ApprovalActionType[ApprovalActionType["Approved"] = 2] = "Approved";
+    ApprovalActionType[ApprovalActionType["Rejected"] = 3] = "Rejected";
+    ApprovalActionType[ApprovalActionType["Delegated"] = 4] = "Delegated";
+    ApprovalActionType[ApprovalActionType["Cancelled"] = 5] = "Cancelled";
+    ApprovalActionType[ApprovalActionType["Commented"] = 6] = "Commented";
+    ApprovalActionType[ApprovalActionType["Expired"] = 7] = "Expired";
+    ApprovalActionType[ApprovalActionType["StepAdvanced"] = 8] = "StepAdvanced";
+})(ApprovalActionType || (ApprovalActionType = {}));
+
+class MaApprovalPanelComponent {
+    approvalActioned = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    activeTab = signal('processing', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    processingItems = signal([], ...(ngDevMode ? [{ debugName: "processingItems" }] : /* istanbul ignore next */ []));
+    approvedItems = signal([], ...(ngDevMode ? [{ debugName: "approvedItems" }] : /* istanbul ignore next */ []));
+    rejectedItems = signal([], ...(ngDevMode ? [{ debugName: "rejectedItems" }] : /* istanbul ignore next */ []));
+    mesAuth = inject(MesAuthService);
+    http = inject(HttpClient);
+    router = inject(Router);
+    host = inject(ElementRef);
+    approvalSvc = null;
+    constructor() {
+        const config = this.mesAuth.getConfig();
+        if (config) {
+            this.approvalSvc = new MaApprovalService();
+            this.approvalSvc.init(config, this.http);
         }
+        const approvalEvent = toSignal(this.mesAuth.approvalEvents$);
+        effect(() => {
+            approvalEvent(); // track SignalR approval events
+            if (this.isOpen())
+                this.loadCurrentTab();
+        });
+        // Close when the user clicks outside the panel (mirrors the old backdrop UX
+        // now that the backdrop has been removed).
+        effect((onCleanup) => {
+            if (!this.isOpen())
+                return;
+            const onDocClick = (ev) => {
+                const panel = this.host.nativeElement.querySelector('.approval-panel');
+                if (panel && !panel.contains(ev.target))
+                    this.close();
+            };
+            // Defer to skip the same click that opened the panel.
+            const tid = setTimeout(() => document.addEventListener('mousedown', onDocClick), 0);
+            onCleanup(() => {
+                clearTimeout(tid);
+                document.removeEventListener('mousedown', onDocClick);
+            });
+        });
     }
-    async handleEvent(ev) {
-        switch (ev.type) {
-            case 'session':
-                this.sessionId = ev.sessionId;
-                break;
-            case 'token':
-                this.appendToken(ev.text);
-                break;
-            case 'tool_call_started':
-                this.appendToolEvent({
-                    id: ev.id,
-                    name: ev.name,
-                    side: ev.side,
-                    status: 'running',
-                    args: ev.args,
-                    readOnly: ev.readOnly
-                });
-                break;
-            case 'tool_call_completed':
-                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);
-                }
-                else {
-                    this.pendingApproval.set({ callId: ev.id, name: ev.name, args: ev.args, side: 'client' });
-                }
-                break;
-            case 'error':
-                this.lastError.set(ev.message);
-                this.finalizeAssistant(`[error: ${ev.message}]`);
-                break;
-            case 'done':
-                this.finalizeAssistant();
-                break;
-        }
+    open() {
+        this.isOpen.set(true);
+        this.loadAllTabs();
     }
-    async executeClientTool(callId, name, args) {
-        this.markToolStatus(callId, 'running');
-        const { ok, result } = await this.tools.runTool(name, args);
-        this.markToolStatus(callId, ok ? 'ok' : 'error', this.summarize(result));
-        await this.continueWithToolResult(callId, ok, result);
+    close() {
+        this.isOpen.set(false);
     }
-    async continueWithToolResult(callId, ok, result) {
-        // Open a new SSE stream that delivers the tool result.
-        await this.runStream({ toolResult: { callId, ok, result } });
+    toggle() {
+        if (this.isOpen())
+            this.close();
+        else
+            this.open();
     }
-    // ── bubble helpers ────────────────────────────────────────────────────────
-    appendBubble(b) {
-        this.messages.update(arr => [...arr, b]);
+    switchTab(tab) {
+        this.activeTab.set(tab);
+        this.loadCurrentTab();
     }
-    appendToken(text) {
-        if (!this.currentAssistantId) {
-            const id = this.uid();
-            this.currentAssistantId = id;
-            this.appendBubble({ id, role: 'assistant', text, pending: true, toolEvents: [] });
+    loadAllTabs() {
+        this.loading.set(true);
+        if (!this.approvalSvc) {
+            this.loading.set(false);
             return;
         }
-        const id = this.currentAssistantId;
-        this.messages.update(arr => arr.map(m => m.id === id ? { ...m, text: m.text + text } : m));
+        let pending = 3;
+        const done = () => { if (--pending === 0)
+            this.loading.set(false); };
+        this.approvalSvc.getPendingApprovals(1, 100).subscribe({
+            next: r => { this.processingItems.set(r.items); done(); },
+            error: () => done()
+        });
+        this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Approved).subscribe({
+            next: r => { this.approvedItems.set(r.items); done(); },
+            error: () => done()
+        });
+        this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Rejected).subscribe({
+            next: r => { this.rejectedItems.set(r.items); done(); },
+            error: () => done()
+        });
     }
-    appendToolEvent(ev) {
-        if (!this.currentAssistantId) {
-            const id = this.uid();
-            this.currentAssistantId = id;
-            this.appendBubble({ id, role: 'assistant', text: '', pending: true, toolEvents: [ev] });
+    loadCurrentTab() {
+        if (!this.approvalSvc)
             return;
+        if (this.activeTab() === 'processing') {
+            this.approvalSvc.getPendingApprovals(1, 100).subscribe({
+                next: r => this.processingItems.set(r.items),
+                error: () => { }
+            });
+        }
+        else if (this.activeTab() === 'approved') {
+            this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Approved).subscribe({
+                next: r => this.approvedItems.set(r.items),
+                error: () => { }
+            });
+        }
+        else {
+            this.approvalSvc.getMyRequests(1, 10, ApprovalDocumentStatus.Rejected).subscribe({
+                next: r => this.rejectedItems.set(r.items),
+                error: () => { }
+            });
         }
-        const id = this.currentAssistantId;
-        this.messages.update(arr => arr.map(m => m.id === id
-            ? { ...m, toolEvents: [...(m.toolEvents ?? []), ev] }
-            : m));
-    }
-    markToolStatus(callId, status, summary) {
-        this.messages.update(arr => arr.map(m => ({
-            ...m,
-            toolEvents: m.toolEvents?.map(t => t.id === callId ? { ...t, status, summary: summary ?? t.summary } : t)
-        })));
-    }
-    finalizeAssistant(extra) {
-        const id = this.currentAssistantId;
-        if (!id)
-            return;
-        this.messages.update(arr => arr.map(m => m.id === id
-            ? { ...m, pending: false, text: extra ? (m.text + (m.text ? '\n' : '') + extra) : m.text }
-            : m));
-        this.currentAssistantId = null;
-    }
-    verbOf(name) {
-        return name.split('_')[0] ?? name;
     }
-    summarize(s) {
-        const flat = s.replace(/\s+/g, ' ').trim();
-        return flat.length <= 80 ? flat : flat.slice(0, 80) + '…';
+    navigateToDetail(id) {
+        this.close();
+        this.router.navigate(['/auth/approval/detail', id]);
+        this.approvalActioned.emit();
     }
-    uid() {
-        return Math.random().toString(36).slice(2) + Date.now().toString(36);
+    showMore(status) {
+        this.close();
+        this.router.navigate(['/auth/approval/my-requests'], { queryParams: { status } });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MaApprovalPanelComponent, isStandalone: true, selector: "ma-approval-panel", outputs: { approvalActioned: "approvalActioned" }, ngImport: i0, template: "<div class=\"approval-panel\" [class.open]=\"isOpen()\">\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\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\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\" 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\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems().length > 0) {\n        <span class=\"tab-badge\">{{ processingItems().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading()) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading() && activeTab() === 'processing') {\n      @if (processingItems().length === 0) {\n        <div class=\"empty-state\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.4\"><path d=\"M9 11l3 3L22 4\"/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/></svg>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems(); track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading() && activeTab() === 'approved') {\n      @if (approvedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems(); track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading() && activeTab() === 'rejected') {\n      @if (rejectedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems(); track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\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: #90caf9;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #1565c0;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-hover: #e8eaf6;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.approval-panel{position:fixed;top:0;right:-380px;width:380px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.approval-panel.open{right:var(--ma-ai-panel-width, 0px)}.panel-content{flex:1;overflow-y:auto;padding:8px 0}.approval-item{padding:14px 18px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.approval-item:hover{background:var(--bg-hover)}.approval-item:last-child{border-bottom:none}.item-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:flex;gap:4px;flex-wrap:wrap}.item-footer{display:flex;align-items:center;gap:8px}.item-time{font-size:11px;color:var(--text-muted);margin-right:auto}.item-link{font-size:12px;color:var(--primary);font-weight:500}.status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.3px}.approved-badge{background:#66bb6a26;color:var(--success)}.rejected-badge{background:#ef53501f;color:var(--error)}.show-more{text-align:center;padding:14px;font-size:13px;color:var(--primary);cursor:pointer;font-weight:500}.show-more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaApprovalPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-approval-panel', imports: [DatePipe], template: "<div class=\"approval-panel\" [class.open]=\"isOpen()\">\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\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\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\" 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\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems().length > 0) {\n        <span class=\"tab-badge\">{{ processingItems().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading()) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading() && activeTab() === 'processing') {\n      @if (processingItems().length === 0) {\n        <div class=\"empty-state\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.4\"><path d=\"M9 11l3 3L22 4\"/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/></svg>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems(); track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading() && activeTab() === 'approved') {\n      @if (approvedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems(); track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading() && activeTab() === 'rejected') {\n      @if (rejectedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems(); track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\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: #90caf9;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #1565c0;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-hover: #e8eaf6;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.approval-panel{position:fixed;top:0;right:-380px;width:380px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.approval-panel.open{right:var(--ma-ai-panel-width, 0px)}.panel-content{flex:1;overflow-y:auto;padding:8px 0}.approval-item{padding:14px 18px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.approval-item:hover{background:var(--bg-hover)}.approval-item:last-child{border-bottom:none}.item-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:flex;gap:4px;flex-wrap:wrap}.item-footer{display:flex;align-items:center;gap:8px}.item-time{font-size:11px;color:var(--text-muted);margin-right:auto}.item-link{font-size:12px;color:var(--primary);font-weight:500}.status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.3px}.approved-badge{background:#66bb6a26;color:var(--success)}.rejected-badge{background:#ef53501f;color:var(--error)}.show-more{text-align:center;padding:14px;font-size:13px;color:var(--primary);cursor:pointer;font-weight:500}.show-more:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { approvalActioned: [{ type: i0.Output, args: ["approvalActioned"] }] } });
 
 /**
  * Tiny hand-rolled GitHub-flavoured Markdown renderer for AI chat bubbles.
@@ -2064,6 +2450,153 @@ function sanitizeUrl(url) {
     return null;
 }
 
+/**
+ * Drop-down list of the signed-in user's recent AI conversations.
+ * Lives inside the chat panel header (toggled by the History button).
+ */
+class MaAiHistoryListComponent {
+    ai = inject(MaAiService);
+    conversations = signal([], ...(ngDevMode ? [{ debugName: "conversations" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Emitted after the user picks a row and the panel finishes hydrating. */
+    resumed = output();
+    ngOnInit() {
+        this.refresh();
+    }
+    async refresh() {
+        this.loading.set(true);
+        try {
+            const list = await this.ai.listConversations(50);
+            this.conversations.set(list ?? []);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async pick(c) {
+        const ok = await this.ai.resumeConversation(c.id);
+        if (ok)
+            this.resumed.emit(c.id);
+    }
+    async remove(c) {
+        const ok = await this.ai.deleteConversation(c.id);
+        if (ok) {
+            this.conversations.update(arr => arr.filter(x => x.id !== c.id));
+        }
+    }
+    relative(iso) {
+        const t = Date.parse(iso);
+        if (!isFinite(t))
+            return '';
+        const ms = Date.now() - t;
+        const m = Math.floor(ms / 60_000);
+        if (m < 1)
+            return 'just now';
+        if (m < 60)
+            return `${m}m ago`;
+        const h = Math.floor(m / 60);
+        if (h < 24)
+            return `${h}h ago`;
+        const d = Math.floor(h / 24);
+        if (d < 7)
+            return `${d}d ago`;
+        try {
+            return new Date(t).toLocaleDateString();
+        }
+        catch {
+            return '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiHistoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MaAiHistoryListComponent, isStandalone: true, selector: "ma-ai-history-list", outputs: { resumed: "resumed" }, ngImport: i0, template: `
+    <div class="history-root">
+      <div class="history-head">
+        <span class="history-title">Recent conversations</span>
+        <button class="history-refresh" (click)="refresh()" title="Refresh" aria-label="Refresh">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+               fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/>
+          </svg>
+        </button>
+      </div>
+
+      @if (loading()) {
+        <div class="history-empty">Loading…</div>
+      } @else if (conversations().length === 0) {
+        <div class="history-empty">No conversations yet.</div>
+      } @else {
+        <ul class="history-list">
+          @for (c of conversations(); track c.id) {
+            <li class="history-row">
+              <button class="history-pick" (click)="pick(c)" [title]="c.title ?? '(untitled)'">
+                <span class="history-row-title">{{ c.title || '(untitled)' }}</span>
+                <span class="history-row-meta">
+                  <span>{{ relative(c.updatedAt) }}</span>
+                  @if (c.appName) { <span>· {{ c.appName }}</span> }
+                  <span>· {{ c.messageCount }} msg</span>
+                </span>
+              </button>
+              <button class="history-del" (click)="remove(c)" title="Delete" aria-label="Delete">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="3 6 5 6 21 6"/>
+                  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+                  <path d="M10 11v6"/><path d="M14 11v6"/>
+                </svg>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.history-root{border-bottom:1px solid var(--border-color, #383850);background:var(--bg-secondary, #27273a);max-height:280px;overflow-y:auto}.history-head{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;font-size:12px;color:var(--text-muted, #9e9e9e);text-transform:uppercase;letter-spacing:.04em}.history-refresh{background:none;border:none;cursor:pointer;color:var(--text-muted, #9e9e9e);padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center}.history-refresh:hover{color:var(--text-primary, #e0e0e0);background:var(--bg-hover, #2a2d4a)}.history-empty{padding:12px 14px;font-size:12.5px;color:var(--text-muted, #9e9e9e)}.history-list{list-style:none;margin:0;padding:0}.history-row{display:flex;align-items:stretch;border-top:1px solid var(--border-color, #383850)}.history-pick{flex:1;background:none;border:none;cursor:pointer;text-align:left;padding:8px 14px;color:var(--text-primary, #e0e0e0);display:flex;flex-direction:column;gap:2px;min-width:0}.history-pick:hover{background:var(--bg-hover, #2a2d4a)}.history-row-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-row-meta{font-size:11px;color:var(--text-muted, #9e9e9e);display:flex;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-del{background:none;border:none;cursor:pointer;color:var(--text-muted, #9e9e9e);padding:0 12px;display:flex;align-items:center;justify-content:center}.history-del:hover{color:var(--error, #ef5350);background:var(--bg-hover, #2a2d4a)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiHistoryListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-ai-history-list', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="history-root">
+      <div class="history-head">
+        <span class="history-title">Recent conversations</span>
+        <button class="history-refresh" (click)="refresh()" title="Refresh" aria-label="Refresh">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+               fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/>
+          </svg>
+        </button>
+      </div>
+
+      @if (loading()) {
+        <div class="history-empty">Loading…</div>
+      } @else if (conversations().length === 0) {
+        <div class="history-empty">No conversations yet.</div>
+      } @else {
+        <ul class="history-list">
+          @for (c of conversations(); track c.id) {
+            <li class="history-row">
+              <button class="history-pick" (click)="pick(c)" [title]="c.title ?? '(untitled)'">
+                <span class="history-row-title">{{ c.title || '(untitled)' }}</span>
+                <span class="history-row-meta">
+                  <span>{{ relative(c.updatedAt) }}</span>
+                  @if (c.appName) { <span>· {{ c.appName }}</span> }
+                  <span>· {{ c.messageCount }} msg</span>
+                </span>
+              </button>
+              <button class="history-del" (click)="remove(c)" title="Delete" aria-label="Delete">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="3 6 5 6 21 6"/>
+                  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
+                  <path d="M10 11v6"/><path d="M14 11v6"/>
+                </svg>
+              </button>
+            </li>
+          }
+        </ul>
+      }
+    </div>
+  `, styles: [":host{display:block}.history-root{border-bottom:1px solid var(--border-color, #383850);background:var(--bg-secondary, #27273a);max-height:280px;overflow-y:auto}.history-head{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;font-size:12px;color:var(--text-muted, #9e9e9e);text-transform:uppercase;letter-spacing:.04em}.history-refresh{background:none;border:none;cursor:pointer;color:var(--text-muted, #9e9e9e);padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center}.history-refresh:hover{color:var(--text-primary, #e0e0e0);background:var(--bg-hover, #2a2d4a)}.history-empty{padding:12px 14px;font-size:12.5px;color:var(--text-muted, #9e9e9e)}.history-list{list-style:none;margin:0;padding:0}.history-row{display:flex;align-items:stretch;border-top:1px solid var(--border-color, #383850)}.history-pick{flex:1;background:none;border:none;cursor:pointer;text-align:left;padding:8px 14px;color:var(--text-primary, #e0e0e0);display:flex;flex-direction:column;gap:2px;min-width:0}.history-pick:hover{background:var(--bg-hover, #2a2d4a)}.history-row-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-row-meta{font-size:11px;color:var(--text-muted, #9e9e9e);display:flex;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-del{background:none;border:none;cursor:pointer;color:var(--text-muted, #9e9e9e);padding:0 12px;display:flex;align-items:center;justify-content:center}.history-del:hover{color:var(--error, #ef5350);background:var(--bg-hover, #2a2d4a)}\n"] }]
+        }], propDecorators: { resumed: [{ type: i0.Output, args: ["resumed"] }] } });
+
 const STORAGE_KEY = 'ma-ai-panel-width';
 const MIN_WIDTH = 320;
 const MAX_WIDTH = 800;
@@ -2107,6 +2640,7 @@ class MaAiChatPanelComponent {
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     width = signal(this.loadWidth(), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    historyOpen = signal(false, ...(ngDevMode ? [{ debugName: "historyOpen" }] : /* istanbul ignore next */ []));
     ai = inject(MaAiService);
     router = inject(Router, { optional: true });
     themeService = inject(ThemeService);
@@ -2182,6 +2716,14 @@ class MaAiChatPanelComponent {
     }
     newConversation() {
         this.ai.resetSession();
+        this.historyOpen.set(false);
+    }
+    toggleHistory() {
+        this.historyOpen.update(v => !v);
+    }
+    onHistoryResumed(_id) {
+        this.historyOpen.set(false);
+        queueMicrotask(() => this.textArea()?.nativeElement.focus());
     }
     send() {
         const text = this.draft().trim();
@@ -2256,11 +2798,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=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>\n        </svg>\n      </button>\n      <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation -->\n  <div class=\"panel-content\" #scrollContainer>\n    @if (!hasMessages()) {\n      <div class=\"empty-state\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.5\">\n          <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        </svg>\n        <p>Ask anything about your account, approvals, notifications, or how to use the app.</p>\n        <div class=\"quick-prompts\">\n          @for (q of quickPrompts(); track q) {\n            <button class=\"quick-prompt\" (click)=\"draft.set(q)\">{{ q }}</button>\n          }\n        </div>\n      </div>\n    }\n\n    @for (m of messages(); track m.id) {\n      <div class=\"bubble\" [class.user]=\"m.role === 'user'\" [class.assistant]=\"m.role === 'assistant'\">\n        @if (m.role === 'assistant' && m.toolEvents && m.toolEvents.length > 0) {\n          <div class=\"tool-strip\">\n            @for (t of m.toolEvents; track t.id) {\n              <div class=\"tool-chip\" [class.ok]=\"t.status === 'ok'\" [class.err]=\"t.status === 'error'\"\n                   [class.running]=\"t.status === 'running'\" [class.await]=\"t.status === 'awaiting-approval'\"\n                   [class.declined]=\"t.status === 'declined'\"\n                   [title]=\"t.summary ?? ''\">\n                <span class=\"dot\"></span>\n                <span class=\"tool-name\">{{ t.side === 'server' ? '\u2699' : '\u2318' }} {{ t.name }}</span>\n                @if (t.status === 'running') { <span class=\"muted\">\u2026</span> }\n                @if (t.status === 'ok' && t.summary) { <span class=\"muted\">\u00B7 {{ t.summary }}</span> }\n                @if (t.status === 'error') { <span class=\"muted\">\u00B7 failed</span> }\n                @if (t.status === 'awaiting-approval') { <span class=\"muted\">\u00B7 awaiting approval</span> }\n                @if (t.status === 'declined') { <span class=\"muted\">\u00B7 declined</span> }\n              </div>\n            }\n          </div>\n        }\n        @if (m.text) {\n          @if (m.role === 'assistant') {\n            <div class=\"bubble-text md-body\" [innerHTML]=\"m.text | maAiMarkdown\"></div>\n          } @else {\n            <div class=\"bubble-text\">{{ m.text }}</div>\n          }\n        }\n        @if (m.pending && !m.text) {\n          <div class=\"thinking\"><span class=\"spinner-small\"></span> Thinking\u2026</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pending approval card -->\n  @if (pendingApproval(); as p) {\n    <div class=\"approval-card\">\n      <div class=\"approval-card-head\">\n        <strong>Approve action?</strong>\n        <code class=\"tool-name\">{{ p.name }}</code>\n      </div>\n      @if (p.args && (p.args | json) !== '{}') {\n        <pre class=\"approval-args\">{{ p.args | json }}</pre>\n      }\n      <div class=\"approval-actions\">\n        <button class=\"btn primary\" (click)=\"approve()\">Approve</button>\n        <button class=\"btn\" (click)=\"alwaysApprove()\">Always</button>\n        <button class=\"btn danger\" (click)=\"decline()\">Decline</button>\n      </div>\n    </div>\n  }\n\n  <!-- Composer -->\n  <div class=\"composer\">\n    @if (lastError()) {\n      <div class=\"composer-error\">{{ lastError() }}</div>\n    }\n    <div class=\"composer-row\">\n      <textarea #textArea\n                rows=\"1\"\n                placeholder=\"Ask the AI\u2026\"\n                [value]=\"draft()\"\n                (input)=\"onTextareaInput($event)\"\n                (keydown)=\"onTextareaKey($event)\"\n                [disabled]=\"streaming()\"></textarea>\n      @if (streaming()) {\n        <button class=\"send-btn cancel\" (click)=\"cancel()\" title=\"Cancel\" aria-label=\"Cancel\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\"/></svg>\n        </button>\n      } @else {\n        <button class=\"send-btn\" (click)=\"send()\" [disabled]=\"!draft().trim()\" title=\"Send\" aria-label=\"Send\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"/></svg>\n        </button>\n      }\n    </div>\n  </div>\n\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: "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  <!-- 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" }] });
 }
 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], template: "<div class=\"ai-panel\" [class.open]=\"isOpen()\" [style.width.px]=\"width()\">\n\n  <!-- Resize handle (left edge) -->\n  <div class=\"ai-resize-handle\"\n       (pointerdown)=\"startResize($event)\"\n       (pointermove)=\"onResizeMove($event)\"\n       (pointerup)=\"endResize($event)\"\n       (pointercancel)=\"endResize($event)\"\n       aria-label=\"Resize panel\"\n       title=\"Drag to resize\"></div>\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"\n           fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        <path d=\"M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z\"/>\n      </svg>\n      <h3>AI Assistant</h3>\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"icon-btn\" (click)=\"newConversation()\" title=\"New conversation\" aria-label=\"New conversation\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>\n        </svg>\n      </button>\n      <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation -->\n  <div class=\"panel-content\" #scrollContainer>\n    @if (!hasMessages()) {\n      <div class=\"empty-state\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.5\">\n          <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        </svg>\n        <p>Ask anything about your account, approvals, notifications, or how to use the app.</p>\n        <div class=\"quick-prompts\">\n          @for (q of quickPrompts(); track q) {\n            <button class=\"quick-prompt\" (click)=\"draft.set(q)\">{{ q }}</button>\n          }\n        </div>\n      </div>\n    }\n\n    @for (m of messages(); track m.id) {\n      <div class=\"bubble\" [class.user]=\"m.role === 'user'\" [class.assistant]=\"m.role === 'assistant'\">\n        @if (m.role === 'assistant' && m.toolEvents && m.toolEvents.length > 0) {\n          <div class=\"tool-strip\">\n            @for (t of m.toolEvents; track t.id) {\n              <div class=\"tool-chip\" [class.ok]=\"t.status === 'ok'\" [class.err]=\"t.status === 'error'\"\n                   [class.running]=\"t.status === 'running'\" [class.await]=\"t.status === 'awaiting-approval'\"\n                   [class.declined]=\"t.status === 'declined'\"\n                   [title]=\"t.summary ?? ''\">\n                <span class=\"dot\"></span>\n                <span class=\"tool-name\">{{ t.side === 'server' ? '\u2699' : '\u2318' }} {{ t.name }}</span>\n                @if (t.status === 'running') { <span class=\"muted\">\u2026</span> }\n                @if (t.status === 'ok' && t.summary) { <span class=\"muted\">\u00B7 {{ t.summary }}</span> }\n                @if (t.status === 'error') { <span class=\"muted\">\u00B7 failed</span> }\n                @if (t.status === 'awaiting-approval') { <span class=\"muted\">\u00B7 awaiting approval</span> }\n                @if (t.status === 'declined') { <span class=\"muted\">\u00B7 declined</span> }\n              </div>\n            }\n          </div>\n        }\n        @if (m.text) {\n          @if (m.role === 'assistant') {\n            <div class=\"bubble-text md-body\" [innerHTML]=\"m.text | maAiMarkdown\"></div>\n          } @else {\n            <div class=\"bubble-text\">{{ m.text }}</div>\n          }\n        }\n        @if (m.pending && !m.text) {\n          <div class=\"thinking\"><span class=\"spinner-small\"></span> Thinking\u2026</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pending approval card -->\n  @if (pendingApproval(); as p) {\n    <div class=\"approval-card\">\n      <div class=\"approval-card-head\">\n        <strong>Approve action?</strong>\n        <code class=\"tool-name\">{{ p.name }}</code>\n      </div>\n      @if (p.args && (p.args | json) !== '{}') {\n        <pre class=\"approval-args\">{{ p.args | json }}</pre>\n      }\n      <div class=\"approval-actions\">\n        <button class=\"btn primary\" (click)=\"approve()\">Approve</button>\n        <button class=\"btn\" (click)=\"alwaysApprove()\">Always</button>\n        <button class=\"btn danger\" (click)=\"decline()\">Decline</button>\n      </div>\n    </div>\n  }\n\n  <!-- Composer -->\n  <div class=\"composer\">\n    @if (lastError()) {\n      <div class=\"composer-error\">{{ lastError() }}</div>\n    }\n    <div class=\"composer-row\">\n      <textarea #textArea\n                rows=\"1\"\n                placeholder=\"Ask the AI\u2026\"\n                [value]=\"draft()\"\n                (input)=\"onTextareaInput($event)\"\n                (keydown)=\"onTextareaKey($event)\"\n                [disabled]=\"streaming()\"></textarea>\n      @if (streaming()) {\n        <button class=\"send-btn cancel\" (click)=\"cancel()\" title=\"Cancel\" aria-label=\"Cancel\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\"/></svg>\n        </button>\n      } @else {\n        <button class=\"send-btn\" (click)=\"send()\" [disabled]=\"!draft().trim()\" title=\"Send\" aria-label=\"Send\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"/></svg>\n        </button>\n      }\n    </div>\n  </div>\n\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  <!-- 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"] }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], textArea: [{ type: i0.ViewChild, args: ['textArea', { isSignal: true }] }], themeClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -3345,5 +3887,5 @@ async function runReturnViaPostMessageIfRequested(authService) {
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_ACTIONS, AVATAR_FRAMES, ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, DEFAULT_AI_CONFIG, MES_AUTH_AI_CONFIG, MES_AUTH_CONFIG, MaAiButtonComponent, MaAiChatPanelComponent, MaAiMarkdownPipe, MaAiService, MaAiToolsRegistry, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaAvatarComponent, MaIconComponent, MaThemeDirective, MaUiConfigService, MaUserComponent, MaUserMenuColor, MaUserMenuComponent, MaUserXComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, PACKAGE_VERSION, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, extractXMaPerm, mesAuthInterceptor, provideMesAuth, provideMesAuthAi, renderMarkdown, runReturnViaPostMessageIfRequested, runSsoCheckHandshake, withXMaPerm, xMaResource };
+export { ALL_ACTIONS, AVATAR_FRAMES, ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, DEFAULT_AI_CONFIG, MES_AUTH_AI_CONFIG, MES_AUTH_CONFIG, MaAiButtonComponent, MaAiChatPanelComponent, MaAiHistoryListComponent, MaAiLessonsEditorComponent, MaAiMarkdownPipe, MaAiService, MaAiToolsRegistry, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaAvatarComponent, MaIconComponent, MaThemeDirective, MaUiConfigService, MaUserComponent, MaUserMenuColor, MaUserMenuComponent, MaUserXComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, PACKAGE_VERSION, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, extractXMaPerm, mesAuthInterceptor, provideMesAuth, provideMesAuthAi, renderMarkdown, runReturnViaPostMessageIfRequested, runSsoCheckHandshake, withXMaPerm, xMaResource };
 //# sourceMappingURL=mesauth-angular.mjs.map