@memberjunction/ng-ai-test-harness 5.22.0 → 5.23.0

package/dist/lib/test-harness-custom-window.component.js

@@ -1,16 +1,16 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef, inject } from '@angular/core';
 import { Metadata } from '@memberjunction/core';
 import { AITestHarnessComponent } from './ai-test-harness.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-dialog";
+import * as i1 from "@memberjunction/ng-ui-components";
 import * as i2 from "@memberjunction/ng-shared-generic";
 import * as i3 from "./ai-test-harness.component";
-const _c0 = ["kendoWindow"];
+const _c0 = ["mjWindow"];
 function TestHarnessCustomWindowComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", ctx_r1.agent == null ? null : ctx_r1.agent.LogoURL, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", ctx_r1.Agent == null ? null : ctx_r1.Agent.LogoURL, i0.ɵɵsanitizeUrl);
 } }
 function TestHarnessCustomWindowComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 4);
@@ -25,7 +25,7 @@ function TestHarnessCustomWindowComponent_Conditional_17_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("text", "Loading " + (ctx_r1.mode === "agent" ? "AI Agent" : "AI Prompt") + "...");
+    i0.ɵɵproperty("text", "Loading " + (ctx_r1.Mode === "agent" ? "AI Agent" : "AI Prompt") + "...");
 } }
 function TestHarnessCustomWindowComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
@@ -36,220 +36,191 @@ function TestHarnessCustomWindowComponent_Conditional_18_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.error);
+    i0.ɵɵtextInterpolate(ctx_r1.Error);
 } }
 function TestHarnessCustomWindowComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-ai-test-harness", 19);
