@cqa-lib/cqa-ui 1.1.27 → 1.1.28

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

@@ -6410,6 +6410,8 @@ class ApiStepComponent extends BaseStepComponent {
             responseTime: this.responseTime,
             requestBody: this.requestBody,
             responseBody: this.responseBody,
+            requestHeaders: this.requestHeaders,
+            responseHeaders: this.responseHeaders,
             assertions: this.assertions,
             initialActions: this.initialActions,
             timingBreakdown: this.timingBreakdown,
@@ -6456,12 +6458,24 @@ class ApiStepComponent extends BaseStepComponent {
             this.copyToClipboard(formattedJson);
         }
     }
+    copyRequestHeaders() {
+        if (this.requestHeaders) {
+            const formattedJson = this.formatJson(this.requestHeaders);
+            this.copyToClipboard(formattedJson);
+        }
+    }
+    copyResponseHeaders() {
+        if (this.responseHeaders) {
+            const formattedJson = this.formatJson(this.responseHeaders);
+            this.copyToClipboard(formattedJson);
+        }
+    }
 }
 ApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiStepComponent, selector: "cqa-api-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", method: "method", endpoint: "endpoint", statusCode: "statusCode", responseTime: "responseTime", requestBody: "requestBody", responseBody: "responseBody", assertions: "assertions", initialActions: "initialActions" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\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=\"#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\n    <!-- API Icon -->\n    <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#EDE9FE\"/><path d=\"M8 6.5L9.5 8L8 9.5M10.5 9.5H12M6.5 12H13.5C13.7652 12 14.0196 11.8946 14.2071 11.7071C14.3946 11.5196 14.5 11.2652 14.5 11V5C14.5 4.73478 14.3946 4.48043 14.2071 4.29289C14.0196 4.10536 13.7652 4 13.5 4H6.5C6.23478 4 5.98043 4.10536 5.79289 4.29289C5.60536 4.48043 5.5 4.73478 5.5 5V11C5.5 11.2652 5.60536 11.5196 5.79289 11.7071C5.98043 11.8946 6.23478 12 6.5 12Z\" stroke=\"#7F22FE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#7008E7] cqa-bg-[#EDE9FE] cqa-text-[10px] cqa-leading-[15px]\">\n        API\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ config.method }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Initial Actions -->\n    <div *ngIf=\"config.initialActions && config.initialActions.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-ml-9\">\n      <div\n        *ngFor=\"let action of config.initialActions\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">{{ action.description }}</span>\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">{{ formatDuration(action.duration) }}</span>\n      </div>\n    </div>\n\n    <!-- Request Summary Card -->\n    <div class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n      \n      <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #EDE9FE\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n          <span>Request Summary</span>\n          <button class=\"cqa-flex cqa-items-center cqa-gap-1 p-0\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            Copy\n          </button>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n              {{ config.method }}\n            </span>\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">{{ config.endpoint }}</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <span [ngClass]=\"getStatusBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 3.5L3.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.5 3.5L10.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ config.statusCode }}\n            </span>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.99999 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00008C12.8333 3.77842 10.2217 1.16675 6.99999 1.16675C3.77833 1.16675 1.16666 3.77842 1.16666 7.00008C1.16666 10.2217 3.77833 12.8334 6.99999 12.8334Z\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              <span>{{ config.responseTime }}ms</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Request/Response Bodies -->\n      <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n        <!-- Request Body -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Body</span>\n            <button (click)=\"copyRequestBody()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.requestBody\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestBody) }}</pre>\n          <a *ngIf=\"config.requestBody\" href=\"#\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-medium cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            View full request\n          </a>\n        </div>\n\n        <!-- Response Body -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Body</span>\n            <button (click)=\"copyResponseBody()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.responseBody\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseBody) }}</pre>\n        </div>\n      </div>\n\n      <!-- Assertions -->\n      <div *ngIf=\"config.assertions && config.assertions.length > 0\" class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-3\">\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Assertions</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#00A63E]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ getPassedAssertions() }} passed\n            </span>\n            <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#E7000B]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 3L3 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 3L9 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ getFailedAssertions() }} failed\n            </span>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let assertion of config.assertions\"\n            class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363] cqa-px-3 cqa-py-1 cqa-rounded-md\"\n            [ngStyle]=\"{\n                'background-color': assertion.status === 'passed' ? '#ECFDF3' : '#FEF2F2',\n                'border': assertion.status === 'passed'\n                  ? '1px solid #A7F3D0'\n                  : '1px solid #FFC9C9'\n            }\"\n          >\n            <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-2\">\n              <div>\n                <!-- Passed -->\n                <ng-container *ngIf=\"assertion.status === 'passed'; else failedIcon\">\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#DCFCE7\"/><path d=\"M14 7L8.5 12.5L6 10\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                </ng-container>\n                \n                <!-- Failed -->\n                <ng-template #failedIcon>\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FFE2E2\"/><path d=\"M13 7L7 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 7L13 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                </ng-template>\n              </div>\n              <div class=\"cqa-text-[10px] cqa-leading-[13px]\" \n                [ngClass]=\"{\n                  'cqa-text-[#9F0712]': assertion.status !== 'passed',\n                  'cqa-text-[#016630]': assertion.status === 'passed'\n                }\"\n              >\n                {{ assertion.description }}\n              </div>\n            </div>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n              <div>\n                <span>Expected:</span>\n                <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-[#008236]' : 'cqa-text-[#0B0B0B]'\">\n                  {{ assertion.expected }}\n                </span>\n              </div>\n              <div>\n                <span>Actual:</span>\n                <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-green-600' : 'cqa-text-[#E7000B]'\">\n                  {{ assertion.actual }}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiStepComponent, selector: "cqa-api-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", method: "method", endpoint: "endpoint", statusCode: "statusCode", responseTime: "responseTime", requestBody: "requestBody", responseBody: "responseBody", requestHeaders: "requestHeaders", responseHeaders: "responseHeaders", assertions: "assertions", initialActions: "initialActions" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\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=\"#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\n    <!-- API Icon -->\n    <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#EDE9FE\"/><path d=\"M8 6.5L9.5 8L8 9.5M10.5 9.5H12M6.5 12H13.5C13.7652 12 14.0196 11.8946 14.2071 11.7071C14.3946 11.5196 14.5 11.2652 14.5 11V5C14.5 4.73478 14.3946 4.48043 14.2071 4.29289C14.0196 4.10536 13.7652 4 13.5 4H6.5C6.23478 4 5.98043 4.10536 5.79289 4.29289C5.60536 4.48043 5.5 4.73478 5.5 5V11C5.5 11.2652 5.60536 11.5196 5.79289 11.7071C5.98043 11.8946 6.23478 12 6.5 12Z\" stroke=\"#7F22FE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#7008E7] cqa-bg-[#EDE9FE] cqa-text-[10px] cqa-leading-[15px]\">\n        API\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ config.method }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Initial Actions -->\n    <div *ngIf=\"config.initialActions && config.initialActions.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-ml-9\">\n      <div\n        *ngFor=\"let action of config.initialActions\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">{{ action.description }}</span>\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">{{ formatDuration(action.duration) }}</span>\n      </div>\n    </div>\n\n    <!-- Request Summary Card -->\n    <div class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n      \n      <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #EDE9FE\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n          <span>Request Summary</span>\n          <button class=\"cqa-flex cqa-items-center cqa-gap-1 p-0\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            Copy\n          </button>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n              {{ config.method }}\n            </span>\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">{{ config.endpoint }}</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <span [ngClass]=\"getStatusBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 3.5L3.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.5 3.5L10.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ config.statusCode }}\n            </span>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.99999 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00008C12.8333 3.77842 10.2217 1.16675 6.99999 1.16675C3.77833 1.16675 1.16666 3.77842 1.16666 7.00008C1.16666 10.2217 3.77833 12.8334 6.99999 12.8334Z\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              <span>{{ config.responseTime }}ms</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Request/Response Headers -->\n      <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n        <!-- Request Headers -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Headers</span>\n            <button (click)=\"copyRequestHeaders()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.requestHeaders\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestHeaders) }}</pre>\n        </div>\n\n        <!-- Response Headers -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Headers</span>\n            <button (click)=\"copyResponseHeaders()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.responseHeaders\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseHeaders) }}</pre>\n        </div>\n      </div>\n\n      <!-- Request/Response Bodies -->\n      <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n        <!-- Request Body -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Body</span>\n            <button (click)=\"copyRequestBody()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.requestBody\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestBody) }}</pre>\n          <a *ngIf=\"config.requestBody\" href=\"#\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-medium cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            View full request\n          </a>\n        </div>\n\n        <!-- Response Body -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Body</span>\n            <button (click)=\"copyResponseBody()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.responseBody\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseBody) }}</pre>\n        </div>\n      </div>\n\n      <!-- Assertions -->\n      <div *ngIf=\"config.assertions && config.assertions.length > 0\" class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-3\">\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Assertions</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#00A63E]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ getPassedAssertions() }} passed\n            </span>\n            <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#E7000B]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 3L3 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 3L9 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ getFailedAssertions() }} failed\n            </span>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let assertion of config.assertions\"\n            class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363] cqa-px-3 cqa-py-1 cqa-rounded-md\"\n            [ngStyle]=\"{\n                'background-color': assertion.status === 'passed' ? '#ECFDF3' : '#FEF2F2',\n                'border': assertion.status === 'passed'\n                  ? '1px solid #A7F3D0'\n                  : '1px solid #FFC9C9'\n            }\"\n          >\n            <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-2\">\n              <div>\n                <!-- Passed -->\n                <ng-container *ngIf=\"assertion.status === 'passed'; else failedIcon\">\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#DCFCE7\"/><path d=\"M14 7L8.5 12.5L6 10\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                </ng-container>\n                \n                <!-- Failed -->\n                <ng-template #failedIcon>\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FFE2E2\"/><path d=\"M13 7L7 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 7L13 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                </ng-template>\n              </div>\n              <div class=\"cqa-text-[10px] cqa-leading-[13px]\" \n                [ngClass]=\"{\n                  'cqa-text-[#9F0712]': assertion.status !== 'passed',\n                  'cqa-text-[#016630]': assertion.status === 'passed'\n                }\"\n              >\n                {{ assertion.description }}\n              </div>\n            </div>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n              <div>\n                <span>Expected:</span>\n                <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-[#008236]' : 'cqa-text-[#0B0B0B]'\">\n                  {{ assertion.expected }}\n                </span>\n              </div>\n              <div>\n                <span>Actual:</span>\n                <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-green-600' : 'cqa-text-[#E7000B]'\">\n                  {{ assertion.actual }}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-api-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\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=\"#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\n    <!-- API Icon -->\n    <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#EDE9FE\"/><path d=\"M8 6.5L9.5 8L8 9.5M10.5 9.5H12M6.5 12H13.5C13.7652 12 14.0196 11.8946 14.2071 11.7071C14.3946 11.5196 14.5 11.2652 14.5 11V5C14.5 4.73478 14.3946 4.48043 14.2071 4.29289C14.0196 4.10536 13.7652 4 13.5 4H6.5C6.23478 4 5.98043 4.10536 5.79289 4.29289C5.60536 4.48043 5.5 4.73478 5.5 5V11C5.5 11.2652 5.60536 11.5196 5.79289 11.7071C5.98043 11.8946 6.23478 12 6.5 12Z\" stroke=\"#7F22FE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#7008E7] cqa-bg-[#EDE9FE] cqa-text-[10px] cqa-leading-[15px]\">\n        API\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ config.method }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Initial Actions -->\n    <div *ngIf=\"config.initialActions && config.initialActions.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-ml-9\">\n      <div\n        *ngFor=\"let action of config.initialActions\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">{{ action.description }}</span>\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">{{ formatDuration(action.duration) }}</span>\n      </div>\n    </div>\n\n    <!-- Request Summary Card -->\n    <div class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n      \n      <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #EDE9FE\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n          <span>Request Summary</span>\n          <button class=\"cqa-flex cqa-items-center cqa-gap-1 p-0\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            Copy\n          </button>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n              {{ config.method }}\n            </span>\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">{{ config.endpoint }}</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <span [ngClass]=\"getStatusBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 3.5L3.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.5 3.5L10.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ config.statusCode }}\n            </span>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.99999 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00008C12.8333 3.77842 10.2217 1.16675 6.99999 1.16675C3.77833 1.16675 1.16666 3.77842 1.16666 7.00008C1.16666 10.2217 3.77833 12.8334 6.99999 12.8334Z\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              <span>{{ config.responseTime }}ms</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Request/Response Bodies -->\n      <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n        <!-- Request Body -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Body</span>\n            <button (click)=\"copyRequestBody()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.requestBody\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestBody) }}</pre>\n          <a *ngIf=\"config.requestBody\" href=\"#\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-medium cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            View full request\n          </a>\n        </div>\n\n        <!-- Response Body -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Body</span>\n            <button (click)=\"copyResponseBody()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.responseBody\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseBody) }}</pre>\n        </div>\n      </div>\n\n      <!-- Assertions -->\n      <div *ngIf=\"config.assertions && config.assertions.length > 0\" class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-3\">\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Assertions</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#00A63E]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ getPassedAssertions() }} passed\n            </span>\n            <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#E7000B]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 3L3 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 3L9 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ getFailedAssertions() }} failed\n            </span>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let assertion of config.assertions\"\n            class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363] cqa-px-3 cqa-py-1 cqa-rounded-md\"\n            [ngStyle]=\"{\n                'background-color': assertion.status === 'passed' ? '#ECFDF3' : '#FEF2F2',\n                'border': assertion.status === 'passed'\n                  ? '1px solid #A7F3D0'\n                  : '1px solid #FFC9C9'\n            }\"\n          >\n            <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-2\">\n              <div>\n                <!-- Passed -->\n                <ng-container *ngIf=\"assertion.status === 'passed'; else failedIcon\">\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#DCFCE7\"/><path d=\"M14 7L8.5 12.5L6 10\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                </ng-container>\n                \n                <!-- Failed -->\n                <ng-template #failedIcon>\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FFE2E2\"/><path d=\"M13 7L7 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 7L13 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                </ng-template>\n              </div>\n              <div class=\"cqa-text-[10px] cqa-leading-[13px]\" \n                [ngClass]=\"{\n                  'cqa-text-[#9F0712]': assertion.status !== 'passed',\n                  'cqa-text-[#016630]': assertion.status === 'passed'\n                }\"\n              >\n                {{ assertion.description }}\n              </div>\n            </div>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n              <div>\n                <span>Expected:</span>\n                <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-[#008236]' : 'cqa-text-[#0B0B0B]'\">\n                  {{ assertion.expected }}\n                </span>\n              </div>\n              <div>\n                <span>Actual:</span>\n                <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-green-600' : 'cqa-text-[#E7000B]'\">\n                  {{ assertion.actual }}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-api-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\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=\"#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\n    <!-- API Icon -->\n    <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#EDE9FE\"/><path d=\"M8 6.5L9.5 8L8 9.5M10.5 9.5H12M6.5 12H13.5C13.7652 12 14.0196 11.8946 14.2071 11.7071C14.3946 11.5196 14.5 11.2652 14.5 11V5C14.5 4.73478 14.3946 4.48043 14.2071 4.29289C14.0196 4.10536 13.7652 4 13.5 4H6.5C6.23478 4 5.98043 4.10536 5.79289 4.29289C5.60536 4.48043 5.5 4.73478 5.5 5V11C5.5 11.2652 5.60536 11.5196 5.79289 11.7071C5.98043 11.8946 6.23478 12 6.5 12Z\" stroke=\"#7F22FE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#7008E7] cqa-bg-[#EDE9FE] cqa-text-[10px] cqa-leading-[15px]\">\n        API\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ config.method }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Initial Actions -->\n    <div *ngIf=\"config.initialActions && config.initialActions.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-ml-9\">\n      <div\n        *ngFor=\"let action of config.initialActions\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">{{ action.description }}</span>\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">{{ formatDuration(action.duration) }}</span>\n      </div>\n    </div>\n\n    <!-- Request Summary Card -->\n    <div class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n      \n      <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #EDE9FE\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n          <span>Request Summary</span>\n          <button class=\"cqa-flex cqa-items-center cqa-gap-1 p-0\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            Copy\n          </button>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n              {{ config.method }}\n            </span>\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">{{ config.endpoint }}</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <span [ngClass]=\"getStatusBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 3.5L3.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.5 3.5L10.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ config.statusCode }}\n            </span>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.99999 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00008C12.8333 3.77842 10.2217 1.16675 6.99999 1.16675C3.77833 1.16675 1.16666 3.77842 1.16666 7.00008C1.16666 10.2217 3.77833 12.8334 6.99999 12.8334Z\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              <span>{{ config.responseTime }}ms</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Request/Response Headers -->\n      <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n        <!-- Request Headers -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Headers</span>\n            <button (click)=\"copyRequestHeaders()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.requestHeaders\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestHeaders) }}</pre>\n        </div>\n\n        <!-- Response Headers -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Headers</span>\n            <button (click)=\"copyResponseHeaders()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.responseHeaders\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseHeaders) }}</pre>\n        </div>\n      </div>\n\n      <!-- Request/Response Bodies -->\n      <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n        <!-- Request Body -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Body</span>\n            <button (click)=\"copyRequestBody()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.requestBody\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestBody) }}</pre>\n          <a *ngIf=\"config.requestBody\" href=\"#\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-medium cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            View full request\n          </a>\n        </div>\n\n        <!-- Response Body -->\n        <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Body</span>\n            <button (click)=\"copyResponseBody()\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </button>\n          </div>\n          <pre *ngIf=\"config.responseBody\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseBody) }}</pre>\n        </div>\n      </div>\n\n      <!-- Assertions -->\n      <div *ngIf=\"config.assertions && config.assertions.length > 0\" class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-3\">\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Assertions</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#00A63E]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ getPassedAssertions() }} passed\n            </span>\n            <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#E7000B]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 3L3 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 3L9 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ getFailedAssertions() }} failed\n            </span>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div\n            *ngFor=\"let assertion of config.assertions\"\n            class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363] cqa-px-3 cqa-py-1 cqa-rounded-md\"\n            [ngStyle]=\"{\n                'background-color': assertion.status === 'passed' ? '#ECFDF3' : '#FEF2F2',\n                'border': assertion.status === 'passed'\n                  ? '1px solid #A7F3D0'\n                  : '1px solid #FFC9C9'\n            }\"\n          >\n            <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-2\">\n              <div>\n                <!-- Passed -->\n                <ng-container *ngIf=\"assertion.status === 'passed'; else failedIcon\">\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#DCFCE7\"/><path d=\"M14 7L8.5 12.5L6 10\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                </ng-container>\n                \n                <!-- Failed -->\n                <ng-template #failedIcon>\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FFE2E2\"/><path d=\"M13 7L7 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 7L13 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                </ng-template>\n              </div>\n              <div class=\"cqa-text-[10px] cqa-leading-[13px]\" \n                [ngClass]=\"{\n                  'cqa-text-[#9F0712]': assertion.status !== 'passed',\n                  'cqa-text-[#016630]': assertion.status === 'passed'\n                }\"\n              >\n                {{ assertion.description }}\n              </div>\n            </div>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n              <div>\n                <span>Expected:</span>\n                <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-[#008236]' : 'cqa-text-[#0B0B0B]'\">\n                  {{ assertion.expected }}\n                </span>\n              </div>\n              <div>\n                <span>Actual:</span>\n                <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-green-600' : 'cqa-text-[#E7000B]'\">\n                  {{ assertion.actual }}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], stepNumber: [{
@@ -6488,6 +6502,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], responseBody: [{
                 type: Input
+            }], requestHeaders: [{
+                type: Input
+            }], responseHeaders: [{
+                type: Input
             }], assertions: [{
                 type: Input
             }], initialActions: [{