@cqa-lib/cqa-ui 1.1.89 → 1.1.91

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -5642,9 +5642,6 @@ class StepRendererComponent {
         const currentStep = changes['step']?.currentValue || this.step;
         const previousStep = changes['step']?.previousValue;
         // Check if selectedIterationId input changed (for loop steps)
-        console.log("changes['selectedIterationId']", changes['selectedIterationId'], currentStep.type, this.container.length);
-        const selectedIterationIdChanged = changes['selectedIterationId'];
-        console.log("changes['selectedIterationId'] selectedIterationIdChanged", selectedIterationIdChanged);
         // && 
         //                                    currentStep.type === 'loop' && 
         //                                    this.container.length > 0;
@@ -5695,6 +5692,8 @@ class StepRendererComponent {
             currentStep.children !== previousStep.children ||
             currentStep.steps !== previousStep.steps ||
             currentStep.expanded !== previousStep.expanded ||
+            currentStep.activeBranchStepId !== previousStep.activeBranchStepId ||
+            currentStep.branches !== previousStep.branches ||
             (currentStep.config && currentStep.config.expanded !== previousStep.config?.expanded));
         // Update properties without recreating component to prevent blinking
         if (onlyNestedDataChanged && this.container.length > 0) {
@@ -5736,7 +5735,7 @@ class StepRendererComponent {
         // List of properties that commonly change and need to be updated
         const importantProperties = ['status', 'duration', 'expanded', 'subSteps', 'children', 'nestedSteps', 'steps',
             'executionData', 'action', 'title', 'result', 'method', 'endpoint', 'statusCode', 'branches',
-            'responseTime', 'actions', 'prompt', 'optimizedRun', 'actionCount', 'iterations', 'selectedIterationId'];
+            'responseTime', 'actions', 'prompt', 'optimizedRun', 'actionCount', 'iterations', 'selectedIterationId', 'stepNumber'];
         // Update important properties
         importantProperties.forEach(key => {
             // For selectedIterationId on loop steps, prioritize the input value over step value
@@ -5829,19 +5828,26 @@ class StepRendererComponent {
             }
         }
         // Special handling for condition-step: ensure nestedSteps is properly updated
-        // This is important when children are loaded from the API
+        // This is important when children are loaded from the API or when switching branches
         if (currentStep.type === 'condition' && currentStep.nestedSteps !== undefined) {
             const currentNestedSteps = currentStep.nestedSteps || [];
             const previousNestedSteps = previousStep.nestedSteps || [];
-            // Check if nestedSteps changed (length or reference)
-            if (currentNestedSteps.length !== previousNestedSteps.length ||
-                currentNestedSteps !== previousNestedSteps) {
+            console.log('🔄 step-renderer: currentNestedSteps', currentNestedSteps);
+            console.log('🔄 step-renderer: previousNestedSteps', previousNestedSteps);
+            // Use deep comparison to detect content changes, not just reference changes
+            // This is critical when switching between IF and ELSE_IF branches
+            if (this.hasNestedStepsChanged(currentNestedSteps, previousNestedSteps)) {
                 // Create a new array reference to ensure change detection triggers
                 instance.nestedSteps = [...currentNestedSteps];
                 if (instance.config) {
-                    instance.config.nestedSteps = instance.nestedSteps;
+                    instance.config.nestedSteps = [...currentNestedSteps];
                 }
                 hasChanges = true;
+                console.log('🔄 step-renderer: nestedSteps updated for condition-step', {
+                    stepId: currentStep.id,
+                    previousCount: previousNestedSteps.length,
+                    currentCount: currentNestedSteps.length
+                });
             }
         }
         // Special handling for loop-step: ensure selectedIterationId from input is used
@@ -6017,6 +6023,47 @@ class StepRendererComponent {
         }
         return false;
     }
+    /**
+     * Deep comparison for nestedSteps array to detect content changes
+     * This is important for condition steps when switching between branches
+     */
+    hasNestedStepsChanged(current, previous) {
+        if (!current && !previous)
+            return false;
+        if (!current || !previous)
+            return true;
+        if (current.length !== previous.length)
+            return true;
+        if (current === previous)
+            return false; // Same reference
+        // Compare each step by ID to detect content changes
+        // This handles cases where array length is same but content differs (e.g., switching branches)
+        for (let i = 0; i < current.length; i++) {
+            const currentStep = current[i];
+            const previousStep = previous[i];
+            if (!previousStep)
+                return true;
+            // Compare step IDs - if IDs differ, content has changed
+            const currentStepId = currentStep.id || currentStep.testStepResultId;
+            const previousStepId = previousStep.id || previousStep.testStepResultId;
+            if (currentStepId !== previousStepId) {
+                return true;
+            }
+            // Also check if the step type changed (important for branch switching)
+            if (currentStep.type !== previousStep.type) {
+                return true;
+            }
+            // Check if testStepType changed (IF vs ELSE_IF vs ELSE)
+            if (currentStep.testStepType !== previousStep.testStepType) {
+                return true;
+            }
+            // Check for update token if present (used to force re-render)
+            if (currentStep._updateToken && currentStep._updateToken !== previousStep._updateToken) {
+                return true;
+            }
+        }
+        return false;
+    }
     getStepKey(step) {
         if (!step)
             return '';
@@ -6029,7 +6076,7 @@ class StepRendererComponent {
         const totalSubSteps = (step.branches || []).reduce((sum, branch) => {
             return sum + (branch.subSteps?.length || 0);
         }, 0);
-        return `${step.id || ''}_${executionStatus}_${step.status || ''}_${step.duration || ''}_${step.expanded || false}_${(step.children || []).length}_${(step.nestedSteps || []).length}_${(step.steps || []).length}_${branchesLength}_${totalSubSteps}`;
+        return `${step.id || ''}_${executionStatus}_${step.status || ''}_${step.duration || ''}_${step.expanded || false}_${(step.children || []).length}_${(step.nestedSteps || []).length}_${(step.steps || []).length}_${branchesLength}_${totalSubSteps}_${step.stepNumber || ''}`;
     }
     loadComponent() {
         if (!this.container || !this.step)
@@ -6191,6 +6238,10 @@ class StepRendererComponent {
                 if (this.isStepLoadingHandler) {
                     instance.isLoading = this.isStepLoadingHandler(this.step);
                 }
+                // Pass activeBranchStepId if present
+                if (this.step.activeBranchStepId !== undefined) {
+                    instance.activeBranchStepId = this.step.activeBranchStepId;
+                }
             }
             // Wire up common event emitters for api, ai-agent, and loop steps
             if (this.step.type === 'api' || this.step.type === 'ai-agent' || this.step.type === 'loop' || this.step.type === 'condition') {
@@ -6238,6 +6289,12 @@ class StepRendererComponent {
                         this.onExpandHandler?.(this.step);
                     });
                 }
+                // Wire up onBranchClickEvent for nested condition steps
+                if (instance.onBranchClickEvent && this.onConditionBranchClickHandler) {
+                    instance.onBranchClickEvent.subscribe((branch) => {
+                        this.onConditionBranchClickHandler?.(this.step, branch);
+                    });
+                }
             }
             // Ensure expanded property is passed correctly
             // Use isStepExpandedHandler if available, otherwise use step.expanded or step.config.expanded
@@ -6287,6 +6344,8 @@ class StepRendererComponent {
                 instance.onViewFullLogsHandler = this.onViewFullLogsHandler;
             if (this.onSelfHealActionHandler)
                 instance.onSelfHealActionHandler = this.onSelfHealActionHandler;
+            if (this.onConditionBranchClickHandler)
+                instance.onConditionBranchClickHandler = this.onConditionBranchClickHandler;
             if (this.isUploadingBaseline !== undefined)
                 instance.isUploadingBaseline = this.isUploadingBaseline;
             if (this.isMakingCurrentBaseline !== undefined)
@@ -6295,6 +6354,27 @@ class StepRendererComponent {
                 instance.selectedIterationId = this.selectedIterationId;
             if (this.isLive !== undefined)
                 instance.isLive = this.isLive;
+            // Update condition-step specific properties for change detection
+            if (this.step.type === 'condition') {
+                // Update activeBranchStepId if it changed
+                if (this.step.activeBranchStepId !== undefined) {
+                    instance.activeBranchStepId = this.step.activeBranchStepId;
+                }
+                // Update branches if they changed
+                if (this.step.branches !== undefined) {
+                    instance.branches = this.step.branches;
+                    if (instance.config) {
+                        instance.config.branches = this.step.branches;
+                    }
+                }
+                // Update nestedSteps if they changed
+                if (this.step.nestedSteps !== undefined) {
+                    instance.nestedSteps = this.step.nestedSteps;
+                    if (instance.config) {
+                        instance.config.nestedSteps = this.step.nestedSteps;
+                    }
+                }
+            }
             // Also set config for backward compatibility with components that still use config input
             if ('config' in instance) {
                 instance.config = this.step;
@@ -6363,7 +6443,8 @@ class StepRendererComponent {
                     actionCount: instance.actionCount,
                     iterations: instance.iterations,
                     selectedIterationId: instance.selectedIterationId,
-                    branches: instance.branches ? JSON.parse(JSON.stringify(instance.branches)) : instance.branches,
+                    branches: instance.branches,
+                    stepNumber: instance.stepNumber,
                 };
                 this.updateComponentInstance(this.step, previousStep);
                 this.previousStepKey = currentKey;
@@ -6375,7 +6456,7 @@ class StepRendererComponent {
 StepRendererComponent.componentInstances = new WeakMap();
 StepRendererComponent.componentRefs = new WeakMap();
 StepRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepRendererComponent, deps: [{ token: STEP_COMPONENT_MAP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepRendererComponent, selector: "cqa-step-renderer", inputs: { step: "step", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selectedIterationId: "selectedIterationId", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", isLive: "isLive" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true });
+StepRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepRendererComponent, selector: "cqa-step-renderer", inputs: { step: "step", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selectedIterationId: "selectedIterationId", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isLive: "isLive" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -6425,6 +6506,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], onViewAllIterationsHandler: [{
                 type: Input
+            }], onConditionBranchClickHandler: [{
+                type: Input
             }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef }]
@@ -6696,10 +6779,10 @@ class VisualComparisonComponent {
     }
 }
 VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.baseline\" [src]=\"screenshots.baseline\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/*\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button>\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n      \n      <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n        {{ log.message }}\n      </div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n\n  \n  <cqa-visual-difference-modal\n    [isOpen]=\"isModalOpen\"\n    [baselineUrl]=\"screenshots?.baseline || ''\"\n    [currentUrl]=\"screenshots?.current || ''\"\n    [differenceUrl]=\"screenshots?.difference || ''\"\n    [initialView]=\"initialModalView\"\n    (close)=\"onCloseModal()\">\n  </cqa-visual-difference-modal>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"], components: [{ type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", inputs: ["baselineUrl", "currentUrl", "differenceUrl", "title", "subtitle", "isOpen", "initialView"], outputs: ["close"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.baseline\" [src]=\"screenshots.baseline\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/*\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n      \n      <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n        {{ log.message }}\n      </div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n\n  \n  <cqa-visual-difference-modal\n    [isOpen]=\"isModalOpen\"\n    [baselineUrl]=\"screenshots?.baseline || ''\"\n    [currentUrl]=\"screenshots?.current || ''\"\n    [differenceUrl]=\"screenshots?.difference || ''\"\n    [initialView]=\"initialModalView\"\n    (close)=\"onCloseModal()\">\n  </cqa-visual-difference-modal>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"], components: [{ type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", inputs: ["baselineUrl", "currentUrl", "differenceUrl", "title", "subtitle", "isOpen", "initialView"], outputs: ["close"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.baseline\" [src]=\"screenshots.baseline\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/*\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button>\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n      \n      <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n        {{ log.message }}\n      </div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n\n  \n  <cqa-visual-difference-modal\n    [isOpen]=\"isModalOpen\"\n    [baselineUrl]=\"screenshots?.baseline || ''\"\n    [currentUrl]=\"screenshots?.current || ''\"\n    [differenceUrl]=\"screenshots?.difference || ''\"\n    [initialView]=\"initialModalView\"\n    (close)=\"onCloseModal()\">\n  </cqa-visual-difference-modal>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"] }]
+            args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.baseline\" [src]=\"screenshots.baseline\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/*\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n      \n      <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n        {{ log.message }}\n      </div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n\n  \n  <cqa-visual-difference-modal\n    [isOpen]=\"isModalOpen\"\n    [baselineUrl]=\"screenshots?.baseline || ''\"\n    [currentUrl]=\"screenshots?.current || ''\"\n    [differenceUrl]=\"screenshots?.difference || ''\"\n    [initialView]=\"initialModalView\"\n    (close)=\"onCloseModal()\">\n  </cqa-visual-difference-modal>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"] }]
         }], propDecorators: { screenshots: [{
                 type: Input
             }], logs: [{
@@ -6839,7 +6922,6 @@ class BasicStepComponent extends BaseStepComponent {
             expanded: this.expanded,
             nestedSteps: stepsToUse,
         };
-        console.log('BasicStepComponent ngOnInit', this.id, this.config);
         super.ngOnInit();
     }
     get hasSubSteps() {
@@ -6904,10 +6986,10 @@ class BasicStepComponent extends BaseStepComponent {
     }
 }
 BasicStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BasicStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BasicStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BasicStepComponent, selector: "cqa-basic-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", selfHealAnalysis: "selfHealAnalysis", selfHealed: "selfHealed", selfHealDuration: "selfHealDuration", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", nestedSteps: "nestedSteps", hasChild: "hasChild", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\"\n     style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    \n    <!-- Status Icon -->\n    <!-- {{ getStatusIcon(config.status) }} -->\n<!-- Success -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" >\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"config.status.toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"config.status.toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0)\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && (hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0))\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <div\n        *ngFor=\"let subStep of subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <!-- <mat-icon\n          class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n          [ngClass]=\"getStatusColorClass(subStep.status)\">\n          {{ getStatusIcon(subStep.status) }}\n        </mat-icon> -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-mt-1 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+BasicStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BasicStepComponent, selector: "cqa-basic-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", selfHealAnalysis: "selfHealAnalysis", selfHealed: "selfHealed", selfHealDuration: "selfHealDuration", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", nestedSteps: "nestedSteps", hasChild: "hasChild", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\"\n     style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    \n    <!-- Status Icon -->\n    <!-- {{ getStatusIcon(config.status) }} -->\n<!-- Success -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" >\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"config.status.toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"config.status.toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0)\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && (hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0))\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <div\n        *ngFor=\"let subStep of subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <!-- <mat-icon\n          class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n          [ngClass]=\"getStatusColorClass(subStep.status)\">\n          {{ getStatusIcon(subStep.status) }}\n        </mat-icon> -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-mt-1 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BasicStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-basic-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\"\n     style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    \n    <!-- Status Icon -->\n    <!-- {{ getStatusIcon(config.status) }} -->\n<!-- Success -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" >\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"config.status.toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"config.status.toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0)\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && (hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0))\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <div\n        *ngFor=\"let subStep of subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <!-- <mat-icon\n          class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n          [ngClass]=\"getStatusColorClass(subStep.status)\">\n          {{ getStatusIcon(subStep.status) }}\n        </mat-icon> -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-mt-1 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-basic-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\"\n     style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    \n    <!-- Status Icon -->\n    <!-- {{ getStatusIcon(config.status) }} -->\n<!-- Success -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" >\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"config.status.toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"config.status.toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0)\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && (hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0))\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <div\n        *ngFor=\"let subStep of subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <!-- <mat-icon\n          class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n          [ngClass]=\"getStatusColorClass(subStep.status)\">\n          {{ getStatusIcon(subStep.status) }}\n        </mat-icon> -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-mt-1 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -6952,6 +7034,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], getConditionBranchesHandler: [{
                 type: Input
