import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
const _forTrack0 = ($index, $item) => $item.id;
function LiveExecutionWidgetComponent_Conditional_7_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 16);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const execution_r2 = i0.ɵɵnextContext().$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatCurrency(execution_r2.cost), " ");
} }
function LiveExecutionWidgetComponent_Conditional_7_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 18);
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelementStart(1, "svg", 20);
    i0.ɵɵelement(2, "circle", 21)(3, "circle", 22);
    i0.ɵɵelementEnd();
    i0.ɵɵnamespaceHTML();
    i0.ɵɵelementStart(4, "span", 23);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const execution_r2 = i0.ɵɵnextContext().$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵstyleProp("stroke-dasharray", ctx_r2.circumference)("stroke-dashoffset", ctx_r2.getProgressOffset(execution_r2.progress));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("", execution_r2.progress.toFixed(0), "%");
} }
function LiveExecutionWidgetComponent_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵlistener("click", function LiveExecutionWidgetComponent_Conditional_7_For_2_Template_div_click_0_listener() { const execution_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onExecutionClick(execution_r2)); });
    i0.ɵɵelementStart(1, "div", 10);
    i0.ɵɵelement(2, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 11)(4, "div", 12);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 13)(7, "span", 14);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "span", 15);
    i0.ɵɵtext(10);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(11, LiveExecutionWidgetComponent_Conditional_7_For_2_Conditional_11_Template, 2, 1, "span", 16);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(12, "div", 17);
    i0.ɵɵconditionalCreate(13, LiveExecutionWidgetComponent_Conditional_7_For_2_Conditional_13_Template, 6, 5, "div", 18);
    i0.ɵɵelementStart(14, "div", 19);
    i0.ɵɵelement(15, "i");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const execution_r2 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵclassMap("execution-item--" + execution_r2.status);
    i0.ɵɵadvance(2);
    i0.ɵɵclassMap(ctx_r2.getExecutionIcon(execution_r2));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(execution_r2.name);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(execution_r2.type);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.formatDuration(execution_r2.duration));
    i0.ɵɵadvance();
    i0.ɵɵconditional(execution_r2.cost ? 11 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(execution_r2.status === "running" && execution_r2.progress ? 13 : -1);
    i0.ɵɵadvance();
    i0.ɵɵclassMap("status-indicator--" + execution_r2.status);
    i0.ɵɵadvance();
    i0.ɵɵclassMap(ctx_r2.getStatusIcon(execution_r2.status));
} }
function LiveExecutionWidgetComponent_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 8)(1, "button", 24);
    i0.ɵɵlistener("click", function LiveExecutionWidgetComponent_Conditional_7_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleShowAll()); });
    i0.ɵɵtext(2);
    i0.ɵɵelement(3, "i");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.showAll ? "Show Less" : "Show All (" + ctx_r2.executions.length + ")", " ");
    i0.ɵɵadvance();
    i0.ɵɵclassMap(ctx_r2.showAll ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
} }
function LiveExecutionWidgetComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 5);
    i0.ɵɵrepeaterCreate(1, LiveExecutionWidgetComponent_Conditional_7_For_2_Template, 16, 13, "div", 7, _forTrack0);
    i0.ɵɵconditionalCreate(3, LiveExecutionWidgetComponent_Conditional_7_Conditional_3_Template, 4, 3, "div", 8);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r2.executions.slice(0, ctx_r2.maxVisible));
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r2.executions.length > ctx_r2.maxVisible ? 3 : -1);
} }
function LiveExecutionWidgetComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6);
    i0.ɵɵelement(1, "i", 25);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "No recent executions");
    i0.ɵɵelementEnd()();
} }
export class LiveExecutionWidgetComponent {
    executions = [];
    maxVisible = 8;
    executionClick = new EventEmitter();
    showAll = false;
    circumference = 2 * Math.PI * 10; // r=10
    ngOnInit() { }
    ngOnDestroy() { }
    trackByExecutionId(index, execution) {
        return execution.id;
    }
    hasActiveExecutions() {
        return this.executions.some(e => e.status === 'running');
    }
    getActiveCount() {
        return this.executions.filter(e => e.status === 'running').length;
    }
    getExecutionIcon(execution) {
        if (execution.type === 'agent') {
            return 'fa-solid fa-robot';
        }
        else {
            return 'fa-solid fa-comment-dots';
        }
    }
    getStatusIcon(status) {
        switch (status) {
            case 'running':
                return 'fa-solid fa-play';
            case 'completed':
                return 'fa-solid fa-check';
            case 'failed':
                return 'fa-solid fa-times';
            default:
                return 'fa-solid fa-question';
        }
    }
    formatDuration(duration) {
        if (!duration)
            return '0s';
        const seconds = Math.floor(duration / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);
        if (hours > 0) {
            return `${hours}h ${minutes % 60}m`;
        }
        else if (minutes > 0) {
            return `${minutes}m ${seconds % 60}s`;
        }
        else {
            return `${seconds}s`;
        }
    }
    getProgressOffset(progress) {
        return this.circumference - (progress / 100) * this.circumference;
    }
    toggleShowAll() {
        this.showAll = !this.showAll;
        this.maxVisible = this.showAll ? this.executions.length : 8;
    }
    onExecutionClick(execution) {
        this.executionClick.emit(execution);
    }
    formatCurrency(amount) {
        return `$${amount.toFixed(4)}`;
    }
    static ɵfac = function LiveExecutionWidgetComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LiveExecutionWidgetComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LiveExecutionWidgetComponent, selectors: [["app-live-execution-widget"]], inputs: { executions: "executions", maxVisible: "maxVisible" }, outputs: { executionClick: "executionClick" }, standalone: false, decls: 9, vars: 4, consts: [[1, "live-execution-widget"], [1, "widget-header"], [1, "widget-title"], [1, "fa-solid", "fa-bolt"], [1, "active-count"], [1, "execution-list"], [1, "no-executions"], [1, "execution-item", 3, "class"], [1, "show-more"], [1, "execution-item", 3, "click"], [1, "execution-icon"], [1, "execution-info"], [1, "execution-name"], [1, "execution-meta"], [1, "execution-type"], [1, "execution-duration"], [1, "execution-cost"], [1, "execution-status"], [1, "progress-ring"], [1, "status-indicator"], ["width", "24", "height", "24"], ["cx", "12", "cy", "12", "r", "10", "fill", "none", "stroke", "var(--mj-border-default)", "stroke-width", "2"], ["cx", "12", "cy", "12", "r", "10", "fill", "none", "stroke", "var(--mj-brand-primary)", "stroke-width", "2", "stroke-linecap", "round", 1, "progress-circle"], [1, "progress-text"], [1, "show-more-btn", 3, "click"], [1, "fa-solid", "fa-circle-check"]], template: function LiveExecutionWidgetComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3", 2);
            i0.ɵɵelement(3, "i", 3);
            i0.ɵɵtext(4, " Live Executions ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(5, "div", 4);
            i0.ɵɵtext(6);
            i0.ɵɵelementEnd()();
            i0.ɵɵconditionalCreate(7, LiveExecutionWidgetComponent_Conditional_7_Template, 4, 1, "div", 5)(8, LiveExecutionWidgetComponent_Conditional_8_Template, 4, 0, "div", 6);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance(5);
            i0.ɵɵclassProp("pulsing", ctx.hasActiveExecutions());
            i0.ɵɵadvance();
            i0.ɵɵtextInterpolate1(" ", ctx.getActiveCount(), " active ");
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.executions.length > 0 ? 7 : 8);
        } }, styles: [".live-execution-widget[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      height: 400px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .widget-header[_ngcontent-%COMP%] {\n      padding: 20px 20px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .widget-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .widget-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .active-count[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      padding: 4px 12px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      transition: all 0.3s ease;\n    }\n\n    .active-count.pulsing[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0% { opacity: 1; }\n      50% { opacity: 0.7; }\n      100% { opacity: 1; }\n    }\n\n    .execution-list[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .execution-item[_ngcontent-%COMP%] {\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border-left: 3px solid transparent;\n    }\n\n    .execution-item[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .execution-item--running[_ngcontent-%COMP%] {\n      border-left-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-item--completed[_ngcontent-%COMP%] {\n      border-left-color: var(--mj-status-success);\n    }\n\n    .execution-item--failed[_ngcontent-%COMP%] {\n      border-left-color: var(--mj-status-error);\n      background: color-mix(in srgb, var(--mj-status-error) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-icon[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .execution-item--running[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .execution-item--completed[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .execution-item--failed[_ngcontent-%COMP%]   .execution-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .execution-info[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .execution-name[_ngcontent-%COMP%] {\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin-bottom: 4px;\n    }\n\n    .execution-meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .execution-type[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-weight: 500;\n    }\n\n    .execution-duration[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n    }\n\n    .execution-cost[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n      font-weight: 500;\n    }\n\n    .execution-status[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .progress-ring[_ngcontent-%COMP%] {\n      position: relative;\n      width: 24px;\n      height: 24px;\n    }\n\n    .progress-circle[_ngcontent-%COMP%] {\n      transform: rotate(-90deg);\n      transform-origin: center;\n      transition: stroke-dashoffset 0.3s ease;\n    }\n\n    .progress-text[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n    }\n\n    .status-indicator--running[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n    }\n\n    .status-indicator--completed[_ngcontent-%COMP%] {\n      background: var(--mj-status-success);\n      color: var(--mj-text-inverse);\n    }\n\n    .status-indicator--failed[_ngcontent-%COMP%] {\n      background: var(--mj-status-error);\n      color: var(--mj-text-inverse);\n    }\n\n    .show-more[_ngcontent-%COMP%] {\n      padding: 12px 20px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .show-more-btn[_ngcontent-%COMP%] {\n      width: 100%;\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s ease;\n    }\n\n    .show-more-btn[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .no-executions[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-executions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: var(--mj-border-default);\n    }\n\n    .no-executions[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    @media (max-width: 768px) {\n      .execution-item[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n      }\n\n      .execution-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n      }\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LiveExecutionWidgetComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-live-execution-widget', template: `
    <div class="live-execution-widget">
      <div class="widget-header">
        <h3 class="widget-title">
          <i class="fa-solid fa-bolt"></i>
          Live Executions
        </h3>
        <div class="active-count" [class.pulsing]="hasActiveExecutions()">
          {{ getActiveCount() }} active
        </div>
      </div>

      @if (executions.length > 0) {
        <div class="execution-list">
          @for (execution of executions.slice(0, maxVisible); track execution.id) {
            <div 
              class="execution-item"
              [class]="'execution-item--' + execution.status"
              (click)="onExecutionClick(execution)"
            >
          <div class="execution-icon">
            <i [class]="getExecutionIcon(execution)"></i>
          </div>
          
          <div class="execution-info">
            <div class="execution-name">{{ execution.name }}</div>
            <div class="execution-meta">
              <span class="execution-type">{{ execution.type }}</span>
              <span class="execution-duration">{{ formatDuration(execution.duration) }}</span>
              @if (execution.cost) {
                <span class="execution-cost">
                  {{ formatCurrency(execution.cost) }}
                </span>
              }
            </div>
          </div>

          <div class="execution-status">
            @if (execution.status === 'running' && execution.progress) {
              <div class="progress-ring">
              <svg width="24" height="24">
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                  fill="none"
                  stroke="var(--mj-border-default)"
                  stroke-width="2"
                />
                <circle
                  cx="12"
                  cy="12"
                  r="10"
                  fill="none"
                  stroke="var(--mj-brand-primary)"
                  stroke-width="2"
                  stroke-linecap="round"
                  [style.stroke-dasharray]="circumference"
                  [style.stroke-dashoffset]="getProgressOffset(execution.progress)"
                  class="progress-circle"
                />
              </svg>
                <span class="progress-text">{{ execution.progress.toFixed(0) }}%</span>
              </div>
            }
            
            <div class="status-indicator" [class]="'status-indicator--' + execution.status">
              <i [class]="getStatusIcon(execution.status)"></i>
            </div>
          </div>
            </div>
          }

          @if (executions.length > maxVisible) {
            <div class="show-more">
          <button 
            class="show-more-btn"
            (click)="toggleShowAll()"
          >
              {{ showAll ? 'Show Less' : 'Show All (' + executions.length + ')' }}
              <i [class]="showAll ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'"></i>
            </button>
            </div>
          }
        </div>
      } @else {
        <div class="no-executions">
          <i class="fa-solid fa-circle-check"></i>
          <p>No recent executions</p>
        </div>
      }
    </div>
  `, styles: ["\n    .live-execution-widget {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      height: 400px;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .widget-header {\n      padding: 20px 20px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .widget-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .widget-title i {\n      color: var(--mj-brand-primary);\n    }\n\n    .active-count {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      padding: 4px 12px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      transition: all 0.3s ease;\n    }\n\n    .active-count.pulsing {\n      animation: pulse 2s infinite;\n    }\n\n    @keyframes pulse {\n      0% { opacity: 1; }\n      50% { opacity: 0.7; }\n      100% { opacity: 1; }\n    }\n\n    .execution-list {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .execution-item {\n      padding: 12px 20px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border-left: 3px solid transparent;\n    }\n\n    .execution-item:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .execution-item--running {\n      border-left-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-item--completed {\n      border-left-color: var(--mj-status-success);\n    }\n\n    .execution-item--failed {\n      border-left-color: var(--mj-status-error);\n      background: color-mix(in srgb, var(--mj-status-error) 2%, var(--mj-bg-surface));\n    }\n\n    .execution-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .execution-item--running .execution-icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .execution-item--completed .execution-icon {\n      background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .execution-item--failed .execution-icon {\n      background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .execution-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .execution-name {\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      margin-bottom: 4px;\n    }\n\n    .execution-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .execution-type {\n      background: var(--mj-bg-surface-sunken);\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-weight: 500;\n    }\n\n    .execution-duration {\n      color: var(--mj-text-disabled);\n    }\n\n    .execution-cost {\n      color: var(--mj-status-warning);\n      font-weight: 500;\n    }\n\n    .execution-status {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .progress-ring {\n      position: relative;\n      width: 24px;\n      height: 24px;\n    }\n\n    .progress-circle {\n      transform: rotate(-90deg);\n      transform-origin: center;\n      transition: stroke-dashoffset 0.3s ease;\n    }\n\n    .progress-text {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      font-size: 8px;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n    }\n\n    .status-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n    }\n\n    .status-indicator--running {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      animation: pulse 2s infinite;\n    }\n\n    .status-indicator--completed {\n      background: var(--mj-status-success);\n      color: var(--mj-text-inverse);\n    }\n\n    .status-indicator--failed {\n      background: var(--mj-status-error);\n      color: var(--mj-text-inverse);\n    }\n\n    .show-more {\n      padding: 12px 20px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n\n    .show-more-btn {\n      width: 100%;\n      background: none;\n      border: none;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 4px;\n      padding: 8px;\n      border-radius: 4px;\n      transition: background 0.2s ease;\n    }\n\n    .show-more-btn:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .no-executions {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-executions i {\n      font-size: 32px;\n      color: var(--mj-border-default);\n    }\n\n    .no-executions p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    @media (max-width: 768px) {\n      .execution-item {\n        padding: 10px 16px;\n      }\n\n      .execution-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n      }\n    }\n  "] }]
    }], null, { executions: [{
            type: Input
        }], maxVisible: [{
            type: Input
        }], executionClick: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LiveExecutionWidgetComponent, { className: "LiveExecutionWidgetComponent", filePath: "src/AI/components/widgets/live-execution-widget.component.ts", lineNumber: 365 }); })();
//# sourceMappingURL=live-execution-widget.component.js.map