@cqa-lib/cqa-ui 1.1.166 → 1.1.167

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 (17) hide show
  1. package/esm2020/lib/compare-runs/compare-runs.component.mjs +6 -6
  2. package/esm2020/lib/execution-screen/ai-action-step/ai-action-step.component.mjs +236 -0
  3. package/esm2020/lib/execution-screen/ai-agent-step/ai-agent-step.component.mjs +6 -3
  4. package/esm2020/lib/execution-screen/execution-step.models.mjs +1 -1
  5. package/esm2020/lib/ui-kit.module.mjs +8 -1
  6. package/esm2020/public-api.mjs +2 -1
  7. package/fesm2015/cqa-lib-cqa-ui.mjs +254 -11
  8. package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
  9. package/fesm2020/cqa-lib-cqa-ui.mjs +246 -8
  10. package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
  11. package/lib/compare-runs/compare-runs.component.d.ts +1 -0
  12. package/lib/execution-screen/ai-action-step/ai-action-step.component.d.ts +60 -0
  13. package/lib/execution-screen/ai-agent-step/ai-agent-step.component.d.ts +1 -0
  14. package/lib/execution-screen/execution-step.models.d.ts +7 -1
  15. package/lib/ui-kit.module.d.ts +59 -58
  16. package/package.json +1 -1
  17. package/public-api.d.ts +1 -0
package/fesm2020/cqa-lib-cqa-ui.mjs CHANGED
@@ -9630,6 +9630,9 @@ class AIAgentStepComponent extends BaseStepComponent {
9630
9630
  testStepId: this.step?.testStepId || undefined
9631
9631
  });
9632
9632
  }
