@memberjunction/ng-core-entity-forms 6.2.0-edge.2 → 6.2.0-edge.3

package/dist/lib/custom/Conversations/conversation-overview.panel.js

@@ -11,51 +11,117 @@ import { RegisterClassEx } from '@memberjunction/global';
 import { BaseFormPanel } from '@memberjunction/ng-base-forms';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.ID;
-function ConversationOverviewPanel_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 11);
+function ConversationOverviewPanel_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r0.Messages.length, " Turns");
+} }
+function ConversationOverviewPanel_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.LoadError);
+} }
+function ConversationOverviewPanel_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 10)(1, "span", 11);
+    i0.ɵɵtext(2, "Total Messages");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 12);
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div", 10)(6, "span", 11);
+    i0.ɵɵtext(7, "User Prompts");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "span", 12);
+    i0.ɵɵtext(9);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(10, "div", 10)(11, "span", 11);
+    i0.ɵɵtext(12, "Agent Responses");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(13, "span", 12);
+    i0.ɵɵtext(14);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.Messages.length);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.UserMessageCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.AgentMessageCount);
+} }
+function ConversationOverviewPanel_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.LoadError);
+} }
+function ConversationOverviewPanel_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 9);
     i0.ɵɵtext(1, "No messages in this conversation yet.");
     i0.ɵɵdomElementEnd();
 } }
-function ConversationOverviewPanel_Conditional_33_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 7)(1, "span", 12)(2, "strong");
+function ConversationOverviewPanel_Conditional_20_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 10)(1, "span", 13)(2, "strong");
     i0.ɵɵtext(3);
     i0.ɵɵdomElementEnd();
     i0.ɵɵtext(4);
     i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(5, "span", 13);
+    i0.ɵɵdomElementStart(5, "span", 14);
     i0.ɵɵtext(6);
     i0.ɵɵdomElementEnd()();
 } if (rf & 2) {
-    const msg_r1 = ctx.$implicit;
+    const msg_r2 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", msg_r1.Role, ":");
+    i0.ɵɵtextInterpolate1("", msg_r2.Role, ":");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", msg_r1.Message, " ");
+    i0.ɵɵtextInterpolate1(" ", msg_r2.Message, " ");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("mj-pill-blue", msg_r1.Role === "user")("mj-pill-green", msg_r1.Role !== "user");
+    i0.ɵɵclassProp("mj-pill-blue", ctx_r0.IsUserTurn(msg_r2))("mj-pill-green", ctx_r0.IsAgentTurn(msg_r2));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", msg_r1.Role, " ");
+    i0.ɵɵtextInterpolate1(" ", msg_r2.Role, " ");
 } }
