npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.451 → 1.1.453 - Mend

@cqa-lib/cqa-ui 1.1.451 → 1.1.453

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/fesm2015/cqa-lib-cqa-ui.mjs CHANGED Viewed

@@ -8107,6 +8107,20 @@ class StepRendererComponent {
                 }
             }
         });
+        // Sync critical properties into instance.config so templates that read config.* see fresh data.
+        // Angular's ngOnChanges only fires for template-bound @Input() updates; when the step-renderer
+        // sets properties directly (instance[key] = value), config.* stays stale and *ngFor over
+        // config.nestedSteps / config.branches never sees the new arrays.
+        if (instance.config) {
+            const configSyncKeys = ['nestedSteps', 'children', 'branches', 'steps', 'conditionText', 'title', 'action'];
+            for (const ck of configSyncKeys) {
+                const val = instance[ck];
+                if (val !== undefined && instance.config[ck] !== val) {
+                    instance.config[ck] = val;
+                    hasChanges = true;
+                }
+            }
+        }
         // Update special properties that might need special handling
         if (this.isLoopStep(currentStep) && currentStep.children && !currentStep.nestedSteps) {
             if (instance.nestedSteps !== currentStep.children) {
@@ -8138,7 +8152,7 @@ class StepRendererComponent {
         }
         // Special handling for condition-step: ensure branches is properly updated
         // Use deep comparison to detect changes in nested subSteps
-        if (currentStep.displayType === 'condition' && currentStep.branches !== undefined) {
+        if ((currentStep.displayType === 'condition' || currentStep.displayType === 'condition-debug') && currentStep.branches !== undefined) {
             const currentBranches = currentStep.branches || [];
             const previousBranches = previousStep.branches || [];
             // Use deep comparison to detect nested subSteps changes
@@ -8153,7 +8167,7 @@ class StepRendererComponent {
         }
         // Special handling for condition-step: ensure nestedSteps is properly updated
         // This is important when children are loaded from the API or when switching branches
-        if (currentStep.displayType === 'condition' && currentStep.nestedSteps !== undefined) {
+        if ((currentStep.displayType === 'condition' || currentStep.displayType === 'condition-debug') && currentStep.nestedSteps !== undefined) {
             const currentNestedSteps = currentStep.nestedSteps || [];
             const previousNestedSteps = previousStep.nestedSteps || [];
             // Use deep comparison to detect content changes, not just reference changes
@@ -8264,7 +8278,7 @@ class StepRendererComponent {
             instance.config = Object.assign(Object.assign({}, instance.config), currentStep);
             // Explicitly ensure branches is updated for condition-step (in case it was nested)
             // Use the already updated branches from instance to maintain reference consistency
-            if (currentStep.displayType === 'condition' && instance.branches !== undefined) {
+            if ((currentStep.displayType === 'condition' || currentStep.displayType === 'condition-debug') && instance.branches !== undefined) {
                 instance.config.branches = instance.branches;
             }
             this.syncAiAgentPromptInConfig(instance, currentStep);
@@ -8524,6 +8538,8 @@ class StepRendererComponent {
                         }
                     }
                 });
+                // Always keep the `step` input in sync so flags like isStepGroupChildren propagate.
+                instance.step = this.step;
                 if (instance.config) {
                     // Merge step updates into config. Use preUpdatePrompt (captured before the
                     // Object.keys loop above set instance.config = step via the circular ref)
@@ -8688,6 +8704,9 @@ class StepRendererComponent {
                     instance[key] = this.step[key];
                 }
             });
+            // Always set the `step` input to the full step reference so nested components
+            // (e.g. condition-debug-step) can access step-level flags like isStepGroupChildren.
+            instance.step = this.step;
             // Special handling for loop-step: map children to nestedSteps if nestedSteps is not present
             if (this.isLoopStep(this.step) && this.step.children && !this.step.nestedSteps) {
                 instance.nestedSteps = this.step.children;
@@ -8812,7 +8831,7 @@ class StepRendererComponent {
                 }
             }
             // Special handling for condition-step: set branches and conditionText
-            if (this.step.displayType === 'condition') {
+            if (this.step.displayType === 'condition' || this.step.displayType === 'condition-debug') {
                 // Set branches - prioritize step.branches if available, otherwise use handler
                 if (this.step.branches && Array.isArray(this.step.branches)) {
                     // Create deep copy to ensure proper change detection
@@ -8865,7 +8884,7 @@ class StepRendererComponent {
                 }
             }
             // Wire up common event emitters for api, ai-agent, loop, condition, and basic steps
-            if (this.step.displayType === 'api' || this.step.displayType === 'ai-agent' || this.isLoopStep(this.step) || this.step.displayType === 'condition' || this.step.displayType === 'basic') {
+            if (this.step.displayType === 'api' || this.step.displayType === 'ai-agent' || this.isLoopStep(this.step) || this.step.displayType === 'condition' || this.step.displayType === 'condition-debug' || this.step.displayType === 'basic') {
                 // Subscribe to common output events and call handlers
                 // EventEmitters are Subjects, so we can subscribe to them
                 if (instance.makeCurrentBaseline && this.onMakeCurrentBaselineHandler) {
@@ -8997,7 +9016,7 @@ class StepRendererComponent {
                 }
             }
             // Special handling for condition-step: wire up onExpand event
-            if (this.step.displayType === 'condition') {
+            if (this.step.displayType === 'condition' || this.step.displayType === 'condition-debug') {
                 if (instance.onExpand && this.onExpandHandler) {
                     instance.onExpand.subscribe(() => {
                         var _a;
@@ -9124,7 +9143,7 @@ class StepRendererComponent {
             if (this.step)
                 instance.step = this.step;
             // Update condition-step specific properties for change detection
-            if (this.step.displayType === 'condition') {
+            if (this.step.displayType === 'condition' || this.step.displayType === 'condition-debug') {
                 // Update activeBranchStepId if it changed
                 if (this.step.activeBranchStepId !== undefined) {
                     instance.activeBranchStepId = this.step.activeBranchStepId;
@@ -15431,11 +15450,13 @@ class JumpToStepModalComponent {
         }
     }
     updateFilteredItems() {
-        var _a, _b, _c;
-        if (((_a = this.combinedTestCases) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.stepsMeta) === null || _b === void 0 ? void 0 : _b.length)) {
-            this.buildFromCombinedTestCases();
+        var _a, _b;
+        if ((_a = this.stepsMeta) === null || _a === void 0 ? void 0 : _a.length) {
+            // stepsMeta is the pre-computed, fully-ordered flat list (including ELSE IF/ELSE branches
+            // that are absent from the combinedTestCases tree). Use it directly — no re-traversal needed.
+            this.buildFromStepsMeta();
         }
-        else if ((_c = this.items) === null || _c === void 0 ? void 0 : _c.length) {
+        else if ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) {
             this.buildFromItems();
         }
         else {
@@ -15444,10 +15465,60 @@ class JumpToStepModalComponent {
             this.filteredStepItems = [];
         }
     }
+    /** Build filteredItems directly from stepsMeta — the pre-computed ordered flat list. */
+    buildFromStepsMeta() {
+        const searchTerm = (this.searchValue || '').toLowerCase().trim();
+        this.prerequisiteGroups = [];
+        this.filteredStepItems = [];
+        const prereqGroupMap = new Map();
+        for (const meta of this.stepsMeta) {
+            if (searchTerm) {
+                const numMatch = String(meta.stepNumber).toLowerCase().includes(searchTerm);
+                const labelMatch = (meta.label || '').toLowerCase().includes(searchTerm);
+                if (!numMatch && !labelMatch)
+                    continue;
+            }
+            const item = {
+                id: String(meta.stepId),
+                stepId: meta.stepId,
+                uniqueId: meta.uniqueId,
+                stepNumber: meta.stepNumber,
+                description: this.stripHtml(meta.label || ('Step ' + meta.stepNumber)),
+                status: meta.status,
+                isPrerequisite: meta.isPrerequisite,
+                groupName: meta.groupName,
+            };
+            if (meta.isPrerequisite && this.showPrerequisites) {
+                const name = (meta.groupName || 'Prerequisite').toString();
+                const existing = prereqGroupMap.get(name);
+                if (existing)
+                    existing.push(item);
+                else
+                    prereqGroupMap.set(name, [item]);
+            }
+            else if (!meta.isPrerequisite) {
+                this.filteredStepItems.push(item);
+            }
+        }
+        this.prerequisiteGroups = Array.from(prereqGroupMap.entries()).map(([name, items]) => ({ name, items }));
+        this.filteredItems = [
+            ...this.prerequisiteGroups.reduce((acc, g) => acc.concat(g.items), []),
+            ...this.filteredStepItems,
+        ];
+    }
     buildFromCombinedTestCases() {
         var _a;
+        // Primary lookup by uniqueId (handles same stepId in multiple groups with different stepNumbers).
+        // Fallback lookup by stepId for metas without uniqueId.
+        const metaByUniqueId = new Map();
         const metaByStepId = new Map();
-        this.stepsMeta.forEach(m => metaByStepId.set(m.stepId, m));
+        this.stepsMeta.forEach(m => {
+            if (m.uniqueId)
+                metaByUniqueId.set(m.uniqueId, m);
+            // Only store first occurrence per stepId (used as fallback when uniqueId is absent)
+            if (!metaByStepId.has(m.stepId))
+                metaByStepId.set(m.stepId, m);
+        });
         const searchTerm = (this.searchValue || '').toLowerCase().trim();
         const matchesSearch = (meta) => {
             if (!searchTerm)
@@ -15463,21 +15534,28 @@ class JumpToStepModalComponent {
             const groupName = (group.name || 'Prerequisite').toString();
             const isPrereq = !!group.isPrerequisite;
             const collectSteps = (steps, seen) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e;
                 const out = [];
                 for (const s of steps) {
                     if (!s)
                         continue;
                     const id = (_a = s === null || s === void 0 ? void 0 : s.id) !== null && _a !== void 0 ? _a : s === null || s === void 0 ? void 0 : s.step_id;
                     const numId = id != null ? Number(id) : NaN;
-                    if (!Number.isFinite(numId) || seen.has(numId))
+                    if (!Number.isFinite(numId))
+                        continue;
+                    // Use uniqueId as the deduplication key when available, fallback to String(numId).
+                    const stepUniqueId = s.uniqueId || undefined;
+                    const seenKey = stepUniqueId || String(numId);
+                    if (seen.has(seenKey))
                         continue;
-                    seen.add(numId);
-                    const meta = metaByStepId.get(numId);
+                    seen.add(seenKey);
+                    // Prefer uniqueId-based meta lookup (correct stepNumber for reused stepIds across groups).
+                    const meta = (_b = (stepUniqueId ? metaByUniqueId.get(stepUniqueId) : undefined)) !== null && _b !== void 0 ? _b : metaByStepId.get(numId);
                     if (meta && matchesSearch(meta)) {
                         out.push({
                             id: String(numId),
                             stepId: numId,
+                            uniqueId: stepUniqueId,
                             stepNumber: meta.stepNumber,
                             description: this.stripHtml(meta.label || ('Step ' + meta.stepNumber)),
                             status: meta.status,
@@ -15496,7 +15574,7 @@ class JumpToStepModalComponent {
                         }
                         if (s.branches && Array.isArray(s.branches)) {
                             for (const b of s.branches) {
-                                if ((_b = b === null || b === void 0 ? void 0 : b.subSteps) === null || _b === void 0 ? void 0 : _b.length)
+                                if ((_c = b === null || b === void 0 ? void 0 : b.subSteps) === null || _c === void 0 ? void 0 : _c.length)
                                     out.push(...collectSteps(b.subSteps, seen));
                             }
                         }
@@ -15510,21 +15588,26 @@ class JumpToStepModalComponent {
                             if (!branchData)
                                 continue;
                             // Add the branch step itself (ELSE IF / ELSE)
-                            const branchRawId = (_c = branchData === null || branchData === void 0 ? void 0 : branchData.id) !== null && _c !== void 0 ? _c : branchData === null || branchData === void 0 ? void 0 : branchData.step_id;
+                            const branchRawId = (_d = branchData === null || branchData === void 0 ? void 0 : branchData.id) !== null && _d !== void 0 ? _d : branchData === null || branchData === void 0 ? void 0 : branchData.step_id;
                             const branchNumId = branchRawId != null ? Number(branchRawId) : NaN;
-                            if (Number.isFinite(branchNumId) && !seen.has(branchNumId)) {
-                                seen.add(branchNumId);
-                                const branchMeta = metaByStepId.get(branchNumId);
-                                if (branchMeta && matchesSearch(branchMeta)) {
-                                    out.push({
-                                        id: String(branchNumId),
-                                        stepId: branchNumId,
-                                        stepNumber: branchMeta.stepNumber,
-                                        description: this.stripHtml(branchMeta.label || ('Step ' + branchMeta.stepNumber)),
-                                        status: branchMeta.status,
-                                        isPrerequisite: branchMeta.isPrerequisite,
-                                        groupName: branchMeta.groupName,
-                                    });
+                            if (Number.isFinite(branchNumId)) {
+                                const branchUniqueId = branchData.uniqueId || undefined;
+                                const branchSeenKey = branchUniqueId || String(branchNumId);
+                                if (!seen.has(branchSeenKey)) {
+                                    seen.add(branchSeenKey);
+                                    const branchMeta = (_e = (branchUniqueId ? metaByUniqueId.get(branchUniqueId) : undefined)) !== null && _e !== void 0 ? _e : metaByStepId.get(branchNumId);
+                                    if (branchMeta && matchesSearch(branchMeta)) {
+                                        out.push({
+                                            id: String(branchNumId),
+                                            stepId: branchNumId,
+                                            uniqueId: branchUniqueId,
+                                            stepNumber: branchMeta.stepNumber,
+                                            description: this.stripHtml(branchMeta.label || ('Step ' + branchMeta.stepNumber)),
+                                            status: branchMeta.status,
+                                            isPrerequisite: branchMeta.isPrerequisite,
+                                            groupName: branchMeta.groupName,
+                                        });
+                                    }
                                 }
                             }
                             // Recurse into branch children
@@ -15717,7 +15800,7 @@ class BreakpointsModalComponent {
     }
     removeItem(item) {
         this.onRemove.emit(item);
-        this.displayItems = this.displayItems.filter(b => b.stepId !== item.stepId);
+        this.displayItems = this.displayItems.filter(b => b.id !== item.id);
         if (this.displayItems.length === 0) {
             this.handleClose();
         }
@@ -19889,7 +19972,7 @@ class SessionChangesModalComponent {
     onRemoveStep(step, event) {
         event.preventDefault();
         event.stopPropagation();
-        this.removeStep.emit({ id: step.id, type: step.type });
+        this.removeStep.emit({ id: step.id, type: step.type, uniqueId: step.uniqueId });
     }
     onEscape() {
         if (this.isOpen) {
@@ -41717,7 +41800,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
             label: `Add step inside ${this.selectedBranchForDebug.type.toUpperCase()} branch`,
             position: 'inside',
             branchType: this.selectedBranchForDebug.type,
-            branchStepId: this.selectedBranchForDebug.branchStepId // Pass the branch step ID if available
+            branchStepId: this.selectedBranchForDebug.branchStepUniqueId || this.selectedBranchForDebug.branchStepId // Prefer uniqueId
         };
         this.addStepOptionSelect.emit(branchAddOption);
     }
@@ -41773,7 +41856,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
      */
     getBranchChildren(branch) {
         var _a;
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (!branchStepId || !((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData))
             return [];
         const branchData = this.step.conditionData[branchStepId];
@@ -41783,7 +41866,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
     }
     getBranchConditionText(branch) {
         var _a, _b;
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (branchStepId != null && ((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData)) {
             const branchStep = (_b = this.step.conditionData[branchStepId]) !== null && _b !== void 0 ? _b : this.step.conditionData[Number(branchStepId)];
             if (branchStep === null || branchStep === void 0 ? void 0 : branchStep.action)
@@ -41796,7 +41879,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
      */
     isBranchDebugPointSet(branch) {
         var _a;
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (!branchStepId || !((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData))
             return false;
         const branchStep = this.step.conditionData[branchStepId];
@@ -41812,7 +41895,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
      */
     isBranchBreakpointDisabled(branch) {
         var _a, _b;
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (!branchStepId || !((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData))
             return false;
         const branchStep = this.step.conditionData[branchStepId];
@@ -41831,7 +41914,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
     }
     getBranchBreakpointTooltip(branch) {
         var _a, _b, _c;
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         const branchStep = (_b = (_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData) === null || _b === void 0 ? void 0 : _b[branchStepId];
         const status = ((branchStep === null || branchStep === void 0 ? void 0 : branchStep.status) || '').toLowerCase();
         // Mirror header tooltip rules to match disabled state.
@@ -41851,7 +41934,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
      */
     getBranchBadges(branch) {
         var _a, _b;
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (branchStepId == null || !((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData))
             return [];
         const branchStep = (_b = this.step.conditionData[branchStepId]) !== null && _b !== void 0 ? _b : this.step.conditionData[Number(branchStepId)];
@@ -41870,7 +41953,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
     }
     getBranchStatus(branch) {
         var _a, _b;
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         // Try conditionData lookup (branchStepId = ifChildData key = conditionData key)
         if (branchStepId != null && ((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData)) {
             const branchStep = (_b = this.step.conditionData[branchStepId]) !== null && _b !== void 0 ? _b : this.step.conditionData[Number(branchStepId)];
@@ -41887,7 +41970,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
         var _a;
         event.preventDefault();
         event.stopPropagation();
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (!branchStepId || !((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData))
             return;
         const branchStep = this.step.conditionData[branchStepId];
@@ -41905,7 +41988,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
         event.stopPropagation();
         if (branch.type === 'else')
             return; // ELSE branches have no edit
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (!branchStepId || !((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData))
             return;
         const branchStep = this.step.conditionData[branchStepId];
@@ -41924,7 +42007,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
      */
     getBranchMoreMenuOptions(branch) {
         var _a;
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (!branchStepId || !((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData))
             return [];
         const branchStep = this.step.conditionData[branchStepId];
@@ -41949,7 +42032,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
     onBranchMoreOptionSelect(option, event, branch) {
         var _a;
         event.preventDefault();
-        const branchStepId = branch.branchStepId;
+        const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
         if (!branchStepId || !((_a = this.step) === null || _a === void 0 ? void 0 : _a.conditionData))
             return;
         const branchStep = this.step.conditionData[branchStepId];
@@ -41971,7 +42054,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
             label: `Add step inside ${branch.label} branch`,
             position: 'inside',
             branchType: branch.type,
-            branchStepId: branch.branchStepId
+            branchStepId: branch.branchStepUniqueId || branch.branchStepId // Prefer uniqueId
         };
         this.addStepOptionSelect.emit(branchAddOption);
     }
@@ -41981,19 +42064,21 @@ class ConditionDebugStepComponent extends BaseStepComponent {
         }
         // Always find the executed branch and set activeBranchStepId from it
         const executedBranch = this.branches.find((b) => b.executed);
-        if (executedBranch && executedBranch.branchStepId) {
+        const execKey = (executedBranch === null || executedBranch === void 0 ? void 0 : executedBranch.branchStepUniqueId) || (executedBranch === null || executedBranch === void 0 ? void 0 : executedBranch.branchStepId);
+        if (executedBranch && execKey) {
             // Update activeBranchStepId to match executed branch
-            if (this.activeBranchStepId !== executedBranch.branchStepId) {
-                this.activeBranchStepId = executedBranch.branchStepId;
+            if (this.activeBranchStepId !== execKey) {
+                this.activeBranchStepId = execKey;
                 // 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;
+        const firstKey = (firstBranch === null || firstBranch === void 0 ? void 0 : firstBranch.branchStepUniqueId) || (firstBranch === null || firstBranch === void 0 ? void 0 : firstBranch.branchStepId);
+        if (firstBranch && firstKey) {
+            if (this.activeBranchStepId !== firstKey) {
+                this.activeBranchStepId = firstKey;
             }
         }
     }
@@ -42001,7 +42086,7 @@ class ConditionDebugStepComponent extends BaseStepComponent {
         // In debug mode, select the branch and also update activeBranchStepId so children load
         if (this.isDebug) {
             this.selectedBranchForDebug = branch;
-            const branchStepId = branch.branchStepId;
+            const branchStepId = branch.branchStepUniqueId || branch.branchStepId;
             if (branchStepId) {
                 this.activeBranchStepId = branchStepId;
             }
@@ -42084,10 +42169,10 @@ class ConditionDebugStepComponent extends BaseStepComponent {
     }
 }
 ConditionDebugStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionDebugStepComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ConditionDebugStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionDebugStepComponent, selector: "cqa-condition-debug-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", stepDeleted: "stepDeleted", isDebug: "isDebug", debugPointSet: "debugPointSet", parentSkipped: "parentSkipped", getDebugPointSetHandler: "getDebugPointSetHandler", onDebugPointChangeHandler: "onDebugPointChangeHandler", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", ifChild: "ifChild", activeBranchStepId: "activeBranchStepId", onExpandHandler: "onExpandHandler", onEditStepHandler: "onEditStepHandler", onAddStepOptionSelectHandler: "onAddStepOptionSelectHandler", onStepMoreOptionSelectHandler: "onStepMoreOptionSelectHandler", getAddStepMenuOptionsForNested: "getAddStepMenuOptionsForNested", getStepMoreMenuOptionsForNested: "getStepMoreMenuOptionsForNested", 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", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", onDownloadHandler: "onDownloadHandler", onFilePathCopiedHandler: "onFilePathCopiedHandler", onTextCopiedHandler: "onTextCopiedHandler", jumpToTimestampHandler: "jumpToTimestampHandler", downloadingStepId: "downloadingStepId", step: "step", onAddElseIfBranchAtHandler: "onAddElseIfBranchAtHandler", onAddElseBranchHandler: "onAddElseBranchHandler", onEditBranchConditionHandler: "onEditBranchConditionHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", addStepInsideLoop: "addStepInsideLoop", onBranchClickEvent: "onBranchClickEvent", onExpand: "onExpand", addElseIfBranch: "addElseIfBranch", addElseBranch: "addElseBranch", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" style=\"border-bottom: '1px solid #F3F4F6'\" (click)=\"$event.stopPropagation()\">\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($event)\">\n      <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n        [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n        matTooltipPosition=\"right\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n          [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n          [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n          (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n          <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n          </svg>\n          <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n          </svg>\n        </button>\n      </div>\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      <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\"><span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">skip_next</span></div>\n      <div *ngIf=\"status.toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\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 cqa-font-inter\">\n        <span class=\"cqa-font-semibold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\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        <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n          Deleted\n        </span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n        <!-- Step Change Badges (debug only) -->\n        <ng-container *ngIf=\"isDebug\">\n          <ng-container *ngFor=\"let badge of stepBadges\">\n            <cqa-badge *ngIf=\"badge === 'skipped'\" label=\"Skipped\" size=\"small\" [textColor]=\"'#4A5565'\" [borderColor]=\"'#99A1AF'\" [backgroundColor]=\"'#FFFFFF'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'edited'\" label=\"Edited\" size=\"small\" [textColor]=\"'#FBBF24'\" [borderColor]=\"'#FDDF92'\" [backgroundColor]=\"'#FFF9E9'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'added'\" label=\"Added\" size=\"small\" [textColor]=\"'#0DBD7D'\" [borderColor]=\"'#5ED3A8'\" [backgroundColor]=\"'#CFF2E5'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'removed'\" label=\"Removed\" size=\"small\" [textColor]=\"'#EE3F3F'\" [borderColor]=\"'#F47F7F'\" [backgroundColor]=\"'#FCD9D9'\"></cqa-badge>\n          </ng-container>\n        </ng-container>\n        <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n            <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n            <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n            <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n            </svg>\n          Self-healed\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\"\n             *ngIf=\"step?.executedResult?.video_start_time\"\n             [matTooltip]=\"'Jump to video time'\"\n             matTooltipPosition=\"below\"\n             (click)=\"onJumpToTimestamp($event)\">\n          <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n            play_arrow\n          </mat-icon>\n          <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n            {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n          </span>\n        </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n        <span class=\"cqa-text-[12px] cqa-leading-[15px] 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\n    <!-- Branch Buttons - Live mode only (clickable pills) -->\n    <div *ngIf=\"!isDebug\" 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; let branchIndex = index\"\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 cqa-transition-all\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch only -->\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>{{ getBranchStepNumber(branchIndex) }}. {{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- ==================== DEBUG MODE: Expanded Content ==================== -->\n  <div *ngIf=\"isExpanded && !isLoading && isDebug\" class=\"cqa-ml-[18px]\">\n    <div *ngFor=\"let branch of config.branches; let branchIndex = index\"\n         [style.background-color]=\"!isDebug ? null : getBranchBgColor(branch)\"\n         [class.cqa-opacity-50]=\"isDebug && getBranchBadges(branch).includes('skipped')\">\n\n      <!-- Branch Header Row (accordion trigger) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-2 cqa-cursor-pointer\"\n           (click)=\"toggleBranch(branchIndex, $event)\">\n        <!-- Breakpoint button for branch step -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-center\"\n          [matTooltip]=\"getBranchBreakpointTooltip(branch)\"\n          matTooltipPosition=\"right\">\n          <button type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n            [ngClass]=\"isBranchBreakpointDisabled(branch) ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n            [disabled]=\"isBranchBreakpointDisabled(branch)\"\n            (click)=\"onBranchDebugPointClick($event, branch)\"\n            [attr.aria-label]=\"isBranchDebugPointSet(branch) ? 'Remove debug point' : 'Set debug point'\">\n            <svg *ngIf=\"isBranchDebugPointSet(branch)\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"isBranchBreakpointDisabled(branch) ? '#9E9E9E' : '#C63535'\"/>\n            </svg>\n            <svg *ngIf=\"!isBranchDebugPointSet(branch)\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"isBranchBreakpointDisabled(branch) ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n            </svg>\n          </button>\n        </div>\n\n        <!-- Branch Status Icon -->\n        <ng-container *ngIf=\"getBranchStatus(branch) as branchStatus\">\n          <div *ngIf=\"branchStatus === '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=\"branchStatus === 'failure' || branchStatus === '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=\"branchStatus === '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=\"branchStatus === '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          <div class=\"cqa-flex cqa-items-center\" *ngIf=\"branchStatus === 'skipped'\"><span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">skip_next</span></div>\n          <div *ngIf=\"branchStatus === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        </ng-container>\n\n        <!-- Branch Label Badge -->\n        <span\n          class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[11px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n          [ngClass]=\"getBranchClass(branch)\">\n          <!-- Checkmark icon when executed -->\n          <svg *ngIf=\"branch.executed\" 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          <span>{{ getBranchStepNumber(branchIndex) }}. {{ branch.label }}</span>\n          <span *ngIf=\"getBranchConditionText(branch)\" class=\"cqa-font-normal\">(<span [innerHTML]=\"getBranchConditionText(branch)\"></span>)</span>\n        </span>\n\n        <div class=\"cqa-flex-1\"></div>\n\n        <!-- Add ELSE IF / Add ELSE + Edit + 3-dot for branch -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n          <!-- Add ELSE IF button \u2014 not shown for ELSE branch or when parent is deleted/skipped -->\n          <button *ngIf=\"branch.type !== 'else' && !isStepDeleted && !isSkipped\" type=\"button\" (click)=\"onAddElseIfClick($event, branchIndex)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer hover:cqa-opacity-80\">\n            Add ELSE IF\n          </button>\n          <!-- Add ELSE button - only on the last branch, when no ELSE branch exists, and parent not deleted/skipped -->\n          <button *ngIf=\"!hasElseBranch && branchIndex === config.branches.length - 1 && !isStepDeleted && !isSkipped\" type=\"button\" (click)=\"onAddElseClick($event)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer hover:cqa-opacity-80\">\n            Add ELSE\n          </button>\n          <!-- Branch Change Badges -->\n          <ng-container *ngFor=\"let badge of getBranchBadges(branch)\">\n            <cqa-badge *ngIf=\"badge === 'skipped'\" label=\"Skipped\" size=\"small\"\n              [textColor]=\"'#4A5565'\" [borderColor]=\"'#99A1AF'\" [backgroundColor]=\"'#FFFFFF'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'edited'\" label=\"Edited\" size=\"small\"\n              [textColor]=\"'#FBBF24'\" [borderColor]=\"'#FDDF92'\" [backgroundColor]=\"'#FFF9E9'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'added'\" label=\"Added\" size=\"small\"\n              [textColor]=\"'#0DBD7D'\" [borderColor]=\"'#5ED3A8'\" [backgroundColor]=\"'#CFF2E5'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'removed'\" label=\"Removed\" size=\"small\"\n              [textColor]=\"'#EE3F3F'\" [borderColor]=\"'#F47F7F'\" [backgroundColor]=\"'#FCD9D9'\">\n            </cqa-badge>\n          </ng-container>\n\n          <button *ngIf=\"branch.type !== 'else' && !isStepDeleted\" type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\"\n            aria-label=\"Edit branch\"\n            (click)=\"onEditBranchStep($event, branch)\">\n            <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n          </button>\n          <button *ngIf=\"!isStepDeleted\" type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\"\n            aria-label=\"More branch options\"\n            [matMenuTriggerFor]=\"branchMoreMenu\">\n            <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n          </button>\n          <mat-menu #branchMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n            <button mat-menu-item *ngFor=\"let opt of getBranchMoreMenuOptions(branch)\" (click)=\"onBranchMoreOptionSelect(opt, $event, branch)\">{{ opt.label }}</button>\n          </mat-menu>\n        </div>\n\n        <!-- Chevron -->\n        <svg [class.cqa-rotate-180]=\"isBranchExpanded(branchIndex)\" class=\"cqa-transition-transform\"\n             width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n\n      <!-- Branch Children (steps inside this branch) \u2014 shown when accordion is open -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && getBranchChildren(branch).length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px] cqa-ml-9 cqa-pb-1\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let childStep of getBranchChildren(branch); index as ci\">\n          <div class=\"cqa-step-renderer-wrapper\" [attr.id]=\"'exc-' + (childStep?.uniqueId || childStep.id)\" [class.loaded]=\"!isNestedStepLoading(childStep)\">\n            <cqa-step-renderer\n              [step]=\"childStep\"\n              [stepNumber]=\"childStep?.isRunResult ? childStep?.stepNumber : (getBranchStepNumber(branchIndex) + '.' + (ci + 1))\"\n              [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n              [onExpandHandler]=\"onExpandHandler\"\n              [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n              [isStepLoadingHandler]=\"isStepLoadingHandler\"\n              [isStepExpandedHandler]=\"isStepExpandedHandler\"\n              [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\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              [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n              [onAnalyzeHandler]=\"onAnalyzeHandler\"\n              [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [onDownloadHandler]=\"onDownloadHandler\"\n              [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n              [onTextCopiedHandler]=\"onTextCopiedHandler\"\n              [downloadingStepId]=\"downloadingStepId\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"childStep?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              [isDebug]=\"isDebug\"\n              [parentSkipped]=\"selfDebugDisabled\"\n              [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(childStep) : debugPointSet\"\n              [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n              [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n              [onEditStepHandler]=\"onEditStepHandler\"\n              [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(childStep) : addStepMenuOptions\"\n              [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n              [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(childStep) : stepMoreMenuOptions\"\n              [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n              [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n              [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n              (addStepInsideLoop)=\"addStepInsideLoop.emit($event)\"\n              [onAddElseIfBranchAtHandler]=\"onAddElseIfBranchAtHandler\"\n              [onAddElseBranchHandler]=\"onAddElseBranchHandler\"\n              [onEditBranchConditionHandler]=\"onEditBranchConditionHandler\"\n              (componentReady)=\"markStepLoaded(childStep)\">\n            </cqa-step-renderer>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Branch not executed message (no children) \u2014 shown when accordion is open -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && !branch.executed && getBranchChildren(branch).length === 0\" 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          {{ branch.label }} branch not executed\n        </p>\n      </div>\n\n      <!-- Add step inside this branch (debug mode) \u2014 shown when accordion is open and parent not deleted/skipped -->\n      <div *ngIf=\"isBranchExpanded(branchIndex)\" class=\"cqa-px-3 cqa-pt-1 cqa-pb-2 cqa-ml-9 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <button\n          *ngIf=\"!isStepDeleted && !isSkipped\"\n          type=\"button\"\n          class=\"cqa-bg-transparent cqa-border-0 cqa-p-0 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#4F46E5] cqa-cursor-pointer hover:cqa-opacity-80\"\n          (click)=\"onAddStepInsideSpecificBranch($event, branch)\">\n          + Add step inside {{ branch.label }} branch\n        </button>\n      </div>\n\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis\n      *ngIf=\"selfHealAnalysis\"\n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : 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>App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span></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>Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span></div>\n      </span>\n    </div>\n  </div>\n\n  <!-- ==================== LIVE MODE: Expanded Content ==================== -->\n  <div *ngIf=\"isExpanded && !isLoading && !isDebug\">\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'; border-radius: 8px;\">\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 -->\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-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n            <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=\"hasChild || (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\" *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator for nested steps -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.length === 0) && isStepLoading()\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n          <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n        </div>\n\n        <ng-container *ngFor=\"let step of config.nestedSteps; index as i\">\n          <div\n            class=\"cqa-step-renderer-wrapper\"\n            [attr.id]=\"'exc-' + (step.uniqueId || step.id)\"\n            [class.loaded]=\"!isNestedStepLoading(step)\">\n            <cqa-step-renderer\n              [step]=\"step\"\n              [stepNumber]=\"step?.isRunResult ? step?.stepNumber : (getExecutedBranchBaseStepNumber() + '.' + (i + 1))\"\n              [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n              [onExpandHandler]=\"onExpandHandler\"\n              [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n              [isStepLoadingHandler]=\"isStepLoadingHandler\"\n              [isStepExpandedHandler]=\"isStepExpandedHandler\"\n              [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\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              [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n              [onAnalyzeHandler]=\"onAnalyzeHandler\"\n              [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [onDownloadHandler]=\"onDownloadHandler\"\n              [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n              [onTextCopiedHandler]=\"onTextCopiedHandler\"\n              [downloadingStepId]=\"downloadingStepId\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"step?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              [isDebug]=\"isDebug\"\n              [parentSkipped]=\"selfDebugDisabled\"\n              [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(step) : debugPointSet\"\n              [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n              [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n              [onEditStepHandler]=\"onEditStepHandler\"\n              [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(step) : addStepMenuOptions\"\n              [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n              [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(step) : stepMoreMenuOptions\"\n              [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n              [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n              [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n              (addStepInsideLoop)=\"addStepInsideLoop.emit($event)\"\n              (componentReady)=\"markStepLoaded(step)\">\n            </cqa-step-renderer>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis\n      *ngIf=\"selfHealAnalysis\"\n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : 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 -->\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 -->\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: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "getSelfHealLoadingStatesHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "onStepClickHandler", "onJsonPathCopiedHandler", "onDownloadHandler", "onFilePathCopiedHandler", "onTextCopiedHandler", "jumpToTimestampHandler", "downloadingStepId", "isLive", "isDebug", "debugPointSet", "getDebugPointSetHandler", "onDebugPointChangeHandler", "onEditStepHandler", "addStepMenuOptions", "onAddStepOptionSelectHandler", "stepMoreMenuOptions", "onStepMoreOptionSelectHandler", "getAddStepMenuOptionsForNested", "getStepMoreMenuOptionsForNested", "onAddElseIfBranchAtHandler", "onAddElseBranchHandler", "onEditBranchConditionHandler", "stepNumber", "parentSkipped"], outputs: ["addStepOptionSelect", "stepMoreOptionSelect", "addStepInsideLoop", "componentReady"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+ConditionDebugStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionDebugStepComponent, selector: "cqa-condition-debug-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", stepDeleted: "stepDeleted", isDebug: "isDebug", debugPointSet: "debugPointSet", parentSkipped: "parentSkipped", getDebugPointSetHandler: "getDebugPointSetHandler", onDebugPointChangeHandler: "onDebugPointChangeHandler", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", ifChild: "ifChild", activeBranchStepId: "activeBranchStepId", onExpandHandler: "onExpandHandler", onEditStepHandler: "onEditStepHandler", onAddStepOptionSelectHandler: "onAddStepOptionSelectHandler", onStepMoreOptionSelectHandler: "onStepMoreOptionSelectHandler", getAddStepMenuOptionsForNested: "getAddStepMenuOptionsForNested", getStepMoreMenuOptionsForNested: "getStepMoreMenuOptionsForNested", 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", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", onDownloadHandler: "onDownloadHandler", onFilePathCopiedHandler: "onFilePathCopiedHandler", onTextCopiedHandler: "onTextCopiedHandler", jumpToTimestampHandler: "jumpToTimestampHandler", downloadingStepId: "downloadingStepId", step: "step", onAddElseIfBranchAtHandler: "onAddElseIfBranchAtHandler", onAddElseBranchHandler: "onAddElseBranchHandler", onEditBranchConditionHandler: "onEditBranchConditionHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", addStepInsideLoop: "addStepInsideLoop", onBranchClickEvent: "onBranchClickEvent", onExpand: "onExpand", addElseIfBranch: "addElseIfBranch", addElseBranch: "addElseBranch", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" style=\"border-bottom: '1px solid #F3F4F6'\" (click)=\"$event.stopPropagation()\">\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($event)\">\n      <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n        [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n        matTooltipPosition=\"right\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n          [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n          [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n          (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n          <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n          </svg>\n          <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n          </svg>\n        </button>\n      </div>\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      <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\"><span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">skip_next</span></div>\n      <div *ngIf=\"status.toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\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 cqa-font-inter\">\n        <span class=\"cqa-font-semibold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\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        <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n          Deleted\n        </span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n        <!-- Step Change Badges (debug only) -->\n        <ng-container *ngIf=\"isDebug\">\n          <ng-container *ngFor=\"let badge of stepBadges\">\n            <cqa-badge *ngIf=\"badge === 'skipped'\" label=\"Skipped\" size=\"small\" [textColor]=\"'#4A5565'\" [borderColor]=\"'#99A1AF'\" [backgroundColor]=\"'#FFFFFF'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'edited'\" label=\"Edited\" size=\"small\" [textColor]=\"'#FBBF24'\" [borderColor]=\"'#FDDF92'\" [backgroundColor]=\"'#FFF9E9'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'added'\" label=\"Added\" size=\"small\" [textColor]=\"'#0DBD7D'\" [borderColor]=\"'#5ED3A8'\" [backgroundColor]=\"'#CFF2E5'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'removed'\" label=\"Removed\" size=\"small\" [textColor]=\"'#EE3F3F'\" [borderColor]=\"'#F47F7F'\" [backgroundColor]=\"'#FCD9D9'\"></cqa-badge>\n          </ng-container>\n        </ng-container>\n        <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n            <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n            <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n            <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n            </svg>\n          Self-healed\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\"\n             *ngIf=\"step?.executedResult?.video_start_time\"\n             [matTooltip]=\"'Jump to video time'\"\n             matTooltipPosition=\"below\"\n             (click)=\"onJumpToTimestamp($event)\">\n          <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n            play_arrow\n          </mat-icon>\n          <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n            {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n          </span>\n        </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n        <span class=\"cqa-text-[12px] cqa-leading-[15px] 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\n    <!-- Branch Buttons - Live mode only (clickable pills) -->\n    <div *ngIf=\"!isDebug\" 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; let branchIndex = index\"\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 cqa-transition-all\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch only -->\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>{{ getBranchStepNumber(branchIndex) }}. {{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- ==================== DEBUG MODE: Expanded Content ==================== -->\n  <div *ngIf=\"isExpanded && !isLoading && isDebug\" class=\"cqa-ml-[18px]\">\n    <div *ngFor=\"let branch of config.branches; let branchIndex = index\"\n         [style.background-color]=\"!isDebug ? null : getBranchBgColor(branch)\"\n         [class.cqa-opacity-50]=\"isDebug && getBranchBadges(branch).includes('skipped')\">\n\n      <!-- Branch Header Row (accordion trigger) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-2 cqa-cursor-pointer\"\n           (click)=\"toggleBranch(branchIndex, $event)\">\n        <!-- Breakpoint button for branch step -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-center\"\n          [matTooltip]=\"getBranchBreakpointTooltip(branch)\"\n          matTooltipPosition=\"right\">\n          <button type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n            [ngClass]=\"isBranchBreakpointDisabled(branch) ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n            [disabled]=\"isBranchBreakpointDisabled(branch)\"\n            (click)=\"onBranchDebugPointClick($event, branch)\"\n            [attr.aria-label]=\"isBranchDebugPointSet(branch) ? 'Remove debug point' : 'Set debug point'\">\n            <svg *ngIf=\"isBranchDebugPointSet(branch)\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"isBranchBreakpointDisabled(branch) ? '#9E9E9E' : '#C63535'\"/>\n            </svg>\n            <svg *ngIf=\"!isBranchDebugPointSet(branch)\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"isBranchBreakpointDisabled(branch) ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n            </svg>\n          </button>\n        </div>\n\n        <!-- Branch Status Icon -->\n        <ng-container *ngIf=\"getBranchStatus(branch) as branchStatus\">\n          <div *ngIf=\"branchStatus === '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=\"branchStatus === 'failure' || branchStatus === '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=\"branchStatus === '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=\"branchStatus === '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          <div class=\"cqa-flex cqa-items-center\" *ngIf=\"branchStatus === 'skipped'\"><span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">skip_next</span></div>\n          <div *ngIf=\"branchStatus === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        </ng-container>\n\n        <!-- Branch Label Badge -->\n        <span\n          class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[11px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n          [ngClass]=\"getBranchClass(branch)\">\n          <!-- Checkmark icon when executed -->\n          <svg *ngIf=\"branch.executed\" 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          <span>{{ getBranchStepNumber(branchIndex) }}. {{ branch.label }}</span>\n          <span *ngIf=\"getBranchConditionText(branch)\" class=\"cqa-font-normal\">(<span [innerHTML]=\"getBranchConditionText(branch)\"></span>)</span>\n        </span>\n\n        <div class=\"cqa-flex-1\"></div>\n\n        <!-- Add ELSE IF / Add ELSE + Edit + 3-dot for branch -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n          <!-- Add ELSE IF button \u2014 not shown for ELSE branch or when parent is deleted/skipped -->\n          <button *ngIf=\"branch.type !== 'else' && !isStepDeleted && !isSkipped\" type=\"button\" (click)=\"onAddElseIfClick($event, branchIndex)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer hover:cqa-opacity-80\">\n            Add ELSE IF\n          </button>\n          <!-- Add ELSE button - only on the last branch, when no ELSE branch exists, and parent not deleted/skipped -->\n          <button *ngIf=\"!hasElseBranch && branchIndex === config.branches.length - 1 && !isStepDeleted && !isSkipped\" type=\"button\" (click)=\"onAddElseClick($event)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer hover:cqa-opacity-80\">\n            Add ELSE\n          </button>\n          <!-- Branch Change Badges -->\n          <ng-container *ngFor=\"let badge of getBranchBadges(branch)\">\n            <cqa-badge *ngIf=\"badge === 'skipped'\" label=\"Skipped\" size=\"small\"\n              [textColor]=\"'#4A5565'\" [borderColor]=\"'#99A1AF'\" [backgroundColor]=\"'#FFFFFF'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'edited'\" label=\"Edited\" size=\"small\"\n              [textColor]=\"'#FBBF24'\" [borderColor]=\"'#FDDF92'\" [backgroundColor]=\"'#FFF9E9'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'added'\" label=\"Added\" size=\"small\"\n              [textColor]=\"'#0DBD7D'\" [borderColor]=\"'#5ED3A8'\" [backgroundColor]=\"'#CFF2E5'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'removed'\" label=\"Removed\" size=\"small\"\n              [textColor]=\"'#EE3F3F'\" [borderColor]=\"'#F47F7F'\" [backgroundColor]=\"'#FCD9D9'\">\n            </cqa-badge>\n          </ng-container>\n\n          <button *ngIf=\"branch.type !== 'else' && !isStepDeleted\" type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\"\n            aria-label=\"Edit branch\"\n            (click)=\"onEditBranchStep($event, branch)\">\n            <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n          </button>\n          <button *ngIf=\"!isStepDeleted\" type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\"\n            aria-label=\"More branch options\"\n            [matMenuTriggerFor]=\"branchMoreMenu\">\n            <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n          </button>\n          <mat-menu #branchMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n            <button mat-menu-item *ngFor=\"let opt of getBranchMoreMenuOptions(branch)\" (click)=\"onBranchMoreOptionSelect(opt, $event, branch)\">{{ opt.label }}</button>\n          </mat-menu>\n        </div>\n\n        <!-- Chevron -->\n        <svg [class.cqa-rotate-180]=\"isBranchExpanded(branchIndex)\" class=\"cqa-transition-transform\"\n             width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n\n      <!-- Branch Children (steps inside this branch) \u2014 shown when accordion is open -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && getBranchChildren(branch).length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px] cqa-ml-9 cqa-pb-1\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let childStep of getBranchChildren(branch); index as ci\">\n          <div class=\"cqa-step-renderer-wrapper\" [attr.id]=\"'exc-' + (childStep?.uniqueId || childStep.id)\" [class.loaded]=\"!isNestedStepLoading(childStep)\">\n            <cqa-step-renderer\n              [step]=\"childStep\"\n              [stepNumber]=\"childStep?.isRunResult ? childStep?.stepNumber : (getBranchStepNumber(branchIndex) + '.' + (ci + 1))\"\n              [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n              [onExpandHandler]=\"onExpandHandler\"\n              [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n              [isStepLoadingHandler]=\"isStepLoadingHandler\"\n              [isStepExpandedHandler]=\"isStepExpandedHandler\"\n              [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\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              [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n              [onAnalyzeHandler]=\"onAnalyzeHandler\"\n              [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [onDownloadHandler]=\"onDownloadHandler\"\n              [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n              [onTextCopiedHandler]=\"onTextCopiedHandler\"\n              [downloadingStepId]=\"downloadingStepId\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"childStep?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              [isDebug]=\"isDebug\"\n              [parentSkipped]=\"selfDebugDisabled\"\n              [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(childStep) : debugPointSet\"\n              [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n              [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n              [onEditStepHandler]=\"onEditStepHandler\"\n              [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(childStep) : addStepMenuOptions\"\n              [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n              [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(childStep) : stepMoreMenuOptions\"\n              [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n              [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n              [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n              (addStepInsideLoop)=\"addStepInsideLoop.emit($event)\"\n              [onAddElseIfBranchAtHandler]=\"onAddElseIfBranchAtHandler\"\n              [onAddElseBranchHandler]=\"onAddElseBranchHandler\"\n              [onEditBranchConditionHandler]=\"onEditBranchConditionHandler\"\n              (componentReady)=\"markStepLoaded(childStep)\">\n            </cqa-step-renderer>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Branch not executed message (no children) \u2014 shown when accordion is open -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && !branch.executed && getBranchChildren(branch).length === 0\" 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          {{ branch.label }} branch not executed\n        </p>\n      </div>\n\n      <!-- Add step inside this branch (debug mode) \u2014 shown when accordion is open and parent not deleted/skipped -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && !step?.isStepGroupChildren\" class=\"cqa-px-3 cqa-pt-1 cqa-pb-2 cqa-ml-9 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <button\n          *ngIf=\"!isStepDeleted && !isSkipped\"\n          type=\"button\"\n          class=\"cqa-bg-transparent cqa-border-0 cqa-p-0 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#4F46E5] cqa-cursor-pointer hover:cqa-opacity-80\"\n          (click)=\"onAddStepInsideSpecificBranch($event, branch)\">\n          + Add step inside {{ branch.label }} branch\n        </button>\n      </div>\n\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis\n      *ngIf=\"selfHealAnalysis\"\n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : 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>App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span></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>Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span></div>\n      </span>\n    </div>\n  </div>\n\n  <!-- ==================== LIVE MODE: Expanded Content ==================== -->\n  <div *ngIf=\"isExpanded && !isLoading && !isDebug\">\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'; border-radius: 8px;\">\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 -->\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-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n            <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=\"hasChild || (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\" *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator for nested steps -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.length === 0) && isStepLoading()\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n          <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n        </div>\n\n        <ng-container *ngFor=\"let step of config.nestedSteps; index as i\">\n          <div\n            class=\"cqa-step-renderer-wrapper\"\n            [attr.id]=\"'exc-' + (step.uniqueId || step.id)\"\n            [class.loaded]=\"!isNestedStepLoading(step)\">\n            <cqa-step-renderer\n              [step]=\"step\"\n              [stepNumber]=\"step?.isRunResult ? step?.stepNumber : (getExecutedBranchBaseStepNumber() + '.' + (i + 1))\"\n              [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n              [onExpandHandler]=\"onExpandHandler\"\n              [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n              [isStepLoadingHandler]=\"isStepLoadingHandler\"\n              [isStepExpandedHandler]=\"isStepExpandedHandler\"\n              [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\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              [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n              [onAnalyzeHandler]=\"onAnalyzeHandler\"\n              [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [onDownloadHandler]=\"onDownloadHandler\"\n              [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n              [onTextCopiedHandler]=\"onTextCopiedHandler\"\n              [downloadingStepId]=\"downloadingStepId\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"step?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              [isDebug]=\"isDebug\"\n              [parentSkipped]=\"selfDebugDisabled\"\n              [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(step) : debugPointSet\"\n              [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n              [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n              [onEditStepHandler]=\"onEditStepHandler\"\n              [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(step) : addStepMenuOptions\"\n              [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n              [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(step) : stepMoreMenuOptions\"\n              [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n              [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n              [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n              (addStepInsideLoop)=\"addStepInsideLoop.emit($event)\"\n              (componentReady)=\"markStepLoaded(step)\">\n            </cqa-step-renderer>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis\n      *ngIf=\"selfHealAnalysis\"\n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : 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 -->\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 -->\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: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "getSelfHealLoadingStatesHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "onStepClickHandler", "onJsonPathCopiedHandler", "onDownloadHandler", "onFilePathCopiedHandler", "onTextCopiedHandler", "jumpToTimestampHandler", "downloadingStepId", "isLive", "isDebug", "debugPointSet", "getDebugPointSetHandler", "onDebugPointChangeHandler", "onEditStepHandler", "addStepMenuOptions", "onAddStepOptionSelectHandler", "stepMoreMenuOptions", "onStepMoreOptionSelectHandler", "getAddStepMenuOptionsForNested", "getStepMoreMenuOptionsForNested", "onAddElseIfBranchAtHandler", "onAddElseBranchHandler", "onEditBranchConditionHandler", "stepNumber", "parentSkipped"], outputs: ["addStepOptionSelect", "stepMoreOptionSelect", "addStepInsideLoop", "componentReady"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionDebugStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-condition-debug-step', host: { class: 'cqa-ui-root cqa-w-full' }, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" style=\"border-bottom: '1px solid #F3F4F6'\" (click)=\"$event.stopPropagation()\">\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($event)\">\n      <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n        [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n        matTooltipPosition=\"right\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n          [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n          [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n          (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n          <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n          </svg>\n          <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n          </svg>\n        </button>\n      </div>\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      <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\"><span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">skip_next</span></div>\n      <div *ngIf=\"status.toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\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 cqa-font-inter\">\n        <span class=\"cqa-font-semibold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\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        <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n          Deleted\n        </span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n        <!-- Step Change Badges (debug only) -->\n        <ng-container *ngIf=\"isDebug\">\n          <ng-container *ngFor=\"let badge of stepBadges\">\n            <cqa-badge *ngIf=\"badge === 'skipped'\" label=\"Skipped\" size=\"small\" [textColor]=\"'#4A5565'\" [borderColor]=\"'#99A1AF'\" [backgroundColor]=\"'#FFFFFF'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'edited'\" label=\"Edited\" size=\"small\" [textColor]=\"'#FBBF24'\" [borderColor]=\"'#FDDF92'\" [backgroundColor]=\"'#FFF9E9'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'added'\" label=\"Added\" size=\"small\" [textColor]=\"'#0DBD7D'\" [borderColor]=\"'#5ED3A8'\" [backgroundColor]=\"'#CFF2E5'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'removed'\" label=\"Removed\" size=\"small\" [textColor]=\"'#EE3F3F'\" [borderColor]=\"'#F47F7F'\" [backgroundColor]=\"'#FCD9D9'\"></cqa-badge>\n          </ng-container>\n        </ng-container>\n        <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n            <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n            <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n            <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n            </svg>\n          Self-healed\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\"\n             *ngIf=\"step?.executedResult?.video_start_time\"\n             [matTooltip]=\"'Jump to video time'\"\n             matTooltipPosition=\"below\"\n             (click)=\"onJumpToTimestamp($event)\">\n          <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n            play_arrow\n          </mat-icon>\n          <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n            {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n          </span>\n        </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n        <span class=\"cqa-text-[12px] cqa-leading-[15px] 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\n    <!-- Branch Buttons - Live mode only (clickable pills) -->\n    <div *ngIf=\"!isDebug\" 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; let branchIndex = index\"\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 cqa-transition-all\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch only -->\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>{{ getBranchStepNumber(branchIndex) }}. {{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- ==================== DEBUG MODE: Expanded Content ==================== -->\n  <div *ngIf=\"isExpanded && !isLoading && isDebug\" class=\"cqa-ml-[18px]\">\n    <div *ngFor=\"let branch of config.branches; let branchIndex = index\"\n         [style.background-color]=\"!isDebug ? null : getBranchBgColor(branch)\"\n         [class.cqa-opacity-50]=\"isDebug && getBranchBadges(branch).includes('skipped')\">\n\n      <!-- Branch Header Row (accordion trigger) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-2 cqa-cursor-pointer\"\n           (click)=\"toggleBranch(branchIndex, $event)\">\n        <!-- Breakpoint button for branch step -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-center\"\n          [matTooltip]=\"getBranchBreakpointTooltip(branch)\"\n          matTooltipPosition=\"right\">\n          <button type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n            [ngClass]=\"isBranchBreakpointDisabled(branch) ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n            [disabled]=\"isBranchBreakpointDisabled(branch)\"\n            (click)=\"onBranchDebugPointClick($event, branch)\"\n            [attr.aria-label]=\"isBranchDebugPointSet(branch) ? 'Remove debug point' : 'Set debug point'\">\n            <svg *ngIf=\"isBranchDebugPointSet(branch)\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"isBranchBreakpointDisabled(branch) ? '#9E9E9E' : '#C63535'\"/>\n            </svg>\n            <svg *ngIf=\"!isBranchDebugPointSet(branch)\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"isBranchBreakpointDisabled(branch) ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n            </svg>\n          </button>\n        </div>\n\n        <!-- Branch Status Icon -->\n        <ng-container *ngIf=\"getBranchStatus(branch) as branchStatus\">\n          <div *ngIf=\"branchStatus === '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=\"branchStatus === 'failure' || branchStatus === '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=\"branchStatus === '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=\"branchStatus === '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          <div class=\"cqa-flex cqa-items-center\" *ngIf=\"branchStatus === 'skipped'\"><span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">skip_next</span></div>\n          <div *ngIf=\"branchStatus === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        </ng-container>\n\n        <!-- Branch Label Badge -->\n        <span\n          class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[11px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n          [ngClass]=\"getBranchClass(branch)\">\n          <!-- Checkmark icon when executed -->\n          <svg *ngIf=\"branch.executed\" 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          <span>{{ getBranchStepNumber(branchIndex) }}. {{ branch.label }}</span>\n          <span *ngIf=\"getBranchConditionText(branch)\" class=\"cqa-font-normal\">(<span [innerHTML]=\"getBranchConditionText(branch)\"></span>)</span>\n        </span>\n\n        <div class=\"cqa-flex-1\"></div>\n\n        <!-- Add ELSE IF / Add ELSE + Edit + 3-dot for branch -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n          <!-- Add ELSE IF button \u2014 not shown for ELSE branch or when parent is deleted/skipped -->\n          <button *ngIf=\"branch.type !== 'else' && !isStepDeleted && !isSkipped\" type=\"button\" (click)=\"onAddElseIfClick($event, branchIndex)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer hover:cqa-opacity-80\">\n            Add ELSE IF\n          </button>\n          <!-- Add ELSE button - only on the last branch, when no ELSE branch exists, and parent not deleted/skipped -->\n          <button *ngIf=\"!hasElseBranch && branchIndex === config.branches.length - 1 && !isStepDeleted && !isSkipped\" type=\"button\" (click)=\"onAddElseClick($event)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer hover:cqa-opacity-80\">\n            Add ELSE\n          </button>\n          <!-- Branch Change Badges -->\n          <ng-container *ngFor=\"let badge of getBranchBadges(branch)\">\n            <cqa-badge *ngIf=\"badge === 'skipped'\" label=\"Skipped\" size=\"small\"\n              [textColor]=\"'#4A5565'\" [borderColor]=\"'#99A1AF'\" [backgroundColor]=\"'#FFFFFF'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'edited'\" label=\"Edited\" size=\"small\"\n              [textColor]=\"'#FBBF24'\" [borderColor]=\"'#FDDF92'\" [backgroundColor]=\"'#FFF9E9'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'added'\" label=\"Added\" size=\"small\"\n              [textColor]=\"'#0DBD7D'\" [borderColor]=\"'#5ED3A8'\" [backgroundColor]=\"'#CFF2E5'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'removed'\" label=\"Removed\" size=\"small\"\n              [textColor]=\"'#EE3F3F'\" [borderColor]=\"'#F47F7F'\" [backgroundColor]=\"'#FCD9D9'\">\n            </cqa-badge>\n          </ng-container>\n\n          <button *ngIf=\"branch.type !== 'else' && !isStepDeleted\" type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\"\n            aria-label=\"Edit branch\"\n            (click)=\"onEditBranchStep($event, branch)\">\n            <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n          </button>\n          <button *ngIf=\"!isStepDeleted\" type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\"\n            aria-label=\"More branch options\"\n            [matMenuTriggerFor]=\"branchMoreMenu\">\n            <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n          </button>\n          <mat-menu #branchMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n            <button mat-menu-item *ngFor=\"let opt of getBranchMoreMenuOptions(branch)\" (click)=\"onBranchMoreOptionSelect(opt, $event, branch)\">{{ opt.label }}</button>\n          </mat-menu>\n        </div>\n\n        <!-- Chevron -->\n        <svg [class.cqa-rotate-180]=\"isBranchExpanded(branchIndex)\" class=\"cqa-transition-transform\"\n             width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n\n      <!-- Branch Children (steps inside this branch) \u2014 shown when accordion is open -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && getBranchChildren(branch).length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px] cqa-ml-9 cqa-pb-1\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let childStep of getBranchChildren(branch); index as ci\">\n          <div class=\"cqa-step-renderer-wrapper\" [attr.id]=\"'exc-' + (childStep?.uniqueId || childStep.id)\" [class.loaded]=\"!isNestedStepLoading(childStep)\">\n            <cqa-step-renderer\n              [step]=\"childStep\"\n              [stepNumber]=\"childStep?.isRunResult ? childStep?.stepNumber : (getBranchStepNumber(branchIndex) + '.' + (ci + 1))\"\n              [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n              [onExpandHandler]=\"onExpandHandler\"\n              [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n              [isStepLoadingHandler]=\"isStepLoadingHandler\"\n              [isStepExpandedHandler]=\"isStepExpandedHandler\"\n              [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\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              [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n              [onAnalyzeHandler]=\"onAnalyzeHandler\"\n              [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [onDownloadHandler]=\"onDownloadHandler\"\n              [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n              [onTextCopiedHandler]=\"onTextCopiedHandler\"\n              [downloadingStepId]=\"downloadingStepId\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"childStep?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              [isDebug]=\"isDebug\"\n              [parentSkipped]=\"selfDebugDisabled\"\n              [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(childStep) : debugPointSet\"\n              [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n              [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n              [onEditStepHandler]=\"onEditStepHandler\"\n              [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(childStep) : addStepMenuOptions\"\n              [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n              [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(childStep) : stepMoreMenuOptions\"\n              [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n              [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n              [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n              (addStepInsideLoop)=\"addStepInsideLoop.emit($event)\"\n              [onAddElseIfBranchAtHandler]=\"onAddElseIfBranchAtHandler\"\n              [onAddElseBranchHandler]=\"onAddElseBranchHandler\"\n              [onEditBranchConditionHandler]=\"onEditBranchConditionHandler\"\n              (componentReady)=\"markStepLoaded(childStep)\">\n            </cqa-step-renderer>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Branch not executed message (no children) \u2014 shown when accordion is open -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && !branch.executed && getBranchChildren(branch).length === 0\" 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          {{ branch.label }} branch not executed\n        </p>\n      </div>\n\n      <!-- Add step inside this branch (debug mode) \u2014 shown when accordion is open and parent not deleted/skipped -->\n      <div *ngIf=\"isBranchExpanded(branchIndex)\" class=\"cqa-px-3 cqa-pt-1 cqa-pb-2 cqa-ml-9 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <button\n          *ngIf=\"!isStepDeleted && !isSkipped\"\n          type=\"button\"\n          class=\"cqa-bg-transparent cqa-border-0 cqa-p-0 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#4F46E5] cqa-cursor-pointer hover:cqa-opacity-80\"\n          (click)=\"onAddStepInsideSpecificBranch($event, branch)\">\n          + Add step inside {{ branch.label }} branch\n        </button>\n      </div>\n\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis\n      *ngIf=\"selfHealAnalysis\"\n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : 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>App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span></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>Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span></div>\n      </span>\n    </div>\n  </div>\n\n  <!-- ==================== LIVE MODE: Expanded Content ==================== -->\n  <div *ngIf=\"isExpanded && !isLoading && !isDebug\">\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'; border-radius: 8px;\">\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 -->\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-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n            <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=\"hasChild || (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\" *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator for nested steps -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.length === 0) && isStepLoading()\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n          <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n        </div>\n\n        <ng-container *ngFor=\"let step of config.nestedSteps; index as i\">\n          <div\n            class=\"cqa-step-renderer-wrapper\"\n            [attr.id]=\"'exc-' + (step.uniqueId || step.id)\"\n            [class.loaded]=\"!isNestedStepLoading(step)\">\n            <cqa-step-renderer\n              [step]=\"step\"\n              [stepNumber]=\"step?.isRunResult ? step?.stepNumber : (getExecutedBranchBaseStepNumber() + '.' + (i + 1))\"\n              [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n              [onExpandHandler]=\"onExpandHandler\"\n              [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n              [isStepLoadingHandler]=\"isStepLoadingHandler\"\n              [isStepExpandedHandler]=\"isStepExpandedHandler\"\n              [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\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              [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n              [onAnalyzeHandler]=\"onAnalyzeHandler\"\n              [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [onDownloadHandler]=\"onDownloadHandler\"\n              [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n              [onTextCopiedHandler]=\"onTextCopiedHandler\"\n              [downloadingStepId]=\"downloadingStepId\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"step?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              [isDebug]=\"isDebug\"\n              [parentSkipped]=\"selfDebugDisabled\"\n              [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(step) : debugPointSet\"\n              [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n              [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n              [onEditStepHandler]=\"onEditStepHandler\"\n              [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(step) : addStepMenuOptions\"\n              [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n              [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(step) : stepMoreMenuOptions\"\n              [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n              [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n              [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n              (addStepInsideLoop)=\"addStepInsideLoop.emit($event)\"\n              (componentReady)=\"markStepLoaded(step)\">\n            </cqa-step-renderer>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis\n      *ngIf=\"selfHealAnalysis\"\n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : 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 -->\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 -->\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" }]
+            args: [{ selector: 'cqa-condition-debug-step', host: { class: 'cqa-ui-root cqa-w-full' }, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" style=\"border-bottom: '1px solid #F3F4F6'\" (click)=\"$event.stopPropagation()\">\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($event)\">\n      <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n        [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n        matTooltipPosition=\"right\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n          [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n          [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n          (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n          <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n          </svg>\n          <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n          </svg>\n        </button>\n      </div>\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      <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\"><span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">skip_next</span></div>\n      <div *ngIf=\"status.toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\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 cqa-font-inter\">\n        <span class=\"cqa-font-semibold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\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        <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n          Deleted\n        </span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n        <!-- Step Change Badges (debug only) -->\n        <ng-container *ngIf=\"isDebug\">\n          <ng-container *ngFor=\"let badge of stepBadges\">\n            <cqa-badge *ngIf=\"badge === 'skipped'\" label=\"Skipped\" size=\"small\" [textColor]=\"'#4A5565'\" [borderColor]=\"'#99A1AF'\" [backgroundColor]=\"'#FFFFFF'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'edited'\" label=\"Edited\" size=\"small\" [textColor]=\"'#FBBF24'\" [borderColor]=\"'#FDDF92'\" [backgroundColor]=\"'#FFF9E9'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'added'\" label=\"Added\" size=\"small\" [textColor]=\"'#0DBD7D'\" [borderColor]=\"'#5ED3A8'\" [backgroundColor]=\"'#CFF2E5'\"></cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'removed'\" label=\"Removed\" size=\"small\" [textColor]=\"'#EE3F3F'\" [borderColor]=\"'#F47F7F'\" [backgroundColor]=\"'#FCD9D9'\"></cqa-badge>\n          </ng-container>\n        </ng-container>\n        <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n            <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n            <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n            <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n            </svg>\n          Self-healed\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\"\n             *ngIf=\"step?.executedResult?.video_start_time\"\n             [matTooltip]=\"'Jump to video time'\"\n             matTooltipPosition=\"below\"\n             (click)=\"onJumpToTimestamp($event)\">\n          <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n            play_arrow\n          </mat-icon>\n          <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n            {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n          </span>\n        </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n        <span class=\"cqa-text-[12px] cqa-leading-[15px] 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\n    <!-- Branch Buttons - Live mode only (clickable pills) -->\n    <div *ngIf=\"!isDebug\" 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; let branchIndex = index\"\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 cqa-transition-all\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch only -->\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>{{ getBranchStepNumber(branchIndex) }}. {{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- ==================== DEBUG MODE: Expanded Content ==================== -->\n  <div *ngIf=\"isExpanded && !isLoading && isDebug\" class=\"cqa-ml-[18px]\">\n    <div *ngFor=\"let branch of config.branches; let branchIndex = index\"\n         [style.background-color]=\"!isDebug ? null : getBranchBgColor(branch)\"\n         [class.cqa-opacity-50]=\"isDebug && getBranchBadges(branch).includes('skipped')\">\n\n      <!-- Branch Header Row (accordion trigger) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-2 cqa-cursor-pointer\"\n           (click)=\"toggleBranch(branchIndex, $event)\">\n        <!-- Breakpoint button for branch step -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-center\"\n          [matTooltip]=\"getBranchBreakpointTooltip(branch)\"\n          matTooltipPosition=\"right\">\n          <button type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n            [ngClass]=\"isBranchBreakpointDisabled(branch) ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n            [disabled]=\"isBranchBreakpointDisabled(branch)\"\n            (click)=\"onBranchDebugPointClick($event, branch)\"\n            [attr.aria-label]=\"isBranchDebugPointSet(branch) ? 'Remove debug point' : 'Set debug point'\">\n            <svg *ngIf=\"isBranchDebugPointSet(branch)\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"isBranchBreakpointDisabled(branch) ? '#9E9E9E' : '#C63535'\"/>\n            </svg>\n            <svg *ngIf=\"!isBranchDebugPointSet(branch)\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"isBranchBreakpointDisabled(branch) ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n            </svg>\n          </button>\n        </div>\n\n        <!-- Branch Status Icon -->\n        <ng-container *ngIf=\"getBranchStatus(branch) as branchStatus\">\n          <div *ngIf=\"branchStatus === '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=\"branchStatus === 'failure' || branchStatus === '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=\"branchStatus === '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=\"branchStatus === '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          <div class=\"cqa-flex cqa-items-center\" *ngIf=\"branchStatus === 'skipped'\"><span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">skip_next</span></div>\n          <div *ngIf=\"branchStatus === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        </ng-container>\n\n        <!-- Branch Label Badge -->\n        <span\n          class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[11px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n          [ngClass]=\"getBranchClass(branch)\">\n          <!-- Checkmark icon when executed -->\n          <svg *ngIf=\"branch.executed\" 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          <span>{{ getBranchStepNumber(branchIndex) }}. {{ branch.label }}</span>\n          <span *ngIf=\"getBranchConditionText(branch)\" class=\"cqa-font-normal\">(<span [innerHTML]=\"getBranchConditionText(branch)\"></span>)</span>\n        </span>\n\n        <div class=\"cqa-flex-1\"></div>\n\n        <!-- Add ELSE IF / Add ELSE + Edit + 3-dot for branch -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n          <!-- Add ELSE IF button \u2014 not shown for ELSE branch or when parent is deleted/skipped -->\n          <button *ngIf=\"branch.type !== 'else' && !isStepDeleted && !isSkipped\" type=\"button\" (click)=\"onAddElseIfClick($event, branchIndex)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer hover:cqa-opacity-80\">\n            Add ELSE IF\n          </button>\n          <!-- Add ELSE button - only on the last branch, when no ELSE branch exists, and parent not deleted/skipped -->\n          <button *ngIf=\"!hasElseBranch && branchIndex === config.branches.length - 1 && !isStepDeleted && !isSkipped\" type=\"button\" (click)=\"onAddElseClick($event)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer hover:cqa-opacity-80\">\n            Add ELSE\n          </button>\n          <!-- Branch Change Badges -->\n          <ng-container *ngFor=\"let badge of getBranchBadges(branch)\">\n            <cqa-badge *ngIf=\"badge === 'skipped'\" label=\"Skipped\" size=\"small\"\n              [textColor]=\"'#4A5565'\" [borderColor]=\"'#99A1AF'\" [backgroundColor]=\"'#FFFFFF'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'edited'\" label=\"Edited\" size=\"small\"\n              [textColor]=\"'#FBBF24'\" [borderColor]=\"'#FDDF92'\" [backgroundColor]=\"'#FFF9E9'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'added'\" label=\"Added\" size=\"small\"\n              [textColor]=\"'#0DBD7D'\" [borderColor]=\"'#5ED3A8'\" [backgroundColor]=\"'#CFF2E5'\">\n            </cqa-badge>\n            <cqa-badge *ngIf=\"badge === 'removed'\" label=\"Removed\" size=\"small\"\n              [textColor]=\"'#EE3F3F'\" [borderColor]=\"'#F47F7F'\" [backgroundColor]=\"'#FCD9D9'\">\n            </cqa-badge>\n          </ng-container>\n\n          <button *ngIf=\"branch.type !== 'else' && !isStepDeleted\" type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\"\n            aria-label=\"Edit branch\"\n            (click)=\"onEditBranchStep($event, branch)\">\n            <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n          </button>\n          <button *ngIf=\"!isStepDeleted\" type=\"button\"\n            class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\"\n            aria-label=\"More branch options\"\n            [matMenuTriggerFor]=\"branchMoreMenu\">\n            <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n          </button>\n          <mat-menu #branchMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n            <button mat-menu-item *ngFor=\"let opt of getBranchMoreMenuOptions(branch)\" (click)=\"onBranchMoreOptionSelect(opt, $event, branch)\">{{ opt.label }}</button>\n          </mat-menu>\n        </div>\n\n        <!-- Chevron -->\n        <svg [class.cqa-rotate-180]=\"isBranchExpanded(branchIndex)\" class=\"cqa-transition-transform\"\n             width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </div>\n\n      <!-- Branch Children (steps inside this branch) \u2014 shown when accordion is open -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && getBranchChildren(branch).length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px] cqa-ml-9 cqa-pb-1\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let childStep of getBranchChildren(branch); index as ci\">\n          <div class=\"cqa-step-renderer-wrapper\" [attr.id]=\"'exc-' + (childStep?.uniqueId || childStep.id)\" [class.loaded]=\"!isNestedStepLoading(childStep)\">\n            <cqa-step-renderer\n              [step]=\"childStep\"\n              [stepNumber]=\"childStep?.isRunResult ? childStep?.stepNumber : (getBranchStepNumber(branchIndex) + '.' + (ci + 1))\"\n              [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n              [onExpandHandler]=\"onExpandHandler\"\n              [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n              [isStepLoadingHandler]=\"isStepLoadingHandler\"\n              [isStepExpandedHandler]=\"isStepExpandedHandler\"\n              [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\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              [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n              [onAnalyzeHandler]=\"onAnalyzeHandler\"\n              [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [onDownloadHandler]=\"onDownloadHandler\"\n              [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n              [onTextCopiedHandler]=\"onTextCopiedHandler\"\n              [downloadingStepId]=\"downloadingStepId\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"childStep?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              [isDebug]=\"isDebug\"\n              [parentSkipped]=\"selfDebugDisabled\"\n              [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(childStep) : debugPointSet\"\n              [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n              [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n              [onEditStepHandler]=\"onEditStepHandler\"\n              [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(childStep) : addStepMenuOptions\"\n              [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n              [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(childStep) : stepMoreMenuOptions\"\n              [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n              [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n              [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n              (addStepInsideLoop)=\"addStepInsideLoop.emit($event)\"\n              [onAddElseIfBranchAtHandler]=\"onAddElseIfBranchAtHandler\"\n              [onAddElseBranchHandler]=\"onAddElseBranchHandler\"\n              [onEditBranchConditionHandler]=\"onEditBranchConditionHandler\"\n              (componentReady)=\"markStepLoaded(childStep)\">\n            </cqa-step-renderer>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Branch not executed message (no children) \u2014 shown when accordion is open -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && !branch.executed && getBranchChildren(branch).length === 0\" 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          {{ branch.label }} branch not executed\n        </p>\n      </div>\n\n      <!-- Add step inside this branch (debug mode) \u2014 shown when accordion is open and parent not deleted/skipped -->\n      <div *ngIf=\"isBranchExpanded(branchIndex) && !step?.isStepGroupChildren\" class=\"cqa-px-3 cqa-pt-1 cqa-pb-2 cqa-ml-9 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <button\n          *ngIf=\"!isStepDeleted && !isSkipped\"\n          type=\"button\"\n          class=\"cqa-bg-transparent cqa-border-0 cqa-p-0 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#4F46E5] cqa-cursor-pointer hover:cqa-opacity-80\"\n          (click)=\"onAddStepInsideSpecificBranch($event, branch)\">\n          + Add step inside {{ branch.label }} branch\n        </button>\n      </div>\n\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis\n      *ngIf=\"selfHealAnalysis\"\n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : 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>App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span></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>Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span></div>\n      </span>\n    </div>\n  </div>\n\n  <!-- ==================== LIVE MODE: Expanded Content ==================== -->\n  <div *ngIf=\"isExpanded && !isLoading && !isDebug\">\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'; border-radius: 8px;\">\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 -->\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-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"word-break: break-word;\">\n            <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=\"hasChild || (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\" *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator for nested steps -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.length === 0) && isStepLoading()\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n          <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n        </div>\n\n        <ng-container *ngFor=\"let step of config.nestedSteps; index as i\">\n          <div\n            class=\"cqa-step-renderer-wrapper\"\n            [attr.id]=\"'exc-' + (step.uniqueId || step.id)\"\n            [class.loaded]=\"!isNestedStepLoading(step)\">\n            <cqa-step-renderer\n              [step]=\"step\"\n              [stepNumber]=\"step?.isRunResult ? step?.stepNumber : (getExecutedBranchBaseStepNumber() + '.' + (i + 1))\"\n              [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n              [onExpandHandler]=\"onExpandHandler\"\n              [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n              [isStepLoadingHandler]=\"isStepLoadingHandler\"\n              [isStepExpandedHandler]=\"isStepExpandedHandler\"\n              [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\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              [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n              [onAnalyzeHandler]=\"onAnalyzeHandler\"\n              [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [onDownloadHandler]=\"onDownloadHandler\"\n              [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n              [onTextCopiedHandler]=\"onTextCopiedHandler\"\n              [downloadingStepId]=\"downloadingStepId\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"step?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              [isDebug]=\"isDebug\"\n              [parentSkipped]=\"selfDebugDisabled\"\n              [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(step) : debugPointSet\"\n              [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n              [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n              [onEditStepHandler]=\"onEditStepHandler\"\n              [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(step) : addStepMenuOptions\"\n              [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n              [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(step) : stepMoreMenuOptions\"\n              [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n              [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n              [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n              (addStepInsideLoop)=\"addStepInsideLoop.emit($event)\"\n              (componentReady)=\"markStepLoaded(step)\">\n            </cqa-step-renderer>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis\n      *ngIf=\"selfHealAnalysis\"\n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : 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 -->\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 -->\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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -42747,10 +42832,10 @@ class QuestionnaireListComponent {
     }
 }
 QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n    <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n    <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <div class=\"cqa-px-6 cqa-py-3\">\n    <!-- Question rows -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n        <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n            <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n          </div>\n          <cqa-custom-input\n            [inputId]=\"getInputId(item.id)\"\n            [value]=\"item.answer\"\n            [placeholder]=\"inputPlaceholder\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"onAnswerInput(item.id, $event)\"\n            class=\"cqa-w-full\"\n          ></cqa-custom-input>\n        </div>\n      </ng-container>\n      <ng-template #emptyState>\n        <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n      </ng-template>\n    </div>\n\n    <!-- Footer: aligned with table pagination design -->\n    <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n      <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n        <span class=\"rows-label\">Questions per page</span>\n        <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n            (click)=\"togglePageSizeMenu()\"\n            [attr.aria-expanded]=\"pageSizeOpen\"\n            aria-haspopup=\"listbox\"\n            aria-label=\"Questions per page\"\n          >\n            {{ pageSize }}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n          </button>\n          <div\n            *ngIf=\"pageSizeOpen\"\n            class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n            role=\"listbox\"\n            [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n          >\n            <button\n              *ngFor=\"let opt of pageSizeOptions\"\n              type=\"button\"\n              class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n              [attr.id]=\"'question-pagesize-' + opt\"\n              role=\"option\"\n              [attr.aria-selected]=\"pageSize === opt\"\n              (click)=\"selectPageSize(opt)\"\n            >\n              {{ opt }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n        <div class=\"pagination-range\">\n          {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n        </div>\n        <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [""], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n    <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n    <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <div class=\"cqa-px-6 cqa-py-3\">\n    <!-- Question rows -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n        <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n            <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n          </div>\n          <cqa-custom-input\n            [inputId]=\"getInputId(item.id)\"\n            [value]=\"item.answer\"\n            [placeholder]=\"inputPlaceholder\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"onAnswerInput(item.id, $event)\"\n            class=\"cqa-w-full\"\n          ></cqa-custom-input>\n        </div>\n      </ng-container>\n      <ng-template #emptyState>\n        <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n      </ng-template>\n    </div>\n\n    <!-- Footer: aligned with table pagination design -->\n    <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n      <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n        <span class=\"rows-label\">Questions per page</span>\n        <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n            (click)=\"togglePageSizeMenu()\"\n            [attr.aria-expanded]=\"pageSizeOpen\"\n            aria-haspopup=\"listbox\"\n            aria-label=\"Questions per page\"\n          >\n            {{ pageSize }}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n          </button>\n          <div\n            *ngIf=\"pageSizeOpen\"\n            class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n            role=\"listbox\"\n            [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n          >\n            <button\n              *ngFor=\"let opt of pageSizeOptions\"\n              type=\"button\"\n              class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n              [attr.id]=\"'question-pagesize-' + opt\"\n              role=\"option\"\n              [attr.aria-selected]=\"pageSize === opt\"\n              (click)=\"selectPageSize(opt)\"\n            >\n              {{ opt }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n        <div class=\"pagination-range\">\n          {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n        </div>\n        <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-questionnaire-list', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n    <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n    <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <div class=\"cqa-px-6 cqa-py-3\">\n    <!-- Question rows -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n        <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n            <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n          </div>\n          <cqa-custom-input\n            [inputId]=\"getInputId(item.id)\"\n            [value]=\"item.answer\"\n            [placeholder]=\"inputPlaceholder\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"onAnswerInput(item.id, $event)\"\n            class=\"cqa-w-full\"\n          ></cqa-custom-input>\n        </div>\n      </ng-container>\n      <ng-template #emptyState>\n        <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n      </ng-template>\n    </div>\n\n    <!-- Footer: aligned with table pagination design -->\n    <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n      <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n        <span class=\"rows-label\">Questions per page</span>\n        <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n            (click)=\"togglePageSizeMenu()\"\n            [attr.aria-expanded]=\"pageSizeOpen\"\n            aria-haspopup=\"listbox\"\n            aria-label=\"Questions per page\"\n          >\n            {{ pageSize }}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n          </button>\n          <div\n            *ngIf=\"pageSizeOpen\"\n            class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n            role=\"listbox\"\n            [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n          >\n            <button\n              *ngFor=\"let opt of pageSizeOptions\"\n              type=\"button\"\n              class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n              [attr.id]=\"'question-pagesize-' + opt\"\n              role=\"option\"\n              [attr.aria-selected]=\"pageSize === opt\"\n              (click)=\"selectPageSize(opt)\"\n            >\n              {{ opt }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n        <div class=\"pagination-range\">\n          {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n        </div>\n        <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [""] }]
+            args: [{ selector: 'cqa-questionnaire-list', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n  <!-- Header -->\n  <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n    <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n    <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n      The AI has generated these questions to resolve ambiguities in the requirement.\n      Answering these will regenerate specific test cases.\n    </p>\n  </div>\n\n  <div class=\"cqa-px-6 cqa-py-3\">\n    <!-- Question rows -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n        <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n            <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n          </div>\n          <cqa-custom-input\n            [inputId]=\"getInputId(item.id)\"\n            [value]=\"item.answer\"\n            [placeholder]=\"inputPlaceholder\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"onAnswerInput(item.id, $event)\"\n            class=\"cqa-w-full\"\n          ></cqa-custom-input>\n        </div>\n      </ng-container>\n      <ng-template #emptyState>\n        <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n      </ng-template>\n    </div>\n\n    <!-- Footer: aligned with table pagination design -->\n    <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n      <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n        <span class=\"rows-label\">Questions per page</span>\n        <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n          <button\n            type=\"button\"\n            class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n            (click)=\"togglePageSizeMenu()\"\n            [attr.aria-expanded]=\"pageSizeOpen\"\n            aria-haspopup=\"listbox\"\n            aria-label=\"Questions per page\"\n          >\n            {{ pageSize }}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n          </button>\n          <div\n            *ngIf=\"pageSizeOpen\"\n            class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n            role=\"listbox\"\n            [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n          >\n            <button\n              *ngFor=\"let opt of pageSizeOptions\"\n              type=\"button\"\n              class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n              [attr.id]=\"'question-pagesize-' + opt\"\n              role=\"option\"\n              [attr.aria-selected]=\"pageSize === opt\"\n              (click)=\"selectPageSize(opt)\"\n            >\n              {{ opt }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n        <div class=\"pagination-range\">\n          {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n        </div>\n        <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [] }]
         }], propDecorators: { items: [{
                 type: Input
             }], defaultPageSize: [{
@@ -42856,15 +42941,16 @@ class VersionHistoryListComponent {
         this.getAuthorInitialsFn = () => '';
         this.getAuthorLabelFn = () => '';
         this.getChangeTypeBadgeFn = () => ({ backgroundColor: '#F2F4F7', textColor: '#344054', borderColor: '#E4E7EC' });
+        this.getChangeSummaryBadgeFn = (v) => ({ label: (v === null || v === void 0 ? void 0 : v.changeSummary) || '', backgroundColor: '#F2F4F7', textColor: '#344054', borderColor: '#E4E7EC' });
         this.versionSelected = new EventEmitter();
         this.listScroll = new EventEmitter();
     }
 }
 VersionHistoryListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-VersionHistoryListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VersionHistoryListComponent, selector: "cqa-version-history-list", inputs: { versions: "versions", selectedVersionId: "selectedVersionId", currentVersionId: "currentVersionId", isLoadingList: "isLoadingList", isLoadingMore: "isLoadingMore", emptyStateConfig: "emptyStateConfig", getRelativeTimeFn: "getRelativeTimeFn", getAuthorInitialsFn: "getAuthorInitialsFn", getAuthorLabelFn: "getAuthorLabelFn", getChangeTypeBadgeFn: "getChangeTypeBadgeFn" }, outputs: { versionSelected: "versionSelected", listScroll: "listScroll" }, ngImport: i0, template: "<div class=\"cqa-vh-list-container\" (scroll)=\"listScroll.emit($event)\">\n  <div class=\"d-flex align-items-center justify-content-between fz-14 fw-semi-bold cqa-vh-list-header\">\n    {{ versions.length }} Versions\n  </div>\n\n  <div *ngIf=\"isLoadingList\" class=\"cqa-vh-list-skeleton\">\n    <div *ngFor=\"let i of [1,2,3,4]\" class=\"cqa-vh-list-skeleton-row\">\n      <div class=\"animated-background rounded-circle cqa-vh-list-skeleton-dot\"></div>\n      <div style=\"flex: 1;\">\n        <div class=\"animated-background\" style=\"height: 14px; width: 50%; border-radius: 4px; margin-bottom: 10px;\"></div>\n        <div class=\"animated-background\" style=\"height: 12px; width: 80%; border-radius: 4px; margin-bottom: 10px;\"></div>\n        <div class=\"animated-background\" style=\"height: 12px; width: 45%; border-radius: 4px;\"></div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!isLoadingList\">\n    <div *ngIf=\"!versions.length\" class=\"cqa-vh-list-empty\">\n      <cqa-empty-state [title]=\"emptyStateConfig?.title\" [description]=\"emptyStateConfig?.description\"\n        [imageUrl]=\"emptyStateConfig?.imageUrl\"></cqa-empty-state>\n    </div>\n    <div class=\"cqa-vh-list-body\">\n      <div\n        *ngFor=\"let v of versions\"\n        (click)=\"versionSelected.emit(v.id)\"\n        class=\"cqa-vh-list-item\"\n        [class.cqa-vh-list-item--selected]=\"v.id === selectedVersionId\">\n        <div class=\"d-flex align-items-start\" style=\"gap: 12px;\">\n          <div style=\"padding-top: 3px; flex-shrink: 0;\">\n            <span class=\"cqa-vh-list-item-radio\"\n              [class.cqa-vh-list-item-radio--selected]=\"v.id === selectedVersionId\">\n              <span *ngIf=\"v.id === selectedVersionId\" class=\"cqa-vh-list-item-radio-dot\"></span>\n            </span>\n          </div>\n          <div style=\"flex: 1; min-width: 0;\">\n            <div class=\"d-flex align-items-center justify-content-between\" style=\"margin-bottom: 4px;\">\n              <div class=\"d-flex align-items-center\" style=\"gap: 6px;\">\n                <span class=\"cqa-vh-list-item-version\"\n                  [class.cqa-vh-list-item-version--selected]=\"v.id === selectedVersionId\">\n                  v{{ v.versionNumber }}\n                </span>\n                <cqa-badge *ngIf=\"v.id === currentVersionId\" label=\"Current\" size=\"extra-small\" variant=\"info\"\n                  backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n              </div>\n              <span class=\"cqa-vh-list-item-time\">{{ getRelativeTimeFn(v.createdDate) }}</span>\n            </div>\n\n            <div *ngIf=\"v.changeSummary\" class=\"cqa-vh-list-item-summary\">\n              {{ v.changeSummary }}\n            </div>\n\n            <div class=\"d-flex align-items-center justify-content-between\">\n              <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n                <span class=\"cqa-vh-list-item-avatar\">{{ getAuthorInitialsFn(v) }}</span>\n                <span class=\"cqa-vh-list-item-author\">{{ getAuthorLabelFn(v) }}</span>\n              </div>\n              <div *ngIf=\"v.changes?.length\">\n                <cqa-badge [label]=\"v.changeType\" size=\"extra-small\"\n                  [backgroundColor]=\"getChangeTypeBadgeFn(v.changeType).backgroundColor\"\n                  [textColor]=\"getChangeTypeBadgeFn(v.changeType).textColor\"\n                  [borderColor]=\"getChangeTypeBadgeFn(v.changeType).borderColor\"></cqa-badge>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"isLoadingMore\" class=\"cqa-vh-list-loading-more\">\n        Loading more...\n      </div>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+VersionHistoryListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VersionHistoryListComponent, selector: "cqa-version-history-list", inputs: { versions: "versions", selectedVersionId: "selectedVersionId", currentVersionId: "currentVersionId", isLoadingList: "isLoadingList", isLoadingMore: "isLoadingMore", emptyStateConfig: "emptyStateConfig", getRelativeTimeFn: "getRelativeTimeFn", getAuthorInitialsFn: "getAuthorInitialsFn", getAuthorLabelFn: "getAuthorLabelFn", getChangeTypeBadgeFn: "getChangeTypeBadgeFn", getChangeSummaryBadgeFn: "getChangeSummaryBadgeFn" }, outputs: { versionSelected: "versionSelected", listScroll: "listScroll" }, ngImport: i0, template: "<div class=\"cqa-vh-list-container\" (scroll)=\"listScroll.emit($event)\">\n  <div class=\"d-flex align-items-center justify-content-between fz-14 fw-semi-bold cqa-vh-list-header\">\n    {{ versions.length }} Versions\n  </div>\n\n  <div *ngIf=\"isLoadingList\" class=\"cqa-vh-list-skeleton\">\n    <div *ngFor=\"let i of [1,2,3,4]\" class=\"cqa-vh-list-skeleton-row\">\n      <div class=\"animated-background rounded-circle cqa-vh-list-skeleton-dot\"></div>\n      <div style=\"flex: 1;\">\n        <div class=\"animated-background\" style=\"height: 14px; width: 50%; border-radius: 4px; margin-bottom: 10px;\"></div>\n        <div class=\"animated-background\" style=\"height: 12px; width: 80%; border-radius: 4px; margin-bottom: 10px;\"></div>\n        <div class=\"animated-background\" style=\"height: 12px; width: 45%; border-radius: 4px;\"></div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!isLoadingList\">\n    <div *ngIf=\"!versions.length\" class=\"cqa-vh-list-empty\">\n      <cqa-empty-state [title]=\"emptyStateConfig?.title\" [description]=\"emptyStateConfig?.description\"\n        [imageUrl]=\"emptyStateConfig?.imageUrl\"></cqa-empty-state>\n    </div>\n    <div class=\"cqa-vh-list-body\">\n      <div\n        *ngFor=\"let v of versions\"\n        (click)=\"versionSelected.emit(v.id)\"\n        class=\"cqa-vh-list-item\"\n        [class.cqa-vh-list-item--selected]=\"v.id === selectedVersionId\">\n        <div class=\"d-flex align-items-start\" style=\"gap: 12px;\">\n          <div style=\"padding-top: 3px; flex-shrink: 0;\">\n            <span class=\"cqa-vh-list-item-radio\"\n              [class.cqa-vh-list-item-radio--selected]=\"v.id === selectedVersionId\">\n              <span *ngIf=\"v.id === selectedVersionId\" class=\"cqa-vh-list-item-radio-dot\"></span>\n            </span>\n          </div>\n          <div style=\"flex: 1; min-width: 0;\">\n            <div class=\"d-flex align-items-center justify-content-between\" style=\"margin-bottom: 4px;\">\n              <div class=\"d-flex align-items-center\" style=\"gap: 6px;\">\n                <span class=\"cqa-vh-list-item-version\"\n                  [class.cqa-vh-list-item-version--selected]=\"v.id === selectedVersionId\">\n                  v{{ v.versionNumber }}\n                </span>\n                <cqa-badge *ngIf=\"v.id === currentVersionId\" label=\"Current\" size=\"extra-small\" variant=\"info\"\n                  backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n              </div>\n              <span class=\"cqa-vh-list-item-time\">{{ getRelativeTimeFn(v.createdDate) }}</span>\n            </div>\n\n            <div *ngIf=\"v.changeSummary\" class=\"cqa-vh-list-item-summary\">\n              <ng-container *ngIf=\"getChangeSummaryBadgeFn(v) as badge\">\n                <cqa-badge\n                  [label]=\"badge.label\"\n                  size=\"extra-small\"\n                  [backgroundColor]=\"badge.backgroundColor\"\n                  [textColor]=\"badge.textColor\"\n                  [borderColor]=\"badge.borderColor\">\n                </cqa-badge>\n              </ng-container>\n            </div>\n\n            <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 4px;\">\n              <span class=\"cqa-vh-list-item-avatar\">{{ getAuthorInitialsFn(v) }}</span>\n              <span class=\"cqa-vh-list-item-author\">{{ getAuthorLabelFn(v) }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"isLoadingMore\" class=\"cqa-vh-list-loading-more\">\n        Loading more...\n      </div>\n    </div>\n  </ng-container>\n</div>\n", components: [{ type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-version-history-list', template: "<div class=\"cqa-vh-list-container\" (scroll)=\"listScroll.emit($event)\">\n  <div class=\"d-flex align-items-center justify-content-between fz-14 fw-semi-bold cqa-vh-list-header\">\n    {{ versions.length }} Versions\n  </div>\n\n  <div *ngIf=\"isLoadingList\" class=\"cqa-vh-list-skeleton\">\n    <div *ngFor=\"let i of [1,2,3,4]\" class=\"cqa-vh-list-skeleton-row\">\n      <div class=\"animated-background rounded-circle cqa-vh-list-skeleton-dot\"></div>\n      <div style=\"flex: 1;\">\n        <div class=\"animated-background\" style=\"height: 14px; width: 50%; border-radius: 4px; margin-bottom: 10px;\"></div>\n        <div class=\"animated-background\" style=\"height: 12px; width: 80%; border-radius: 4px; margin-bottom: 10px;\"></div>\n        <div class=\"animated-background\" style=\"height: 12px; width: 45%; border-radius: 4px;\"></div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!isLoadingList\">\n    <div *ngIf=\"!versions.length\" class=\"cqa-vh-list-empty\">\n      <cqa-empty-state [title]=\"emptyStateConfig?.title\" [description]=\"emptyStateConfig?.description\"\n        [imageUrl]=\"emptyStateConfig?.imageUrl\"></cqa-empty-state>\n    </div>\n    <div class=\"cqa-vh-list-body\">\n      <div\n        *ngFor=\"let v of versions\"\n        (click)=\"versionSelected.emit(v.id)\"\n        class=\"cqa-vh-list-item\"\n        [class.cqa-vh-list-item--selected]=\"v.id === selectedVersionId\">\n        <div class=\"d-flex align-items-start\" style=\"gap: 12px;\">\n          <div style=\"padding-top: 3px; flex-shrink: 0;\">\n            <span class=\"cqa-vh-list-item-radio\"\n              [class.cqa-vh-list-item-radio--selected]=\"v.id === selectedVersionId\">\n              <span *ngIf=\"v.id === selectedVersionId\" class=\"cqa-vh-list-item-radio-dot\"></span>\n            </span>\n          </div>\n          <div style=\"flex: 1; min-width: 0;\">\n            <div class=\"d-flex align-items-center justify-content-between\" style=\"margin-bottom: 4px;\">\n              <div class=\"d-flex align-items-center\" style=\"gap: 6px;\">\n                <span class=\"cqa-vh-list-item-version\"\n                  [class.cqa-vh-list-item-version--selected]=\"v.id === selectedVersionId\">\n                  v{{ v.versionNumber }}\n                </span>\n                <cqa-badge *ngIf=\"v.id === currentVersionId\" label=\"Current\" size=\"extra-small\" variant=\"info\"\n                  backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n              </div>\n              <span class=\"cqa-vh-list-item-time\">{{ getRelativeTimeFn(v.createdDate) }}</span>\n            </div>\n\n            <div *ngIf=\"v.changeSummary\" class=\"cqa-vh-list-item-summary\">\n              {{ v.changeSummary }}\n            </div>\n\n            <div class=\"d-flex align-items-center justify-content-between\">\n              <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n                <span class=\"cqa-vh-list-item-avatar\">{{ getAuthorInitialsFn(v) }}</span>\n                <span class=\"cqa-vh-list-item-author\">{{ getAuthorLabelFn(v) }}</span>\n              </div>\n              <div *ngIf=\"v.changes?.length\">\n                <cqa-badge [label]=\"v.changeType\" size=\"extra-small\"\n                  [backgroundColor]=\"getChangeTypeBadgeFn(v.changeType).backgroundColor\"\n                  [textColor]=\"getChangeTypeBadgeFn(v.changeType).textColor\"\n                  [borderColor]=\"getChangeTypeBadgeFn(v.changeType).borderColor\"></cqa-badge>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"isLoadingMore\" class=\"cqa-vh-list-loading-more\">\n        Loading more...\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-version-history-list', template: "<div class=\"cqa-vh-list-container\" (scroll)=\"listScroll.emit($event)\">\n  <div class=\"d-flex align-items-center justify-content-between fz-14 fw-semi-bold cqa-vh-list-header\">\n    {{ versions.length }} Versions\n  </div>\n\n  <div *ngIf=\"isLoadingList\" class=\"cqa-vh-list-skeleton\">\n    <div *ngFor=\"let i of [1,2,3,4]\" class=\"cqa-vh-list-skeleton-row\">\n      <div class=\"animated-background rounded-circle cqa-vh-list-skeleton-dot\"></div>\n      <div style=\"flex: 1;\">\n        <div class=\"animated-background\" style=\"height: 14px; width: 50%; border-radius: 4px; margin-bottom: 10px;\"></div>\n        <div class=\"animated-background\" style=\"height: 12px; width: 80%; border-radius: 4px; margin-bottom: 10px;\"></div>\n        <div class=\"animated-background\" style=\"height: 12px; width: 45%; border-radius: 4px;\"></div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!isLoadingList\">\n    <div *ngIf=\"!versions.length\" class=\"cqa-vh-list-empty\">\n      <cqa-empty-state [title]=\"emptyStateConfig?.title\" [description]=\"emptyStateConfig?.description\"\n        [imageUrl]=\"emptyStateConfig?.imageUrl\"></cqa-empty-state>\n    </div>\n    <div class=\"cqa-vh-list-body\">\n      <div\n        *ngFor=\"let v of versions\"\n        (click)=\"versionSelected.emit(v.id)\"\n        class=\"cqa-vh-list-item\"\n        [class.cqa-vh-list-item--selected]=\"v.id === selectedVersionId\">\n        <div class=\"d-flex align-items-start\" style=\"gap: 12px;\">\n          <div style=\"padding-top: 3px; flex-shrink: 0;\">\n            <span class=\"cqa-vh-list-item-radio\"\n              [class.cqa-vh-list-item-radio--selected]=\"v.id === selectedVersionId\">\n              <span *ngIf=\"v.id === selectedVersionId\" class=\"cqa-vh-list-item-radio-dot\"></span>\n            </span>\n          </div>\n          <div style=\"flex: 1; min-width: 0;\">\n            <div class=\"d-flex align-items-center justify-content-between\" style=\"margin-bottom: 4px;\">\n              <div class=\"d-flex align-items-center\" style=\"gap: 6px;\">\n                <span class=\"cqa-vh-list-item-version\"\n                  [class.cqa-vh-list-item-version--selected]=\"v.id === selectedVersionId\">\n                  v{{ v.versionNumber }}\n                </span>\n                <cqa-badge *ngIf=\"v.id === currentVersionId\" label=\"Current\" size=\"extra-small\" variant=\"info\"\n                  backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n              </div>\n              <span class=\"cqa-vh-list-item-time\">{{ getRelativeTimeFn(v.createdDate) }}</span>\n            </div>\n\n            <div *ngIf=\"v.changeSummary\" class=\"cqa-vh-list-item-summary\">\n              <ng-container *ngIf=\"getChangeSummaryBadgeFn(v) as badge\">\n                <cqa-badge\n                  [label]=\"badge.label\"\n                  size=\"extra-small\"\n                  [backgroundColor]=\"badge.backgroundColor\"\n                  [textColor]=\"badge.textColor\"\n                  [borderColor]=\"badge.borderColor\">\n                </cqa-badge>\n              </ng-container>\n            </div>\n\n            <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 4px;\">\n              <span class=\"cqa-vh-list-item-avatar\">{{ getAuthorInitialsFn(v) }}</span>\n              <span class=\"cqa-vh-list-item-author\">{{ getAuthorLabelFn(v) }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"isLoadingMore\" class=\"cqa-vh-list-loading-more\">\n        Loading more...\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [] }]
         }], propDecorators: { versions: [{
                 type: Input
             }], selectedVersionId: [{
@@ -42885,6 +42971,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], getChangeTypeBadgeFn: [{
                 type: Input
+            }], getChangeSummaryBadgeFn: [{
+                type: Input
             }], versionSelected: [{
                 type: Output
             }], listScroll: [{
@@ -43019,6 +43107,14 @@ class VersionHistoryRestoreConfirmComponent {
         this.authorName = '';
         this.getChangeHeadlineFn = null;
     }
+    get settingsChanges() {
+        var _a;
+        return (((_a = this.restoringToVersion) === null || _a === void 0 ? void 0 : _a.changes) || []).filter((c) => c.category === 'settings');
+    }
+    get stepChanges() {
+        var _a;
+        return (((_a = this.restoringToVersion) === null || _a === void 0 ? void 0 : _a.changes) || []).filter((c) => c.category !== 'settings');
+    }
     getRestoreToLabel() {
         if (!this.restoringToVersion) {
             return '';
@@ -43035,10 +43131,10 @@ class VersionHistoryRestoreConfirmComponent {
     }
 }
 VersionHistoryRestoreConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-VersionHistoryRestoreConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VersionHistoryRestoreConfirmComponent, selector: "cqa-version-history-restore-confirm", inputs: { restoringToVersion: "restoringToVersion", currentVersionNumber: "currentVersionNumber", newVersionNumber: "newVersionNumber", authorName: "authorName", getChangeHeadlineFn: "getChangeHeadlineFn" }, ngImport: i0, template: "<div class=\"cqa-vh-restore-confirm\">\n\n  <!-- Info grid -->\n  <div class=\"cqa-vh-restore-info-grid\">\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Restoring to</span>\n      <span class=\"cqa-vh-restore-info-value\">{{ getRestoreToLabel() }}</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">New version created</span>\n      <span class=\"cqa-vh-restore-info-value\">v{{ newVersionNumber }} (auto-incremented)</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Current version</span>\n      <span class=\"cqa-vh-restore-info-value\">v{{ currentVersionNumber }} \u2014 preserved in history</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Author</span>\n      <span class=\"cqa-vh-restore-info-value\">{{ authorName }}</span>\n    </div>\n  </div>\n\n  <!-- Changes that will be reverted -->\n  <div *ngIf=\"restoringToVersion?.changes?.length\">\n    <div class=\"cqa-vh-restore-changes-title\">Changes that will be reverted</div>\n    <div class=\"cqa-vh-restore-changes-list\">\n      <div *ngFor=\"let change of restoringToVersion.changes; let i = index\"\n        class=\"cqa-vh-restore-change-item\">\n        <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n        <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Preservation note -->\n  <div class=\"cqa-vh-restore-note\">\n    <span class=\"material-symbols-outlined cqa-vh-restore-note-icon\">info</span>\n    <span class=\"cqa-vh-restore-note-text\">\n      All version history will be fully preserved. This restore action will itself appear as a new version entry in the timeline.\n    </span>\n  </div>\n\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+VersionHistoryRestoreConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VersionHistoryRestoreConfirmComponent, selector: "cqa-version-history-restore-confirm", inputs: { restoringToVersion: "restoringToVersion", currentVersionNumber: "currentVersionNumber", newVersionNumber: "newVersionNumber", authorName: "authorName", getChangeHeadlineFn: "getChangeHeadlineFn" }, ngImport: i0, template: "<div class=\"cqa-vh-restore-confirm\">\n\n  <!-- Info grid -->\n  <div class=\"cqa-vh-restore-info-grid\">\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Restoring to</span>\n      <span class=\"cqa-vh-restore-info-value\">{{ getRestoreToLabel() }}</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">New version created</span>\n      <span class=\"cqa-vh-restore-info-value\">v{{ newVersionNumber }} (auto-incremented)</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Current version</span>\n      <span class=\"cqa-vh-restore-info-value\">v{{ currentVersionNumber }} \u2014 preserved in history</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Author</span>\n      <span class=\"cqa-vh-restore-info-value\">{{ authorName }}</span>\n    </div>\n  </div>\n\n  <!-- Changes that will be reverted -->\n  <div *ngIf=\"restoringToVersion?.changes?.length\">\n    <div class=\"cqa-vh-restore-changes-title\">Changes that will be reverted</div>\n\n    <!-- Settings changes -->\n    <ng-container *ngIf=\"settingsChanges.length\">\n      <div class=\"cqa-vh-restore-changes-subheader\">\n        <span class=\"material-symbols-outlined cqa-vh-restore-subheader-icon\">settings</span>\n        Test Case Settings\n      </div>\n      <div class=\"cqa-vh-restore-changes-list\">\n        <div *ngFor=\"let change of settingsChanges; let i = index\" class=\"cqa-vh-restore-change-item\">\n          <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n          <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Step changes -->\n    <ng-container *ngIf=\"stepChanges.length\">\n      <div class=\"cqa-vh-restore-changes-subheader\" [style.marginTop]=\"settingsChanges.length ? '12px' : '0'\">\n        <span class=\"material-symbols-outlined cqa-vh-restore-subheader-icon\">list_alt</span>\n        Step Changes\n      </div>\n      <div class=\"cqa-vh-restore-changes-list\">\n        <div *ngFor=\"let change of stepChanges; let i = index\" class=\"cqa-vh-restore-change-item\">\n          <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n          <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Preservation note -->\n  <div class=\"cqa-vh-restore-note\">\n    <span class=\"material-symbols-outlined cqa-vh-restore-note-icon\">info</span>\n    <span class=\"cqa-vh-restore-note-text\">\n      All version history will be fully preserved. This restore action will itself appear as a new version entry in the timeline.\n    </span>\n  </div>\n\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-version-history-restore-confirm', template: "<div class=\"cqa-vh-restore-confirm\">\n\n  <!-- Info grid -->\n  <div class=\"cqa-vh-restore-info-grid\">\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Restoring to</span>\n      <span class=\"cqa-vh-restore-info-value\">{{ getRestoreToLabel() }}</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">New version created</span>\n      <span class=\"cqa-vh-restore-info-value\">v{{ newVersionNumber }} (auto-incremented)</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Current version</span>\n      <span class=\"cqa-vh-restore-info-value\">v{{ currentVersionNumber }} \u2014 preserved in history</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Author</span>\n      <span class=\"cqa-vh-restore-info-value\">{{ authorName }}</span>\n    </div>\n  </div>\n\n  <!-- Changes that will be reverted -->\n  <div *ngIf=\"restoringToVersion?.changes?.length\">\n    <div class=\"cqa-vh-restore-changes-title\">Changes that will be reverted</div>\n    <div class=\"cqa-vh-restore-changes-list\">\n      <div *ngFor=\"let change of restoringToVersion.changes; let i = index\"\n        class=\"cqa-vh-restore-change-item\">\n        <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n        <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Preservation note -->\n  <div class=\"cqa-vh-restore-note\">\n    <span class=\"material-symbols-outlined cqa-vh-restore-note-icon\">info</span>\n    <span class=\"cqa-vh-restore-note-text\">\n      All version history will be fully preserved. This restore action will itself appear as a new version entry in the timeline.\n    </span>\n  </div>\n\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-version-history-restore-confirm', template: "<div class=\"cqa-vh-restore-confirm\">\n\n  <!-- Info grid -->\n  <div class=\"cqa-vh-restore-info-grid\">\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Restoring to</span>\n      <span class=\"cqa-vh-restore-info-value\">{{ getRestoreToLabel() }}</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">New version created</span>\n      <span class=\"cqa-vh-restore-info-value\">v{{ newVersionNumber }} (auto-incremented)</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Current version</span>\n      <span class=\"cqa-vh-restore-info-value\">v{{ currentVersionNumber }} \u2014 preserved in history</span>\n    </div>\n    <div class=\"cqa-vh-restore-info-row\">\n      <span class=\"cqa-vh-restore-info-label\">Author</span>\n      <span class=\"cqa-vh-restore-info-value\">{{ authorName }}</span>\n    </div>\n  </div>\n\n  <!-- Changes that will be reverted -->\n  <div *ngIf=\"restoringToVersion?.changes?.length\">\n    <div class=\"cqa-vh-restore-changes-title\">Changes that will be reverted</div>\n\n    <!-- Settings changes -->\n    <ng-container *ngIf=\"settingsChanges.length\">\n      <div class=\"cqa-vh-restore-changes-subheader\">\n        <span class=\"material-symbols-outlined cqa-vh-restore-subheader-icon\">settings</span>\n        Test Case Settings\n      </div>\n      <div class=\"cqa-vh-restore-changes-list\">\n        <div *ngFor=\"let change of settingsChanges; let i = index\" class=\"cqa-vh-restore-change-item\">\n          <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n          <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Step changes -->\n    <ng-container *ngIf=\"stepChanges.length\">\n      <div class=\"cqa-vh-restore-changes-subheader\" [style.marginTop]=\"settingsChanges.length ? '12px' : '0'\">\n        <span class=\"material-symbols-outlined cqa-vh-restore-subheader-icon\">list_alt</span>\n        Step Changes\n      </div>\n      <div class=\"cqa-vh-restore-changes-list\">\n        <div *ngFor=\"let change of stepChanges; let i = index\" class=\"cqa-vh-restore-change-item\">\n          <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n          <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Preservation note -->\n  <div class=\"cqa-vh-restore-note\">\n    <span class=\"material-symbols-outlined cqa-vh-restore-note-icon\">info</span>\n    <span class=\"cqa-vh-restore-note-text\">\n      All version history will be fully preserved. This restore action will itself appear as a new version entry in the timeline.\n    </span>\n  </div>\n\n</div>\n", styles: [] }]
         }], propDecorators: { restoringToVersion: [{
                 type: Input
             }], currentVersionNumber: [{
@@ -43191,10 +43287,10 @@ class NewVersionHistoryDetailComponent {
     }
 }
 NewVersionHistoryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NewVersionHistoryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewVersionHistoryDetailComponent, selector: "cqa-new-version-history-detail", inputs: { selectedVersion: "selectedVersion", selectedIsCurrent: "selectedIsCurrent", isRestoring: "isRestoring", getAuthorLabelFn: "getAuthorLabelFn", getFieldLabelFn: "getFieldLabelFn", getStepPrefixFn: "getStepPrefixFn", getCategoryLabelFn: "getCategoryLabelFn", formatDisplayValueFn: "formatDisplayValueFn", getStepActionHtmlFn: "getStepActionHtmlFn", hiddenFields: "hiddenFields", parseFieldAsTableFn: "parseFieldAsTableFn", getValueBadgeConfigFn: "getValueBadgeConfigFn", getInlineDiffFn: "getInlineDiffFn" }, outputs: { compare: "compare", restore: "restore" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n  <!-- ========== Header (same as old component) ========== -->\n  <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n    <div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n        <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n        <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n          textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n      </div>\n      <div class=\"cqa-nvh-detail-meta\">\n        {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n      </div>\n      <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n        {{ selectedVersion.changeSummary }}\n      </div>\n    </div>\n    <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n      <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n      <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n        [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- ========== Summary bar ========== -->\n  <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n    <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n    <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n    <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n    <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n  </div> -->\n\n  <!-- ========== Test Case Changes ========== -->\n  <ng-container *ngIf=\"hasTestCaseChanges\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n      <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n        backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n        <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n        <ng-container\n          *ngTemplateOutlet=\"beforeAfterBlock; context: {\n            oldValue: selectedVersion.testCase.old?.[field],\n            newValue: selectedVersion.testCase.new?.[field],\n            field: field,\n            oldStepData: selectedVersion.testCase.old,\n            newStepData: selectedVersion.testCase.new\n          }\">\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Added ========== -->\n  <ng-container *ngIf=\"stepsAdded.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Added</span>\n      <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n        textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n            borderColor=\"#A7F3D0\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Deleted ========== -->\n  <ng-container *ngIf=\"stepsDeleted.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n      <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n        textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n            borderColor=\"#FECDCA\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Updated ========== -->\n  <ng-container *ngIf=\"stepsUpdated.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n      <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n        textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n        <!-- Step header with category badge -->\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n            textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n\n        <!-- Changed fields with before/after -->\n        <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n          <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n          <ng-container\n            *ngTemplateOutlet=\"beforeAfterBlock; context: {\n              oldValue: step.old?.[field],\n              newValue: step.new?.[field],\n              field: field,\n              oldStepData: step.old,\n              newStepData: step.new\n            }\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n      <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n        </div>\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Plain text fallback (no diff) -->\n    <ng-template #plainBeforeAfter>\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n        </div>\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
+NewVersionHistoryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewVersionHistoryDetailComponent, selector: "cqa-new-version-history-detail", inputs: { selectedVersion: "selectedVersion", selectedIsCurrent: "selectedIsCurrent", isRestoring: "isRestoring", getAuthorLabelFn: "getAuthorLabelFn", getFieldLabelFn: "getFieldLabelFn", getStepPrefixFn: "getStepPrefixFn", getCategoryLabelFn: "getCategoryLabelFn", formatDisplayValueFn: "formatDisplayValueFn", getStepActionHtmlFn: "getStepActionHtmlFn", hiddenFields: "hiddenFields", parseFieldAsTableFn: "parseFieldAsTableFn", getValueBadgeConfigFn: "getValueBadgeConfigFn", getInlineDiffFn: "getInlineDiffFn" }, outputs: { compare: "compare", restore: "restore" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n  <!-- ========== Header (same as old component) ========== -->\n  <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n    <div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n        <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n        <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n          textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n      </div>\n      <div class=\"cqa-nvh-detail-meta\">\n        {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n      </div>\n      <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n        {{ selectedVersion.changeSummary }}\n      </div>\n    </div>\n    <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n      <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n      <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n        [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- ========== Summary bar ========== -->\n  <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n    <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n    <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n    <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n    <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n  </div> -->\n\n  <!-- ========== Test Case Changes ========== -->\n  <ng-container *ngIf=\"hasTestCaseChanges\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n      <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n        backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n        <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n        <ng-container\n          *ngTemplateOutlet=\"beforeAfterBlock; context: {\n            oldValue: selectedVersion.testCase.old?.[field],\n            newValue: selectedVersion.testCase.new?.[field],\n            field: field,\n            oldStepData: selectedVersion.testCase.old,\n            newStepData: selectedVersion.testCase.new\n          }\">\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Added ========== -->\n  <ng-container *ngIf=\"stepsAdded.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Added</span>\n      <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n        textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n            borderColor=\"#A7F3D0\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Deleted ========== -->\n  <ng-container *ngIf=\"stepsDeleted.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n      <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n        textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n            borderColor=\"#FECDCA\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Updated ========== -->\n  <ng-container *ngIf=\"stepsUpdated.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n      <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n        textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n        <!-- Step header with category badge -->\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n            textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n\n        <!-- Changed fields with before/after -->\n        <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n          <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n          <ng-container\n            *ngTemplateOutlet=\"beforeAfterBlock; context: {\n              oldValue: step.old?.[field],\n              newValue: step.new?.[field],\n              field: field,\n              oldStepData: step.old,\n              newStepData: step.new\n            }\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n      <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n        </div>\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Plain text fallback (no diff) -->\n    <ng-template #plainBeforeAfter>\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n        </div>\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-key-header\"></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\"\n      [class.cqa-nvh-obj-row--changed]=\"formatPrimitiveValue(oldObj?.[key]) !== formatPrimitiveValue(newObj?.[key])\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-new-version-history-detail', template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n  <!-- ========== Header (same as old component) ========== -->\n  <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n    <div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n        <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n        <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n          textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n      </div>\n      <div class=\"cqa-nvh-detail-meta\">\n        {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n      </div>\n      <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n        {{ selectedVersion.changeSummary }}\n      </div>\n    </div>\n    <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n      <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n      <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n        [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- ========== Summary bar ========== -->\n  <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n    <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n    <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n    <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n    <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n  </div> -->\n\n  <!-- ========== Test Case Changes ========== -->\n  <ng-container *ngIf=\"hasTestCaseChanges\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n      <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n        backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n        <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n        <ng-container\n          *ngTemplateOutlet=\"beforeAfterBlock; context: {\n            oldValue: selectedVersion.testCase.old?.[field],\n            newValue: selectedVersion.testCase.new?.[field],\n            field: field,\n            oldStepData: selectedVersion.testCase.old,\n            newStepData: selectedVersion.testCase.new\n          }\">\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Added ========== -->\n  <ng-container *ngIf=\"stepsAdded.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Added</span>\n      <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n        textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n            borderColor=\"#A7F3D0\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Deleted ========== -->\n  <ng-container *ngIf=\"stepsDeleted.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n      <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n        textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n            borderColor=\"#FECDCA\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Updated ========== -->\n  <ng-container *ngIf=\"stepsUpdated.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n      <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n        textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n        <!-- Step header with category badge -->\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n            textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n\n        <!-- Changed fields with before/after -->\n        <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n          <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n          <ng-container\n            *ngTemplateOutlet=\"beforeAfterBlock; context: {\n              oldValue: step.old?.[field],\n              newValue: step.new?.[field],\n              field: field,\n              oldStepData: step.old,\n              newStepData: step.new\n            }\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n      <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n        </div>\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Plain text fallback (no diff) -->\n    <ng-template #plainBeforeAfter>\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n        </div>\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [] }]
+            args: [{ selector: 'cqa-new-version-history-detail', template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n  <!-- ========== Header (same as old component) ========== -->\n  <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n    <div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n        <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n        <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n          textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n      </div>\n      <div class=\"cqa-nvh-detail-meta\">\n        {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n      </div>\n      <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n        {{ selectedVersion.changeSummary }}\n      </div>\n    </div>\n    <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n      <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n      <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n        [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- ========== Summary bar ========== -->\n  <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n    <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n    <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n    <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n    <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n  </div> -->\n\n  <!-- ========== Test Case Changes ========== -->\n  <ng-container *ngIf=\"hasTestCaseChanges\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n      <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n        backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n        <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n        <ng-container\n          *ngTemplateOutlet=\"beforeAfterBlock; context: {\n            oldValue: selectedVersion.testCase.old?.[field],\n            newValue: selectedVersion.testCase.new?.[field],\n            field: field,\n            oldStepData: selectedVersion.testCase.old,\n            newStepData: selectedVersion.testCase.new\n          }\">\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Added ========== -->\n  <ng-container *ngIf=\"stepsAdded.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Added</span>\n      <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n        textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n            borderColor=\"#A7F3D0\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Deleted ========== -->\n  <ng-container *ngIf=\"stepsDeleted.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n      <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n        textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n            borderColor=\"#FECDCA\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Updated ========== -->\n  <ng-container *ngIf=\"stepsUpdated.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n      <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n        textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n        <!-- Step header with category badge -->\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n            textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n\n        <!-- Changed fields with before/after -->\n        <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n          <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n          <ng-container\n            *ngTemplateOutlet=\"beforeAfterBlock; context: {\n              oldValue: step.old?.[field],\n              newValue: step.new?.[field],\n              field: field,\n              oldStepData: step.old,\n              newStepData: step.new\n            }\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n      <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n        </div>\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Plain text fallback (no diff) -->\n    <ng-template #plainBeforeAfter>\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n        </div>\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-key-header\"></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\"\n      [class.cqa-nvh-obj-row--changed]=\"formatPrimitiveValue(oldObj?.[key]) !== formatPrimitiveValue(newObj?.[key])\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [] }]
         }], propDecorators: { selectedVersion: [{
                 type: Input
             }], selectedIsCurrent: [{