-    i0.ɵɵlistener("runOpened", function TestHarnessCustomWindowComponent_Conditional_19_Template_mj_ai_test_harness_runOpened_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRunOpened($event)); });
+    i0.ɵɵlistener("runOpened", function TestHarnessCustomWindowComponent_Conditional_19_Template_mj_ai_test_harness_runOpened_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRunOpened($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("entity", ctx_r1.agent || ctx_r1.prompt || null)("mode", ctx_r1.mode)("isVisible", true);
+    i0.ɵɵproperty("entity", ctx_r1.Agent || ctx_r1.Prompt || null)("mode", ctx_r1.Mode)("isVisible", true);
 } }
 export class TestHarnessCustomWindowComponent {
-    constructor(renderer, elementRef, cdr) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.data = {};
-        this.closeWindow = new EventEmitter();
-        this.minimizeWindow = new EventEmitter();
-        this.restoreWindow = new EventEmitter();
-        this.executionStateChange = new EventEmitter();
-        this.windowTitle = 'AI Test Harness';
-        this.width = 1200;
-        this.height = 800;
-        this.windowTop = 100;
-        this.windowLeft = 100;
-        this.loading = true;
-        this.error = '';
-        this.windowState = 'default';
-        this.isMaximized = false;
-        this.isMinimized = false;
+    constructor() {
+        this.Data = {};
+        this.CloseWindow = new EventEmitter();
+        this.MinimizeWindow = new EventEmitter();
+        this.RestoreWindow = new EventEmitter();
+        this.ExecutionStateChange = new EventEmitter();
+        this.WindowTitle = 'AI Test Harness';
+        this.WindowVisible = false;
+        this.Width = 1200;
+        this.Height = 800;
+        this.WindowTop = 100;
+        this.WindowLeft = 100;
+        this.Loading = true;
+        this.Error = '';
+        this.WindowState = 'default';
+        this.IsMaximized = false;
+        this.IsMinimized = false;
         // Store original dimensions for restore
         this.originalWidth = 1200;
         this.originalHeight = 800;
         this.originalTop = 100;
         this.originalLeft = 100;
-        // Minimized dimensions
-        this.MINIMIZED_WIDTH = 400;
-        this.MINIMIZED_HEIGHT = 60;
-        this.mode = 'agent';
+        this.Mode = 'agent';
         this.metadata = new Metadata();
+        this.executionCheckInterval = null;
+        this.cdr = inject(ChangeDetectorRef);
     }
     ngOnInit() {
         // Set window dimensions
-        this.width = this.convertToNumber(this.data.width) || 1200;
-        this.height = this.convertToNumber(this.data.height) || 800;
+        this.Width = this.convertToNumber(this.Data.width) || 1200;
+        this.Height = this.convertToNumber(this.Data.height) || 800;
         // Store original dimensions
-        this.originalWidth = this.width;
-        this.originalHeight = this.height;
+        this.originalWidth = this.Width;
+        this.originalHeight = this.Height;
         // Calculate centered position
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight;
-        this.windowLeft = Math.max(0, (windowWidth - this.width) / 2);
-        this.windowTop = Math.max(0, (windowHeight - this.height) / 2);
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        this.WindowLeft = Math.max(0, (viewportWidth - this.Width) / 2);
+        this.WindowTop = Math.max(0, (viewportHeight - this.Height) / 2);
         // Store original position
-        this.originalLeft = this.windowLeft;
-        this.originalTop = this.windowTop;
+        this.originalLeft = this.WindowLeft;
+        this.originalTop = this.WindowTop;
         // Determine mode
-        this.mode = this.data.mode || (this.data.promptId || this.data.prompt ? 'prompt' : 'agent');
+        this.Mode = this.Data.mode || (this.Data.promptId || this.Data.prompt ? 'prompt' : 'agent');
+        // Set initial title from data if available
+        if (this.Data.title) {
+            this.WindowTitle = this.Data.title;
+        }
+        else if (this.Data.agent) {
+            this.WindowTitle = `Test: ${this.Data.agent.Name}`;
+        }
+        else if (this.Data.prompt) {
+            this.WindowTitle = `Test: ${this.Data.prompt.Name}`;
+        }
+        // Show window now that position is calculated
+        this.WindowVisible = true;
         // Load entity
-        this.loadEntity();
+        this.LoadEntity();
     }
-    async loadEntity() {
+    async LoadEntity() {
         try {
-            if (this.mode === 'agent') {
-                if (this.data.agent) {
-                    this.agent = this.data.agent;
-                    this.windowTitle = this.data.title || `Test: ${this.agent.Name}`;
-                }
-                else if (this.data.agentId) {
-                    const agentEntity = await this.metadata.GetEntityObject('MJ: AI Agents');
-                    await agentEntity.Load(this.data.agentId);
-                    if (agentEntity.IsSaved) {
-                        this.agent = agentEntity;
-                        this.windowTitle = this.data.title || `Test: ${this.agent.Name}`;
-                    }
-                    else {
-                        throw new Error('Agent not found');
-                    }
-                }
-                else {
-                    throw new Error('No agent provided');
-                }
+            if (this.Mode === 'agent') {
+                await this.loadAgent();
             }
             else {
-                if (this.data.prompt) {
-                    this.prompt = this.data.prompt;
-                    this.windowTitle = this.data.title || `Test: ${this.prompt.Name}`;
-                }
-                else if (this.data.promptId) {
-                    const promptEntity = await this.metadata.GetEntityObject('MJ: AI Prompts');
-                    await promptEntity.Load(this.data.promptId);
-                    if (promptEntity.IsSaved) {
-                        this.prompt = promptEntity;
-                        this.windowTitle = this.data.title || `Test: ${this.prompt.Name}`;
-                    }
-                    else {
-                        throw new Error('Prompt not found');
-                    }
-                }
-                else {
-                    throw new Error('No prompt provided');
-                }
+                await this.loadPrompt();
             }
-            this.loading = false;
+            this.Loading = false;
+            this.cdr.detectChanges();
         }
         catch (err) {
-            this.error = err.message || 'Failed to load entity';
-            this.loading = false;
+            this.Error = err instanceof Error ? err.message : 'Failed to load entity';
+            this.Loading = false;
+            this.cdr.detectChanges();
         }
     }
-    onClose() {
-        // When the Kendo Window's close event fires (from the default X button),
-        // emit our closeWindow event to notify the window manager
-        this.closeWindow.emit();
-    }
-    closeButtonClick() {
-        // When our custom close button is clicked, emit the close event
-        // This will trigger the window to close and call our onClose handler
-        if (this.kendoWindow) {
-            this.kendoWindow.close.emit();
+    async loadAgent() {
+        if (this.Data.agent) {
+            this.Agent = this.Data.agent;
+            this.WindowTitle = this.Data.title || `Test: ${this.Agent.Name}`;
+        }
+        else if (this.Data.agentId) {
+            const agentEntity = await this.metadata.GetEntityObject('MJ: AI Agents');
+            await agentEntity.Load(this.Data.agentId);
+            if (agentEntity.IsSaved) {
+                this.Agent = agentEntity;
+                this.WindowTitle = this.Data.title || `Test: ${this.Agent.Name}`;
+            }
+            else {
+                throw new Error('Agent not found');
+            }
         }
         else {
-            // If kendoWindow is not available, directly emit the close event
-            this.onClose();
+            throw new Error('No agent provided');
         }
     }
-    onStateChange(state) {
-        this.windowState = state;
-        this.isMaximized = state === 'maximized';
-        this.isMinimized = state === 'minimized';
-        // Handle restore from minimized
-        if (this.isMinimized && state !== 'minimized') {
-            this.restoreFromMinimized();
+    async loadPrompt() {
+        if (this.Data.prompt) {
+            this.Prompt = this.Data.prompt;
+            this.WindowTitle = this.Data.title || `Test: ${this.Prompt.Name}`;
         }
-        // Adjust content height on any state change
-        if (state !== 'minimized') {
-            setTimeout(() => this.adjustContentHeight(), 100);
+        else if (this.Data.promptId) {
+            const promptEntity = await this.metadata.GetEntityObject('MJ: AI Prompts');
+            await promptEntity.Load(this.Data.promptId);
+            if (promptEntity.IsSaved) {
+                this.Prompt = promptEntity;
+                this.WindowTitle = this.Data.title || `Test: ${this.Prompt.Name}`;
+            }
+            else {
+                throw new Error('Prompt not found');
+            }
         }
-    }
-    onWindowResize() {
-        // Handle Kendo Window resize event
-        if (!this.isMinimized) {
-            // Use a small delay to ensure the DOM has updated
-            setTimeout(() => this.adjustContentHeight(), 50);
+        else {
+            throw new Error('No prompt provided');
         }
     }
-    onRunOpened(event) {
+    OnClose() {
+        this.CloseWindow.emit();
+    }
+    CloseButtonClick() {
+        this.OnClose();
+    }
+    OnStateChange(state) {
+        this.WindowState = state;
+        this.IsMaximized = state === 'maximized';
+    }
+    OnWindowResize() {
+        // Window was resized — no special handling needed as mj-window tracks dimensions internally
+    }
+    OnRunOpened(_event) {
         // Auto-minimize the test harness window when a run is opened
-        this.minimize();
+        this.Minimize();
     }
-    minimize() {
-        if (!this.isMinimized) {
+    Minimize() {
+        if (!this.IsMinimized) {
             // Store current dimensions before minimizing
-            this.originalWidth = this.width;
-            this.originalHeight = this.height;
-            this.originalTop = this.windowTop;
-            this.originalLeft = this.windowLeft;
+            this.originalWidth = this.Width;
+            this.originalHeight = this.Height;
+            this.originalTop = this.WindowTop;
+            this.originalLeft = this.WindowLeft;
             // Hide the window when minimized (dock will show icon)
-            this.isMinimized = true;
-            this.minimizeWindow.emit();
-            // Hide the window element
-            let windowElement = this.elementRef.nativeElement.querySelector('.k-window');
-            if (!windowElement && this.elementRef.nativeElement.closest) {
-                windowElement = this.elementRef.nativeElement.closest('.k-window');
-            }
-            if (windowElement) {
-                this.renderer.setStyle(windowElement, 'display', 'none');
-            }
+            this.IsMinimized = true;
+            this.WindowVisible = false;
+            this.MinimizeWindow.emit();
+            this.cdr.detectChanges();
         }
     }
-    restoreFromMinimized() {
-        this.width = this.originalWidth;
-        this.height = this.originalHeight;
-        this.windowTop = this.originalTop;
-        this.windowLeft = this.originalLeft;
-        this.windowState = 'default';
-        this.isMinimized = false;
-        // Show the window element
-        let windowElement = this.elementRef.nativeElement.querySelector('.k-window');
-        if (!windowElement && this.elementRef.nativeElement.closest) {
-            windowElement = this.elementRef.nativeElement.closest('.k-window');
-        }
-        if (windowElement) {
-            this.renderer.setStyle(windowElement, 'display', 'block');
-        }
-        // Update position after state change
-        setTimeout(() => {
-            this.updateWindowPosition();
-            // Force Angular change detection
-            this.cdr.detectChanges();
-            // Force the Kendo Window to recalculate its internal dimensions
-            if (this.kendoWindow) {
-                // Trigger resize event to fix content sizing
-                window.dispatchEvent(new Event('resize'));
-                // Use the shared method to adjust content height
-                this.adjustContentHeight();
-            }
-        }, 100);
+    RestoreFromMinimized() {
+        this.Width = this.originalWidth;
+        this.Height = this.originalHeight;
+        this.WindowTop = this.originalTop;
+        this.WindowLeft = this.originalLeft;
+        this.WindowState = 'default';
+        this.IsMinimized = false;
+        this.IsMaximized = false;
+        this.WindowVisible = true;
+        this.cdr.detectChanges();
         // Emit restore event
-        this.restoreWindow.emit();
+        this.RestoreWindow.emit();
     }
-    toggleMaximize() {
-        if (this.isMinimized) {
+    ToggleMaximize() {
+        if (this.IsMinimized) {
             // First restore from minimized, then maximize
-            this.restoreFromMinimized();
+            this.RestoreFromMinimized();
             setTimeout(() => {
-                this.windowState = 'maximized';
-                this.isMaximized = true;
-            }, 600);
+                this.WindowState = 'maximized';
+                this.IsMaximized = true;
+                this.cdr.detectChanges();
+            }, 100);
         }
         else {
-            this.windowState = this.isMaximized ? 'default' : 'maximized';
-            this.isMaximized = !this.isMaximized;
+            this.WindowState = this.IsMaximized ? 'default' : 'maximized';
+            this.IsMaximized = !this.IsMaximized;
         }
     }
     convertToNumber(value) {
@@ -276,249 +247,163 @@ export class TestHarnessCustomWindowComponent {
         return isNaN(parsed) ? undefined : parsed;
     }
     ngAfterViewInit() {
-        // Set initial position if needed
-        setTimeout(() => {
-            this.updateWindowPosition();
-            this.adjustContentHeight();
-        }, 100);
         // Set up execution tracking
         this.setupExecutionTracking();
-        // Set up window resize listener
-        this.setupResizeListener();
-    }
-    adjustContentHeight() {
-        // Ensure the window content wrapper has proper height
-        const contentWrapper = this.elementRef.nativeElement.querySelector('.k-window-content');
-        if (contentWrapper && this.kendoWindow) {
-            // Get the actual window element to check current dimensions
-            const windowElement = this.elementRef.nativeElement.querySelector('.k-window') ||
-                this.elementRef.nativeElement.closest('.k-window');
-            // Update our tracked dimensions if the window has been resized
-            if (windowElement) {
-                const rect = windowElement.getBoundingClientRect();
-                if (rect.width > 0)
-                    this.width = rect.width;
-                if (rect.height > 0)
-                    this.height = rect.height;
-            }
-            // Calculate the actual content height (window height minus titlebar and some padding)
-            const windowHeight = this.height;
-            const titlebarHeight = 40; // Titlebar height
-            const bottomPadding = 10; // Extra space to prevent clipping
-            const contentHeight = windowHeight - titlebarHeight - bottomPadding;
-            this.renderer.setStyle(contentWrapper, 'height', `${contentHeight}px`);
-            this.renderer.setStyle(contentWrapper, 'display', 'flex');
-            this.renderer.setStyle(contentWrapper, 'flex-direction', 'column');
-        }
-        // Also update the test harness container
-        const testHarnessContainer = this.elementRef.nativeElement.querySelector('mj-ai-test-harness');
-        if (testHarnessContainer) {
-            this.renderer.setStyle(testHarnessContainer, 'flex', '1');
-            this.renderer.setStyle(testHarnessContainer, 'height', '100%');
-            this.renderer.setStyle(testHarnessContainer, 'overflow', 'hidden');
-        }
-    }
-    setupResizeListener() {
-        // Debounced resize handler
-        let resizeTimeout;
-        const handleResize = () => {
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                if (!this.isMinimized) {
-                    this.adjustContentHeight();
-                }
-            }, 100);
-        };
-        // Listen for window resize events
-        window.addEventListener('resize', handleResize);
-        // Store the handler for cleanup
-        this.resizeHandler = handleResize;
-        // Note: Kendo Window resize events are handled by the (resize) event binding in the template
     }
     setupExecutionTracking() {
         // Use a timer to check the test harness execution state
-        // This is needed because the test harness doesn't emit events for execution state changes
-        if (this.testHarness) {
-            // Initial state
+        if (this.TestHarness) {
             let lastExecutingState = false;
-            // Check execution state periodically
-            const checkInterval = setInterval(() => {
-                if (this.testHarness && this.testHarness.isExecuting !== lastExecutingState) {
-                    lastExecutingState = this.testHarness.isExecuting;
-                    this.executionStateChange.emit({ isExecuting: lastExecutingState });
+            this.executionCheckInterval = setInterval(() => {
+                if (this.TestHarness && this.TestHarness.isExecuting !== lastExecutingState) {
+                    lastExecutingState = this.TestHarness.isExecuting;
+                    this.ExecutionStateChange.emit({ isExecuting: lastExecutingState });
                 }
             }, 100);
-            // Store interval for cleanup
-            this.executionCheckInterval = checkInterval;
         }
     }
     ngOnDestroy() {
-        // Clean up execution tracking interval
         if (this.executionCheckInterval) {
             clearInterval(this.executionCheckInterval);
         }
-        // Clean up resize listener
-        if (this.resizeHandler) {
-            window.removeEventListener('resize', this.resizeHandler);
-        }
-        // Ensure window is properly closed and cleaned up
-        if (this.kendoWindow) {
-            this.kendoWindow.close.emit();
-        }
-    }
-    updateWindowPosition() {
-        // Find the window element - it might be in the parent if we're inside a wrapper
-        let windowElement = this.elementRef.nativeElement.querySelector('.k-window');
-        if (!windowElement && this.elementRef.nativeElement.closest) {
-            windowElement = this.elementRef.nativeElement.closest('.k-window');
-        }
-        if (windowElement && (this.windowTop !== undefined || this.windowLeft !== undefined)) {
-            if (this.windowTop !== undefined) {
-                this.renderer.setStyle(windowElement, 'top', `${this.windowTop}px`);
-            }
-            if (this.windowLeft !== undefined) {
-                this.renderer.setStyle(windowElement, 'left', `${this.windowLeft}px`);
-            }
-        }
     }
-    static { this.ɵfac = function TestHarnessCustomWindowComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestHarnessCustomWindowComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵfac = function TestHarnessCustomWindowComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestHarnessCustomWindowComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestHarnessCustomWindowComponent, selectors: [["mj-test-harness-custom-window"]], viewQuery: function TestHarnessCustomWindowComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5)(AITestHarnessComponent, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.kendoWindow = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.testHarness = _t.first);
-        } }, inputs: { data: "data" }, outputs: { closeWindow: "closeWindow", minimizeWindow: "minimizeWindow", restoreWindow: "restoreWindow", executionStateChange: "executionStateChange" }, standalone: false, decls: 20, vars: 20, consts: [["kendoWindow", ""], [3, "close", "stateChange", "resize", "title", "width", "height", "top", "left", "minWidth", "minHeight", "draggable", "resizable", "state"], [1, "window-title"], ["alt", "Agent logo", 1, "title-logo", 3, "src"], [1, "fa-solid", "fa-robot", "title-icon"], [1, "fa-solid", "fa-comment-dots", "title-icon"], [1, "window-actions"], ["title", "Minimize", 1, "window-action-btn", 3, "click"], [1, "fa-solid", "fa-window-minimize"], [1, "window-action-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Close", 1, "window-action-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "window-content"], [1, "loading-container"], [1, "error-container"], [3, "entity", "mode", "isVisible"], ["size", "large", 3, "text"], [1, "fa-solid", "fa-exclamation-triangle"], [3, "runOpened", "entity", "mode", "isVisible"]], template: function TestHarnessCustomWindowComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.MjWindow = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TestHarness = _t.first);
+        } }, inputs: { Data: "Data" }, outputs: { CloseWindow: "CloseWindow", MinimizeWindow: "MinimizeWindow", RestoreWindow: "RestoreWindow", ExecutionStateChange: "ExecutionStateChange" }, standalone: false, decls: 20, vars: 19, consts: [["mjWindow", ""], [3, "Close", "StateChange", "Resize", "Visible", "Title", "Width", "Height", "Top", "Left", "MinWidth", "MinHeight", "Draggable", "Resizable", "State"], [1, "window-title"], ["alt", "Agent logo", 1, "title-logo", 3, "src"], [1, "fa-solid", "fa-robot", "title-icon"], [1, "fa-solid", "fa-comment-dots", "title-icon"], [1, "window-actions"], ["title", "Minimize", 1, "window-action-btn", 3, "click"], [1, "fa-solid", "fa-window-minimize"], [1, "window-action-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Close", 1, "window-action-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "window-content"], [1, "loading-container"], [1, "error-container"], [3, "entity", "mode", "isVisible"], ["size", "large", 3, "text"], [1, "fa-solid", "fa-exclamation-triangle"], [3, "runOpened", "entity", "mode", "isVisible"]], template: function TestHarnessCustomWindowComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "kendo-window", 1, 0);
-            i0.ɵɵlistener("close", function TestHarnessCustomWindowComponent_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClose()); })("stateChange", function TestHarnessCustomWindowComponent_Template_kendo_window_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onStateChange($event)); })("resize", function TestHarnessCustomWindowComponent_Template_kendo_window_resize_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onWindowResize()); });
-            i0.ɵɵelementStart(2, "kendo-window-titlebar")(3, "div", 2);
+            i0.ɵɵelementStart(0, "mj-window", 1, 0);
+            i0.ɵɵlistener("Close", function TestHarnessCustomWindowComponent_Template_mj_window_Close_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnClose()); })("StateChange", function TestHarnessCustomWindowComponent_Template_mj_window_StateChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnStateChange($event)); })("Resize", function TestHarnessCustomWindowComponent_Template_mj_window_Resize_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnWindowResize()); });
+            i0.ɵɵelementStart(2, "mj-window-titlebar")(3, "div", 2);
             i0.ɵɵconditionalCreate(4, TestHarnessCustomWindowComponent_Conditional_4_Template, 1, 1, "img", 3)(5, TestHarnessCustomWindowComponent_Conditional_5_Template, 1, 0, "i", 4)(6, TestHarnessCustomWindowComponent_Conditional_6_Template, 1, 0, "i", 5);
             i0.ɵɵelementStart(7, "span");
             i0.ɵɵtext(8);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(9, "div", 6)(10, "button", 7);
-            i0.ɵɵlistener("click", function TestHarnessCustomWindowComponent_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.minimize()); });
+            i0.ɵɵlistener("click", function TestHarnessCustomWindowComponent_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Minimize()); });
             i0.ɵɵelement(11, "i", 8);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(12, "button", 9);