-function ConversationOverviewPanel_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ConversationOverviewPanel_Conditional_33_For_1_Template, 7, 7, "div", 7, _forTrack0);
+function ConversationOverviewPanel_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ConversationOverviewPanel_Conditional_20_For_1_Template, 7, 7, "div", 10, _forTrack0);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r1.RecentMessages);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r0.RecentMessages);
 } }
 let ConversationOverviewPanel = class ConversationOverviewPanel extends BaseFormPanel {
     constructor() {
         super(...arguments);
         this.cdr = inject(ChangeDetectorRef);
         this.Messages = [];
+        /** Set when the query fails, so the cards show the failure instead of zero messages. */
+        this.LoadError = null;
     }
     ngOnInit() {
         this.loadConversationMessages();
     }
     get UserMessageCount() {
-        return this.Messages.filter(m => m.Role?.toLowerCase() === 'user').length;
+        return this.Messages.filter(m => this.IsUserTurn(m)).length;
     }
     get AgentMessageCount() {
-        return this.Messages.filter(m => m.Role?.toLowerCase() !== 'user').length;
+        return this.Messages.filter(m => this.IsAgentTurn(m)).length;
+    }
+    /** A turn the user sent. `Role` is stored as 'User', 'AI' or 'Error'. */
+    IsUserTurn(detail) {
+        return detail.Role === 'User';
+    }
+    /** A turn an agent sent. An 'Error' turn is neither a user turn nor an agent turn. */
+    IsAgentTurn(detail) {
+        return detail.Role === 'AI';
     }
     get RecentMessages() {
         return this.Messages.slice(0, 4);
@@ -66,77 +132,65 @@ let ConversationOverviewPanel = class ConversationOverviewPanel extends BaseForm
         try {
             const rv = new RunView();
             const res = await rv.RunView({
-                EntityName: 'Conversation Details',
+                EntityName: 'MJ: Conversation Details',
                 ExtraFilter: `ConversationID = '${this.Record.ID}'`,
                 Fields: ['ID', 'Role', 'Message', '__mj_CreatedAt'],
                 OrderBy: '__mj_CreatedAt DESC',
                 MaxRows: 50,
                 ResultType: 'simple'
             });
-            if (res.Success && res.Results) {
-                this.Messages = res.Results;
-                this.cdr.markForCheck();
+            if (res.Success) {
+                this.Messages = res.Results ?? [];
+            }
+            else {
+                this.showLoadError(res.ErrorMessage);
             }
         }
         catch (e) {
             console.error('Failed to load conversation details:', e);
+            this.showLoadError(e instanceof Error ? e.message : undefined);
         }
+        this.cdr.markForCheck();
+    }
+    /** Shows a short "could not load" line, with the underlying message when there is one. */
+    showLoadError(detail) {
+        this.LoadError = detail ? `Could not load messages: ${detail}` : 'Could not load messages.';
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵConversationOverviewPanel_BaseFactory; return function ConversationOverviewPanel_Factory(__ngFactoryType__) { return (ɵConversationOverviewPanel_BaseFactory || (ɵConversationOverviewPanel_BaseFactory = i0.ɵɵgetInheritedFactory(ConversationOverviewPanel)))(__ngFactoryType__ || ConversationOverviewPanel); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationOverviewPanel, selectors: [["mj-conversation-overview-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 34, vars: 5, consts: [[1, "mj-convo-overview-grid"], [1, "mj-overview-card"], [1, "mj-card-header"], [1, "mj-card-title"], [1, "fa-solid", "fa-comments", 2, "color", "var(--mj-brand-primary, #38bdf8)"], [1, "mj-card-badge"], [1, "mj-card-body"], [1, "mj-metric-row"], [1, "mj-metric-label"], [1, "mj-metric-val"], [1, "fa-solid", "fa-clock-rotate-left", 2, "color", "#10b981"], [2, "font-size", "12px", "color", "var(--mj-text-muted)"], [1, "mj-metric-label", 2, "text-overflow", "ellipsis", "overflow", "hidden", "white-space", "nowrap", "max-width", "200px"], [1, "mj-pill"]], template: function ConversationOverviewPanel_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationOverviewPanel, selectors: [["mj-conversation-overview-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 21, vars: 3, consts: [[1, "mj-convo-overview-grid"], [1, "mj-overview-card"], [1, "mj-card-header"], [1, "mj-card-title"], [1, "fa-solid", "fa-comments", 2, "color", "var(--mj-brand-primary, #38bdf8)"], [1, "mj-card-badge"], [1, "mj-card-body"], [1, "mj-load-error"], [1, "fa-solid", "fa-clock-rotate-left", 2, "color", "#10b981"], [2, "font-size", "12px", "color", "var(--mj-text-muted)"], [1, "mj-metric-row"], [1, "mj-metric-label"], [1, "mj-metric-val"], [1, "mj-metric-label", 2, "text-overflow", "ellipsis", "overflow", "hidden", "white-space", "nowrap", "max-width", "200px"], [1, "mj-pill"]], template: function ConversationOverviewPanel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵdomElement(4, "i", 4);
             i0.ɵɵtext(5, " Turn Summary");
             i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(6, "span", 5);
-            i0.ɵɵtext(7);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵdomElementStart(8, "div", 6)(9, "div", 7)(10, "span", 8);
-            i0.ɵɵtext(11, "Total Messages");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(12, "span", 9);
-            i0.ɵɵtext(13);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵdomElementStart(14, "div", 7)(15, "span", 8);
-            i0.ɵɵtext(16, "User Prompts");
+            i0.ɵɵconditionalCreate(6, ConversationOverviewPanel_Conditional_6_Template, 2, 1, "span", 5);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(17, "span", 9);
-            i0.ɵɵtext(18);
+            i0.ɵɵdomElementStart(7, "div", 6);
+            i0.ɵɵconditionalCreate(8, ConversationOverviewPanel_Conditional_8_Template, 2, 1, "span", 7)(9, ConversationOverviewPanel_Conditional_9_Template, 15, 3);
             i0.ɵɵdomElementEnd()();
-            i0.ɵɵdomElementStart(19, "div", 7)(20, "span", 8);
-            i0.ɵɵtext(21, "Agent Responses");
+            i0.ɵɵdomElementStart(10, "div", 1)(11, "div", 2)(12, "div", 3);
+            i0.ɵɵdomElement(13, "i", 8);
+            i0.ɵɵtext(14, " Recent Turns");
             i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(22, "span", 9);
-            i0.ɵɵtext(23);
-            i0.ɵɵdomElementEnd()()()();
-            i0.ɵɵdomElementStart(24, "div", 1)(25, "div", 2)(26, "div", 3);
-            i0.ɵɵdomElement(27, "i", 10);
-            i0.ɵɵtext(28, " Recent Turns");
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(29, "span", 5);
-            i0.ɵɵtext(30, "History");
+            i0.ɵɵdomElementStart(15, "span", 5);
+            i0.ɵɵtext(16, "History");
             i0.ɵɵdomElementEnd()();
-            i0.ɵɵdomElementStart(31, "div", 6);
-            i0.ɵɵconditionalCreate(32, ConversationOverviewPanel_Conditional_32_Template, 2, 0, "span", 11)(33, ConversationOverviewPanel_Conditional_33_Template, 2, 0);
+            i0.ɵɵdomElementStart(17, "div", 6);
+            i0.ɵɵconditionalCreate(18, ConversationOverviewPanel_Conditional_18_Template, 2, 1, "span", 7)(19, ConversationOverviewPanel_Conditional_19_Template, 2, 0, "span", 9)(20, ConversationOverviewPanel_Conditional_20_Template, 2, 0);
             i0.ɵɵdomElementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(7);
-            i0.ɵɵtextInterpolate1("", ctx.Messages.length, " Turns");
             i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate(ctx.Messages.length);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.UserMessageCount);
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.AgentMessageCount);
-            i0.ɵɵadvance(9);
-            i0.ɵɵconditional(ctx.Messages.length === 0 ? 32 : 33);
-        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header[_ngcontent-%COMP%] {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title[_ngcontent-%COMP%] {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge[_ngcontent-%COMP%] {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body[_ngcontent-%COMP%] {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label[_ngcontent-%COMP%] { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val[_ngcontent-%COMP%] { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill[_ngcontent-%COMP%] { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue[_ngcontent-%COMP%] { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }"], changeDetection: 0 }); }
+            i0.ɵɵconditional(!ctx.LoadError ? 6 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.LoadError ? 8 : 9);
+            i0.ɵɵadvance(10);
+            i0.ɵɵconditional(ctx.LoadError ? 18 : ctx.Messages.length === 0 ? 19 : 20);
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header[_ngcontent-%COMP%] {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title[_ngcontent-%COMP%] {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge[_ngcontent-%COMP%] {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body[_ngcontent-%COMP%] {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label[_ngcontent-%COMP%] { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val[_ngcontent-%COMP%] { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-load-error[_ngcontent-%COMP%] { font-size: 12px; color: var(--mj-status-error); }\n        .mj-pill[_ngcontent-%COMP%] { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue[_ngcontent-%COMP%] { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }"], changeDetection: 0 }); }
 };
 ConversationOverviewPanel = __decorate([
     RegisterClassEx(BaseFormPanel, {
-        key: 'form-panel:Conversations:overview',
+        key: 'form-panel:MJ: Conversations:overview',
         metadata: {
-            entity: 'Conversations',
+            entity: 'MJ: Conversations',
             slot: 'before-fields',
             sortKey: 10,
         },
@@ -151,21 +205,27 @@ export { ConversationOverviewPanel };
             <div class="mj-overview-card">
                 <div class="mj-card-header">
                     <div class="mj-card-title"><i class="fa-solid fa-comments" style="color: var(--mj-brand-primary, #38bdf8);"></i> Turn Summary</div>
-                    <span class="mj-card-badge">{{ Messages.length }} Turns</span>
+                    @if (!LoadError) {
+                        <span class="mj-card-badge">{{ Messages.length }} Turns</span>
+                    }
                 </div>
                 <div class="mj-card-body">
-                    <div class="mj-metric-row">
-                        <span class="mj-metric-label">Total Messages</span>
-                        <span class="mj-metric-val">{{ Messages.length }}</span>
-                    </div>
-                    <div class="mj-metric-row">
-                        <span class="mj-metric-label">User Prompts</span>
-                        <span class="mj-metric-val">{{ UserMessageCount }}</span>
-                    </div>
-                    <div class="mj-metric-row">
-                        <span class="mj-metric-label">Agent Responses</span>
-                        <span class="mj-metric-val">{{ AgentMessageCount }}</span>
-                    </div>
+                    @if (LoadError) {
+                        <span class="mj-load-error">{{ LoadError }}</span>
+                    } @else {
+                        <div class="mj-metric-row">
+                            <span class="mj-metric-label">Total Messages</span>
+                            <span class="mj-metric-val">{{ Messages.length }}</span>
+                        </div>
+                        <div class="mj-metric-row">
+                            <span class="mj-metric-label">User Prompts</span>
+                            <span class="mj-metric-val">{{ UserMessageCount }}</span>
+                        </div>
+                        <div class="mj-metric-row">
+                            <span class="mj-metric-label">Agent Responses</span>
+                            <span class="mj-metric-val">{{ AgentMessageCount }}</span>
+                        </div>
+                    }
                 </div>
             </div>
 
@@ -176,7 +236,9 @@ export { ConversationOverviewPanel };
                     <span class="mj-card-badge">History</span>
                 </div>
                 <div class="mj-card-body">
-                    @if (Messages.length === 0) {
+                    @if (LoadError) {
+                        <span class="mj-load-error">{{ LoadError }}</span>
+                    } @else if (Messages.length === 0) {
                         <span style="font-size: 12px; color: var(--mj-text-muted);">No messages in this conversation yet.</span>
                     } @else {
                         @for (msg of RecentMessages; track msg.ID) {
@@ -184,7 +246,7 @@ export { ConversationOverviewPanel };
                                 <span class="mj-metric-label" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 200px;">
                                     <strong>{{ msg.Role }}:</strong> {{ msg.Message }}
                                 </span>
-                                <span class="mj-pill" [class.mj-pill-blue]="msg.Role === 'user'" [class.mj-pill-green]="msg.Role !== 'user'">
+                                <span class="mj-pill" [class.mj-pill-blue]="IsUserTurn(msg)" [class.mj-pill-green]="IsAgentTurn(msg)">
                                     {{ msg.Role }}
                                 </span>
                             </div>
@@ -193,7 +255,7 @@ export { ConversationOverviewPanel };
                 </div>
             </div>
         </div>
-    `, styles: ["\n        :host { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }\n    "] }]
+    `, styles: ["\n        :host { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-load-error { font-size: 12px; color: var(--mj-status-error); }\n        .mj-pill { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }\n    "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationOverviewPanel, { className: "ConversationOverviewPanel", filePath: "src/lib/custom/Conversations/conversation-overview.panel.ts", lineNumber: 135 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationOverviewPanel, { className: "ConversationOverviewPanel", filePath: "src/lib/custom/Conversations/conversation-overview.panel.ts", lineNumber: 144 }); })();
 //# sourceMappingURL=conversation-overview.panel.js.map

package/dist/lib/custom/Conversations/conversation-overview.panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-overview.panel.js","sourceRoot":"","sources":["../../../../src/lib/custom/Conversations/conversation-overview.panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectionStrategy, OnInit, inject, ChangeDetectorRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RunView } from '@memberjunction/core';\nimport { RegisterClassEx } from '@memberjunction/global';\nimport { BaseFormPanel } from '@memberjunction/ng-base-forms';\nimport { MJConversationEntity } from '@memberjunction/core-entities';\n\ninterface ConversationDetailRow {\n    ID: string;\n    Role: string;\n    Message: string;\n    CreatedAt: string;\n}\n\n@RegisterClassEx(BaseFormPanel, {\n    key: 'form-panel:Conversations:overview',\n    metadata: {\n        entity: 'Conversations',\n        slot: 'before-fields',\n        sortKey: 10,\n    },\n})\n@Component({\n    selector: 'mj-conversation-overview-panel',\n    standalone: true,\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        <div class=\"mj-convo-overview-grid\">\n            <!-- Card 1: Message Flow Metrics -->\n            <div class=\"mj-overview-card\">\n                <div class=\"mj-card-header\">\n                    <div class=\"mj-card-title\"><i class=\"fa-solid fa-comments\" style=\"color: var(--mj-brand-primary, #38bdf8);\"></i> Turn Summary</div>\n                    <span class=\"mj-card-badge\">{{ Messages.length }} Turns</span>\n                </div>\n                <div class=\"mj-card-body\">\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">Total Messages</span>\n                        <span class=\"mj-metric-val\">{{ Messages.length }}</span>\n                    </div>\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">User Prompts</span>\n                        <span class=\"mj-metric-val\">{{ UserMessageCount }}</span>\n                    </div>\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">Agent Responses</span>\n                        <span class=\"mj-metric-val\">{{ AgentMessageCount }}</span>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Card 2: Recent Activity Stream -->\n            <div class=\"mj-overview-card\">\n                <div class=\"mj-card-header\">\n                    <div class=\"mj-card-title\"><i class=\"fa-solid fa-clock-rotate-left\" style=\"color: #10b981;\"></i> Recent Turns</div>\n                    <span class=\"mj-card-badge\">History</span>\n                </div>\n                <div class=\"mj-card-body\">\n                    @if (Messages.length === 0) {\n                        <span style=\"font-size: 12px; color: var(--mj-text-muted);\">No messages in this conversation yet.</span>\n                    } @else {\n                        @for (msg of RecentMessages; track msg.ID) {\n                            <div class=\"mj-metric-row\">\n                                <span class=\"mj-metric-label\" style=\"text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 200px;\">\n                                    <strong>{{ msg.Role }}:</strong> {{ msg.Message }}\n                                </span>\n                                <span class=\"mj-pill\" [class.mj-pill-blue]=\"msg.Role === 'user'\" [class.mj-pill-green]=\"msg.Role !== 'user'\">\n                                    {{ msg.Role }}\n                                </span>\n                            </div>\n                        }\n                    }\n                </div>\n            </div>\n        </div>\n    `,\n    styles: [`\n        :host { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }\n    `]\n})\nexport class ConversationOverviewPanel extends BaseFormPanel<MJConversationEntity> implements OnInit {\n    private cdr = inject(ChangeDetectorRef);\n    public Messages: ConversationDetailRow[] = [];\n\n    public ngOnInit(): void {\n        this.loadConversationMessages();\n    }\n\n    public get UserMessageCount(): number {\n        return this.Messages.filter(m => m.Role?.toLowerCase() === 'user').length;\n    }\n\n    public get AgentMessageCount(): number {\n        return this.Messages.filter(m => m.Role?.toLowerCase() !== 'user').length;\n    }\n\n    public get RecentMessages(): ConversationDetailRow[] {\n        return this.Messages.slice(0, 4);\n    }\n\n    private async loadConversationMessages(): Promise<void> {\n        if (!this.Record?.ID) return;\n        try {\n            const rv = new RunView();\n            const res = await rv.RunView<ConversationDetailRow>({\n                EntityName: 'Conversation Details',\n                ExtraFilter: `ConversationID = '${this.Record.ID}'`,\n                Fields: ['ID', 'Role', 'Message', '__mj_CreatedAt'],\n                OrderBy: '__mj_CreatedAt DESC',\n                MaxRows: 50,\n                ResultType: 'simple'\n            });\n            if (res.Success && res.Results) {\n                this.Messages = res.Results;\n                this.cdr.markForCheck();\n            }\n        } catch (e) {\n            console.error('Failed to load conversation details:', e);\n        }\n    }\n}\n"]}
+{"version":3,"file":"conversation-overview.panel.js","sourceRoot":"","sources":["../../../../src/lib/custom/Conversations/conversation-overview.panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectionStrategy, OnInit, inject, ChangeDetectorRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RunView } from '@memberjunction/core';\nimport { RegisterClassEx } from '@memberjunction/global';\nimport { BaseFormPanel } from '@memberjunction/ng-base-forms';\nimport { MJConversationDetailEntity, MJConversationEntity } from '@memberjunction/core-entities';\n\ninterface ConversationDetailRow {\n    ID: string;\n    Role: MJConversationDetailEntity['Role'];\n    Message: string;\n    CreatedAt: string;\n}\n\n@RegisterClassEx(BaseFormPanel, {\n    key: 'form-panel:MJ: Conversations:overview',\n    metadata: {\n        entity: 'MJ: Conversations',\n        slot: 'before-fields',\n        sortKey: 10,\n    },\n})\n@Component({\n    selector: 'mj-conversation-overview-panel',\n    standalone: true,\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        <div class=\"mj-convo-overview-grid\">\n            <!-- Card 1: Message Flow Metrics -->\n            <div class=\"mj-overview-card\">\n                <div class=\"mj-card-header\">\n                    <div class=\"mj-card-title\"><i class=\"fa-solid fa-comments\" style=\"color: var(--mj-brand-primary, #38bdf8);\"></i> Turn Summary</div>\n                    @if (!LoadError) {\n                        <span class=\"mj-card-badge\">{{ Messages.length }} Turns</span>\n                    }\n                </div>\n                <div class=\"mj-card-body\">\n                    @if (LoadError) {\n                        <span class=\"mj-load-error\">{{ LoadError }}</span>\n                    } @else {\n                        <div class=\"mj-metric-row\">\n                            <span class=\"mj-metric-label\">Total Messages</span>\n                            <span class=\"mj-metric-val\">{{ Messages.length }}</span>\n                        </div>\n                        <div class=\"mj-metric-row\">\n                            <span class=\"mj-metric-label\">User Prompts</span>\n                            <span class=\"mj-metric-val\">{{ UserMessageCount }}</span>\n                        </div>\n                        <div class=\"mj-metric-row\">\n                            <span class=\"mj-metric-label\">Agent Responses</span>\n                            <span class=\"mj-metric-val\">{{ AgentMessageCount }}</span>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <!-- Card 2: Recent Activity Stream -->\n            <div class=\"mj-overview-card\">\n                <div class=\"mj-card-header\">\n                    <div class=\"mj-card-title\"><i class=\"fa-solid fa-clock-rotate-left\" style=\"color: #10b981;\"></i> Recent Turns</div>\n                    <span class=\"mj-card-badge\">History</span>\n                </div>\n                <div class=\"mj-card-body\">\n                    @if (LoadError) {\n                        <span class=\"mj-load-error\">{{ LoadError }}</span>\n                    } @else if (Messages.length === 0) {\n                        <span style=\"font-size: 12px; color: var(--mj-text-muted);\">No messages in this conversation yet.</span>\n                    } @else {\n                        @for (msg of RecentMessages; track msg.ID) {\n                            <div class=\"mj-metric-row\">\n                                <span class=\"mj-metric-label\" style=\"text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 200px;\">\n                                    <strong>{{ msg.Role }}:</strong> {{ msg.Message }}\n                                </span>\n                                <span class=\"mj-pill\" [class.mj-pill-blue]=\"IsUserTurn(msg)\" [class.mj-pill-green]=\"IsAgentTurn(msg)\">\n                                    {{ msg.Role }}\n                                </span>\n                            </div>\n                        }\n                    }\n                </div>\n            </div>\n        </div>\n    `,\n    styles: [`\n        :host { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-load-error { font-size: 12px; color: var(--mj-status-error); }\n        .mj-pill { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }\n    `]\n})\nexport class ConversationOverviewPanel extends BaseFormPanel<MJConversationEntity> implements OnInit {\n    private cdr = inject(ChangeDetectorRef);\n    public Messages: ConversationDetailRow[] = [];\n    /** Set when the query fails, so the cards show the failure instead of zero messages. */\n    public LoadError: string | null = null;\n\n    public ngOnInit(): void {\n        this.loadConversationMessages();\n    }\n\n    public get UserMessageCount(): number {\n        return this.Messages.filter(m => this.IsUserTurn(m)).length;\n    }\n\n    public get AgentMessageCount(): number {\n        return this.Messages.filter(m => this.IsAgentTurn(m)).length;\n    }\n\n    /** A turn the user sent. `Role` is stored as 'User', 'AI' or 'Error'. */\n    protected IsUserTurn(detail: ConversationDetailRow): boolean {\n        return detail.Role === 'User';\n    }\n\n    /** A turn an agent sent. An 'Error' turn is neither a user turn nor an agent turn. */\n    protected IsAgentTurn(detail: ConversationDetailRow): boolean {\n        return detail.Role === 'AI';\n    }\n\n    public get RecentMessages(): ConversationDetailRow[] {\n        return this.Messages.slice(0, 4);\n    }\n\n    private async loadConversationMessages(): Promise<void> {\n        if (!this.Record?.ID) return;\n        try {\n            const rv = new RunView();\n            const res = await rv.RunView<ConversationDetailRow>({\n                EntityName: 'MJ: Conversation Details',\n                ExtraFilter: `ConversationID = '${this.Record.ID}'`,\n                Fields: ['ID', 'Role', 'Message', '__mj_CreatedAt'],\n                OrderBy: '__mj_CreatedAt DESC',\n                MaxRows: 50,\n                ResultType: 'simple'\n            });\n            if (res.Success) {\n                this.Messages = res.Results ?? [];\n            } else {\n                this.showLoadError(res.ErrorMessage);\n            }\n        } catch (e) {\n            console.error('Failed to load conversation details:', e);\n            this.showLoadError(e instanceof Error ? e.message : undefined);\n        }\n        this.cdr.markForCheck();\n    }\n\n    /** Shows a short \"could not load\" line, with the underlying message when there is one. */\n    private showLoadError(detail: string | undefined): void {\n        this.LoadError = detail ? `Could not load messages: ${detail}` : 'Could not load messages.';\n    }\n}\n"]}

package/dist/lib/custom/Employees/employee-header.panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"employee-header.panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-header.panel.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAkB,MAAM,+BAA+B,CAAC;;AAIjF,qBA2Fa,mBAAoB,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IAC7D,WAAW,UAAS;IAEpB,QAAQ,IAAI,IAAI;IAKvB,IAAW,QAAQ,IAAI,gBAAgB,GAAG,IAAI,CAE7C;IAEM,eAAe,IAAI,IAAI;yCAZrB,mBAAmB;2CAAnB,mBAAmB;CAgB/B"}
+{"version":3,"file":"employee-header.panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-header.panel.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAkB,MAAM,+BAA+B,CAAC;;AAIjF,qBA+Fa,mBAAoB,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IAC7D,WAAW,UAAS;IAEpB,QAAQ,IAAI,IAAI;IAKvB,IAAW,QAAQ,IAAI,gBAAgB,GAAG,IAAI,CAE7C;IAEM,eAAe,IAAI,IAAI;yCAZrB,mBAAmB;2CAAnB,mBAAmB;CAgB/B"}

package/dist/lib/custom/Employees/employee-header.panel.js

@@ -117,11 +117,15 @@ let EmployeeHeaderPanel = class EmployeeHeaderPanel extends BaseFormPanel {
 };
 EmployeeHeaderPanel = __decorate([
     RegisterClassEx(BaseFormPanel, {
-        key: 'form-panel:Employees:header',
+        key: 'form-panel:MJ: Employees:header',
         metadata: {
-            entity: 'Employees',
-            slot: 'header',
-            sortKey: 10,
+            entity: 'MJ: Employees',
+            // A hero is a bare strip in before-fields. Its sortKey is above the overview's
+            // (higher draws first), so it draws above the overview cards.
+            slot: 'before-fields',
+            presentation: 'bare',
+            contributionKey: 'employees:header',
+            sortKey: 20,
         },
     })
 ], EmployeeHeaderPanel);
@@ -176,5 +180,5 @@ export { EmployeeHeaderPanel };
         }
     `, styles: ["\n        :host { display: block; width: 100%; }\n        .mj-entity-hero-header {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n    "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EmployeeHeaderPanel, { className: "EmployeeHeaderPanel", filePath: "src/lib/custom/Employees/employee-header.panel.ts", lineNumber: 100 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EmployeeHeaderPanel, { className: "EmployeeHeaderPanel", filePath: "src/lib/custom/Employees/employee-header.panel.ts", lineNumber: 104 }); })();
 //# sourceMappingURL=employee-header.panel.js.map

package/dist/lib/custom/Employees/employee-header.panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"employee-header.panel.js","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-header.panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RegisterClassEx } from '@memberjunction/global';\nimport { BaseFormPanel } from '@memberjunction/ng-base-forms';\nimport { MJEmployeeEntity, UserInfoEngine } from '@memberjunction/core-entities';\n\nconst SETTING_KEY = 'mj.form.employees.headerCollapsed';\n\n@RegisterClassEx(BaseFormPanel, {\n    key: 'form-panel:Employees:header',\n    metadata: {\n        entity: 'Employees',\n        slot: 'header',\n        sortKey: 10,\n    },\n})\n@Component({\n    selector: 'mj-employee-header-panel',\n    standalone: true,\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        @if (Employee) {\n            <div class=\"mj-entity-hero-header\">\n                <div class=\"mj-hero-top\">\n                    <div class=\"mj-hero-identity\">\n                        <div class=\"mj-hero-avatar\" style=\"background: linear-gradient(135deg, #10b981, #047857);\">\n                            <i class=\"fa-solid fa-id-badge\"></i>\n                        </div>\n                        <div>\n                            <h1 class=\"mj-hero-title\">{{ Employee.FirstName }} {{ Employee.LastName }}</h1>\n                            <div class=\"mj-hero-subline\">\n                                <span>{{ Employee.Title || 'Team Member' }}</span>\n                                @if (Employee.Email) {\n                                    <span>•</span>\n                                    <span>{{ Employee.Email }}</span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"mj-hero-actions\">\n                        <button type=\"button\" class=\"mj-hero-toggle-btn\" (click)=\"ToggleCollapsed()\" [title]=\"IsCollapsed ? 'Expand Header' : 'Collapse Header'\">\n                            <i class=\"fa-solid\" [class.fa-chevron-up]=\"!IsCollapsed\" [class.fa-chevron-down]=\"IsCollapsed\"></i>\n                        </button>\n                    </div>\n                </div>\n\n                @if (!IsCollapsed) {\n                    <div class=\"mj-hero-metrics-row\">\n                        <div class=\"mj-hero-metric\">\n                            <span class=\"mj-hero-metric-label\">Employee ID</span>\n                            <span class=\"mj-hero-metric-val\">{{ Employee.ID?.substring(0, 8) }}</span>\n                        </div>\n                        <div class=\"mj-hero-metric\">\n                            <span class=\"mj-hero-metric-label\">Status</span>\n                            <span class=\"mj-hero-metric-val\" style=\"color: #10b981;\">Active</span>\n                        </div>\n                        @if (Employee.Phone) {\n                            <div class=\"mj-hero-metric\">\n                                <span class=\"mj-hero-metric-label\">Phone</span>\n                                <span class=\"mj-hero-metric-val\">{{ Employee.Phone }}</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    `,\n    styles: [`\n        :host { display: block; width: 100%; }\n        .mj-entity-hero-header {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n    `]\n})\nexport class EmployeeHeaderPanel extends BaseFormPanel<MJEmployeeEntity> {\n    public IsCollapsed = false;\n\n    public ngOnInit(): void {\n        const raw = UserInfoEngine.Instance.GetSetting(SETTING_KEY);\n        if (raw) this.IsCollapsed = raw === 'true';\n    }\n\n    public get Employee(): MJEmployeeEntity | null {\n        return this.Record;\n    }\n\n    public ToggleCollapsed(): void {\n        this.IsCollapsed = !this.IsCollapsed;\n        UserInfoEngine.Instance.SetSettingDebounced(SETTING_KEY, String(this.IsCollapsed));\n    }\n}\n"]}
+{"version":3,"file":"employee-header.panel.js","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-header.panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RegisterClassEx } from '@memberjunction/global';\nimport { BaseFormPanel } from '@memberjunction/ng-base-forms';\nimport { MJEmployeeEntity, UserInfoEngine } from '@memberjunction/core-entities';\n\nconst SETTING_KEY = 'mj.form.employees.headerCollapsed';\n\n@RegisterClassEx(BaseFormPanel, {\n    key: 'form-panel:MJ: Employees:header',\n    metadata: {\n        entity: 'MJ: Employees',\n        // A hero is a bare strip in before-fields. Its sortKey is above the overview's\n        // (higher draws first), so it draws above the overview cards.\n        slot: 'before-fields',\n        presentation: 'bare',\n        contributionKey: 'employees:header',\n        sortKey: 20,\n    },\n})\n@Component({\n    selector: 'mj-employee-header-panel',\n    standalone: true,\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        @if (Employee) {\n            <div class=\"mj-entity-hero-header\">\n                <div class=\"mj-hero-top\">\n                    <div class=\"mj-hero-identity\">\n                        <div class=\"mj-hero-avatar\" style=\"background: linear-gradient(135deg, #10b981, #047857);\">\n                            <i class=\"fa-solid fa-id-badge\"></i>\n                        </div>\n                        <div>\n                            <h1 class=\"mj-hero-title\">{{ Employee.FirstName }} {{ Employee.LastName }}</h1>\n                            <div class=\"mj-hero-subline\">\n                                <span>{{ Employee.Title || 'Team Member' }}</span>\n                                @if (Employee.Email) {\n                                    <span>•</span>\n                                    <span>{{ Employee.Email }}</span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"mj-hero-actions\">\n                        <button type=\"button\" class=\"mj-hero-toggle-btn\" (click)=\"ToggleCollapsed()\" [title]=\"IsCollapsed ? 'Expand Header' : 'Collapse Header'\">\n                            <i class=\"fa-solid\" [class.fa-chevron-up]=\"!IsCollapsed\" [class.fa-chevron-down]=\"IsCollapsed\"></i>\n                        </button>\n                    </div>\n                </div>\n\n                @if (!IsCollapsed) {\n                    <div class=\"mj-hero-metrics-row\">\n                        <div class=\"mj-hero-metric\">\n                            <span class=\"mj-hero-metric-label\">Employee ID</span>\n                            <span class=\"mj-hero-metric-val\">{{ Employee.ID?.substring(0, 8) }}</span>\n                        </div>\n                        <div class=\"mj-hero-metric\">\n                            <span class=\"mj-hero-metric-label\">Status</span>\n                            <span class=\"mj-hero-metric-val\" style=\"color: #10b981;\">Active</span>\n                        </div>\n                        @if (Employee.Phone) {\n                            <div class=\"mj-hero-metric\">\n                                <span class=\"mj-hero-metric-label\">Phone</span>\n                                <span class=\"mj-hero-metric-val\">{{ Employee.Phone }}</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    `,\n    styles: [`\n        :host { display: block; width: 100%; }\n        .mj-entity-hero-header {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n    `]\n})\nexport class EmployeeHeaderPanel extends BaseFormPanel<MJEmployeeEntity> {\n    public IsCollapsed = false;\n\n    public ngOnInit(): void {\n        const raw = UserInfoEngine.Instance.GetSetting(SETTING_KEY);\n        if (raw) this.IsCollapsed = raw === 'true';\n    }\n\n    public get Employee(): MJEmployeeEntity | null {\n        return this.Record;\n    }\n\n    public ToggleCollapsed(): void {\n        this.IsCollapsed = !this.IsCollapsed;\n        UserInfoEngine.Instance.SetSettingDebounced(SETTING_KEY, String(this.IsCollapsed));\n    }\n}\n"]}

package/dist/lib/custom/Employees/employee-overview.panel.d.ts

@@ -11,9 +11,13 @@ interface DirectReportRow {
 export declare class EmployeeOverviewPanel extends BaseFormPanel<MJEmployeeEntity> implements OnInit {
     private cdr;
     Reports: DirectReportRow[];
+    /** Set when the query fails, so the card shows the failure instead of an empty list. */
+    LoadError: string | null;
     get Employee(): MJEmployeeEntity | null;
     ngOnInit(): void;
     private loadDirectReports;
+    /** Shows a short "could not load" line, with the underlying message when there is one. */
+    private showLoadError;
     static ɵfac: i0.ɵɵFactoryDeclaration<EmployeeOverviewPanel, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EmployeeOverviewPanel, "mj-employee-overview-panel", never, {}, {}, never, never, true, never>;
 }

package/dist/lib/custom/Employees/employee-overview.panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"employee-overview.panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-overview.panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,MAAM,EAA6B,MAAM,eAAe,CAAC;AAItG,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;AAEjE,UAAU,eAAe;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAmHa,qBAAsB,SAAQ,aAAa,CAAC,gBAAgB,CAAE,YAAW,MAAM;IACxF,OAAO,CAAC,GAAG,CAA6B;IACjC,OAAO,EAAE,eAAe,EAAE,CAAM;IAEvC,IAAW,QAAQ,IAAI,gBAAgB,GAAG,IAAI,CAE7C;IAEM,QAAQ,IAAI,IAAI;YAIT,iBAAiB;yCAZtB,qBAAqB;2CAArB,qBAAqB;CA+BjC"}
+{"version":3,"file":"employee-overview.panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-overview.panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,MAAM,EAA6B,MAAM,eAAe,CAAC;AAItG,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;AAEjE,UAAU,eAAe;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAwHa,qBAAsB,SAAQ,aAAa,CAAC,gBAAgB,CAAE,YAAW,MAAM;IACxF,OAAO,CAAC,GAAG,CAA6B;IACjC,OAAO,EAAE,eAAe,EAAE,CAAM;IACvC,wFAAwF;IACjF,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEvC,IAAW,QAAQ,IAAI,gBAAgB,GAAG,IAAI,CAE7C;IAEM,QAAQ,IAAI,IAAI;YAIT,iBAAiB;IAuB/B,0FAA0F;IAC1F,OAAO,CAAC,aAAa;yCAtCZ,qBAAqB;2CAArB,qBAAqB;CAyCjC"}