@memberjunction/ng-core-entity-forms 5.43.0 → 5.44.0

package/dist/lib/custom/ai-agent-run/flow/agent-run-flow.component.js

@@ -0,0 +1,665 @@
+import { Component, Input, ViewChild, NgZone, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { combineLatest } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { CompositeKey } from '@memberjunction/core';
+import { SharedService } from '@memberjunction/ng-shared';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { buildFlowModel, activeLeaf, ancestors, formatDuration, shortLabel, FLOW_COLORS, FLOW_EMOJI, FLOW_LABEL } from './agent-run-flow.model';
+import { FlameCascadeComponent } from './flame-cascade.component';
+import { SubwayLinesComponent } from './subway-lines.component';
+import { ConstellationComponent } from './constellation.component';
+import { FlowchartComponent } from './flowchart.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "../ai-agent-run-step-detail.component";
+import * as i4 from "./flame-cascade.component";
+import * as i5 from "./subway-lines.component";
+import * as i6 from "./constellation.component";
+import * as i7 from "./flowchart.component";
+const _c0 = ["scrub"];
+const _c1 = ["clock"];
+const _c2 = ["crumb"];
+const _c3 = ["nowIco"];
+const _c4 = ["nowName"];
+const _c5 = ["nowType"];
+const _c6 = ["nowDur"];
+const _c7 = ["nowModel"];
+const _c8 = ["nowStat"];
+const _c9 = ["nowBar"];
+const _c10 = ["loglist"];
+const _forTrack0 = ($index, $item) => $item.key;
+function AIAgentRunFlowComponent_For_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵtext(1, "Soon");
+    i0.ɵɵelementEnd();
+} }
+function AIAgentRunFlowComponent_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 25);
+    i0.ɵɵlistener("click", function AIAgentRunFlowComponent_For_3_Template_button_click_0_listener() { const m_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectMode(m_r2)); });
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, AIAgentRunFlowComponent_For_3_Conditional_4_Template, 2, 0, "span", 27);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const m_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("on", ctx_r2.mode === m_r2.key)("soon", !m_r2.enabled);
+    i0.ɵɵproperty("disabled", !m_r2.enabled)("title", m_r2.enabled ? m_r2.label : m_r2.label + " \u2014 coming soon");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", m_r2.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(m_r2.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!m_r2.enabled ? 4 : -1);
+} }
+function AIAgentRunFlowComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "mj-loading", 28);
+    i0.ɵɵelementEnd();
+} }
+function AIAgentRunFlowComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No steps recorded for this run yet.");
+    i0.ɵɵelementEnd()();
+} }
+function AIAgentRunFlowComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "button", 30);
+    i0.ɵɵlistener("click", function AIAgentRunFlowComponent_Conditional_12_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.zoomIn()); });
+    i0.ɵɵelement(2, "i", 31);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 32);
+    i0.ɵɵlistener("click", function AIAgentRunFlowComponent_Conditional_12_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.zoomOut()); });
+    i0.ɵɵelement(4, "i", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 34);
+    i0.ɵɵlistener("click", function AIAgentRunFlowComponent_Conditional_12_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.fitReset()); });
+    i0.ɵɵelement(6, "i", 35);
+    i0.ɵɵelementEnd()();
+} }
+function AIAgentRunFlowComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "aside", 36)(1, "div", 37);
+    i0.ɵɵlistener("mousedown", function AIAgentRunFlowComponent_Conditional_13_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.startResize($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 38)(3, "div", 39);
+    i0.ɵɵtext(4, "Now executing");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "div", 40, 0);
+    i0.ɵɵelementStart(7, "div", 41)(8, "div", 42, 1);
+    i0.ɵɵtext(10, "\uD83E\uDD16");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "h3", null, 2);
+    i0.ɵɵtext(13, "\u2014");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 43, 3);
+    i0.ɵɵtext(16, "Agent run");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 44)(18, "div");
+    i0.ɵɵtext(19, "Duration");
+    i0.ɵɵelementStart(20, "b", null, 4);
+    i0.ɵɵtext(22, "\u2014");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(23, "div");
+    i0.ɵɵtext(24, "Status");
+    i0.ɵɵelementStart(25, "b", null, 5);
+    i0.ɵɵtext(27, "\u2014");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(28, "div");
+    i0.ɵɵtext(29, "Model");
+    i0.ɵɵelementStart(30, "b", null, 6);
+    i0.ɵɵtext(32, "\u2014");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(33, "div", 45);
+    i0.ɵɵelement(34, "div", 46, 7);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(36, "div", 47)(37, "div", 48);
+    i0.ɵɵtext(38, "Execution log");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(39, "div", 49, 8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r2.panelWidth, "px");
+} }
+function AIAgentRunFlowComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "aside", 50)(1, "div", 37);
+    i0.ɵɵlistener("mousedown", function AIAgentRunFlowComponent_Conditional_14_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.startResize($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "mj-ai-agent-run-step-detail", 51);
+    i0.ɵɵlistener("closePanel", function AIAgentRunFlowComponent_Conditional_14_Template_mj_ai_agent_run_step_detail_closePanel_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDetail()); })("navigateToActionLog", function AIAgentRunFlowComponent_Conditional_14_Template_mj_ai_agent_run_step_detail_navigateToActionLog_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDetailNavigateActionLog($event)); })("copyToClipboard", function AIAgentRunFlowComponent_Conditional_14_Template_mj_ai_agent_run_step_detail_copyToClipboard_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDetailCopy($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r2.panelWidth, "px");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("selectedTimelineItem", ctx_r2.selectedStepItem);
+} }
+function AIAgentRunFlowComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "button", 52);
+    i0.ɵɵlistener("click", function AIAgentRunFlowComponent_Conditional_15_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.togglePlay()); });
+    i0.ɵɵelement(2, "i", 26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 53);
+    i0.ɵɵlistener("click", function AIAgentRunFlowComponent_Conditional_15_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.restart()); });
+    i0.ɵɵelement(4, "i", 54);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "input", 55, 9);
+    i0.ɵɵlistener("input", function AIAgentRunFlowComponent_Conditional_15_Template_input_input_5_listener() { i0.ɵɵrestoreView(_r7); const scrub_r8 = i0.ɵɵreference(6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onScrub(scrub_r8.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 56, 10);
+    i0.ɵɵtext(9, "0s / 0s");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 57);
+    i0.ɵɵelement(11, "i", 58);
+    i0.ɵɵelementStart(12, "input", 59);
+    i0.ɵɵlistener("input", function AIAgentRunFlowComponent_Conditional_15_Template_input_input_12_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSpeed($event.target.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "span", 60);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", !ctx_r2.hasData)("title", ctx_r2.playing ? "Pause" : "Play");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.playing ? "fa-pause" : "fa-play");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", !ctx_r2.hasData);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.hasData);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate1("", ctx_r2.speed.toFixed(1), "\u00D7");
+} }
+function AIAgentRunFlowComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵelement(1, "i", 61);
+    i0.ɵɵtext(2, "Hint:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 62);
+    i0.ɵɵtext(4, "Playback is compressed so every step is visible \u2014 real duration shows through heat, size & speed, not literal width.");
+    i0.ɵɵelementEnd();
+} }
+function AIAgentRunFlowComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵelement(1, "i", 61);
+    i0.ɵɵtext(2, "Tip:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 62);
+    i0.ɵɵtext(4, "Drag to pan, scroll to zoom, click any node to inspect it. Layout is the full execution tree, top to bottom.");
+    i0.ɵɵelementEnd();
+} }
+/**
+ * Flow — the playable, zoomed-out execution view for an Agent Run.
+ *
+ * Owns the single master clock (scrub / play / speed) and the narration rail,
+ * and hosts three interchangeable renderers (Flame, Subway, Constellation).
+ * The per-frame loop runs *outside* Angular's zone and pushes updates straight
+ * to the DOM / active renderer, so 60fps playback never triggers change detection.
+ */
+export class AIAgentRunFlowComponent {
+    constructor() {
+        this.agentName = null;
+        this.runStatus = '';
+        this.agentIconClass = null;
+        this.agentLogoUrl = null;
+        this.modes = [
+            { key: 'subway', label: 'Subway Lines', icon: 'fa-train-subway', enabled: true },
+            { key: 'constellation', label: 'Constellation', icon: 'fa-star', enabled: true },
+            { key: 'flow', label: 'Flow', icon: 'fa-diagram-project', enabled: true },
+            { key: 'flame', label: 'Flame Cascade', icon: 'fa-fire', enabled: true }
+        ];
+        this.mode = 'subway';
+        this.model = null;
+        this.playing = false;
+        this.speed = 1;
+        this.loading = true;
+        this.hasData = false;
+        /** Selected node detail (any mode). */
+        this.selectedStepItem = null;
+        this.selectedNodeId = -1;
+        this.logRows = new Map();
+        this.lastActiveRowId = -1;
+        /** Right-panel width (rail / inspector), resizable + persisted per user. Default is 50px wider than the old fixed panel. */
+        this.panelWidth = 410;
+        this.PANEL_KEY = 'mj.agentRunFlow.panelWidth.v1';
+        this.resizing = false;
+        this.resizeStartX = 0;
+        this.resizeStartW = 0;
+        this.destroy$ = new Subject();
+        this.rafId = null;
+        this.p = 0;
+        this.lastTs = 0;
+        this.PLAY_MS = 11000;
+        this.logModelRef = null;
+        this.lastLeafId = -1;
+        this.viewReady = false;
+        this.zone = inject(NgZone);
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    /** The animated modes share the master clock + narration rail; Flow is static. */
+    get isAnimated() { return this.mode !== 'flow'; }
+    /** Rail (now-executing + log tree) shows only for animated modes with nothing selected. */
+    get showRail() { return this.isAnimated && !this.selectedStepItem; }
+    ngAfterViewInit() {
+        this.viewReady = true;
+        const savedW = UserInfoEngine.Instance.GetSetting(this.PANEL_KEY);
+        if (savedW) {
+            const n = +savedW;
+            if (n >= 280)
+                this.panelWidth = Math.min(n, this.maxPanelWidth());
+        }
+        combineLatest([this.dataHelper.steps$, this.dataHelper.loading$])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(([steps, loading]) => {
+            this.loading = loading && steps.length === 0;
+            if (!loading || steps.length > 0)
+                this.rebuildModel();
+            this.cdr.markForCheck();
+        });
+        this.zone.runOutsideAngular(() => {
+            this.rafId = requestAnimationFrame(ts => this.tick(ts));
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.rafId != null)
+            cancelAnimationFrame(this.rafId);
+    }
+    async rebuildModel() {
+        const wasEmpty = !this.model;
+        await AIEngineBase.Instance.EnsureLoaded(); // agent icons/logos read synchronously during build
+        const rootIcon = { iconClass: this.agentIconClass || 'fa-robot', logoUrl: this.agentLogoUrl };
+        const model = await buildFlowModel(this.agentName ?? '', this.runStatus, rootIcon, this.dataHelper);
+        this.model = model;
+        this.hasData = model.leaves.length > 0;
+        if (wasEmpty)
+            this.p = 0;
+        this.lastLeafId = -1;
+        this.cdr.markForCheck();
+    }
+    /* -------------------------------- transport ------------------------------- */
+    togglePlay() {
+        if (!this.hasData)
+            return;
+        if (this.p >= 1)
+            this.p = 0;
+        this.playing = !this.playing;
+        this.lastTs = 0;
+    }
+    restart() {
+        if (!this.hasData)
+            return;
+        this.p = 0;
+        this.playing = true;
+        this.lastTs = 0;
+        this.lastLeafId = -1;
+    }
+    onScrub(value) {
+        this.p = (+value) / 1000;
+        this.playing = false;
+    }
+    onSpeed(value) { this.speed = (+value) / 100; }
+    selectMode(m) {
+        if (!m.enabled)
+            return;
+        this.mode = m.key;
+        this.applyRendererSelection(this.selectedNodeId === -1 ? null : this.selectedNodeId);
+        this.currentRenderer?.ReapplyView?.(); // ensure the now-visible renderer shows its OWN (per-type) zoom
+    }
+    get currentRenderer() {
+        switch (this.mode) {
+            case 'flame': return this.flame;
+            case 'subway': return this.subway;
+            case 'constellation': return this.constellation;
+            case 'flow': return this.flowchart;
+            default: return undefined;
+        }
+    }
+    /* --------------------------- zoom (shared toolbar) ------------------------ */
+    zoomIn() { this.currentRenderer?.ZoomIn?.(); }
+    zoomOut() { this.currentRenderer?.ZoomOut?.(); }
+    fitReset() { this.currentRenderer?.FitReset?.(); }
+    /* ---------------------------- panel resize ------------------------------- */
+    /** Cap the right panel at 75% of the viewport width. */
+    maxPanelWidth() { return Math.max(360, window.innerWidth * 0.75); }
+    startResize(e) {
+        e.preventDefault();
+        this.resizing = true;
+        this.resizeStartX = e.clientX;
+        this.resizeStartW = this.panelWidth;
+        const move = (ev) => {
+            if (!this.resizing)
+                return;
+            const w = this.resizeStartW + (this.resizeStartX - ev.clientX); // drag left → wider
+            this.panelWidth = Math.max(280, Math.min(this.maxPanelWidth(), w));
+            this.cdr.markForCheck();
+        };
+        const up = () => {
+            this.resizing = false;
+            window.removeEventListener('mousemove', move);
+            window.removeEventListener('mouseup', up);
+            UserInfoEngine.Instance.SetSettingDebounced(this.PANEL_KEY, String(Math.round(this.panelWidth)));
+        };
+        window.addEventListener('mousemove', move);
+        window.addEventListener('mouseup', up);
+    }
+    /* -------------------------------- selection ------------------------------ */
+    /** A node was clicked in any renderer (or a log row) — highlight it everywhere and show its detail. */
+    selectStep(n) {
+        this.zone.run(() => {
+            this.selectedNodeId = n.id;
+            this.selectedStepItem = this.toTimelineItem(n);
+            this.cdr.markForCheck();
+        });
+        this.applyRendererSelection(n.id);
+    }
+    closeDetail() {
+        this.zone.run(() => { this.selectedStepItem = null; this.selectedNodeId = -1; this.cdr.markForCheck(); });
+        this.applyRendererSelection(null);
+        this.flowchart?.Deselect();
+    }
+    applyRendererSelection(id) {
+        this.flame?.SetSelected(id);
+        this.subway?.SetSelected(id);
+        this.constellation?.SetSelected(id);
+    }
+    onDetailNavigateActionLog(logId) {
+        SharedService.Instance.OpenEntityRecord('MJ: Action Execution Logs', CompositeKey.FromID(logId));
+    }
+    async onDetailCopy(text) {
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch { /* clipboard unavailable */ }
+    }
+    toTimelineItem(n) {
+        if (!n.raw)
+            return null;
+        return {
+            id: n.raw.ID, type: 'step', title: n.name, subtitle: `Type: ${n.raw.StepType}`,
+            status: n.status, startTime: n.raw.StartedAt, endTime: n.raw.CompletedAt || undefined,
+            duration: formatDuration(n.realDur), icon: 'fa-circle', color: '', data: n.raw, level: n.depth
+        };
+    }
+    /* ------------------------------- master loop ------------------------------ */
+    tick(ts) {
+        const animated = this.isAnimated;
+        if (animated && this.playing && this.hasData) {
+            if (!this.lastTs)
+                this.lastTs = ts;
+            const dt = ts - this.lastTs;
+            this.lastTs = ts;
+            this.p += dt / (this.PLAY_MS / this.speed);
+            if (this.p >= 1) {
+                this.p = 1;
+                this.playing = false;
+                this.zone.run(() => this.cdr.markForCheck());
+            }
+        }
+        else {
+            this.lastTs = 0;
+        }
+        if (this.viewReady && this.model && this.hasData) {
+            if (animated) {
+                this.currentRenderer?.Render(this.p, ts);
+                this.updateRail(ts);
+            }
+            else {
+                // Flow (static): just ensure the flowchart is built; no clock.
+                this.flowchart?.Render(0, ts);
+            }
+        }
+        this.rafId = requestAnimationFrame(t => this.tick(t));
+    }
+    /* ------------------------------ narration rail ---------------------------- */
+    updateRail(_ts) {
+        const m = this.model;
+        // (Re)populate the imperative rail content whenever the rail DOM is fresh
+        // (the @if remounted it with template defaults) or the model changed. Without
+        // this, a remount at run-completion leaves an empty log + a blank now-card.
+        if (this.loglistRef &&
+            (this.logModelRef !== m || (this.loglistRef.nativeElement.childElementCount === 0 && m.nodes.length > 1))) {
+            this.buildLogTree();
+            this.logModelRef = m;
+            this.lastLeafId = -1; // force the now-card to repopulate the fresh DOM
+        }
+        const leaf = activeLeaf(m, this.p);
+        const prog = this.p >= leaf.t1 ? 1 : Math.max(0, (this.p - leaf.t0) / (leaf.t1 - leaf.t0));
+        if (this.scrubRef)
+            this.scrubRef.nativeElement.value = String(Math.round(this.p * 1000));
+        if (this.clockRef) {
+            const realT = this.p >= 1 ? m.total : leaf.r0 + prog * leaf.realDur;
+            this.clockRef.nativeElement.textContent = `${formatDuration(realT)} / ${formatDuration(m.total)}`;
+        }
+        if (this.nowBarRef)
+            this.nowBarRef.nativeElement.style.width = `${prog * 100}%`;
+        if (leaf.id !== this.lastLeafId) {
+            this.lastLeafId = leaf.id;
+            this.refreshNowCard(leaf);
+        }
+        if (this.nowStatRef) {
+            this.nowStatRef.nativeElement.textContent = this.p >= 1 ? 'done' : (this.p > leaf.t0 ? 'running' : 'starting');
+        }
+        if (this.loglistRef)
+            this.updateLogTree();
+    }
+    refreshNowCard(leaf) {
+        const col = FLOW_COLORS[leaf.type];
+        if (this.nowIcoRef)
+            this.nowIcoRef.nativeElement.textContent = FLOW_EMOJI[leaf.type];
+        if (this.nowNameRef)
+            this.nowNameRef.nativeElement.textContent = leaf.name;
+        if (this.nowTypeRef) {
+            this.nowTypeRef.nativeElement.textContent = FLOW_LABEL[leaf.type];
+            this.nowTypeRef.nativeElement.style.color = col;
+        }
+        if (this.nowDurRef)
+            this.nowDurRef.nativeElement.textContent = formatDuration(leaf.realDur);
+        if (this.nowModelRef)
+            this.nowModelRef.nativeElement.textContent = leaf.model ?? '—';
+        if (this.crumbRef) {
+            const chain = ancestors(leaf);
+            this.crumbRef.nativeElement.innerHTML = chain.map((n, i) => `${i ? '<span class="sep">›</span>' : ''}<span style="color:${FLOW_COLORS[n.type]}">${FLOW_EMOJI[n.type]} ${this.escape(n.name)}</span>`).join('');
+        }
+    }
+    /* ------------------------------ log tree (rail) --------------------------- */
+    /** Build a clickable indented tree of every step, mirroring the run hierarchy. */
+    buildLogTree() {
+        const list = this.loglistRef.nativeElement;
+        list.innerHTML = '';
+        this.logRows.clear();
+        this.lastActiveRowId = -1;
+        const m = this.model;
+        for (const n of m.nodes) {
+            if (n.depth === 0)
+                continue; // skip the synthetic root (it's the header)
+            const col = FLOW_COLORS[n.type];
+            const row = document.createElement('div');
+            row.className = 'ftree-row';
+            row.style.paddingLeft = `${6 + (n.depth - 1) * 15}px`;
+            const ico = n.logoUrl
+                ? `<img class="ftree-logo" src="${this.escape(n.logoUrl)}" alt=""/>`
+                : `<i class="ftree-ico fa-solid ${this.escape(n.iconClass)}" style="color:${col}"></i>`;
+            row.innerHTML = ico +
+                `<span class="ftree-name">${this.escape(shortLabel(n))}</span>` +
+                `<span class="ftree-dur">${formatDuration(n.realDur)}</span>`;
+            row.addEventListener('click', () => this.selectStep(n));
+            list.appendChild(row);
+            this.logRows.set(n.id, row);
+        }
+    }
+    /** Sync each log row's state (pending / running / done / selected) with the clock. */
+    updateLogTree() {
+        const m = this.model;
+        for (const n of m.nodes) {
+            if (n.depth === 0)
+                continue;
+            const row = this.logRows.get(n.id);
+            if (!row)
+                continue;
+            const started = this.p >= n.t0;
+            const active = started && this.p < n.t1;
+            row.classList.toggle('ftree-pending', !started);
+            row.classList.toggle('ftree-active', active);
+            row.classList.toggle('ftree-done', this.p >= n.t1);
+            row.classList.toggle('ftree-selected', n.id === this.selectedNodeId);
+            if (active && n.id !== this.lastActiveRowId && !n.children.length) {
+                this.lastActiveRowId = n.id;
+                row.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }
+    escape(s) {
+        return s.replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c] ?? c));
+    }
+    static { this.ɵfac = function AIAgentRunFlowComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AIAgentRunFlowComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunFlowComponent, selectors: [["mj-ai-agent-run-flow"]], viewQuery: function AIAgentRunFlowComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(FlameCascadeComponent, 5)(SubwayLinesComponent, 5)(ConstellationComponent, 5)(FlowchartComponent, 5)(_c0, 5)(_c1, 5)(_c2, 5)(_c3, 5)(_c4, 5)(_c5, 5)(_c6, 5)(_c7, 5)(_c8, 5)(_c9, 5)(_c10, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flame = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.subway = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.constellation = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flowchart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrubRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clockRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.crumbRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nowIcoRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nowNameRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nowTypeRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nowDurRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nowModelRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nowStatRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nowBarRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loglistRef = _t.first);
+        } }, inputs: { aiAgentRunId: "aiAgentRunId", dataHelper: "dataHelper", agentName: "agentName", runStatus: "runStatus", agentIconClass: "agentIconClass", agentLogoUrl: "agentLogoUrl" }, standalone: false, decls: 19, vars: 18, consts: [["crumb", ""], ["nowIco", ""], ["nowName", ""], ["nowType", ""], ["nowDur", ""], ["nowStat", ""], ["nowModel", ""], ["nowBar", ""], ["loglist", ""], ["scrub", ""], ["clock", ""], [1, "flow-cockpit"], [1, "flow-modes"], [1, "flow-mode", 3, "on", "soon", "disabled", "title"], [1, "flow-main"], [1, "flow-stage"], [1, "flow-overlay"], [1, "flow-overlay", "flow-empty"], [3, "nodeSelected", "Model"], [3, "nodeSelected", "selectionCleared", "Model"], [1, "flow-zoom"], [1, "flow-rail", 3, "width"], [1, "flow-detail", 3, "width"], [1, "flow-transport"], [1, "flow-legend"], [1, "flow-mode", 3, "click", "disabled", "title"], [1, "fas", 3, "ngClass"], [1, "soon-tag"], ["text", "Building flow\u2026"], [1, "fas", "fa-wind"], ["title", "Zoom in", 1, "fz-btn", 3, "click"], [1, "fas", "fa-magnifying-glass-plus"], ["title", "Zoom out", 1, "fz-btn", 3, "click"], [1, "fas", "fa-magnifying-glass-minus"], ["title", "Fit to view", 1, "fz-btn", 3, "click"], [1, "fas", "fa-expand"], [1, "flow-rail"], ["title", "Drag to resize", 1, "flow-resizer", 3, "mousedown"], [1, "now"], [1, "rail-lbl"], [1, "breadcrumb"], [1, "nowcard"], [1, "ico"], [1, "type"], [1, "meta"], [1, "barbg"], [1, "barfg"], [1, "log"], [1, "rail-lbl", "sticky"], [1, "loglist"], [1, "flow-detail"], [3, "closePanel", "navigateToActionLog", "copyToClipboard", "selectedTimelineItem"], [1, "pbtn", 3, "click", "disabled", "title"], ["title", "Restart", 1, "ibtn", 3, "click", "disabled"], [1, "fas", "fa-rotate-left"], ["type", "range", "min", "0", "max", "1000", "value", "0", 1, "scrub", 3, "input", "disabled"], [1, "clock"], [1, "speedbox"], [1, "fas", "fa-gauge-high"], ["type", "range", "min", "25", "max", "300", "value", "100", 1, "speed", 3, "input"], [1, "spdval"], [1, "lg", 2, "background", "var(--mj-text-muted)"], [1, "legend-note"]], template: function AIAgentRunFlowComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 11)(1, "div", 12);
+            i0.ɵɵrepeaterCreate(2, AIAgentRunFlowComponent_For_3_Template, 5, 9, "button", 13, _forTrack0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 14)(5, "div", 15);
+            i0.ɵɵconditionalCreate(6, AIAgentRunFlowComponent_Conditional_6_Template, 2, 0, "div", 16)(7, AIAgentRunFlowComponent_Conditional_7_Template, 4, 0, "div", 17);
+            i0.ɵɵelementStart(8, "mj-agent-flow-flame", 18);
+            i0.ɵɵlistener("nodeSelected", function AIAgentRunFlowComponent_Template_mj_agent_flow_flame_nodeSelected_8_listener($event) { return ctx.selectStep($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "mj-agent-flow-subway", 18);
+            i0.ɵɵlistener("nodeSelected", function AIAgentRunFlowComponent_Template_mj_agent_flow_subway_nodeSelected_9_listener($event) { return ctx.selectStep($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "mj-agent-flow-constellation", 18);
+            i0.ɵɵlistener("nodeSelected", function AIAgentRunFlowComponent_Template_mj_agent_flow_constellation_nodeSelected_10_listener($event) { return ctx.selectStep($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "mj-agent-flow-flowchart", 19);
+            i0.ɵɵlistener("nodeSelected", function AIAgentRunFlowComponent_Template_mj_agent_flow_flowchart_nodeSelected_11_listener($event) { return ctx.selectStep($event); })("selectionCleared", function AIAgentRunFlowComponent_Template_mj_agent_flow_flowchart_selectionCleared_11_listener() { return ctx.closeDetail(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(12, AIAgentRunFlowComponent_Conditional_12_Template, 7, 0, "div", 20);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(13, AIAgentRunFlowComponent_Conditional_13_Template, 41, 2, "aside", 21);
+            i0.ɵɵconditionalCreate(14, AIAgentRunFlowComponent_Conditional_14_Template, 3, 3, "aside", 22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(15, AIAgentRunFlowComponent_Conditional_15_Template, 15, 6, "div", 23);
+            i0.ɵɵelementStart(16, "div", 24);
+            i0.ɵɵconditionalCreate(17, AIAgentRunFlowComponent_Conditional_17_Template, 5, 0)(18, AIAgentRunFlowComponent_Conditional_18_Template, 5, 0);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.modes);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.loading ? 6 : !ctx.hasData ? 7 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("flow-hidden", ctx.mode !== "flame");
+            i0.ɵɵproperty("Model", ctx.model);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("flow-hidden", ctx.mode !== "subway");
+            i0.ɵɵproperty("Model", ctx.model);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("flow-hidden", ctx.mode !== "constellation");
+            i0.ɵɵproperty("Model", ctx.model);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("flow-hidden", ctx.mode !== "flow");
+            i0.ɵɵproperty("Model", ctx.model);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.hasData ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showRail ? 13 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedStepItem ? 14 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isAnimated ? 15 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isAnimated ? 17 : 18);
+        } }, dependencies: [i1.NgClass, i2.LoadingComponent, i3.AIAgentRunStepDetailComponent, i4.FlameCascadeComponent, i5.SubwayLinesComponent, i6.ConstellationComponent, i7.FlowchartComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n.flow-cockpit[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n\n\n.flow-modes[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  padding: 10px 14px;\n  flex-wrap: wrap;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.flow-mode[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 999px;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  font-size: 12.5px;\n  cursor: pointer;\n  transition: 0.15s;\n}\n.flow-mode[_ngcontent-%COMP%]:hover:not(:disabled) { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n.flow-mode.on[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 14px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n.flow-mode.soon[_ngcontent-%COMP%] { cursor: not-allowed; opacity: 0.6; }\n.soon-tag[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  padding: 2px 6px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n  color: var(--mj-text-muted);\n}\n\n\n\n.flow-main[_ngcontent-%COMP%] { flex: 1; display: flex; min-height: 0; }\n\n.flow-stage[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background:\n    radial-gradient(900px 520px at 72% -8%,\n      color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface-sunken)) 0%,\n      var(--mj-bg-surface-sunken) 60%);\n}\n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-flame[_ngcontent-%COMP%], \n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-subway[_ngcontent-%COMP%], \n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-constellation[_ngcontent-%COMP%] {\n  display: block;\n  position: absolute;\n  inset: 0;\n  padding: 10px 14px;\n}\n.flow-stage[_ngcontent-%COMP%]   mj-agent-flow-flowchart[_ngcontent-%COMP%] {\n  display: block;\n  position: absolute;\n  inset: 0;\n}\n.flow-hidden[_ngcontent-%COMP%] { display: none !important; }\n\n\n\n.flow-zoom[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 14px;\n  z-index: 5;\n  display: flex;\n  gap: 6px;\n}\n.fz-btn[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 34px;\n  border-radius: 9px;\n  border: 1px solid var(--mj-border-default);\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 88%, transparent);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  font-size: 13px;\n  backdrop-filter: blur(4px);\n}\n.fz-btn[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n\n\n\n.flow-resizer[_ngcontent-%COMP%] {\n  position: absolute;\n  left: -3px;\n  top: 0;\n  width: 7px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 6;\n}\n.flow-resizer[_ngcontent-%COMP%]:hover { background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent); }\n\n\n\n.flow-detail[_ngcontent-%COMP%] {\n  position: relative;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  display: flex;\n}\n\n\n\n.flow-detail[_ngcontent-%COMP%]    > mj-ai-agent-run-step-detail[_ngcontent-%COMP%] { flex: 1 1 auto; min-width: 0; }\n\n.flow-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 70%, transparent);\n}\n.flow-empty[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.flow-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 34px; opacity: 0.5; }\n\n\n\n.flow-rail[_ngcontent-%COMP%] {\n  position: relative;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.now[_ngcontent-%COMP%] { padding: 16px; }\n.rail-lbl[_ngcontent-%COMP%] {\n  font-size: 10px;\n  letter-spacing: 1.4px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n}\n.breadcrumb[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin: 8px 0 12px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.breadcrumb[_ngcontent-%COMP%]   .sep[_ngcontent-%COMP%] { opacity: 0.5; }\n.nowcard[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n.nowcard[_ngcontent-%COMP%]   .ico[_ngcontent-%COMP%] { font-size: 26px; line-height: 1; }\n.nowcard[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { margin: 8px 0 2px; font-size: 17px; color: var(--mj-text-primary); }\n.nowcard[_ngcontent-%COMP%]   .type[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mj-text-secondary); }\n.nowcard[_ngcontent-%COMP%]   .meta[_ngcontent-%COMP%] { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--mj-text-secondary); }\n.nowcard[_ngcontent-%COMP%]   .meta[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { display: block; color: var(--mj-text-primary); font-size: 15px; font-variant-numeric: tabular-nums; }\n.barbg[_ngcontent-%COMP%] { height: 6px; border-radius: 6px; background: var(--mj-border-default); margin-top: 14px; overflow: hidden; }\n.barfg[_ngcontent-%COMP%] {\n  height: 100%;\n  width: 0;\n  background: linear-gradient(90deg, var(--mj-brand-primary), color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface)));\n}\n.log[_ngcontent-%COMP%] { flex: 1; overflow: auto; padding: 0 14px 16px; }\n.rail-lbl.sticky[_ngcontent-%COMP%] { position: sticky; top: 0; background: var(--mj-bg-surface); padding: 10px 0 8px; z-index: 1; }\n\n\n\n\n[_nghost-%COMP%]     .flogitem {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 9px;\n  border-radius: 8px;\n  margin-bottom: 3px;\n  font-size: 11.5px;\n  line-height: 1.25;\n  border: 1px solid transparent;\n}\n[_nghost-%COMP%]     .flogitem .flog-ico { flex: 0 0 auto; font-size: 11px; }\n[_nghost-%COMP%]     .flogitem .flog-name {\n  flex: 1 1 auto;\n  min-width: 0;\n  color: var(--mj-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[_nghost-%COMP%]     .flogitem .flog-dur {\n  flex: 0 0 auto;\n  color: var(--mj-text-muted);\n  font-variant-numeric: tabular-nums;\n  font-size: 10.5px;\n}\n[_nghost-%COMP%]     .flogitem.heat {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n[_nghost-%COMP%]     .breadcrumb .sep { opacity: 0.5; margin: 0 1px; }\n\n\n\n[_nghost-%COMP%]     .ftree-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 5px 8px;\n  border-radius: 7px;\n  margin-bottom: 1px;\n  font-size: 11.5px;\n  line-height: 1.25;\n  cursor: pointer;\n  border-left: 2px solid transparent;\n}\n[_nghost-%COMP%]     .ftree-row:hover { background: var(--mj-bg-surface-hover); }\n[_nghost-%COMP%]     .ftree-ico { flex: 0 0 14px; width: 14px; text-align: center; font-size: 11px; }\n[_nghost-%COMP%]     .ftree-logo { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }\n[_nghost-%COMP%]     .ftree-name {\n  flex: 1 1 auto; min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n  color: var(--mj-text-secondary);\n}\n[_nghost-%COMP%]     .ftree-dur { flex: 0 0 auto; color: var(--mj-text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }\n[_nghost-%COMP%]     .ftree-row.ftree-pending { opacity: 0.5; }\n[_nghost-%COMP%]     .ftree-row.ftree-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border-left-color: var(--mj-brand-primary);\n}\n[_nghost-%COMP%]     .ftree-row.ftree-active .ftree-name { color: var(--mj-text-primary); font-weight: 600; }\n[_nghost-%COMP%]     .ftree-row.ftree-selected {\n  background: var(--mj-bg-surface-hover);\n  border-left-color: var(--mj-brand-primary);\n}\n[_nghost-%COMP%]     .ftree-row.ftree-selected .ftree-name { color: var(--mj-text-primary); }\n\n\n\n.flow-transport[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.pbtn[_ngcontent-%COMP%] {\n  width: 42px;\n  height: 42px;\n  border-radius: 50%;\n  border: none;\n  cursor: pointer;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 15px;\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transition: 0.15s;\n}\n.pbtn[_ngcontent-%COMP%]:hover:not(:disabled) { transform: translateY(-1px); }\n.pbtn[_ngcontent-%COMP%]:disabled, .ibtn[_ngcontent-%COMP%]:disabled { opacity: 0.45; cursor: not-allowed; }\n.ibtn[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n.ibtn[_ngcontent-%COMP%]:hover:not(:disabled) { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n\ninput[type=range].scrub[_ngcontent-%COMP%], input[type=range].speed[_ngcontent-%COMP%] {\n  -webkit-appearance: none;\n  appearance: none;\n  height: 6px;\n  border-radius: 6px;\n  background: var(--mj-border-default);\n  outline: none;\n  cursor: pointer;\n}\ninput[type=range].scrub[_ngcontent-%COMP%] { flex: 1; }\ninput[type=range].speed[_ngcontent-%COMP%] { width: 90px; }\ninput[type=range][_ngcontent-%COMP%]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-brand-primary);\n  cursor: pointer;\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 60%, transparent);\n}\ninput[type=range][_ngcontent-%COMP%]::-moz-range-thumb {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-brand-primary);\n  cursor: pointer;\n}\n.clock[_ngcontent-%COMP%] {\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  font-size: 14px;\n  min-width: 116px;\n  text-align: center;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 9px;\n  padding: 7px 10px;\n}\n.speedbox[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; color: var(--mj-text-muted); font-size: 12px; }\n.spdval[_ngcontent-%COMP%] { min-width: 34px; font-variant-numeric: tabular-nums; }\n\n\n\n.flow-legend[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 18px;\n  border-top: 1px solid var(--mj-border-subtle);\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.flow-legend[_ngcontent-%COMP%]   .lg[_ngcontent-%COMP%] { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }\n.legend-note[_ngcontent-%COMP%] { color: var(--mj-text-muted); }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunFlowComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-ai-agent-run-flow', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flow-cockpit\">\n  <!-- mode segmented control -->\n  <div class=\"flow-modes\">\n    @for (m of modes; track m.key) {\n      <button class=\"flow-mode\" [class.on]=\"mode === m.key\" [class.soon]=\"!m.enabled\"\n              [disabled]=\"!m.enabled\" (click)=\"selectMode(m)\"\n              [title]=\"m.enabled ? m.label : m.label + ' \u2014 coming soon'\">\n        <i class=\"fas\" [ngClass]=\"m.icon\"></i>\n        <span>{{ m.label }}</span>\n        @if (!m.enabled) { <span class=\"soon-tag\">Soon</span> }\n      </button>\n    }\n  </div>\n\n  <div class=\"flow-main\">\n    <!-- stage -->\n    <div class=\"flow-stage\">\n      @if (loading) {\n        <div class=\"flow-overlay\"><mj-loading text=\"Building flow\u2026\"></mj-loading></div>\n      } @else if (!hasData) {\n        <div class=\"flow-overlay flow-empty\">\n          <i class=\"fas fa-wind\"></i>\n          <p>No steps recorded for this run yet.</p>\n        </div>\n      }\n\n      <mj-agent-flow-flame [class.flow-hidden]=\"mode !== 'flame'\" [Model]=\"model\" (nodeSelected)=\"selectStep($event)\"></mj-agent-flow-flame>\n      <mj-agent-flow-subway [class.flow-hidden]=\"mode !== 'subway'\" [Model]=\"model\" (nodeSelected)=\"selectStep($event)\"></mj-agent-flow-subway>\n      <mj-agent-flow-constellation [class.flow-hidden]=\"mode !== 'constellation'\" [Model]=\"model\" (nodeSelected)=\"selectStep($event)\"></mj-agent-flow-constellation>\n      <mj-agent-flow-flowchart [class.flow-hidden]=\"mode !== 'flow'\" [Model]=\"model\"\n                               (nodeSelected)=\"selectStep($event)\"\n                               (selectionCleared)=\"closeDetail()\"></mj-agent-flow-flowchart>\n\n      @if (hasData) {\n        <div class=\"flow-zoom\">\n          <button class=\"fz-btn\" (click)=\"zoomIn()\" title=\"Zoom in\"><i class=\"fas fa-magnifying-glass-plus\"></i></button>\n          <button class=\"fz-btn\" (click)=\"zoomOut()\" title=\"Zoom out\"><i class=\"fas fa-magnifying-glass-minus\"></i></button>\n          <button class=\"fz-btn\" (click)=\"fitReset()\" title=\"Fit to view\"><i class=\"fas fa-expand\"></i></button>\n        </div>\n      }\n    </div>\n\n    <!-- narration rail (animated modes, nothing selected) -->\n    @if (showRail) {\n      <aside class=\"flow-rail\" [style.width.px]=\"panelWidth\">\n        <div class=\"flow-resizer\" (mousedown)=\"startResize($event)\" title=\"Drag to resize\"></div>\n        <div class=\"now\">\n          <div class=\"rail-lbl\">Now executing</div>\n          <div class=\"breadcrumb\" #crumb></div>\n          <div class=\"nowcard\">\n            <div class=\"ico\" #nowIco>\uD83E\uDD16</div>\n            <h3 #nowName>\u2014</h3>\n            <div class=\"type\" #nowType>Agent run</div>\n            <div class=\"meta\">\n              <div>Duration<b #nowDur>\u2014</b></div>\n              <div>Status<b #nowStat>\u2014</b></div>\n              <div>Model<b #nowModel>\u2014</b></div>\n            </div>\n            <div class=\"barbg\"><div class=\"barfg\" #nowBar></div></div>\n          </div>\n        </div>\n        <div class=\"log\">\n          <div class=\"rail-lbl sticky\">Execution log</div>\n          <div #loglist class=\"loglist\"></div>\n        </div>\n      </aside>\n    }\n\n    <!-- step inspector (any mode) -->\n    @if (selectedStepItem) {\n      <aside class=\"flow-detail\" [style.width.px]=\"panelWidth\">\n        <div class=\"flow-resizer\" (mousedown)=\"startResize($event)\" title=\"Drag to resize\"></div>\n        <mj-ai-agent-run-step-detail\n          [selectedTimelineItem]=\"selectedStepItem\"\n          (closePanel)=\"closeDetail()\"\n          (navigateToActionLog)=\"onDetailNavigateActionLog($event)\"\n          (copyToClipboard)=\"onDetailCopy($event)\">\n        </mj-ai-agent-run-step-detail>\n      </aside>\n    }\n  </div>\n\n  <!-- transport (animated modes only) -->\n  @if (isAnimated) {\n  <div class=\"flow-transport\">\n    <button class=\"pbtn\" (click)=\"togglePlay()\" [disabled]=\"!hasData\" [title]=\"playing ? 'Pause' : 'Play'\">\n      <i class=\"fas\" [ngClass]=\"playing ? 'fa-pause' : 'fa-play'\"></i>\n    </button>\n    <button class=\"ibtn\" (click)=\"restart()\" [disabled]=\"!hasData\" title=\"Restart\">\n      <i class=\"fas fa-rotate-left\"></i>\n    </button>\n    <input #scrub class=\"scrub\" type=\"range\" min=\"0\" max=\"1000\" value=\"0\"\n           [disabled]=\"!hasData\" (input)=\"onScrub(scrub.value)\"/>\n    <div class=\"clock\" #clock>0s / 0s</div>\n    <div class=\"speedbox\">\n      <i class=\"fas fa-gauge-high\"></i>\n      <input class=\"speed\" type=\"range\" min=\"25\" max=\"300\" value=\"100\" (input)=\"onSpeed($any($event.target).value)\"/>\n      <span class=\"spdval\">{{ speed.toFixed(1) }}\u00D7</span>\n    </div>\n  </div>\n  }\n\n  <!-- legend / hint -->\n  <div class=\"flow-legend\">\n    @if (isAnimated) {\n      <span><i class=\"lg\" style=\"background: var(--mj-text-muted)\"></i>Hint:</span>\n      <span class=\"legend-note\">Playback is compressed so every step is visible \u2014 real duration shows through heat, size &amp; speed, not literal width.</span>\n    } @else {\n      <span><i class=\"lg\" style=\"background: var(--mj-text-muted)\"></i>Tip:</span>\n      <span class=\"legend-note\">Drag to pan, scroll to zoom, click any node to inspect it. Layout is the full execution tree, top to bottom.</span>\n    }\n  </div>\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n.flow-cockpit {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n/* ---------------- mode segmented control ---------------- */\n.flow-modes {\n  display: flex;\n  gap: 6px;\n  padding: 10px 14px;\n  flex-wrap: wrap;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.flow-mode {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 999px;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  font-size: 12.5px;\n  cursor: pointer;\n  transition: 0.15s;\n}\n.flow-mode:hover:not(:disabled) { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n.flow-mode.on {\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 14px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n.flow-mode.soon { cursor: not-allowed; opacity: 0.6; }\n.soon-tag {\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  padding: 2px 6px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--mj-text-muted) 20%, transparent);\n  color: var(--mj-text-muted);\n}\n\n/* ---------------- main: stage + rail ---------------- */\n.flow-main { flex: 1; display: flex; min-height: 0; }\n\n.flow-stage {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background:\n    radial-gradient(900px 520px at 72% -8%,\n      color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface-sunken)) 0%,\n      var(--mj-bg-surface-sunken) 60%);\n}\n.flow-stage mj-agent-flow-flame,\n.flow-stage mj-agent-flow-subway,\n.flow-stage mj-agent-flow-constellation {\n  display: block;\n  position: absolute;\n  inset: 0;\n  padding: 10px 14px;\n}\n.flow-stage mj-agent-flow-flowchart {\n  display: block;\n  position: absolute;\n  inset: 0;\n}\n.flow-hidden { display: none !important; }\n\n/* shared zoom toolbar (all modes) */\n.flow-zoom {\n  position: absolute;\n  top: 12px;\n  right: 14px;\n  z-index: 5;\n  display: flex;\n  gap: 6px;\n}\n.fz-btn {\n  width: 34px;\n  height: 34px;\n  border-radius: 9px;\n  border: 1px solid var(--mj-border-default);\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 88%, transparent);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  font-size: 13px;\n  backdrop-filter: blur(4px);\n}\n.fz-btn:hover { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n\n/* draggable resize handle on the left edge of the right panel */\n.flow-resizer {\n  position: absolute;\n  left: -3px;\n  top: 0;\n  width: 7px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 6;\n}\n.flow-resizer:hover { background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent); }\n\n/* step inspector (Flow / static mode) */\n.flow-detail {\n  position: relative;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  display: flex;\n}\n/* size only the content child \u2014 NOT the absolutely-positioned resize handle,\n   which a universal `> *` selector would balloon to full width and trap clicks */\n.flow-detail > mj-ai-agent-run-step-detail { flex: 1 1 auto; min-width: 0; }\n\n.flow-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 70%, transparent);\n}\n.flow-empty { color: var(--mj-text-muted); }\n.flow-empty i { font-size: 34px; opacity: 0.5; }\n\n/* ---------------- narration rail ---------------- */\n.flow-rail {\n  position: relative;\n  flex-shrink: 0;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.now { padding: 16px; }\n.rail-lbl {\n  font-size: 10px;\n  letter-spacing: 1.4px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n}\n.breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin: 8px 0 12px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.breadcrumb .sep { opacity: 0.5; }\n.nowcard {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n.nowcard .ico { font-size: 26px; line-height: 1; }\n.nowcard h3 { margin: 8px 0 2px; font-size: 17px; color: var(--mj-text-primary); }\n.nowcard .type { font-size: 12px; font-weight: 600; color: var(--mj-text-secondary); }\n.nowcard .meta { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--mj-text-secondary); }\n.nowcard .meta b { display: block; color: var(--mj-text-primary); font-size: 15px; font-variant-numeric: tabular-nums; }\n.barbg { height: 6px; border-radius: 6px; background: var(--mj-border-default); margin-top: 14px; overflow: hidden; }\n.barfg {\n  height: 100%;\n  width: 0;\n  background: linear-gradient(90deg, var(--mj-brand-primary), color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface)));\n}\n.log { flex: 1; overflow: auto; padding: 0 14px 16px; }\n.rail-lbl.sticky { position: sticky; top: 0; background: var(--mj-bg-surface); padding: 10px 0 8px; z-index: 1; }\n\n/* Log rows are injected via innerHTML (no Angular encapsulation attribute),\n   so these must pierce emulated encapsulation with ::ng-deep. */\n:host ::ng-deep .flogitem {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 9px;\n  border-radius: 8px;\n  margin-bottom: 3px;\n  font-size: 11.5px;\n  line-height: 1.25;\n  border: 1px solid transparent;\n}\n:host ::ng-deep .flogitem .flog-ico { flex: 0 0 auto; font-size: 11px; }\n:host ::ng-deep .flogitem .flog-name {\n  flex: 1 1 auto;\n  min-width: 0;\n  color: var(--mj-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n:host ::ng-deep .flogitem .flog-dur {\n  flex: 0 0 auto;\n  color: var(--mj-text-muted);\n  font-variant-numeric: tabular-nums;\n  font-size: 10.5px;\n}\n:host ::ng-deep .flogitem.heat {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n:host ::ng-deep .breadcrumb .sep { opacity: 0.5; margin: 0 1px; }\n\n/* clickable indented log tree (rows injected via innerHTML) */\n:host ::ng-deep .ftree-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 5px 8px;\n  border-radius: 7px;\n  margin-bottom: 1px;\n  font-size: 11.5px;\n  line-height: 1.25;\n  cursor: pointer;\n  border-left: 2px solid transparent;\n}\n:host ::ng-deep .ftree-row:hover { background: var(--mj-bg-surface-hover); }\n:host ::ng-deep .ftree-ico { flex: 0 0 14px; width: 14px; text-align: center; font-size: 11px; }\n:host ::ng-deep .ftree-logo { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }\n:host ::ng-deep .ftree-name {\n  flex: 1 1 auto; min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n  color: var(--mj-text-secondary);\n}\n:host ::ng-deep .ftree-dur { flex: 0 0 auto; color: var(--mj-text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }\n:host ::ng-deep .ftree-row.ftree-pending { opacity: 0.5; }\n:host ::ng-deep .ftree-row.ftree-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  border-left-color: var(--mj-brand-primary);\n}\n:host ::ng-deep .ftree-row.ftree-active .ftree-name { color: var(--mj-text-primary); font-weight: 600; }\n:host ::ng-deep .ftree-row.ftree-selected {\n  background: var(--mj-bg-surface-hover);\n  border-left-color: var(--mj-brand-primary);\n}\n:host ::ng-deep .ftree-row.ftree-selected .ftree-name { color: var(--mj-text-primary); }\n\n/* ---------------- transport ---------------- */\n.flow-transport {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.pbtn {\n  width: 42px;\n  height: 42px;\n  border-radius: 50%;\n  border: none;\n  cursor: pointer;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 15px;\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transition: 0.15s;\n}\n.pbtn:hover:not(:disabled) { transform: translateY(-1px); }\n.pbtn:disabled, .ibtn:disabled { opacity: 0.45; cursor: not-allowed; }\n.ibtn {\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n.ibtn:hover:not(:disabled) { color: var(--mj-text-primary); border-color: var(--mj-brand-primary); }\n\ninput[type=range].scrub, input[type=range].speed {\n  -webkit-appearance: none;\n  appearance: none;\n  height: 6px;\n  border-radius: 6px;\n  background: var(--mj-border-default);\n  outline: none;\n  cursor: pointer;\n}\ninput[type=range].scrub { flex: 1; }\ninput[type=range].speed { width: 90px; }\ninput[type=range]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-brand-primary);\n  cursor: pointer;\n  box-shadow: 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 60%, transparent);\n}\ninput[type=range]::-moz-range-thumb {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-brand-primary);\n  cursor: pointer;\n}\n.clock {\n  font-variant-numeric: tabular-nums;\n  font-weight: 700;\n  font-size: 14px;\n  min-width: 116px;\n  text-align: center;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 9px;\n  padding: 7px 10px;\n}\n.speedbox { display: flex; align-items: center; gap: 8px; color: var(--mj-text-muted); font-size: 12px; }\n.spdval { min-width: 34px; font-variant-numeric: tabular-nums; }\n\n/* ---------------- legend ---------------- */\n.flow-legend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 18px;\n  border-top: 1px solid var(--mj-border-subtle);\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.flow-legend .lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }\n.legend-note { color: var(--mj-text-muted); }\n"] }]
+    }], null, { aiAgentRunId: [{
+            type: Input
+        }], dataHelper: [{
+            type: Input
+        }], agentName: [{
+            type: Input
+        }], runStatus: [{
+            type: Input
+        }], agentIconClass: [{
+            type: Input
+        }], agentLogoUrl: [{
+            type: Input
+        }], flame: [{
+            type: ViewChild,
+            args: [FlameCascadeComponent]
+        }], subway: [{
+            type: ViewChild,
+            args: [SubwayLinesComponent]
+        }], constellation: [{
+            type: ViewChild,
+            args: [ConstellationComponent]
+        }], flowchart: [{
+            type: ViewChild,
+            args: [FlowchartComponent]
+        }], scrubRef: [{
+            type: ViewChild,
+            args: ['scrub']
+        }], clockRef: [{
+            type: ViewChild,
+            args: ['clock']
+        }], crumbRef: [{
+            type: ViewChild,
+            args: ['crumb']
+        }], nowIcoRef: [{
+            type: ViewChild,
+            args: ['nowIco']
+        }], nowNameRef: [{
+            type: ViewChild,
+            args: ['nowName']
+        }], nowTypeRef: [{
+            type: ViewChild,
+            args: ['nowType']
+        }], nowDurRef: [{
+            type: ViewChild,
+            args: ['nowDur']
+        }], nowModelRef: [{
+            type: ViewChild,
+            args: ['nowModel']
+        }], nowStatRef: [{
+            type: ViewChild,
+            args: ['nowStat']
+        }], nowBarRef: [{
+            type: ViewChild,
+            args: ['nowBar']
+        }], loglistRef: [{
+            type: ViewChild,
+            args: ['loglist']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunFlowComponent, { className: "AIAgentRunFlowComponent", filePath: "src/lib/custom/ai-agent-run/flow/agent-run-flow.component.ts", lineNumber: 40 }); })();
+//# sourceMappingURL=agent-run-flow.component.js.map