@memberjunction/ng-core-entity-forms 6.1.4 → 6.2.0-edge.1

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

@@ -6,10 +6,10 @@ 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 { 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 { buildFlowModelFromTree } from './run-tree-flow-projection';
+import { BuildFlowModelFromTree } from './run-tree-flow-projection';
 import { ConstellationComponent } from './constellation.component';
 import { FlowchartComponent } from './flowchart.component';
 import * as i0 from "@angular/core";
@@ -210,30 +210,30 @@ function AIAgentRunFlowComponent_Conditional_18_Template(rf, ctx) { if (rf & 1)
  */
 export class AIAgentRunFlowComponent {
     constructor() {
-        this.agentName = null;
-        this.runStatus = '';
-        this.agentIconClass = null;
-        this.agentLogoUrl = null;
+        this.AgentName = null;
+        this.RunStatus = '';
+        this.AgentIconClass = null;
+        this.AgentLogoUrl = null;
         this.runTree = null;
-        this.modes = [
+        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.Mode = 'subway';
         this.model = null;
-        this.playing = false;
-        this.speed = 1;
-        this.loading = true;
-        this.hasData = false;
+        this.Playing = false;
+        this.Speed = 1;
+        this.Loading = true;
+        this.HasData = false;
         /** Selected node detail (any mode). */
-        this.selectedStepItem = null;
+        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.PanelWidth = 410;
         this.PANEL_KEY = 'mj.agentRunFlow.panelWidth.v1';
         this.resizing = false;
         this.resizeStartX = 0;
@@ -249,6 +249,54 @@ export class AIAgentRunFlowComponent {
         this.zone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
     }
+    /** @deprecated Use {@link AiAgentRunId}. */
+    set aiAgentRunId(value) {
+        this.AiAgentRunId = value;
+    }
+    /** @deprecated Use {@link AiAgentRunId}. */
+    get aiAgentRunId() {
+        return this.AiAgentRunId;
+    }
+    /** @deprecated Use {@link DataHelper}. */
+    set dataHelper(value) {
+        this.DataHelper = value;
+    }
+    /** @deprecated Use {@link DataHelper}. */
+    get dataHelper() {
+        return this.DataHelper;
+    }
+    /** @deprecated Use {@link AgentName}. */
+    set agentName(value) {
+        this.AgentName = value;
+    }
+    /** @deprecated Use {@link AgentName}. */
+    get agentName() {
+        return this.AgentName;
+    }
+    /** @deprecated Use {@link RunStatus}. */
+    set runStatus(value) {
+        this.RunStatus = value;
+    }
+    /** @deprecated Use {@link RunStatus}. */
+    get runStatus() {
+        return this.RunStatus;
+    }
+    /** @deprecated Use {@link AgentIconClass}. */
+    set agentIconClass(value) {
+        this.AgentIconClass = value;
+    }
+    /** @deprecated Use {@link AgentIconClass}. */
+    get agentIconClass() {
+        return this.AgentIconClass;
+    }
+    /** @deprecated Use {@link AgentLogoUrl}. */
+    set agentLogoUrl(value) {
+        this.AgentLogoUrl = value;
+    }
+    /** @deprecated Use {@link AgentLogoUrl}. */
+    get agentLogoUrl() {
+        return this.AgentLogoUrl;
+    }
     /**
      * The run's execution tree, loaded once by the form and shared with every tab.
      *
@@ -259,22 +307,94 @@ export class AIAgentRunFlowComponent {
         this.runTree = value;
         void this.rebuildModel();
     }
+    /** @deprecated Use {@link Modes}. */
+    get modes() {
+        return this.Modes;
+    }
+    /** @deprecated Use {@link Modes}. */
+    set modes(value) {
+        this.Modes = value;
+    }
+    /** @deprecated Use {@link Mode}. */
+    get mode() {
+        return this.Mode;
+    }
+    /** @deprecated Use {@link Mode}. */
+    set mode(value) {
+        this.Mode = value;
+    }
+    /** @deprecated Use {@link Playing}. */
+    get playing() {
+        return this.Playing;
+    }
+    /** @deprecated Use {@link Playing}. */
+    set playing(value) {
+        this.Playing = value;
+    }
+    /** @deprecated Use {@link Speed}. */
+    get speed() {
+        return this.Speed;
+    }
+    /** @deprecated Use {@link Speed}. */
+    set speed(value) {
+        this.Speed = value;
+    }
+    /** @deprecated Use {@link Loading}. */
+    get loading() {
+        return this.Loading;
+    }
+    /** @deprecated Use {@link Loading}. */
+    set loading(value) {
+        this.Loading = value;
+    }
+    /** @deprecated Use {@link HasData}. */
+    get hasData() {
+        return this.HasData;
+    }
+    /** @deprecated Use {@link HasData}. */
+    set hasData(value) {
+        this.HasData = value;
+    }
+    /** @deprecated Use {@link SelectedStepItem}. */
+    get selectedStepItem() {
+        return this.SelectedStepItem;
+    }
+    /** @deprecated Use {@link SelectedStepItem}. */
+    set selectedStepItem(value) {
+        this.SelectedStepItem = value;
+    }
     /** The animated modes share the master clock + narration rail; Flow is static. */
-    get isAnimated() { return this.mode !== 'flow'; }
+    get IsAnimated() { return this.Mode !== 'flow'; }
+    /** @deprecated Use {@link IsAnimated}. */
+    get isAnimated() {
+        return this.IsAnimated;
+    }
     /** Rail (now-executing + log tree) shows only for animated modes with nothing selected. */
-    get showRail() { return this.isAnimated && !this.selectedStepItem; }
+    get ShowRail() { return this.IsAnimated && !this.SelectedStepItem; }
+    /** @deprecated Use {@link ShowRail}. */
+    get showRail() {
+        return this.ShowRail;
+    }
+    /** @deprecated Use {@link PanelWidth}. */
+    get panelWidth() {
+        return this.PanelWidth;
+    }
+    /** @deprecated Use {@link PanelWidth}. */
+    set panelWidth(value) {
+        this.PanelWidth = value;
+    }
     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());
+                this.PanelWidth = Math.min(n, this.maxPanelWidth());
         }
-        combineLatest([this.dataHelper.steps$, this.dataHelper.loading$])
+        combineLatest([this.DataHelper.steps$, this.DataHelper.loading$])
             .pipe(takeUntil(this.destroy$))
             .subscribe(([steps, loading]) => {
-            this.loading = loading && steps.length === 0;
+            this.Loading = loading && steps.length === 0;
             if (!loading || steps.length > 0)
                 this.rebuildModel();
             this.cdr.markForCheck();
@@ -292,54 +412,74 @@ export class AIAgentRunFlowComponent {
     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 rootIcon = { iconClass: this.AgentIconClass || 'fa-robot', logoUrl: this.AgentLogoUrl };
         // The TREE is the source. It carries the run's steps AND any task-graph work those steps
         // submitted — which the step-row builder cannot see at all, because a workflow's steps live in
         // MJ: Tasks rather than in the run's step list. Falling back to the step builder when the tree
         // has not arrived keeps the view populated on first paint rather than flashing empty.
         const model = this.runTree
-            ? buildFlowModelFromTree(this.runTree, this.agentName ?? '', this.runStatus, rootIcon)
-            : await buildFlowModel(this.agentName ?? '', this.runStatus, rootIcon, this.dataHelper);
+            ? BuildFlowModelFromTree(this.runTree, this.AgentName ?? '', this.RunStatus, rootIcon)
+            : await BuildFlowModel(this.AgentName ?? '', this.RunStatus, rootIcon, this.DataHelper);
         if (!model)
             return;
         this.model = model;
-        this.hasData = model.leaves.length > 0;
+        this.HasData = model.Leaves.length > 0;
         if (wasEmpty)
             this.p = 0;
         this.lastLeafId = -1;
         this.cdr.markForCheck();
     }
     /* -------------------------------- transport ------------------------------- */
-    togglePlay() {
-        if (!this.hasData)
+    TogglePlay() {
+        if (!this.HasData)
             return;
         if (this.p >= 1)
             this.p = 0;
-        this.playing = !this.playing;
+        this.Playing = !this.Playing;
         this.lastTs = 0;
     }
-    restart() {
-        if (!this.hasData)
+    /** @deprecated Use {@link TogglePlay}. */
+    togglePlay() {
+        return this.TogglePlay();
+    }
+    Restart() {
+        if (!this.HasData)
             return;
         this.p = 0;
-        this.playing = true;
+        this.Playing = true;
         this.lastTs = 0;
         this.lastLeafId = -1;
     }
-    onScrub(value) {
+    /** @deprecated Use {@link Restart}. */
+    restart() {
+        return this.Restart();
+    }
+    OnScrub(value) {
         this.p = (+value) / 1000;
-        this.playing = false;
+        this.Playing = false;
     }
-    onSpeed(value) { this.speed = (+value) / 100; }
-    selectMode(m) {
+    /** @deprecated Use {@link OnScrub}. */
+    onScrub(value) {
+        return this.OnScrub(value);
+    }
+    OnSpeed(value) { this.Speed = (+value) / 100; }
+    /** @deprecated Use {@link OnSpeed}. */
+    onSpeed(value) {
+        return this.OnSpeed(value);
+    }
+    SelectMode(m) {
         if (!m.enabled)
             return;
-        this.mode = m.key;
+        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
     }
+    /** @deprecated Use {@link SelectMode}. */
+    selectMode(m) {
+        return this.SelectMode(m);
+    }
     get currentRenderer() {
-        switch (this.mode) {
+        switch (this.Mode) {
             case 'flame': return this.flame;
             case 'subway': return this.subway;
             case 'constellation': return this.constellation;
@@ -348,90 +488,122 @@ export class AIAgentRunFlowComponent {
         }
     }
     /* --------------------------- zoom (shared toolbar) ------------------------ */
-    zoomIn() { this.currentRenderer?.ZoomIn?.(); }
-    zoomOut() { this.currentRenderer?.ZoomOut?.(); }
-    fitReset() { this.currentRenderer?.FitReset?.(); }
+    ZoomIn() { this.currentRenderer?.ZoomIn?.(); }
+    /** @deprecated Use {@link ZoomIn}. */
+    zoomIn() {
+        return this.ZoomIn();
+    }
+    ZoomOut() { this.currentRenderer?.ZoomOut?.(); }
+    /** @deprecated Use {@link ZoomOut}. */
+    zoomOut() {
+        return this.ZoomOut();
+    }
+    FitReset() { this.currentRenderer?.FitReset?.(); }
+    /** @deprecated Use {@link FitReset}. */
+    fitReset() {
+        return this.FitReset();
+    }
     /* ---------------------------- panel resize ------------------------------- */
     /** Cap the right panel at 75% of the viewport width. */
     maxPanelWidth() { return Math.max(360, window.innerWidth * 0.75); }
-    startResize(e) {
+    StartResize(e) {
         e.preventDefault();
         this.resizing = true;
         this.resizeStartX = e.clientX;
-        this.resizeStartW = this.panelWidth;
+        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.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)));
+            UserInfoEngine.Instance.SetSettingDebounced(this.PANEL_KEY, String(Math.round(this.PanelWidth)));
         };
         window.addEventListener('mousemove', move);
         window.addEventListener('mouseup', up);
     }
+    /** @deprecated Use {@link StartResize}. */
+    startResize(e) {
+        return this.StartResize(e);
+    }
     /* -------------------------------- selection ------------------------------ */
     /** A node was clicked in any renderer (or a log row) — highlight it everywhere and show its detail. */
-    selectStep(n) {
+    SelectStep(n) {
         this.zone.run(() => {
-            this.selectedNodeId = n.id;
-            this.selectedStepItem = this.toTimelineItem(n);
+            this.selectedNodeId = n.Id;
+            this.SelectedStepItem = this.toTimelineItem(n);
             this.cdr.markForCheck();
         });
-        this.applyRendererSelection(n.id);
+        this.applyRendererSelection(n.Id);
     }
-    closeDetail() {
-        this.zone.run(() => { this.selectedStepItem = null; this.selectedNodeId = -1; this.cdr.markForCheck(); });
+    /** @deprecated Use {@link SelectStep}. */
+    selectStep(n) {
+        return this.SelectStep(n);
+    }
+    CloseDetail() {
+        this.zone.run(() => { this.SelectedStepItem = null; this.selectedNodeId = -1; this.cdr.markForCheck(); });
         this.applyRendererSelection(null);
         this.flowchart?.Deselect();
     }
+    /** @deprecated Use {@link CloseDetail}. */
+    closeDetail() {
+        return this.CloseDetail();
+    }
     applyRendererSelection(id) {
         this.flame?.SetSelected(id);
         this.subway?.SetSelected(id);
         this.constellation?.SetSelected(id);
     }
-    onDetailNavigateActionLog(logId) {
+    OnDetailNavigateActionLog(logId) {
         SharedService.Instance.OpenEntityRecord('MJ: Action Execution Logs', CompositeKey.FromID(logId));
     }
-    async onDetailCopy(text) {
+    /** @deprecated Use {@link OnDetailNavigateActionLog}. */
+    onDetailNavigateActionLog(logId) {
+        return this.OnDetailNavigateActionLog(logId);
+    }
+    async OnDetailCopy(text) {
         try {
             await navigator.clipboard.writeText(text);
         }
         catch { /* clipboard unavailable */ }
     }
+    /** @deprecated Use {@link OnDetailCopy}. */
+    async onDetailCopy(text) {
+        return this.OnDetailCopy(text);
+    }
     toTimelineItem(n) {
-        if (!n.raw)
+        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
+            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) {
+        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);
+            this.p += dt / (this.PLAY_MS / this.Speed);
             if (this.p >= 1) {
                 this.p = 1;
-                this.playing = false;
+                this.Playing = false;
                 this.zone.run(() => this.cdr.markForCheck());
             }
         }
         else {
             this.lastTs = 0;
         }
-        if (this.viewReady && this.model && this.hasData) {
+        if (this.viewReady && this.model && this.HasData) {
             if (animated) {
                 this.currentRenderer?.Render(this.p, ts);
                 this.updateRail(ts);
@@ -450,48 +622,48 @@ export class AIAgentRunFlowComponent {
         // (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.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));
+        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)}`;
+            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;
+        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');
+            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];
+        const col = FLOW_COLORS[leaf.Type];
         if (this.nowIcoRef)
-            this.nowIcoRef.nativeElement.textContent = FLOW_EMOJI[leaf.type];
+            this.nowIcoRef.nativeElement.textContent = FLOW_EMOJI[leaf.Type];
         if (this.nowNameRef)
-            this.nowNameRef.nativeElement.textContent = leaf.name;
+            this.nowNameRef.nativeElement.textContent = leaf.Name;
         if (this.nowTypeRef) {
-            this.nowTypeRef.nativeElement.textContent = FLOW_LABEL[leaf.type];
+            this.nowTypeRef.nativeElement.textContent = FLOW_LABEL[leaf.Type];
             this.nowTypeRef.nativeElement.style.color = col;
         }
         if (this.nowDurRef)
-            this.nowDurRef.nativeElement.textContent = formatDuration(leaf.realDur);
+            this.nowDurRef.nativeElement.textContent = FormatDuration(leaf.RealDur);
         if (this.nowModelRef)
-            this.nowModelRef.nativeElement.textContent = leaf.model ?? '—';
+            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('');
+            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) --------------------------- */
@@ -502,41 +674,41 @@ export class AIAgentRunFlowComponent {
         this.logRows.clear();
         this.lastActiveRowId = -1;
         const m = this.model;
-        for (const n of m.nodes) {
-            if (n.depth === 0)
+        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 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.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));
+                `<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);
+            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)
+        for (const n of m.Nodes) {
+            if (n.Depth === 0)
                 continue;
-            const row = this.logRows.get(n.id);
+            const row = this.logRows.get(n.Id);
             if (!row)
                 continue;
-            const started = this.p >= n.t0;
-            const active = started && this.p < n.t1;
+            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.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' });
             }
         }
@@ -564,7 +736,7 @@ export class AIAgentRunFlowComponent {
             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", RunTree: "RunTree" }, 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) {
+        } }, inputs: { AiAgentRunId: "AiAgentRunId", aiAgentRunId: "aiAgentRunId", DataHelper: "DataHelper", dataHelper: "dataHelper", AgentName: "AgentName", agentName: "agentName", RunStatus: "RunStatus", runStatus: "runStatus", AgentIconClass: "AgentIconClass", agentIconClass: "agentIconClass", AgentLogoUrl: "AgentLogoUrl", agentLogoUrl: "agentLogoUrl", RunTree: "RunTree" }, 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();
@@ -623,16 +795,28 @@ export class AIAgentRunFlowComponent {
 (() => { (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: [{
+    }], null, { AiAgentRunId: [{
+            type: Input
+        }], aiAgentRunId: [{
+            type: Input
+        }], DataHelper: [{
             type: Input
         }], dataHelper: [{
             type: Input
+        }], AgentName: [{
+            type: Input
         }], agentName: [{
             type: Input
+        }], RunStatus: [{
+            type: Input
         }], runStatus: [{
             type: Input
+        }], AgentIconClass: [{
+            type: Input
         }], agentIconClass: [{
             type: Input
+        }], AgentLogoUrl: [{
+            type: Input
         }], agentLogoUrl: [{
             type: Input
         }], RunTree: [{