+            }], onConditionBranchClickHandler: [{
+                type: Input
             }], isStepLoadingHandler: [{
                 type: Input
             }], isStepExpandedHandler: [{
@@ -7209,10 +7293,10 @@ class StepGroupComponent extends BaseStepComponent {
     }
 }
 StepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps", hasChild: "hasChild", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n      {{ config.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <ng-container *ngFor=\"let step of config.steps\">\n        <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n        <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n        <cqa-step-renderer \n          [step]=\"step\"\n          [onExpandHandler]=\"onExpandHandler\"\n          [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n          [isStepLoadingHandler]=\"isStepLoadingHandler\"\n          [isStepExpandedHandler]=\"isStepExpandedHandler\"\n          [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n          [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n          [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n          [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n          [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n          [formatActionsHandler]=\"formatActionsHandler\"\n          [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n          [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n          [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n          [onAnalyzeHandler]=\"onAnalyzeHandler\"\n          [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n          [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n          [isUploadingBaseline]=\"isUploadingBaseline\"\n          [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n          [selectedIterationId]=\"step?.selectedIterationId || ''\"\n          [isLive]=\"isLive\">\n        </cqa-step-renderer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "isLive"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps", hasChild: "hasChild", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n      {{ config.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <ng-container *ngFor=\"let step of config.steps\">\n        <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n        <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n        <cqa-step-renderer \n          [step]=\"step\"\n          [onExpandHandler]=\"onExpandHandler\"\n          [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n          [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n          [isStepLoadingHandler]=\"isStepLoadingHandler\"\n          [isStepExpandedHandler]=\"isStepExpandedHandler\"\n          [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n          [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n          [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n          [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n          [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n          [formatActionsHandler]=\"formatActionsHandler\"\n          [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n          [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n          [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n          [onAnalyzeHandler]=\"onAnalyzeHandler\"\n          [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n          [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n          [isUploadingBaseline]=\"isUploadingBaseline\"\n          [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n          [selectedIterationId]=\"step?.selectedIterationId || ''\"\n          [isLive]=\"isLive\">\n        </cqa-step-renderer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "isLive"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root' }, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n      {{ config.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <ng-container *ngFor=\"let step of config.steps\">\n        <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n        <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n        <cqa-step-renderer \n          [step]=\"step\"\n          [onExpandHandler]=\"onExpandHandler\"\n          [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n          [isStepLoadingHandler]=\"isStepLoadingHandler\"\n          [isStepExpandedHandler]=\"isStepExpandedHandler\"\n          [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n          [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n          [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n          [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n          [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n          [formatActionsHandler]=\"formatActionsHandler\"\n          [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n          [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n          [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n          [onAnalyzeHandler]=\"onAnalyzeHandler\"\n          [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n          [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n          [isUploadingBaseline]=\"isUploadingBaseline\"\n          [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n          [selectedIterationId]=\"step?.selectedIterationId || ''\"\n          [isLive]=\"isLive\">\n        </cqa-step-renderer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root' }, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n      {{ config.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <ng-container *ngFor=\"let step of config.steps\">\n        <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n        <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n        <cqa-step-renderer \n          [step]=\"step\"\n          [onExpandHandler]=\"onExpandHandler\"\n          [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n          [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n          [isStepLoadingHandler]=\"isStepLoadingHandler\"\n          [isStepExpandedHandler]=\"isStepExpandedHandler\"\n          [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n          [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n          [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n          [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n          [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n          [formatActionsHandler]=\"formatActionsHandler\"\n          [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n          [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n          [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n          [onAnalyzeHandler]=\"onAnalyzeHandler\"\n          [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n          [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n          [isUploadingBaseline]=\"isUploadingBaseline\"\n          [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n          [selectedIterationId]=\"step?.selectedIterationId || ''\"\n          [isLive]=\"isLive\">\n        </cqa-step-renderer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -7239,6 +7323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], getConditionBranchesHandler: [{
                 type: Input
+            }], onConditionBranchClickHandler: [{
+                type: Input
             }], isStepLoadingHandler: [{
                 type: Input
             }], isStepExpandedHandler: [{
@@ -7804,10 +7890,10 @@ class LoopStepComponent extends BaseStepComponent {
     }
 }
 LoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations", hasChild: "hasChild", isLive: "isLive", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", iterationData: "iterationData" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction", onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Loop Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span *ngFor=\"let badge of getLoopTypeBadges()\" \n        class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ badge }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Iteration Selector -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n      <label>Iteration</label>\n      <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n        <!-- Status indicator for selected iteration -->\n        <div *ngIf=\"selectedIteration\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n          <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n        </div>\n        <select\n          class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n          [(ngModel)]=\"selectedIteration\"\n          (ngModelChange)=\"handleIterationChange($event)\"\n          [compareWith]=\"compareIteration\"\n          [disabled]=\"isLive && (status === 'running' || status === 'RUNNING')\">\n          <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n            {{ getIterationLabel(iteration) }}\n          </option>\n        </select>\n        <!-- Dropdown arrow -->\n        <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n          <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n      </div>\n      <span class=\"cqa-ml-auto\">\n        Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n      </span>\n    </div>\n\n    <!-- Selected Iteration Sub-steps -->\n    <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div\n        *ngFor=\"let subStep of selectedIteration.subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- View All Iterations Link -->\n    <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n      <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n        View all iterations\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n      </a>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations", hasChild: "hasChild", isLive: "isLive", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", iterationData: "iterationData" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction", onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Loop Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span *ngFor=\"let badge of getLoopTypeBadges()\" \n        class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ badge }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Iteration Selector -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n      <label>Iteration</label>\n      <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n        <!-- Status indicator for selected iteration -->\n        <div *ngIf=\"selectedIteration\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n          <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n        </div>\n        <select\n          class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n          [(ngModel)]=\"selectedIteration\"\n          (ngModelChange)=\"handleIterationChange($event)\"\n          [compareWith]=\"compareIteration\"\n          [disabled]=\"isLive && (status === 'running' || status === 'RUNNING')\">\n          <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n            {{ getIterationLabel(iteration) }}\n          </option>\n        </select>\n        <!-- Dropdown arrow -->\n        <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n          <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n      </div>\n      <span class=\"cqa-ml-auto\">\n        Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n      </span>\n    </div>\n\n    <!-- Selected Iteration Sub-steps -->\n    <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div\n        *ngFor=\"let subStep of selectedIteration.subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- View All Iterations Link -->\n    <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n      <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n        View all iterations\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n      </a>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-loop-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Loop Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span *ngFor=\"let badge of getLoopTypeBadges()\" \n        class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ badge }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Iteration Selector -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n      <label>Iteration</label>\n      <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n        <!-- Status indicator for selected iteration -->\n        <div *ngIf=\"selectedIteration\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n          <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n        </div>\n        <select\n          class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n          [(ngModel)]=\"selectedIteration\"\n          (ngModelChange)=\"handleIterationChange($event)\"\n          [compareWith]=\"compareIteration\"\n          [disabled]=\"isLive && (status === 'running' || status === 'RUNNING')\">\n          <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n            {{ getIterationLabel(iteration) }}\n          </option>\n        </select>\n        <!-- Dropdown arrow -->\n        <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n          <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n      </div>\n      <span class=\"cqa-ml-auto\">\n        Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n      </span>\n    </div>\n\n    <!-- Selected Iteration Sub-steps -->\n    <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div\n        *ngFor=\"let subStep of selectedIteration.subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- View All Iterations Link -->\n    <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n      <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n        View all iterations\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n      </a>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-loop-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Loop Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span *ngFor=\"let badge of getLoopTypeBadges()\" \n        class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ badge }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Iteration Selector -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n      <label>Iteration</label>\n      <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n        <!-- Status indicator for selected iteration -->\n        <div *ngIf=\"selectedIteration\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n          <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n        </div>\n        <select\n          class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n          [(ngModel)]=\"selectedIteration\"\n          (ngModelChange)=\"handleIterationChange($event)\"\n          [compareWith]=\"compareIteration\"\n          [disabled]=\"isLive && (status === 'running' || status === 'RUNNING')\">\n          <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n            {{ getIterationLabel(iteration) }}\n          </option>\n        </select>\n        <!-- Dropdown arrow -->\n        <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n          <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n      </div>\n      <span class=\"cqa-ml-auto\">\n        Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n      </span>\n    </div>\n\n    <!-- Selected Iteration Sub-steps -->\n    <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div\n        *ngFor=\"let subStep of selectedIteration.subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- View All Iterations Link -->\n    <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n      <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n        View all iterations\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n      </a>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -7844,6 +7930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], getConditionBranchesHandler: [{
                 type: Input
+            }], onConditionBranchClickHandler: [{
+                type: Input
             }], isStepLoadingHandler: [{
                 type: Input
             }], isStepExpandedHandler: [{
@@ -7907,8 +7995,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 class ConditionStepComponent extends BaseStepComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.branches = [];
         this.nestedSteps = [];
         this.onBranchClickEvent = new EventEmitter();
@@ -7924,8 +8013,11 @@ class ConditionStepComponent extends BaseStepComponent {
         this.showFailedStepDetails = false;
     }
     ngOnInit() {
-        // Build config from individual inputs
-        // Use nestedSteps if provided, otherwise fall back to empty array
+        // Always determine active branch from executed branch (for live mode)
+        if (this.isLive) {
+            this.determineActiveBranch();
+        }
+        // Filter nested steps based on active branch (derived from executed branch)
         const stepsToUse = this.nestedSteps || [];
         this.config = {
             id: this.id,
@@ -7968,10 +8060,6 @@ class ConditionStepComponent extends BaseStepComponent {
                 }
             }
         }
-        if (changes['nestedSteps']) {
-            const newNestedSteps = this.nestedSteps !== undefined ? [...(this.nestedSteps || [])] : [];
-            this.config.nestedSteps = newNestedSteps;
-        }
         if (this.isLive) {
             // Update branches if changed - create deep copy to ensure change detection works
             if (changes['branches'] && this.branches !== undefined) {
@@ -7987,7 +8075,7 @@ class ConditionStepComponent extends BaseStepComponent {
                 const currentSubStepsCount = (this.config.branches || []).reduce((sum, b) => sum + (b.subSteps?.length || 0), 0);
                 const newSubStepsCount = (this.branches || []).reduce((sum, b) => sum + (b.subSteps?.length || 0), 0);
                 if (currentSubStepsCount !== newSubStepsCount ||
-                    JSON.stringify(this.config.branches) !== JSON.stringify(this.branches)) {
+                    this.config.branches !== this.branches) {
                     this.config.branches = this.branches.map((branch) => ({
                         ...branch,
                         subSteps: branch.subSteps ? [...branch.subSteps] : []
@@ -8008,6 +8096,26 @@ class ConditionStepComponent extends BaseStepComponent {
             if (changes['conditionText'] && this.conditionText !== undefined) {
                 this.config.conditionText = this.conditionText;
             }
+            // Update active branch if changed - always derive from executed branch
+            if (changes['activeBranchStepId'] || changes['branches']) {
+                // Check if executed branch changed
+                const executedBranchChanged = changes['branches'] &&
+                    changes['branches'].previousValue &&
+                    changes['branches'].currentValue &&
+                    changes['branches'].previousValue.some((prevBranch, index) => {
+                        const currentBranch = changes['branches'].currentValue[index];
+                        return prevBranch?.executed !== currentBranch?.executed;
+                    });
+                // Always determine active branch from executed branch
+                this.determineActiveBranch();
+            }
+            // Filter nested steps based on active branch
+            if (changes['nestedSteps'] || changes['activeBranchStepId']) {
+                this.config.nestedSteps = this.nestedSteps;
+            }
+            if (changes['branches']) {
+                this.config.branches = this.branches;
+            }
         }
     }
     toggle() {
@@ -8100,13 +8208,63 @@ class ConditionStepComponent extends BaseStepComponent {
         const hasNestedSteps = !!(this.config.nestedSteps && this.config.nestedSteps.length > 0);
         return hasBranchSubSteps || hasNestedSteps;
     }
+    determineActiveBranch() {
+        if (!this.branches || !Array.isArray(this.branches) || this.branches.length === 0) {
+            return;
+        }
+        // Always find the executed branch and set activeBranchStepId from it
+        const executedBranch = this.branches.find((b) => b.executed);
+        if (executedBranch && executedBranch.branchStepId) {
+            // Update activeBranchStepId to match executed branch
+            if (this.activeBranchStepId !== executedBranch.branchStepId) {
+                this.activeBranchStepId = executedBranch.branchStepId;
+                // Update nested steps when executed branch changes
+            }
+            return;
+        }
+        // If no branch is executed, default to first branch (IF branch) but don't mark it as executed
+        const firstBranch = this.branches[0];
+        if (firstBranch && firstBranch.branchStepId) {
+            if (this.activeBranchStepId !== firstBranch.branchStepId) {
+                this.activeBranchStepId = firstBranch.branchStepId;
+            }
+        }
+    }
+    onBranchClick(branch) {
+        if (!this.isLive) {
+            return;
+        }
+        this.onBranchClickEvent.emit(branch);
+    }
+    getBranchClass(branch) {
+        // If branch is executed, show green styling
+        if (branch.executed) {
+            return 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]';
+        }
+        // For live mode: if no branches are executed but there's an activeBranchStepId,
+        // show the active branch with blue border
+        if (this.isLive && !this.hasAnyExecutedBranch()) {
+            return 'cqa-bg-[#EFF6FF] cqa-text-[#1E40AF] cqa-border cqa-border-solid cqa-border-[#3B82F6]';
+        }
+        // Default: gray styling for unexecuted branches
+        return 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]';
+    }
+    /**
+     * Check if any branch is executed.
+     */
+    hasAnyExecutedBranch() {
+        if (!this.branches || !Array.isArray(this.branches)) {
+            return false;
+        }
+        return this.branches.some((b) => b.executed === true);
+    }
 }
-ConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionStepComponent, selector: "cqa-condition-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", conditionText: "conditionText", branches: "branches", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", selfHealAnalysis: "selfHealAnalysis", isLoading: "isLoading", nestedSteps: "nestedSteps", hasChild: "hasChild", ifChild: "ifChild", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { onBranchClickEvent: "onBranchClickEvent", onExpand: "onExpand", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <div class=\"cqa-p-2\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n      (click)=\"toggleHeader()\">\n      \n      <!-- Status Icon -->\n      <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n      <!-- Condition Icon -->\n      <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n      <!-- Step Number and Title -->\n      <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n        <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n          {{ config.stepNumber }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n        </span>\n        \n        <!-- Condition Badge -->\n        <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n          CONDITION\n        </span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n          {{ formatDuration(config.duration) }}\n        </span>\n        <svg *ngIf=\"hasExpandableContent\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </div>\n    </div>\n    <!-- Branch Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-flex-wrap\">\n      <div\n        *ngFor=\"let branch of config.branches\"\n        class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n        [ngClass]=\"branch.executed \n          ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n          : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n        <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>{{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLoading\">\n\n    <!-- Executed Branch Sub-steps -->\n    <div *ngFor=\"let branch of config.branches\">\n      <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n        <div\n          *ngFor=\"let subStep of branch.subSteps\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n          \n          <!-- Sub-step Status Icon -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Failure -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Pending -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Running - Show spinner -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n            <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n          </div>\n  \n\n          <!-- Sub-step Description -->\n          <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n            {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\n          </span>\n\n          <!-- Sub-step Duration -->\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n            {{ formatDuration(subStep.duration) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Unexecuted Branch Message -->\n    <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n      </p>\n    </div>\n\n    <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n      </p>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton && !isLoading\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [timingBreakdown]=\"timingBreakdown\"\n      [testStepResultId]=\"testStepResultId\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionStepComponent, selector: "cqa-condition-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", conditionText: "conditionText", branches: "branches", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", selfHealAnalysis: "selfHealAnalysis", isLoading: "isLoading", nestedSteps: "nestedSteps", hasChild: "hasChild", ifChild: "ifChild", activeBranchStepId: "activeBranchStepId", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { onBranchClickEvent: "onBranchClickEvent", onExpand: "onExpand", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <div class=\"cqa-p-2\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n      (click)=\"toggleHeader()\">\n      \n      <!-- Status Icon -->\n      <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n      <!-- Condition Icon -->\n      <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n      <!-- Step Number and Title -->\n      <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n        <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n          {{ config.stepNumber }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n        </span>\n        \n        <!-- Condition Badge -->\n        <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n          CONDITION\n        </span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n          {{ formatDuration(config.duration) }}\n        </span>\n        <svg *ngIf=\"hasExpandableContent\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </div>\n    </div>\n    <!-- Branch Buttons - Read-only, showing executed status only -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-flex-wrap\">\n      <div\n        *ngFor=\"let branch of config.branches\"\n        class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch -->\n        <div *ngIf=\"branch.executed\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <span>{{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLoading\">\n\n    <!-- Executed Branch Sub-steps -->\n    <div *ngFor=\"let branch of config.branches\">\n      <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n        <div\n          *ngFor=\"let subStep of branch.subSteps\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n          \n          <!-- Sub-step Status Icon -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Failure -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Pending -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Running - Show spinner -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n            <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n          </div>\n  \n\n          <!-- Sub-step Description -->\n          <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n            {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\n          </span>\n\n          <!-- Sub-step Duration -->\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n            {{ formatDuration(subStep.duration) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Unexecuted Branch Message -->\n    <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n      </p>\n    </div>\n\n    <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n      </p>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton && !isLoading\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [timingBreakdown]=\"timingBreakdown\"\n      [testStepResultId]=\"testStepResultId\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-condition-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <div class=\"cqa-p-2\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n      (click)=\"toggleHeader()\">\n      \n      <!-- Status Icon -->\n      <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n      <!-- Condition Icon -->\n      <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n      <!-- Step Number and Title -->\n      <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n        <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n          {{ config.stepNumber }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n        </span>\n        \n        <!-- Condition Badge -->\n        <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n          CONDITION\n        </span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n          {{ formatDuration(config.duration) }}\n        </span>\n        <svg *ngIf=\"hasExpandableContent\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </div>\n    </div>\n    <!-- Branch Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-flex-wrap\">\n      <div\n        *ngFor=\"let branch of config.branches\"\n        class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n        [ngClass]=\"branch.executed \n          ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n          : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n        <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>{{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLoading\">\n\n    <!-- Executed Branch Sub-steps -->\n    <div *ngFor=\"let branch of config.branches\">\n      <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n        <div\n          *ngFor=\"let subStep of branch.subSteps\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n          \n          <!-- Sub-step Status Icon -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Failure -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Pending -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Running - Show spinner -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n            <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n          </div>\n  \n\n          <!-- Sub-step Description -->\n          <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n            {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\n          </span>\n\n          <!-- Sub-step Duration -->\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n            {{ formatDuration(subStep.duration) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Unexecuted Branch Message -->\n    <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n      </p>\n    </div>\n\n    <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n      </p>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton && !isLoading\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [timingBreakdown]=\"timingBreakdown\"\n      [testStepResultId]=\"testStepResultId\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
-        }], propDecorators: { id: [{
+            args: [{ selector: 'cqa-condition-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <div class=\"cqa-p-2\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n      (click)=\"toggleHeader()\">\n      \n      <!-- Status Icon -->\n      <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n      <!-- Condition Icon -->\n      <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n      <!-- Step Number and Title -->\n      <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n        <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n          {{ config.stepNumber }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n        </span>\n        \n        <!-- Condition Badge -->\n        <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n          CONDITION\n        </span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n          {{ formatDuration(config.duration) }}\n        </span>\n        <svg *ngIf=\"hasExpandableContent\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </div>\n    </div>\n    <!-- Branch Buttons - Read-only, showing executed status only -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-flex-wrap\">\n      <div\n        *ngFor=\"let branch of config.branches\"\n        class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch -->\n        <div *ngIf=\"branch.executed\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <span>{{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLoading\">\n\n    <!-- Executed Branch Sub-steps -->\n    <div *ngFor=\"let branch of config.branches\">\n      <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n        <div\n          *ngFor=\"let subStep of branch.subSteps\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n          \n          <!-- Sub-step Status Icon -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Failure -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Pending -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <!-- Running - Show spinner -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n            <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n          </div>\n  \n\n          <!-- Sub-step Description -->\n          <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n            {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\n          </span>\n\n          <!-- Sub-step Duration -->\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n            {{ formatDuration(subStep.duration) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Unexecuted Branch Message -->\n    <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n      </p>\n    </div>\n\n    <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n      </p>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton && !isLoading\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [timingBreakdown]=\"timingBreakdown\"\n      [testStepResultId]=\"testStepResultId\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
                 type: Input
@@ -8142,6 +8300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], ifChild: [{
                 type: Input
+            }], activeBranchStepId: [{
+                type: Input
             }], onExpandHandler: [{
                 type: Input
             }], getConditionBranchesHandler: [{
@@ -8176,6 +8336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], onViewAllIterationsHandler: [{
                 type: Input
+            }], onConditionBranchClickHandler: [{
+                type: Input
             }], onBranchClickEvent: [{
                 type: Output
             }], onExpand: [{
@@ -8337,7 +8499,7 @@ class AIAgentStepComponent extends BaseStepComponent {
                 this.autoExpand();
             }
         }
-        if (changes['duration']) {
+        if (this.config && changes['duration']) {
             this.config.duration = changes['duration']?.currentValue || 0;
         }
         // Handle status changes - auto-expand when step starts executing
@@ -8428,10 +8590,10 @@ class AIAgentStepComponent extends BaseStepComponent {
     }
 }
 AIAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIAgentStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AIAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIAgentStepComponent, selector: "cqa-ai-agent-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", prompt: "prompt", optimizedRun: "optimizedRun", actionCount: "actionCount", actions: "actions", selectedTabInput: "selectedTabInput", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", isLive: "isLive" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n    <!-- Lightbulb Icon and Step Number -->\n    <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        AI Agent\n      </span>\n    </div>\n\n    <!-- Action Count -->\n    <span *ngIf=\"config.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n      {{ config.actionCount }} actions\n    </span>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- Prompt Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n      <div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n          <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n          <span *ngIf=\"config.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n            Optimized Run\n          </span>\n        </div>\n        <p class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" [innerHTML]=\"config.prompt\"></p>\n      </div>\n      <button \n        class=\"cqa-p-1.5\" \n        (click)=\"copyPrompt()\"\n        [matTooltip]=\"'Copy prompt'\"\n        matTooltipPosition=\"above\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n\n    <!-- Tab Navigation -->\n    <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n      <button\n        (click)=\"selectTab('action-trace')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Action Trace\n        <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n          {{ config.actions.length }}\n        </span>\n      </button>\n      <button\n        (click)=\"selectTab('planner-timeline')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Planner Timeline\n      </button>\n      <button\n        (click)=\"selectTab('ai-reasoning')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        AI Reasoning\n      </button>\n    </div> -->\n\n    <!-- Tab Content -->\n    <!-- Action Trace Tab -->\n    <div *ngIf=\"selectedTab === 'action-trace'\">\n      <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n        <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n          <b>{{ config?.actions?.length || 0 }} actions</b> \n          from previous runs\n        </div>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <ng-container *ngFor=\"let action of config?.actions; let i = index\">\n          <div *ngIf=\"action?.description\" class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-bg-[#F7FAFC]\" style=\"border: 1px solid #BEDBFF\">\n            <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n            <!-- <mat-icon\n              class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n              {{ getActionIcon(action.type) }}\n            </mat-icon> -->\n            <div><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n            <span class=\"cqa-flex-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-bold cqa-text-gray-[#0B0B0B]\">{{ action.description }}</span>\n            <span *ngIf=\"action.confidence\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n              {{ action.confidence }}%\n            </span>\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              {{ formatDuration(action.duration) }}\n            </span>\n            <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Planner Timeline Tab -->\n    <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-text-sm cqa-text-gray-600\">\n      Planner timeline content would go here\n    </div>\n\n    <!-- AI Reasoning Tab -->\n    <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-text-sm cqa-text-gray-600\">\n      AI reasoning content would go here\n    </div>\n\n  </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n      </div>\n    </span>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+AIAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIAgentStepComponent, selector: "cqa-ai-agent-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", prompt: "prompt", optimizedRun: "optimizedRun", actionCount: "actionCount", actions: "actions", selectedTabInput: "selectedTabInput", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", isLive: "isLive" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n    <!-- Lightbulb Icon and Step Number -->\n    <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        AI Agent\n      </span>\n    </div>\n\n    <!-- Action Count -->\n    <span *ngIf=\"config.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n      {{ config.actionCount }} actions\n    </span>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- Prompt Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n      <div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n          <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n          <span *ngIf=\"config.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n            Optimized Run\n          </span>\n        </div>\n        <p class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" [innerHTML]=\"config.prompt\"></p>\n      </div>\n      <button \n        class=\"cqa-p-1.5\" \n        (click)=\"copyPrompt()\"\n        [matTooltip]=\"'Copy prompt'\"\n        matTooltipPosition=\"above\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n\n    <!-- Tab Navigation -->\n    <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n      <button\n        (click)=\"selectTab('action-trace')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Action Trace\n        <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n          {{ config.actions.length }}\n        </span>\n      </button>\n      <button\n        (click)=\"selectTab('planner-timeline')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Planner Timeline\n      </button>\n      <button\n        (click)=\"selectTab('ai-reasoning')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        AI Reasoning\n      </button>\n    </div> -->\n\n    <!-- Tab Content -->\n    <!-- Action Trace Tab -->\n    <div *ngIf=\"selectedTab === 'action-trace'\">\n      <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n        <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n          <b>{{ config?.actions?.length || 0 }} actions</b> \n          from previous runs\n        </div>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <ng-container *ngFor=\"let action of config?.actions; let i = index\">\n          <div *ngIf=\"action?.description\" class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-bg-[#F7FAFC]\" style=\"border: 1px solid #BEDBFF\">\n            <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n            <!-- <mat-icon\n              class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n              {{ getActionIcon(action.type) }}\n            </mat-icon> -->\n            <div><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n            <span class=\"cqa-flex-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-bold cqa-text-gray-[#0B0B0B]\">{{ action.description }}</span>\n            <span *ngIf=\"action.confidence\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n              {{ action.confidence }}%\n            </span>\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              {{ formatDuration(action.duration) }}\n            </span>\n            <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Planner Timeline Tab -->\n    <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-text-sm cqa-text-gray-600\">\n      Planner timeline content would go here\n    </div>\n\n    <!-- AI Reasoning Tab -->\n    <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-text-sm cqa-text-gray-600\">\n      AI reasoning content would go here\n    </div>\n\n  </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n      </div>\n    </span>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIAgentStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-ai-agent-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n    <!-- Lightbulb Icon and Step Number -->\n    <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        AI Agent\n      </span>\n    </div>\n\n    <!-- Action Count -->\n    <span *ngIf=\"config.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n      {{ config.actionCount }} actions\n    </span>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- Prompt Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n      <div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n          <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n          <span *ngIf=\"config.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n            Optimized Run\n          </span>\n        </div>\n        <p class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" [innerHTML]=\"config.prompt\"></p>\n      </div>\n      <button \n        class=\"cqa-p-1.5\" \n        (click)=\"copyPrompt()\"\n        [matTooltip]=\"'Copy prompt'\"\n        matTooltipPosition=\"above\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n\n    <!-- Tab Navigation -->\n    <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n      <button\n        (click)=\"selectTab('action-trace')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Action Trace\n        <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n          {{ config.actions.length }}\n        </span>\n      </button>\n      <button\n        (click)=\"selectTab('planner-timeline')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Planner Timeline\n      </button>\n      <button\n        (click)=\"selectTab('ai-reasoning')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        AI Reasoning\n      </button>\n    </div> -->\n\n    <!-- Tab Content -->\n    <!-- Action Trace Tab -->\n    <div *ngIf=\"selectedTab === 'action-trace'\">\n      <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n        <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n          <b>{{ config?.actions?.length || 0 }} actions</b> \n          from previous runs\n        </div>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <ng-container *ngFor=\"let action of config?.actions; let i = index\">\n          <div *ngIf=\"action?.description\" class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-bg-[#F7FAFC]\" style=\"border: 1px solid #BEDBFF\">\n            <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n            <!-- <mat-icon\n              class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n              {{ getActionIcon(action.type) }}\n            </mat-icon> -->\n            <div><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n            <span class=\"cqa-flex-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-bold cqa-text-gray-[#0B0B0B]\">{{ action.description }}</span>\n            <span *ngIf=\"action.confidence\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n              {{ action.confidence }}%\n            </span>\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              {{ formatDuration(action.duration) }}\n            </span>\n            <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Planner Timeline Tab -->\n    <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-text-sm cqa-text-gray-600\">\n      Planner timeline content would go here\n    </div>\n\n    <!-- AI Reasoning Tab -->\n    <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-text-sm cqa-text-gray-600\">\n      AI reasoning content would go here\n    </div>\n\n  </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n      </div>\n    </span>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-ai-agent-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n    <!-- Lightbulb Icon and Step Number -->\n    <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        AI Agent\n      </span>\n    </div>\n\n    <!-- Action Count -->\n    <span *ngIf=\"config.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n      {{ config.actionCount }} actions\n    </span>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- Prompt Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n      <div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n          <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n          <span *ngIf=\"config.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n            Optimized Run\n          </span>\n        </div>\n        <p class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" [innerHTML]=\"config.prompt\"></p>\n      </div>\n      <button \n        class=\"cqa-p-1.5\" \n        (click)=\"copyPrompt()\"\n        [matTooltip]=\"'Copy prompt'\"\n        matTooltipPosition=\"above\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n\n    <!-- Tab Navigation -->\n    <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n      <button\n        (click)=\"selectTab('action-trace')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Action Trace\n        <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n          {{ config.actions.length }}\n        </span>\n      </button>\n      <button\n        (click)=\"selectTab('planner-timeline')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Planner Timeline\n      </button>\n      <button\n        (click)=\"selectTab('ai-reasoning')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        AI Reasoning\n      </button>\n    </div> -->\n\n    <!-- Tab Content -->\n    <!-- Action Trace Tab -->\n    <div *ngIf=\"selectedTab === 'action-trace'\">\n      <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n        <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n          <b>{{ config?.actions?.length || 0 }} actions</b> \n          from previous runs\n        </div>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n        <ng-container *ngFor=\"let action of config?.actions; let i = index\">\n          <div *ngIf=\"action?.description\" class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-bg-[#F7FAFC]\" style=\"border: 1px solid #BEDBFF\">\n            <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n            <!-- <mat-icon\n              class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n              {{ getActionIcon(action.type) }}\n            </mat-icon> -->\n            <div><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n            <span class=\"cqa-flex-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-bold cqa-text-gray-[#0B0B0B]\">{{ action.description }}</span>\n            <span *ngIf=\"action.confidence\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n              {{ action.confidence }}%\n            </span>\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              {{ formatDuration(action.duration) }}\n            </span>\n            <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Planner Timeline Tab -->\n    <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-text-sm cqa-text-gray-600\">\n      Planner timeline content would go here\n    </div>\n\n    <!-- AI Reasoning Tab -->\n    <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-text-sm cqa-text-gray-600\">\n      AI reasoning content would go here\n    </div>\n\n  </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n      </div>\n    </span>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{