9633
+ trackByActionId(index, action) {
9634
+ return action?.id || index.toString();
9635
+ }
9633
9636
  get showViewMoreButton() {
9634
9637
  return this.isExpanded && Boolean(this.failureDetails) &&
9635
9638
  ((Boolean(this.failureDetails?.expected || this.failureDetails?.actual)) ||
@@ -9655,10 +9658,10 @@ class AIAgentStepComponent extends BaseStepComponent {
9655
9658
  }
9656
9659
  }
9657
9660
  AIAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIAgentStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
9658
- AIAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIAgentStepComponent, selector: "cqa-ai-agent-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", prompt: "prompt", optimizedRun: "optimizedRun", actionCount: "actionCount", actions: "actions", selectedTabInput: "selectedTabInput", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", isLive: "isLive", step: "step" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n <!-- Skipped -->\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <!-- Lightbulb Icon and Step Number -->\n <div>\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </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-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n AI Agent\n </span>\n <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 <!-- Action Count -->\n <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n {{ config?.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config?.duration || 0) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Prompt Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n <span *ngIf=\"config?.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n Optimized Run\n </span>\n </div>\n <p class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" style=\"word-break: break-word;\" [innerHTML]=\"config?.prompt\"></p>\n </div>\n <button \n class=\"cqa-p-1.5\" \n (click)=\"copyPrompt()\"\n [matTooltip]=\"'Copy prompt'\"\n matTooltipPosition=\"above\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n <button\n (click)=\"selectTab('action-trace')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Action Trace\n <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n {{ config.actions.length }}\n </span>\n </button>\n <button\n (click)=\"selectTab('planner-timeline')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Planner Timeline\n </button>\n <button\n (click)=\"selectTab('ai-reasoning')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n AI Reasoning\n </button>\n </div> -->\n\n <!-- Tab Content -->\n <!-- Action Trace Tab -->\n <div *ngIf=\"selectedTab === 'action-trace'\">\n <!-- <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n <b>{{ config?.actions?.length || 0 }} actions</b> \n from previous runs\n </div>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n <ng-container *ngFor=\"let action of config?.actions; let i = index\">\n <div\n *ngIf=\"action?.description\"\n class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n [ngStyle]=\"{\n 'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n 'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n }\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n {{ getActionIcon(action.type) }}\n </mat-icon> -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n <span\n class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-bold\" style=\"word-break: break-word;\"\n [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n >\n {{ action.description }}\n </span>\n <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n {{ formatDuration(action.duration) }}\n </span>\n <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Planner Timeline Tab -->\n <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n Planner timeline content would go here\n </div>\n\n <!-- AI Reasoning Tab -->\n <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n AI reasoning content would go here\n </div>\n\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</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 || 0) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
9661
+ AIAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIAgentStepComponent, selector: "cqa-ai-agent-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", prompt: "prompt", optimizedRun: "optimizedRun", actionCount: "actionCount", actions: "actions", selectedTabInput: "selectedTabInput", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", isLive: "isLive", step: "step" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n <!-- Skipped -->\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <!-- Lightbulb Icon and Step Number -->\n <div>\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </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-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n AI Agent\n </span>\n <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 <!-- Action Count -->\n <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n {{ config?.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config?.duration || 0) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Prompt Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n <span *ngIf=\"config?.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n Optimized Run\n </span>\n </div>\n <p class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" style=\"word-break: break-word;\" [innerHTML]=\"config?.prompt\"></p>\n </div>\n <button \n class=\"cqa-p-1.5\" \n (click)=\"copyPrompt()\"\n [matTooltip]=\"'Copy prompt'\"\n matTooltipPosition=\"above\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n <button\n (click)=\"selectTab('action-trace')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Action Trace\n <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n {{ config.actions.length }}\n </span>\n </button>\n <button\n (click)=\"selectTab('planner-timeline')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Planner Timeline\n </button>\n <button\n (click)=\"selectTab('ai-reasoning')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n AI Reasoning\n </button>\n </div> -->\n\n <!-- Tab Content -->\n <!-- Action Trace Tab -->\n <div *ngIf=\"selectedTab === 'action-trace'\">\n <!-- <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n <b>{{ config?.actions?.length || 0 }} actions</b> \n from previous runs\n </div>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n <ng-container *ngFor=\"let action of config?.actions; let i = index; trackBy: trackByActionId\">\n <div\n *ngIf=\"action?.description\"\n class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n [ngStyle]=\"{\n 'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n 'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n }\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n {{ getActionIcon(action.type) }}\n </mat-icon> -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n <span\n class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-bold\" style=\"word-break: break-word;\"\n [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n >\n {{ action.description }}\n </span>\n <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n {{ formatDuration(action.duration) }}\n </span>\n <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Planner Timeline Tab -->\n <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n Planner timeline content would go here\n </div>\n\n <!-- AI Reasoning Tab -->\n <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n AI reasoning content would go here\n </div>\n\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</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 || 0) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
9659
9662
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIAgentStepComponent, decorators: [{
9660
9663
  type: Component,
9661
- args: [{ selector: 'cqa-ai-agent-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n <!-- Skipped -->\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <!-- Lightbulb Icon and Step Number -->\n <div>\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </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-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n AI Agent\n </span>\n <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 <!-- Action Count -->\n <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n {{ config?.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config?.duration || 0) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Prompt Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n <span *ngIf=\"config?.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n Optimized Run\n </span>\n </div>\n <p class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" style=\"word-break: break-word;\" [innerHTML]=\"config?.prompt\"></p>\n </div>\n <button \n class=\"cqa-p-1.5\" \n (click)=\"copyPrompt()\"\n [matTooltip]=\"'Copy prompt'\"\n matTooltipPosition=\"above\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n <button\n (click)=\"selectTab('action-trace')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Action Trace\n <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n {{ config.actions.length }}\n </span>\n </button>\n <button\n (click)=\"selectTab('planner-timeline')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Planner Timeline\n </button>\n <button\n (click)=\"selectTab('ai-reasoning')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n AI Reasoning\n </button>\n </div> -->\n\n <!-- Tab Content -->\n <!-- Action Trace Tab -->\n <div *ngIf=\"selectedTab === 'action-trace'\">\n <!-- <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n <b>{{ config?.actions?.length || 0 }} actions</b> \n from previous runs\n </div>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n <ng-container *ngFor=\"let action of config?.actions; let i = index\">\n <div\n *ngIf=\"action?.description\"\n class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n [ngStyle]=\"{\n 'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n 'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n }\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n {{ getActionIcon(action.type) }}\n </mat-icon> -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n <span\n class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-bold\" style=\"word-break: break-word;\"\n [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n >\n {{ action.description }}\n </span>\n <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n {{ formatDuration(action.duration) }}\n </span>\n <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Planner Timeline Tab -->\n <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n Planner timeline content would go here\n </div>\n\n <!-- AI Reasoning Tab -->\n <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n AI reasoning content would go here\n </div>\n\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</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 || 0) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
9664
+ args: [{ selector: 'cqa-ai-agent-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n <!-- Skipped -->\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <!-- Lightbulb Icon and Step Number -->\n <div>\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </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-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n AI Agent\n </span>\n <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 <!-- Action Count -->\n <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n {{ config?.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config?.duration || 0) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Prompt Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n <span *ngIf=\"config?.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n Optimized Run\n </span>\n </div>\n <p class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" style=\"word-break: break-word;\" [innerHTML]=\"config?.prompt\"></p>\n </div>\n <button \n class=\"cqa-p-1.5\" \n (click)=\"copyPrompt()\"\n [matTooltip]=\"'Copy prompt'\"\n matTooltipPosition=\"above\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n <button\n (click)=\"selectTab('action-trace')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Action Trace\n <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n {{ config.actions.length }}\n </span>\n </button>\n <button\n (click)=\"selectTab('planner-timeline')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Planner Timeline\n </button>\n <button\n (click)=\"selectTab('ai-reasoning')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n AI Reasoning\n </button>\n </div> -->\n\n <!-- Tab Content -->\n <!-- Action Trace Tab -->\n <div *ngIf=\"selectedTab === 'action-trace'\">\n <!-- <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n <b>{{ config?.actions?.length || 0 }} actions</b> \n from previous runs\n </div>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n <ng-container *ngFor=\"let action of config?.actions; let i = index; trackBy: trackByActionId\">\n <div\n *ngIf=\"action?.description\"\n class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n [ngStyle]=\"{\n 'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n 'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n }\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <!-- <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n {{ getActionIcon(action.type) }}\n </mat-icon> -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n <span\n class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-bold\" style=\"word-break: break-word;\"\n [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n >\n {{ action.description }}\n </span>\n <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n {{ formatDuration(action.duration) }}\n </span>\n <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Planner Timeline Tab -->\n <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n Planner timeline content would go here\n </div>\n\n <!-- AI Reasoning Tab -->\n <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n AI reasoning content would go here\n </div>\n\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</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 || 0) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
9662
9665
  }], propDecorators: { id: [{
9663
9666
  type: Input
9664
9667
  }], testStepResultId: [{
@@ -9719,6 +9722,235 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
9719
9722
  type: Output
9720
9723
  }] } });
9721
9724
 
9725
+ class AIActionStepComponent extends BaseStepComponent {
9726
+ constructor() {
9727
+ super(...arguments);
9728
+ this.isUploadingBaseline = {};
9729
+ this.isMakingCurrentBaseline = {};
9730
+ this.isLive = false;
9731
+ this.showFailedStepDetails = false;
9732
+ this.makeCurrentBaseline = new EventEmitter();
9733
+ this.uploadBaseline = new EventEmitter();
9734
+ this.analyze = new EventEmitter();
9735
+ this.viewFullLogs = new EventEmitter();
9736
+ this.selfHealAction = new EventEmitter();
9737
+ this.userManuallyClosed = false;
9738
+ }
9739
+ ngOnInit() {
9740
+ // Get action from step if available (set by step-renderer)
9741
+ const actionValue = this.action || '';
9742
+ // Use title if available, otherwise fall back to action
9743
+ const titleValue = this.title || actionValue || '';
9744
+ // Build config from individual inputs
9745
+ this.config = {
9746
+ id: this.id,
9747
+ testStepId: this.step?.testStepId || undefined,
9748
+ testStepResultId: this.testStepResultId,
9749
+ stepNumber: this.stepNumber,
9750
+ title: titleValue,
9751
+ status: this.status,
9752
+ duration: this.duration,
9753
+ type: 'ai-action',
9754
+ actionCount: this.actionCount,
9755
+ actions: this.actions || [],
9756
+ stepDeleted: this.stepDeleted,
9757
+ timingBreakdown: this.timingBreakdown,
9758
+ expanded: this.expanded,
9759
+ selfHealAnalysis: this.selfHealAnalysis,
9760
+ };
9761
+ super.ngOnInit();
9762
+ }
9763
+ ngOnChanges(changes) {
9764
+ // Update title in config when it changes
9765
+ if (this.config) {
9766
+ if (changes['title']) {
9767
+ this.config.title = this.title || '';
9768
+ }
9769
+ }
9770
+ // Update subSteps array when new ones are added
9771
+ if (changes['actions']) {
9772
+ const previousSubStepsCount = changes['actions'].previousValue?.length || 0;
9773
+ const currentSubStepsCount = (this.actions || []).length;
9774
+ // Sub-steps are appended externally, so we just update the config
9775
+ if (this.config) {
9776
+ this.config.actions = this.actions || [];
9777
+ }
9778
+ // Auto-expand if step is running and new subSteps are added (logs coming in)
9779
+ if (!changes['actions'].firstChange &&
9780
+ this.status === 'running' &&
9781
+ currentSubStepsCount > previousSubStepsCount &&
9782
+ this.hasSubSteps &&
9783
+ !this.isExpanded &&
9784
+ !this.userManuallyClosed) {
9785
+ this.autoExpand();
9786
+ }
9787
+ }
9788
+ if (this.config && changes['duration']) {
9789
+ this.config.duration = changes['duration']?.currentValue || 0;
9790
+ }
9791
+ if (this.config && changes['stepDeleted']) {
9792
+ this.config.stepDeleted = changes['stepDeleted']?.currentValue;
9793
+ }
9794
+ // Handle status changes - auto-expand when step starts executing
9795
+ if (changes['status'] && !changes['status'].firstChange) {
9796
+ const newStatus = changes['status']?.currentValue || '';
9797
+ const oldStatus = changes['status']?.previousValue || '';
9798
+ // Auto-expand when status changes to 'running' and has subSteps (or will have soon)
9799
+ if (newStatus === 'running' && oldStatus !== 'running' && !this.userManuallyClosed) {
9800
+ // Expand immediately if already has subSteps, or wait for them
9801
+ if (this.hasSubSteps) {
9802
+ this.autoExpand();
9803
+ }
9804
+ }
9805
+ this.previousStatus = newStatus;
9806
+ }
9807
+ if (changes['expanded'] && this.expanded !== undefined) {
9808
+ this.isExpanded = this.expanded ?? false;
9809
+ }
9810
+ }
9811
+ autoExpand() {
9812
+ if (!this.isExpanded && this.hasSubSteps) {
9813
+ this.isExpanded = true;
9814
+ this.userManuallyClosed = false;
9815
+ this.toggleExpanded.emit(true);
9816
+ }
9817
+ }
9818
+ get hasSubSteps() {
9819
+ return this.actions !== undefined && this.actions.length > 0;
9820
+ }
9821
+ onViewMoreFailedStepClick(expanded) {
9822
+ this.showFailedStepDetails = expanded;
9823
+ }
9824
+ getSubStepsForFailedStep() {
9825
+ // Convert AIAgentAction[] to SubStep[] for the failed step component
9826
+ return (this.actions || []).map(action => ({
9827
+ id: action.id,
9828
+ description: action.description,
9829
+ status: action.status,
9830
+ duration: action.duration,
9831
+ }));
9832
+ }
9833
+ onMakeCurrentBaseline(event) {
9834
+ this.makeCurrentBaseline.emit(event);
9835
+ }
9836
+ onUploadBaseline(event) {
9837
+ this.uploadBaseline.emit(event);
9838
+ }
9839
+ onAnalyze() {
9840
+ this.analyze.emit();
9841
+ }
9842
+ onViewFullLogs() {
9843
+ this.viewFullLogs.emit();
9844
+ }
9845
+ onSelfHealAction(event) {
9846
+ this.selfHealAction.emit({
9847
+ type: event.type,
9848
+ healedLocator: event.healedLocator,
9849
+ testStepId: this.step?.testStepId || undefined
9850
+ });
9851
+ }
9852
+ trackByActionId(index, action) {
9853
+ return action?.id || index.toString();
9854
+ }
9855
+ get showViewMoreButton() {
9856
+ return this.isExpanded && Boolean(this.failureDetails) &&
9857
+ ((Boolean(this.failureDetails?.expected || this.failureDetails?.actual)) ||
9858
+ (Boolean(this.failureDetails?.screenshots?.current || this.failureDetails?.screenshots?.baseline || this.failureDetails?.screenshots?.difference)
9859
+ || Boolean(this.failureDetails?.logs?.length)) ||
9860
+ (Boolean(this.failureDetails?.aiFixApplied && (this.failureDetails?.aiFixMessage || this.confidence || this.reasoning?.length))));
9861
+ }
9862
+ toggleHeader(event) {
9863
+ if (event) {
9864
+ event.preventDefault();
9865
+ event.stopPropagation();
9866
+ }
9867
+ // Only allow expand/collapse when there are actions to show
9868
+ if (!this.hasSubSteps) {
9869
+ return;
9870
+ }
9871
+ super.toggle();
9872
+ if (!this.isExpanded) {
9873
+ this.showFailedStepDetails = false;
9874
+ }
9875
+ if (this.onStepClickHandler) {
9876
+ const stepToPass = this.step || this.config;
9877
+ if (stepToPass) {
9878
+ this.onStepClickHandler(stepToPass, event);
9879
+ }
9880
+ }
9881
+ }
9882
+ getActionBadgeText() {
9883
+ switch (this.step?.actionName) {
9884
+ case 'ai_ask':
9885
+ return 'AI Ask';
9886
+ case 'ai_document_ask':
9887
+ return 'AI Document Ask';
9888
+ case 'ai_text_verification':
9889
+ return 'AI Verify';
9890
+ default:
9891
+ return 'AI Action';
9892
+ }
9893
+ }
9894
+ }
9895
+ AIActionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIActionStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
9896
+ AIActionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIActionStepComponent, selector: "cqa-ai-action-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", actionCount: "actionCount", actions: "actions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", isLive: "isLive", step: "step" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n <!-- Skipped -->\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <!-- Lightbulb Icon and Step Number -->\n <div>\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </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-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n </span>\n \n <!-- Action Type Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n {{ getActionBadgeText() }}\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 <!-- Action Count -->\n <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n {{ config?.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config?.duration || 0) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && hasSubSteps\" class=\"cqa-mt-1.5 cqa-mb-3 cqa-ml-9\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Action Trace Tab Content -->\n <div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n <ng-container *ngFor=\"let action of config?.actions; let i = index; trackBy: trackByActionId\">\n <div\n *ngIf=\"action?.description\"\n class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n [ngStyle]=\"{\n 'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n 'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n }\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n <span\n class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-bold\" style=\"word-break: break-word;\"\n [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n >\n {{ action.description }}\n </span>\n <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\" *ngIf=\"!action?.reasoning\">\n {{ formatDuration(action.duration) }}\n </span>\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</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 || 0) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
9897
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIActionStepComponent, decorators: [{
9898
+ type: Component,
9899
+ args: [{ selector: 'cqa-ai-action-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggleHeader($event)\">\n \n <!-- Status Icon -->\n <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n <!-- Skipped -->\n <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n skip_next\n </span>\n </div>\n <!-- Lightbulb Icon and Step Number -->\n <div>\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </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-bold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n </span>\n \n <!-- Action Type Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n {{ getActionBadgeText() }}\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 <!-- Action Count -->\n <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n {{ config?.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n {{ formatDuration(config?.duration || 0) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded && hasSubSteps\" class=\"cqa-mt-1.5 cqa-mb-3 cqa-ml-9\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Action Trace Tab Content -->\n <div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n <ng-container *ngFor=\"let action of config?.actions; let i = index; trackBy: trackByActionId\">\n <div\n *ngIf=\"action?.description\"\n class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n [ngStyle]=\"{\n 'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n 'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n }\"\n >\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n \n </div>\n <span\n class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-bold\" style=\"word-break: break-word;\"\n [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n >\n {{ action.description }}\n </span>\n <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\" *ngIf=\"!action?.reasoning\">\n {{ formatDuration(action.duration) }}\n </span>\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n\n <!-- Self Heal Analysis -->\n <cqa-self-heal-analysis \n *ngIf=\"selfHealAnalysis\" \n [originalLocator]=\"selfHealAnalysis.originalLocator\"\n [healedLocator]=\"selfHealAnalysis.healedLocator\"\n [confidence]=\"selfHealAnalysis.confidence\"\n [healMethod]=\"selfHealAnalysis.healMethod\"\n [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n (action)=\"onSelfHealAction($event)\">\n </cqa-self-heal-analysis>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</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 || 0) }}</span>\n </div>\n </span>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [isExpanded]=\"showFailedStepDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n [isLive]=\"isLive\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
9900
+ }], propDecorators: { id: [{
9901
+ type: Input
9902
+ }], testStepResultId: [{
9903
+ type: Input
9904
+ }], stepNumber: [{
9905
+ type: Input
9906
+ }], title: [{
9907
+ type: Input
9908
+ }], status: [{
9909
+ type: Input
9910
+ }], duration: [{
9911
+ type: Input
9912
+ }], timingBreakdown: [{
9913
+ type: Input
9914
+ }], expanded: [{
9915
+ type: Input
9916
+ }], actionCount: [{
9917
+ type: Input
9918
+ }], actions: [{
9919
+ type: Input
9920
+ }], failureDetails: [{
9921
+ type: Input
9922
+ }], reasoning: [{
9923
+ type: Input
9924
+ }], confidence: [{
9925
+ type: Input
9926
+ }], stepDeleted: [{
9927
+ type: Input
9928
+ }], isUploadingBaseline: [{
9929
+ type: Input
9930
+ }], isMakingCurrentBaseline: [{
9931
+ type: Input
9932
+ }], selfHealAnalysis: [{
9933
+ type: Input
9934
+ }], getSelfHealLoadingStatesHandler: [{
9935
+ type: Input
9936
+ }], onStepClickHandler: [{
9937
+ type: Input
9938
+ }], isLive: [{
9939
+ type: Input
9940
+ }], step: [{
9941
+ type: Input
9942
+ }], makeCurrentBaseline: [{
9943
+ type: Output
9944
+ }], uploadBaseline: [{
9945
+ type: Output
9946
+ }], analyze: [{
9947
+ type: Output
9948
+ }], viewFullLogs: [{
9949
+ type: Output
9950
+ }], selfHealAction: [{
9951
+ type: Output
9952
+ }] } });
9953
+
9722
9954
  class ApiStepComponent extends BaseStepComponent {
9723
9955
  constructor() {
9724
9956
  super(...arguments);
@@ -11802,9 +12034,9 @@ class CompareRunsComponent {
11802
12034
  this.cdr.markForCheck();
11803
12035
  }
11804
12036
  convertToRunData(data) {
11805
- const device = data.testDeviceResult?.testDeviceSettings?.deviceName ||
11806
- data.testDeviceResult?.testDeviceSettings?.platform ||
11807
- 'Unknown Device';
12037
+ const device = data?.browser
12038
+ ? data?.browser?.charAt(0)?.toUpperCase() + data?.browser?.slice(1)
12039
+ : '';
11808
12040
  const browser = data.testDeviceResult?.testDeviceSettings?.browser || 'Unknown Browser';
11809
12041
  const platform = data.testDeviceResult?.testDeviceSettings?.platform || 'Unknown Platform';
11810
12042
  return {
@@ -12113,10 +12345,10 @@ class CompareRunsComponent {
12113
12345
  }
12114
12346
  }
12115
12347
  CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i2$2.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
12116
- CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <!-- Timing Changed summary removed -->\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 450px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12348
+ CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <!-- Timing Changed summary removed -->\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 450px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12117
12349
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
12118
12350
  type: Component,
12119
- args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <!-- Timing Changed summary removed -->\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 450px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", styles: [] }]
12351
+ args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n <div class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runASelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n \n <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n <cqa-dynamic-select \n [form]=\"form\" \n [config]=\"runBSelectConfig\"\n (searchChange)=\"onSearchChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </cqa-dynamic-select>\n </div>\n </div>\n \n <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n <ng-container *ngIf=\"selectedRunA\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runAStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runAStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n \n <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n <ng-container *ngIf=\"selectedRunB\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n </div>\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n [style.background-color]=\"runBStatusColor\"\n [style.color]=\"'#FFFFFF'\">\n {{ runBStatusLabel }}\n </span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n <cqa-button \n variant=\"filled\" \n [disabled]=\"!canCompare\"\n (click)=\"onCompareClick()\">\n {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n </cqa-button>\n </div>\n </div>\n\n <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n style=\"flex-shrink: 0;\">\n <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n </g>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </mat-icon>\n <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n </div>\n\n <!-- Timing Changed summary removed -->\n </div>\n </div>\n\n <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 450px); scrollbar-width: thin;\">\n <cqa-table-template style=\"height: 100%; display: block;\"\n [columns]=\"tableColumns\"\n [data]=\"stepComparisons\"\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\"\n [isEmptyState]=\"isEmptyState\"\n [emptyStateConfig]=\"emptyStateConfig\"\n [isTableDataLoading]=\"isComparingRuns\"\n [showSearchBar]=\"false\"\n [showFilterButton]=\"false\"\n [showSettingsButton]=\"false\"\n [showAutoRefreshButton]=\"false\"\n [showOtherButton]=\"false\"\n [showFilterPanel]=\"false\"\n [serverSidePagination]=\"false\"\n (pageChange)=\"onPageChange($event)\">\n </cqa-table-template>\n </div>\n\n </div>\n</div>\n\n", styles: [] }]
12120
12352
  }], ctorParameters: function () { return [{ type: i2$2.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { runs: [{
12121
12353
  type: Input
12122
12354
  }], comparisonData: [{
@@ -15751,6 +15983,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
15751
15983
  ViewMoreFailedStepButtonComponent,
15752
15984
  SelfHealAnalysisComponent,
15753
15985
  AIAgentStepComponent,
15986
+ AIActionStepComponent,
15754
15987
  ApiStepComponent,
15755
15988
  FileDownloadStepComponent,
15756
15989
  DocumentVerificationStepComponent,
@@ -15851,6 +16084,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
15851
16084
  ViewMoreFailedStepButtonComponent,
15852
16085
  SelfHealAnalysisComponent,
15853
16086
  AIAgentStepComponent,
16087
+ AIActionStepComponent,
15854
16088
  ApiStepComponent,
15855
16089
  FileDownloadStepComponent,
15856
16090
  DocumentVerificationStepComponent,
@@ -15917,6 +16151,7 @@ UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
15917
16151
  ['failed', FailedStepComponent],
15918
16152
  ['updated-failed', UpdatedFailedStepComponent],
15919
16153
  ['ai-agent', AIAgentStepComponent],
16154
+ ['ai-action', AIActionStepComponent],
15920
16155
  ['api', ApiStepComponent],
15921
16156
  ['file-download', FileDownloadStepComponent],
15922
16157
  ['document-verification', DocumentVerificationStepComponent],
@@ -15994,6 +16229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
15994
16229
  ViewMoreFailedStepButtonComponent,
15995
16230
  SelfHealAnalysisComponent,
15996
16231
  AIAgentStepComponent,
16232
+ AIActionStepComponent,
15997
16233
  ApiStepComponent,
15998
16234
  FileDownloadStepComponent,
15999
16235
  DocumentVerificationStepComponent,
@@ -16100,6 +16336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
16100
16336
  ViewMoreFailedStepButtonComponent,
16101
16337
  SelfHealAnalysisComponent,
16102
16338
  AIAgentStepComponent,
16339
+ AIActionStepComponent,
16103
16340
  ApiStepComponent,
16104
16341
  FileDownloadStepComponent,
16105
16342
  DocumentVerificationStepComponent,
@@ -16167,6 +16404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
16167
16404
  ['failed', FailedStepComponent],
16168
16405
  ['updated-failed', UpdatedFailedStepComponent],
16169
16406
  ['ai-agent', AIAgentStepComponent],
16407
+ ['ai-action', AIActionStepComponent],
16170
16408
  ['api', ApiStepComponent],
16171
16409
  ['file-download', FileDownloadStepComponent],
16172
16410
  ['document-verification', DocumentVerificationStepComponent],
@@ -16312,5 +16550,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
16312
16550
  * Generated bundle index. Do not edit.
16313
16551
  */
16314
16552
 
16315
- export { AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, CustomTextareaComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseScreenshotStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isScreenshotStepConfig, isStepGroupConfig, isUploadStepConfig };
16553
+ export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, CustomTextareaComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseScreenshotStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isScreenshotStepConfig, isStepGroupConfig, isUploadStepConfig };
16316
16554
  //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map