-            i0.ɵɵlistener("click", function TestHarnessCustomWindowComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleMaximize()); });
+            i0.ɵɵlistener("click", function TestHarnessCustomWindowComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ToggleMaximize()); });
             i0.ɵɵelement(13, "i", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(14, "button", 11);
-            i0.ɵɵlistener("click", function TestHarnessCustomWindowComponent_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeButtonClick()); });
+            i0.ɵɵlistener("click", function TestHarnessCustomWindowComponent_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.CloseButtonClick()); });
             i0.ɵɵelement(15, "i", 12);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(16, "div", 13);
             i0.ɵɵconditionalCreate(17, TestHarnessCustomWindowComponent_Conditional_17_Template, 2, 1, "div", 14)(18, TestHarnessCustomWindowComponent_Conditional_18_Template, 4, 1, "div", 15)(19, TestHarnessCustomWindowComponent_Conditional_19_Template, 1, 3, "mj-ai-test-harness", 16);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵclassProp("minimized-window", ctx.isMinimized);
-            i0.ɵɵproperty("title", ctx.windowTitle)("width", ctx.width)("height", ctx.height)("top", ctx.windowTop)("left", ctx.windowLeft)("minWidth", ctx.isMinimized ? 400 : 800)("minHeight", ctx.isMinimized ? 60 : 600)("draggable", true)("resizable", !ctx.isMinimized)("state", ctx.windowState);
+            i0.ɵɵproperty("Visible", ctx.WindowVisible)("Title", "")("Width", ctx.Width)("Height", ctx.Height)("Top", ctx.WindowTop)("Left", ctx.WindowLeft)("MinWidth", ctx.IsMinimized ? 400 : 800)("MinHeight", ctx.IsMinimized ? 60 : 600)("Draggable", true)("Resizable", !ctx.IsMinimized)("State", ctx.WindowState);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.mode === "agent" && (ctx.agent == null ? null : ctx.agent.LogoURL) ? 4 : ctx.mode === "agent" ? 5 : 6);
+            i0.ɵɵconditional(ctx.Mode === "agent" && (ctx.Agent == null ? null : ctx.Agent.LogoURL) ? 4 : ctx.Mode === "agent" ? 5 : 6);
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(ctx.windowTitle);
+            i0.ɵɵtextInterpolate(ctx.WindowTitle);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("title", ctx.isMaximized ? "Restore" : "Maximize");
+            i0.ɵɵproperty("title", ctx.IsMaximized ? "Restore" : "Maximize");
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("fa-window-maximize", !ctx.isMaximized)("fa-window-restore", ctx.isMaximized);
+            i0.ɵɵclassProp("fa-window-maximize", !ctx.IsMaximized)("fa-window-restore", ctx.IsMaximized);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.loading ? 17 : ctx.error ? 18 : 19);
-        } }, dependencies: [i1.WindowComponent, i1.WindowTitleBarComponent, i2.LoadingComponent, i3.AITestHarnessComponent], styles: ["[_nghost-%COMP%] {\n            display: contents;\n        }\n        \n        \n\n\n\n\n        \n          .minimized-window {\n            .k-window-content {\n                display: none !important;\n            }\n            \n            .k-window-titlebar {\n                border-radius: 4px !important;\n            }\n        }\n        \n        .window-title[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex: 1;\n            \n            .title-icon {\n                color: #666;\n                font-size: 16px;\n            }\n            \n            .title-logo {\n                width: 20px;\n                height: 20px;\n                object-fit: contain;\n            }\n        }\n        \n        .window-actions[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 4px;\n            align-items: center;\n        }\n        \n        .window-action-btn[_ngcontent-%COMP%] {\n            background: transparent;\n            border: none;\n            padding: 8px;\n            cursor: pointer;\n            border-radius: 4px;\n            transition: background-color 0.2s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            \n            &:hover {\n                background-color: rgba(0, 0, 0, 0.08);\n            }\n            \n            i {\n                font-size: 14px;\n                color: #666;\n            }\n        }\n        \n        .window-content[_ngcontent-%COMP%] {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n        }\n        \n        .loading-container[_ngcontent-%COMP%], \n   .error-container[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            gap: 1rem;\n        }\n        \n        .error-container[_ngcontent-%COMP%] {\n            color: #dc3545;\n            \n            i {\n                font-size: 3rem;\n            }\n        }\n        \n        mj-ai-test-harness[_ngcontent-%COMP%] {\n            flex: 1;\n            overflow: hidden;\n        }\n        \n        \n\n          .k-window-content {\n            display: flex;\n            flex-direction: column;\n        }"] }); }
+            i0.ɵɵconditional(ctx.Loading ? 17 : ctx.Error ? 18 : 19);
+        } }, dependencies: [i1.MJWindowComponent, i1.MJWindowTitlebarComponent, i2.LoadingComponent, i3.AITestHarnessComponent], styles: ["[_nghost-%COMP%] {\n            display: contents;\n        }\n\n        .window-title[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex: 1;\n\n            .title-icon {\n                color: var(--mj-text-muted);\n                font-size: 16px;\n            }\n\n            .title-logo {\n                width: 20px;\n                height: 20px;\n                object-fit: contain;\n            }\n        }\n\n        .window-actions[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 4px;\n            align-items: center;\n        }\n\n        .window-action-btn[_ngcontent-%COMP%] {\n            background: transparent;\n            border: none;\n            padding: 8px;\n            cursor: pointer;\n            border-radius: var(--mj-radius-sm);\n            transition: var(--mj-transition-colors);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            &:hover {\n                background: var(--mj-bg-surface-hover);\n            }\n\n            i {\n                font-size: 14px;\n                color: var(--mj-text-muted);\n            }\n        }\n\n        .window-content[_ngcontent-%COMP%] {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .loading-container[_ngcontent-%COMP%], \n   .error-container[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            gap: 1rem;\n        }\n\n        .error-container[_ngcontent-%COMP%] {\n            color: var(--mj-status-error);\n\n            i {\n                font-size: 3rem;\n            }\n        }\n\n        mj-ai-test-harness[_ngcontent-%COMP%] {\n            flex: 1;\n            overflow: hidden;\n        }\n\n        \n\n        [_nghost-%COMP%]     .mj-window-body {\n            display: flex;\n            flex-direction: column;\n            padding: 0;\n        }\n\n        \n\n        [_nghost-%COMP%]     .mj-window-close {\n            display: none;\n        }"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestHarnessCustomWindowComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-test-harness-custom-window', template: `
-        <kendo-window
-            #kendoWindow
-            [title]="windowTitle"
-            [width]="width"
-            [height]="height"
-            [top]="windowTop"
-            [left]="windowLeft"
-            [minWidth]="isMinimized ? 400 : 800"
-            [minHeight]="isMinimized ? 60 : 600"
-            [draggable]="true"
-            [resizable]="!isMinimized"
-            [state]="windowState"
-            [class.minimized-window]="isMinimized"
-            (close)="onClose()"
-            (stateChange)="onStateChange($event)"
-            (resize)="onWindowResize()">
-            
-            <kendo-window-titlebar>
+        <mj-window
+            #mjWindow
+            [Visible]="WindowVisible"
+            [Title]="''"
+            [Width]="Width"
+            [Height]="Height"
+            [Top]="WindowTop"
+            [Left]="WindowLeft"
+            [MinWidth]="IsMinimized ? 400 : 800"
+            [MinHeight]="IsMinimized ? 60 : 600"
+            [Draggable]="true"
+            [Resizable]="!IsMinimized"
+            [State]="WindowState"
+            (Close)="OnClose()"
+            (StateChange)="OnStateChange($event)"
+            (Resize)="OnWindowResize()">
+
+            <mj-window-titlebar>
                 <div class="window-title">
-                    @if (mode === 'agent' && agent?.LogoURL) {
-                        <img [src]="agent?.LogoURL" class="title-logo" alt="Agent logo" />
-                    } @else if (mode === 'agent') {
+                    @if (Mode === 'agent' && Agent?.LogoURL) {
+                        <img [src]="Agent?.LogoURL" class="title-logo" alt="Agent logo" />
+                    } @else if (Mode === 'agent') {
                         <i class="fa-solid fa-robot title-icon"></i>
                     } @else {
                         <i class="fa-solid fa-comment-dots title-icon"></i>
                     }
-                    <span>{{ windowTitle }}</span>
+                    <span>{{ WindowTitle }}</span>
                 </div>
                 <div class="window-actions">
-                    <button 
-                        (click)="minimize()"
+                    <button
+                        (click)="Minimize()"
                         title="Minimize"
                         class="window-action-btn">
                         <i class="fa-solid fa-window-minimize"></i>
                     </button>
-                    <button 
-                        (click)="toggleMaximize()"
-                        [title]="isMaximized ? 'Restore' : 'Maximize'"
+                    <button
+                        (click)="ToggleMaximize()"
+                        [title]="IsMaximized ? 'Restore' : 'Maximize'"
                         class="window-action-btn">
-                        <i class="fa-solid" [class.fa-window-maximize]="!isMaximized" [class.fa-window-restore]="isMaximized"></i>
+                        <i class="fa-solid" [class.fa-window-maximize]="!IsMaximized" [class.fa-window-restore]="IsMaximized"></i>
                     </button>
-                    <button 
-                        (click)="closeButtonClick()"
+                    <button
+                        (click)="CloseButtonClick()"
                         title="Close"
                         class="window-action-btn">
                         <i class="fa-solid fa-xmark"></i>
                     </button>
                 </div>
-            </kendo-window-titlebar>
-            
+            </mj-window-titlebar>
+
             <div class="window-content">
-                @if (loading) {
+                @if (Loading) {
                     <div class="loading-container">
-                        <mj-loading [text]="'Loading ' + (mode === 'agent' ? 'AI Agent' : 'AI Prompt') + '...'" size="large"></mj-loading>
+                        <mj-loading [text]="'Loading ' + (Mode === 'agent' ? 'AI Agent' : 'AI Prompt') + '...'" size="large"></mj-loading>
                     </div>
                 }
-                @else if (error) {
+                @else if (Error) {
                     <div class="error-container">
                         <i class="fa-solid fa-exclamation-triangle"></i>
-                        <p>{{ error }}</p>
+                        <p>{{ Error }}</p>
                     </div>
                 }
                 @else {
                     <mj-ai-test-harness
-                        [entity]="(agent || prompt) || null"
-                        [mode]="mode"
+                        [entity]="(Agent || Prompt) || null"
+                        [mode]="Mode"
                         [isVisible]="true"
-                        (runOpened)="onRunOpened($event)">
+                        (runOpened)="OnRunOpened($event)">
                     </mj-ai-test-harness>
                 }
             </div>
-        </kendo-window>
-    `, styles: ["\n        :host {\n            display: contents;\n        }\n        \n        /* Remove animation for snappy performance\n        ::ng-deep .window-transition {\n            transition: all 0.6s ease-in-out !important;\n        } */\n        \n        ::ng-deep .minimized-window {\n            .k-window-content {\n                display: none !important;\n            }\n            \n            .k-window-titlebar {\n                border-radius: 4px !important;\n            }\n        }\n        \n        .window-title {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex: 1;\n            \n            .title-icon {\n                color: #666;\n                font-size: 16px;\n            }\n            \n            .title-logo {\n                width: 20px;\n                height: 20px;\n                object-fit: contain;\n            }\n        }\n        \n        .window-actions {\n            display: flex;\n            gap: 4px;\n            align-items: center;\n        }\n        \n        .window-action-btn {\n            background: transparent;\n            border: none;\n            padding: 8px;\n            cursor: pointer;\n            border-radius: 4px;\n            transition: background-color 0.2s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            \n            &:hover {\n                background-color: rgba(0, 0, 0, 0.08);\n            }\n            \n            i {\n                font-size: 14px;\n                color: #666;\n            }\n        }\n        \n        .window-content {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n        }\n        \n        .loading-container,\n        .error-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            gap: 1rem;\n        }\n        \n        .error-container {\n            color: #dc3545;\n            \n            i {\n                font-size: 3rem;\n            }\n        }\n        \n        mj-ai-test-harness {\n            flex: 1;\n            overflow: hidden;\n        }\n        \n        /* Ensure Kendo Window content wrapper maintains proper height */\n        ::ng-deep .k-window-content {\n            display: flex;\n            flex-direction: column;\n        }\n    "] }]
-    }], () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], { kendoWindow: [{
+        </mj-window>
+    `, styles: ["\n        :host {\n            display: contents;\n        }\n\n        .window-title {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex: 1;\n\n            .title-icon {\n                color: var(--mj-text-muted);\n                font-size: 16px;\n            }\n\n            .title-logo {\n                width: 20px;\n                height: 20px;\n                object-fit: contain;\n            }\n        }\n\n        .window-actions {\n            display: flex;\n            gap: 4px;\n            align-items: center;\n        }\n\n        .window-action-btn {\n            background: transparent;\n            border: none;\n            padding: 8px;\n            cursor: pointer;\n            border-radius: var(--mj-radius-sm);\n            transition: var(--mj-transition-colors);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n\n            &:hover {\n                background: var(--mj-bg-surface-hover);\n            }\n\n            i {\n                font-size: 14px;\n                color: var(--mj-text-muted);\n            }\n        }\n\n        .window-content {\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .loading-container,\n        .error-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            height: 100%;\n            gap: 1rem;\n        }\n\n        .error-container {\n            color: var(--mj-status-error);\n\n            i {\n                font-size: 3rem;\n            }\n        }\n\n        mj-ai-test-harness {\n            flex: 1;\n            overflow: hidden;\n        }\n\n        /* Ensure mj-window body fills available space for the test harness */\n        :host ::ng-deep .mj-window-body {\n            display: flex;\n            flex-direction: column;\n            padding: 0;\n        }\n\n        /* Hide the default close button since we have custom titlebar actions */\n        :host ::ng-deep .mj-window-close {\n            display: none;\n        }\n    "] }]
+    }], null, { MjWindow: [{
             type: ViewChild,
-            args: ['kendoWindow', { static: false }]
-        }], testHarness: [{
+            args: ['mjWindow', { static: false }]
+        }], TestHarness: [{
             type: ViewChild,
             args: [AITestHarnessComponent, { static: false }]
-        }], data: [{
+        }], Data: [{
             type: Input
-        }], closeWindow: [{
+        }], CloseWindow: [{
             type: Output
-        }], minimizeWindow: [{
+        }], MinimizeWindow: [{
             type: Output
-        }], restoreWindow: [{
+        }], RestoreWindow: [{
             type: Output
-        }], executionStateChange: [{
+        }], ExecutionStateChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestHarnessCustomWindowComponent, { className: "TestHarnessCustomWindowComponent", filePath: "lib/test-harness-custom-window.component.ts", lineNumber: 200 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestHarnessCustomWindowComponent, { className: "TestHarnessCustomWindowComponent", filePath: "lib/test-harness-custom-window.component.ts", lineNumber: 191 }); })();
 //# sourceMappingURL=test-harness-custom-window.component.js.map