npm - @memberjunction/ng-core-entity-forms - Versions diffs - 6.1.0-edge.2 → 6.1.0-edge.3 - Mend

@memberjunction/ng-core-entity-forms 6.1.0-edge.2 → 6.1.0-edge.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (489) hide show

package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-agent-run-timeline.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.ts","../../../../src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\nimport { Subject, Observable, combineLatest } from 'rxjs';\nimport { takeUntil, map, shareReplay, filter } from 'rxjs/operators';\nimport { MJAIAgentRunEntity, MJAIAgentRunStepEntity, MJActionExecutionLogEntity, MJAIPromptRunEntity, MJTaskEntity } from '@memberjunction/core-entities';\nimport { AIAgentRunDataHelper } from './ai-agent-run-data.service';\nimport { AIEngineBase } from '@memberjunction/ai-engine-base';\nimport { UUIDsEqual } from '@memberjunction/global';\n\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nimport { FindAgentRunTreeNodes, type AgentRunTreeNode } from '@memberjunction/ai-core-plus';\nimport { ProjectRunTreeToTimeline } from './run-tree-timeline-projection';\nexport interface TimelineItem {\n id: string;\n /*\n What the row represents.\n \n `taskgraph` and `task` are dispatcher work — a graph that outlives the run that submitted it,\n * and the steps inside it. They are rendered as ordinary rows rather than as an embedded diagram,\n * and colour-coded so their provenance is visible without opening anything.\n /\n type: 'step' \| 'subrun' \| 'action' \| 'prompt' \| 'taskgraph' \| 'task';\n /\n Where this row's work ran, when that is not obvious from its type.\n \n `'workflow'` means it ran on the task-graph dispatcher and outlives the agent run that\n * submitted it. Kept separate from `type` on purpose: a workflow step that runs an action IS an\n * action and should render as one — provenance styles it, it does not redefine it.\n /\n provenance?: 'workflow';\n title: string;\n subtitle: string;\n status: string;\n /\n When this row started, or NULL when it has not.\n \n Nullable on purpose. A projection that needed \"sorts last\" once filled this with the maximum\n * Date, and every unstarted row then displayed that sentinel as a real clock time — identical on\n * every row and indistinguishable from data. Ordering belongs to whatever produced the rows; a row\n * that has not run has no start time, and says so by having none.\n /\n startTime: Date \| null;\n endTime?: Date;\n duration?: string;\n icon: string;\n logoUrl?: string;\n color: string;\n data: any;\n children?: TimelineItem[];\n level: number;\n parentId?: string;\n isExpanded?: boolean;\n childrenLoaded?: boolean;\n hasNoChildren?: boolean;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-ai-agent-run-timeline',\n templateUrl: './ai-agent-run-timeline.component.html',\n styleUrls: ['./ai-agent-run-timeline.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AIAgentRunTimelineComponent extends BaseAngularComponent implements OnInit, OnDestroy {\n @Input() aiAgentRunId!: string;\n\n /\n The run's execution tree, loaded ONCE by the form and shared with every tab.\n \n Received rather than fetched: three tabs need the same structure, and letting each load its own\n * issues the same recursive query three times AND lets the tabs disagree — a tab that loaded a\n * second earlier shows a different run than the one beside it.\n /\n @Input() RunTree: AgentRunTreeNode \| null = null;\n @Input() dataHelper!: AIAgentRunDataHelper; // Data helper passed from parent\n @Output() itemSelected = new EventEmitter<TimelineItem>();\n @Output() navigateToEntity = new EventEmitter<{ entityName: string; recordId: string }>();\n\n private destroy$ = new Subject<void>();\n \n // Public observables from data helper\n steps$!: Observable<MJAIAgentRunStepEntity[]>;\n subRuns$!: Observable<MJAIAgentRunEntity[]>;\n actionLogs$!: Observable<MJActionExecutionLogEntity[]>;\n promptRuns$!: Observable<MJAIPromptRunEntity[]>;\n \n timelineItems$!: Observable<TimelineItem[]>;\n \n loading = true;\n error: string \| null = null;\n selectedItem: TimelineItem \| null = null;\n\n /* Graph steps currently being expanded, so a second click cannot start a second load. /\n private expandingGraphIDs = new Set<string>();\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n super();}\n \n async ngOnInit() {\n // AIEngineBase is deferred at startup; ensure it's loaded before timeline\n // items render — getStepIconInfo / sub-agent lookups read .Agents synchronously.\n await AIEngineBase.Instance.EnsureLoaded();\n\n // Initialize observables from the data helper\n this.steps$ = this.dataHelper.steps$;\n this.subRuns$ = this.dataHelper.subRuns$;\n this.actionLogs$ = this.dataHelper.actionLogs$;\n this.promptRuns$ = this.dataHelper.promptRuns$;\n \n // Combine all data sources to build timeline.\n // Skip emissions where steps are empty but data is still loading —\n // the BehaviorSubjects initialise with [] so combineLatest fires\n // immediately with an empty array before the real data arrives.\n this.timelineItems$ = combineLatest([\n this.steps$,\n this.subRuns$,\n this.actionLogs$,\n this.promptRuns$,\n this.dataHelper.loading$\n ]).pipe(\n filter(([steps, _subRuns, _actionLogs, _promptRuns, isLoading]) => {\n // While loading, suppress the empty-array emission so the\n // template keeps showing the mj-loading indicator.\n return !(isLoading && steps.length === 0);\n }),\n map(([steps, subRuns, actionLogs, promptRuns]) =>\n this.buildTimelineItems(steps, subRuns, actionLogs, promptRuns)\n ),\n shareReplay(1)\n );\n \n // Data loading is now handled by the parent component through the helper\n // Subscribe to loading state from helper\n this.dataHelper.loading$.pipe(takeUntil(this.destroy$)).subscribe(loading => {\n this.loading = loading;\n this.cdr.markForCheck();\n });\n\n this.dataHelper.error$.pipe(takeUntil(this.destroy$)).subscribe(error => {\n this.error = error;\n this.cdr.markForCheck();\n });\n }\n\n ngOnDestroy() {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n // This method is now just for compatibility - actual loading is done by parent\n async loadData() {\n if (!this.aiAgentRunId) return;\n // The parent component should handle data loading through the helper\n return this.dataHelper.loadAgentRunData(this.aiAgentRunId);\n }\n \n private buildTimelineItems(\n steps: MJAIAgentRunStepEntity[],\n subRuns: MJAIAgentRunEntity[],\n actionLogs: MJActionExecutionLogEntity[],\n promptRuns: MJAIPromptRunEntity[]\n ): TimelineItem[] {\n return this.buildHierarchicalItems(steps, 0, promptRuns);\n }\n\n private buildHierarchicalItems(\n steps: MJAIAgentRunStepEntity[],\n baseLevel: number,\n promptRuns?: MJAIPromptRunEntity[]\n ): TimelineItem[] {\n // Create a map of all timeline items by step ID\n const itemMap = new Map<string, TimelineItem>();\n\n // First pass: create all timeline items\n steps.forEach(step => {\n const item = this.createTimelineItemFromStep(step, baseLevel, promptRuns);\n itemMap.set(step.ID, item);\n });\n\n // Second pass: build parent-child relationships based on ParentID\n steps.forEach(step => {\n if (step.ParentID) {\n const parentItem = itemMap.get(step.ParentID);\n const childItem = itemMap.get(step.ID);\n\n if (parentItem && childItem) {\n // Initialize children array if needed\n if (!parentItem.children) {\n parentItem.children = [];\n }\n\n // Set child's level based on parent's level\n childItem.level = parentItem.level + 1;\n\n // Add child to parent's children array\n parentItem.children.push(childItem);\n }\n }\n });\n\n // Return only root-level items (those without a ParentID)\n const rootItems: TimelineItem[] = [];\n steps.forEach(step => {\n if (!step.ParentID) {\n const item = itemMap.get(step.ID);\n if (item) {\n rootItems.push(item);\n }\n }\n });\n\n return rootItems;\n }\n \n private createTimelineItemFromStep(step: MJAIAgentRunStepEntity, level: number, promptRuns?: MJAIPromptRunEntity[]): TimelineItem {\n let subtitle = `Type: ${step.StepType}`;\n\n // For prompt steps, try to find the associated prompt run to get model/vendor info\n if (step.StepType === 'Prompt' && step.TargetLogID && promptRuns) {\n const promptRun = promptRuns.find(pr => UUIDsEqual(pr.ID, step.TargetLogID));\n if (promptRun) {\n subtitle = `Model: ${promptRun.Model \|\| 'Unknown'} \| Vendor: ${promptRun.Vendor \|\| 'Unknown'}`;\n }\n }\n\n // Get icon and logoUrl based on step type\n const iconInfo = this.getStepIconInfo(step);\n\n return {\n id: step.ID,\n type: 'step',\n title: step.StepName \|\| `Step ${step.StepNumber}`,\n subtitle: subtitle,\n status: step.Status,\n startTime: step.StartedAt,\n endTime: step.CompletedAt \|\| undefined,\n duration: this.calculateDuration(step.StartedAt, step.CompletedAt),\n icon: iconInfo.icon,\n logoUrl: iconInfo.logoUrl,\n color: this.getStatusColor(step.Status),\n data: step,\n children: [],\n level,\n isExpanded: false\n };\n }\n \n\n private getStepIconInfo(step: MJAIAgentRunStepEntity): { icon: string; logoUrl?: string } {\n // For sub-agents, try to get agent-specific icon/logo\n if (step.StepType === 'Sub-Agent' && step.TargetID) {\n const agent = AIEngineBase.Instance.Agents.find(a => UUIDsEqual(a.ID, step.TargetID));\n if (agent) {\n // Prefer LogoURL - if present, use it with robot as fallback icon (icon won't be shown when logoUrl exists)\n if (agent.LogoURL) {\n return { icon: 'fa-robot', logoUrl: agent.LogoURL };\n }\n // Next preference: IconClass from agent metadata\n else if (agent.IconClass) {\n return { icon: agent.IconClass };\n }\n // Agent exists but has no custom icon or logo - use default robot icon\n else {\n return { icon: 'fa-robot' };\n }\n }\n }\n\n // Default icons for each step type (includes fa-robot for sub-agents without agent metadata)\n const icon = this.getStepIcon(step.StepType);\n return { icon };\n }\n\n private getStepIcon(stepType: string): string {\n const iconMap: Record<string, string> = {\n 'Prompt': 'fa-brain',\n 'Tool': 'fa-tools',\n 'Sub-Agent': 'fa-robot',\n 'Decision': 'fa-code-branch',\n 'Actions': 'fa-wrench',\n 'Validation': 'fa-square-check',\n 'ForEach': 'fa-repeat',\n 'While': 'fa-rotate',\n 'Skill': 'fa-wand-magic-sparkles',\n 'Plan': 'fa-clipboard-check'\n };\n return iconMap[stepType] \|\| 'fa-circle';\n }\n \n private getStatusColor(status: string): string {\n const colorMap: Record<string, string> = {\n 'Running': 'info',\n 'Completed': 'success',\n 'Failed': 'error',\n 'Cancelled': 'warning',\n 'Paused': 'secondary'\n };\n return colorMap[status] \|\| 'secondary';\n }\n \n calculateDuration(start: Date, end?: Date \| null): string {\n if (!end) return 'Running...';\n \n const startTime = new Date(start).getTime();\n const endTime = new Date(end).getTime();\n const duration = endTime - startTime;\n \n if (duration < 1000) return `${duration}ms`;\n if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;\n if (duration < 3600000) return `${Math.floor(duration / 60000)}m ${Math.floor((duration % 60000) / 1000)}s`;\n return `${Math.floor(duration / 3600000)}h ${Math.floor((duration % 3600000) / 60000)}m`;\n }\n \n selectItem(item: TimelineItem) {\n this.selectedItem = item;\n this.itemSelected.emit(item);\n }\n \n async toggleItemExpansion(item: TimelineItem, event: Event) {\n event.stopPropagation();\n\n // Toggle expansion state\n item.isExpanded = !item.isExpanded;\n\n // For Sub-Agent steps, load their run data on demand (requires DB query)\n if (item.isExpanded && !item.childrenLoaded && item.type === 'step' && item.data?.StepType === 'Sub-Agent') {\n await this.loadSubAgentChildren(item);\n }\n\n // A TaskGraph step expands into the graph's own steps — one query for the whole subtree, so it\n // never shows a per-level loading state the way the sub-agent path has to.\n if (item.isExpanded && item.type === 'step' && item.data?.StepType === 'TaskGraph') {\n await this.ExpandTaskGraph(item);\n }\n\n // For parent steps (loop containers like ForEach/While), children are already loaded via ParentID\n // Just toggle - no additional loading needed since we already have all steps from the run\n // The children were already attached in buildTimelineItems()\n }\n \n private async loadSubAgentChildren(item: TimelineItem) {\n try {\n const subAgentRunId = item.data?.TargetLogID;\n\n if (!subAgentRunId) {\n item.hasNoChildren = true;\n item.children = [];\n item.childrenLoaded = true;\n return;\n }\n\n // Load sub-agent data through service\n const data = await this.dataHelper.loadSubAgentData(subAgentRunId);\n\n if (!data.steps \|\| data.steps.length === 0) {\n item.hasNoChildren = true;\n item.children = [];\n item.childrenLoaded = true;\n return;\n }\n\n // Build hierarchical timeline items with ParentID relationships\n // This ensures that loop steps (ForEach/While) within sub-agents also show their children\n item.children = this.buildHierarchicalItems(data.steps, item.level + 1, data.promptRuns);\n\n item.childrenLoaded = true;\n // Trigger change detection after updating the data\n this.cdr.markForCheck();\n } catch (error) {\n console.error('🔄 Timeline: Error loading sub-agent children:', error);\n item.hasNoChildren = true;\n item.childrenLoaded = true;\n // Trigger change detection for error state\n this.cdr.markForCheck();\n }\n }\n \n navigateToSubRun(runId: string, event: Event) {\n event.stopPropagation();\n this.navigateToEntity.emit({ entityName: 'MJ: AI Agent Runs', recordId: runId });\n }\n \n navigateToActionLog(logId: string, event: Event) {\n event.stopPropagation();\n this.navigateToEntity.emit({ entityName: 'MJ: Action Execution Logs', recordId: logId });\n }\n \n navigateToPromptRun(runId: string, event: Event) {\n event.stopPropagation();\n this.navigateToEntity.emit({ entityName: 'MJ: AI Prompt Runs', recordId: runId });\n }\n \n /\n TrackBy function for timeline items\n /\n /\n The graph a TaskGraph step submitted, read from the step's own output.\n \n `executeTasksStep` records `parentTaskID` there whether or not submission succeeded, because a\n * rejected graph is the case where forensics matter most. A step with no id therefore means the\n * graph never reached the dispatcher — a real state the caller renders differently, which is why\n * this returns null rather than an empty string.\n /\n GetGraphParentTaskID(item: TimelineItem): string \| null {\n const raw = item?.data?.OutputData;\n if (!raw) return null;\n try {\n const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;\n const id = parsed?.parentTaskID;\n return typeof id === 'string' && id.length > 0 ? id : null;\n } catch {\n return null;\n }\n }\n\n /\n A step inside the graph was selected.\n \n An Agent node carries the run it started, so selecting one offers the same navigation a\n * Sub-Agent step already does — that link is the seam between the two views, and without it a\n * dispatched sub-agent run is unreachable from the run that caused it.\n /\n OnGraphNodeSelected(event: { TaskID: string; Task: MJTaskEntity \| null }): void {\n const agentRunID = event.Task?.AgentRunID;\n if (agentRunID) {\n this.navigateToEntity.emit({ entityName: 'MJ: AI Agent Runs', recordId: agentRunID });\n return;\n }\n if (event.Task?.ActionID) {\n this.navigateToEntity.emit({ entityName: 'MJ: Tasks', recordId: event.TaskID });\n }\n }\n\n /\n Expands a task-graph step into the graph's own steps, as ordinary timeline rows.\n \n The graph's steps are steps. They used to appear as an embedded canvas inside the list — a\n * diagram wedged into a vertical column, in a different visual language from everything around it,\n * and the only work in a run that could not be read, selected or navigated the same way as the\n * rest. They are rows now, colour-coded so their provenance is obvious, with the canvas moved to\n * the detail panel where edges have room to be seen.\n \n One query rather than a walk: the whole subtree arrives at once, so there is no\n * \"Loading sub-agent steps…\" and no per-level round trip.\n /\n async ExpandTaskGraph(item: TimelineItem): Promise<void> {\n if (item.childrenLoaded \|\| this.expandingGraphIDs.has(item.id)) return;\n\n this.expandingGraphIDs.add(item.id);\n this.cdr.markForCheck();\n try {\n if (!this.RunTree) {\n this.error = 'The run tree is not loaded yet, so this workflow cannot be expanded.';\n return;\n }\n\n // The graph hangs off THIS step in the tree, so the subtree to splice in is the node whose id\n // matches the step — not the whole run, which is already on screen above it.\n const stepNode = FindAgentRunTreeNodes(this.RunTree, (n) => n.NodeID === item.id)[0] ?? null;\n\n item.children = ProjectRunTreeToTimeline(stepNode, item.level + 1, true);\n item.childrenLoaded = true;\n item.hasNoChildren = item.children.length === 0;\n } catch (e) {\n this.error = e instanceof Error ? e.message : String(e);\n } finally {\n this.expandingGraphIDs.delete(item.id);\n this.cdr.markForCheck();\n }\n }\n\n /* True while a graph's steps are being fetched, so the row can say so. /\n IsExpandingGraph(item: TimelineItem): boolean {\n return this.expandingGraphIDs.has(item.id);\n }\n\n trackByItemId(index: number, item: TimelineItem): string {\n return item.id;\n }\n \n createSubRunDataHelper(): AIAgentRunDataHelper {\n // Create a new data helper instance for sub-runs to prevent caching conflicts\n return new AIAgentRunDataHelper();\n }\n}","@if (loading) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading run steps...\" size=\"medium\"></mj-loading>\n </div>\n} @else if (timelineItems$ \| async; as items) {\n <div class=\"timeline-container\">\n @if (items.length > 0) {\n <div class=\"timeline\">\n @for (item of items; track trackByItemId($index, item)) {\n <!-- Main Timeline Item -->\n <mj-ai-agent-run-step-node\n [item]=\"item\"\n [isSelected]=\"selectedItem?.id === item.id\"\n (itemClick)=\"selectItem(item)\"\n (expandToggle)=\"toggleItemExpansion(item, $event)\"\n (navigateToEntity)=\"navigateToEntity.emit($event)\">\n </mj-ai-agent-run-step-node>\n <!-- Children Container (for both Sub-Agent and ParentID relationships) -->\n @if (item.isExpanded) {\n <!-- Show loading indicator while loading Sub-Agent children -->\n @if (item.type === 'step' && item.data?.StepType === 'Sub-Agent' && !item.childrenLoaded) {\n <div class=\"loading-children\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading sub-agent steps...\n </div>\n }\n <!-- Show no children message for Sub-Agents -->\n @if (item.type === 'step' && item.data?.StepType === 'Sub-Agent' && item.childrenLoaded && item.hasNoChildren) {\n <div class=\"no-children\">\n <i class=\"fas fa-info-circle\"></i> No sub-agent steps found\n </div>\n }\n <!-- Render children recursively (works for both Sub-Agent and ParentID children) -->\n @if (item.children && item.children.length > 0) {\n <ng-container ngTemplateOutlet=\"recursiveSteps; context: { $implicit: item.children }\"></ng-container>\n }\n <!-- A TaskGraph step stands in for a whole graph of Task rows. Its steps render as\n ORDINARY ROWS, colour-coded for provenance — they are steps, and squeezing a diagram\n into the column made them the only work in a run that could not be read, selected or\n navigated like everything else. The canvas lives in the detail panel, where edges\n (which branch was taken, and why) have the room they need. -->\n @if (item.type === 'step' && item.data?.StepType === 'TaskGraph') {\n @if (IsExpandingGraph(item)) {\n <div class=\"loading-children\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading workflow steps...\n </div>\n } @else if (!GetGraphParentTaskID(item)) {\n <div class=\"no-children\">\n <i class=\"fas fa-info-circle\"></i>\n This workflow was recorded but never reached the dispatcher.\n </div>\n } @else if (item.childrenLoaded && item.hasNoChildren) {\n <div class=\"no-children\">\n <i class=\"fas fa-info-circle\"></i> This workflow has no steps yet.\n </div>\n }\n }\n <!-- For actual sub-run items (from the initial load) - legacy support -->\n @if (item.type === 'subrun' && item.data?.ID) {\n <mj-ai-agent-run-timeline\n [aiAgentRunId]=\"item.data.ID\"\n [dataHelper]=\"createSubRunDataHelper()\"\n [autoRefresh]=\"false\"\n (itemSelected)=\"selectItem($event)\"\n (navigateToEntity)=\"navigateToEntity.emit($event)\">\n </mj-ai-agent-run-timeline>\n }\n }\n }\n </div>\n }\n @if (items.length === 0) {\n <mj-empty-state\n Icon=\"fa-solid fa-stream\"\n Title=\"No execution steps found\" />\n }\n </div>\n} @else {\n <!-- timelineItems$ hasn't emitted yet -->\n <div class=\"loading-state\">\n <mj-loading text=\"Loading run steps...\" size=\"medium\"></mj-loading>\n </div>\n}\n\n@if (error) {\n <mj-empty-state\n Variant=\"error\"\n [Message]=\"error\" />\n}\n\n<!-- Recursive template for rendering nested children (ParentID relationships) -->\n<ng-template #recursiveSteps let-steps>\n @for (step of steps; track trackByItemId($index, step)) {\n <mj-ai-agent-run-step-node\n [item]=\"step\"\n [isSelected]=\"selectedItem?.id === step.id\"\n (itemClick)=\"selectItem(step)\"\n (expandToggle)=\"toggleItemExpansion(step, $event)\"\n (navigateToEntity)=\"navigateToEntity.emit($event)\">\n </mj-ai-agent-run-step-node>\n <!-- Recursively render this step's children if expanded -->\n @if (step.isExpanded && step.children && step.children.length > 0) {\n <ng-container *ngTemplateOutlet=\"recursiveSteps; context: { $implicit: step.children }\"></ng-container>\n }\n }\n</ng-template>"]}
1	+ {"version":3,"file":"ai-agent-run-timeline.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.ts","../../../../src/lib/custom/ai-agent-run/ai-agent-run-timeline.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\nimport { Subject, Observable, combineLatest, BehaviorSubject } from 'rxjs';\nimport { takeUntil, map, shareReplay, filter } from 'rxjs/operators';\nimport { MJAIAgentRunEntity, MJAIAgentRunStepEntity, MJActionExecutionLogEntity, MJAIPromptRunEntity, MJTaskEntity } from '@memberjunction/core-entities';\nimport { AIAgentRunDataHelper } from './ai-agent-run-data.service';\nimport { AIEngineBase } from '@memberjunction/ai-engine-base';\nimport { UUIDsEqual } from '@memberjunction/global';\n\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nimport { FindAgentRunTreeNodes, type AgentRunTreeNode } from '@memberjunction/ai-core-plus';\nimport { NormalizeStatus, ProjectRunTreeToTimeline } from './run-tree-timeline-projection';\nimport { ActionEngineBase } from '@memberjunction/actions-base';\n\n/*\n Node kinds whose row is a LOOP, not the work inside it.\n \n A ForEach carries the ActionID of the action it repeats, so resolving an icon from it would draw\n * \"a Google search\" on a row that is a loop over five of them — losing the one distinction the row\n * exists to make.\n /\nconst LOOP_KINDS: ReadonlySet<string> = new Set(['ForEach', 'While']);\nexport interface TimelineItem {\n id: string;\n /\n What the row represents.\n \n `taskgraph` and `task` are dispatcher work — a graph that outlives the run that submitted it,\n * and the steps inside it. They are rendered as ordinary rows rather than as an embedded diagram,\n * and colour-coded so their provenance is visible without opening anything.\n /\n type: 'step' \| 'subrun' \| 'action' \| 'prompt' \| 'taskgraph' \| 'task';\n /\n Where this row's work ran, when that is not obvious from its type.\n \n `'workflow'` means it ran on the task-graph dispatcher and outlives the agent run that\n * submitted it. Kept separate from `type` on purpose: a workflow step that runs an action IS an\n * action and should render as one — provenance styles it, it does not redefine it.\n /\n provenance?: 'workflow';\n title: string;\n subtitle: string;\n status: string;\n /\n When this row started, or NULL when it has not.\n \n Nullable on purpose. A projection that needed \"sorts last\" once filled this with the maximum\n * Date, and every unstarted row then displayed that sentinel as a real clock time — identical on\n * every row and indistinguishable from data. Ordering belongs to whatever produced the rows; a row\n * that has not run has no start time, and says so by having none.\n /\n startTime: Date \| null;\n endTime?: Date;\n duration?: string;\n icon: string;\n logoUrl?: string;\n color: string;\n data: any;\n children?: TimelineItem[];\n level: number;\n parentId?: string;\n isExpanded?: boolean;\n childrenLoaded?: boolean;\n hasNoChildren?: boolean;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-ai-agent-run-timeline',\n templateUrl: './ai-agent-run-timeline.component.html',\n styleUrls: ['./ai-agent-run-timeline.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AIAgentRunTimelineComponent extends BaseAngularComponent implements OnInit, OnDestroy {\n @Input() aiAgentRunId!: string;\n\n /\n The run's execution tree, loaded ONCE by the form and shared with every tab.\n \n Received rather than fetched: three tabs need the same structure, and letting each load its own\n * issues the same recursive query three times AND lets the tabs disagree — a tab that loaded a\n * second earlier shows a different run than the one beside it.\n /\n /\n Setter, not a plain field: a TaskGraph step's row takes its STATUS from the graph (see\n * `graphNodeForStep`), and the tree usually arrives after the step rows have already been built.\n * Republishing rebuilds them, so a dispatched workflow stops reading Completed the moment the\n * tree says it is still running.\n /\n @Input()\n public set RunTree(value: AgentRunTreeNode \| null) {\n this.runTree = value;\n this.runTree$.next(value);\n }\n public get RunTree(): AgentRunTreeNode \| null {\n return this.runTree;\n }\n private runTree: AgentRunTreeNode \| null = null;\n private runTree$ = new BehaviorSubject<AgentRunTreeNode \| null>(null);\n @Input() dataHelper!: AIAgentRunDataHelper; // Data helper passed from parent\n @Output() itemSelected = new EventEmitter<TimelineItem>();\n @Output() navigateToEntity = new EventEmitter<{ entityName: string; recordId: string }>();\n\n private destroy$ = new Subject<void>();\n /* Resolved once the action cache is warm, so a first paint without icons can be re-rendered with them. /\n private actionsReady = false;\n /\n Execution-log id → action id, for the RUN-STEP path only.\n \n The tree path needs none of this — it carries `ActionID` outright. A run step of type `Actions`\n * still names only its log, so this map stays for that case, built from logs the data service has\n * already fetched by id.\n /\n private actionIDByLogID = new Map<string, string>();\n \n // Public observables from data helper\n steps$!: Observable<MJAIAgentRunStepEntity[]>;\n subRuns$!: Observable<MJAIAgentRunEntity[]>;\n actionLogs$!: Observable<MJActionExecutionLogEntity[]>;\n promptRuns$!: Observable<MJAIPromptRunEntity[]>;\n \n timelineItems$!: Observable<TimelineItem[]>;\n \n loading = true;\n error: string \| null = null;\n selectedItem: TimelineItem \| null = null;\n\n /* Graph steps currently being expanded, so a second click cannot start a second load. /\n private expandingGraphIDs = new Set<string>();\n\n constructor(\n private cdr: ChangeDetectorRef\n ) {\n super();}\n \n async ngOnInit() {\n // AIEngineBase is deferred at startup; ensure it's loaded before timeline\n // items render — getStepIconInfo / sub-agent lookups read .Agents synchronously.\n await AIEngineBase.Instance.EnsureLoaded();\n // Same reason, for the same kind of read: `resolveActionIcon` looks up `.Actions` synchronously\n // inside the projection. Cheap when another surface already warmed it, and a no-op on reload.\n try {\n await ActionEngineBase.Instance.EnsureLoaded();\n this.actionsReady = true;\n } catch {\n // An action cache that will not load costs icons, not rows — every action keeps the generic\n // glyph it had before. Never worth failing a run view over.\n this.actionsReady = false;\n }\n\n // Initialize observables from the data helper\n this.steps$ = this.dataHelper.steps$;\n this.subRuns$ = this.dataHelper.subRuns$;\n this.actionLogs$ = this.dataHelper.actionLogs$;\n this.promptRuns$ = this.dataHelper.promptRuns$;\n \n // Combine all data sources to build timeline.\n // Skip emissions where steps are empty but data is still loading —\n // the BehaviorSubjects initialise with [] so combineLatest fires\n // immediately with an empty array before the real data arrives.\n this.timelineItems$ = combineLatest([\n this.steps$,\n this.subRuns$,\n this.actionLogs$,\n this.promptRuns$,\n this.dataHelper.loading$,\n this.runTree$\n ]).pipe(\n filter(([steps, _subRuns, _actionLogs, _promptRuns, isLoading]) => {\n // While loading, suppress the empty-array emission so the\n // template keeps showing the mj-loading indicator.\n return !(isLoading && steps.length === 0);\n }),\n map(([steps, subRuns, actionLogs, promptRuns]) => {\n // Built here rather than on demand: this is where the logs arrive, and the resolver runs\n // synchronously inside the projection, which cannot await anything.\n this.actionIDByLogID = new Map(\n (actionLogs ?? [])\n .filter((log) => log.ID && log.ActionID)\n .map((log) => [log.ID.toLowerCase(), log.ActionID]),\n );\n return this.buildTimelineItems(steps, subRuns, actionLogs, promptRuns);\n }),\n shareReplay(1)\n );\n \n // Data loading is now handled by the parent component through the helper\n // Subscribe to loading state from helper\n this.dataHelper.loading$.pipe(takeUntil(this.destroy$)).subscribe(loading => {\n this.loading = loading;\n this.cdr.markForCheck();\n });\n\n this.dataHelper.error$.pipe(takeUntil(this.destroy$)).subscribe(error => {\n this.error = error;\n this.cdr.markForCheck();\n });\n }\n\n ngOnDestroy() {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n // This method is now just for compatibility - actual loading is done by parent\n async loadData() {\n if (!this.aiAgentRunId) return;\n // The parent component should handle data loading through the helper\n return this.dataHelper.loadAgentRunData(this.aiAgentRunId);\n }\n \n private buildTimelineItems(\n steps: MJAIAgentRunStepEntity[],\n subRuns: MJAIAgentRunEntity[],\n actionLogs: MJActionExecutionLogEntity[],\n promptRuns: MJAIPromptRunEntity[]\n ): TimelineItem[] {\n return this.buildHierarchicalItems(steps, 0, promptRuns);\n }\n\n private buildHierarchicalItems(\n steps: MJAIAgentRunStepEntity[],\n baseLevel: number,\n promptRuns?: MJAIPromptRunEntity[]\n ): TimelineItem[] {\n // Create a map of all timeline items by step ID\n const itemMap = new Map<string, TimelineItem>();\n\n // First pass: create all timeline items\n steps.forEach(step => {\n const item = this.createTimelineItemFromStep(step, baseLevel, promptRuns);\n itemMap.set(step.ID, item);\n });\n\n // Second pass: build parent-child relationships based on ParentID\n steps.forEach(step => {\n if (step.ParentID) {\n const parentItem = itemMap.get(step.ParentID);\n const childItem = itemMap.get(step.ID);\n\n if (parentItem && childItem) {\n // Initialize children array if needed\n if (!parentItem.children) {\n parentItem.children = [];\n }\n\n // Set child's level based on parent's level\n childItem.level = parentItem.level + 1;\n\n // Add child to parent's children array\n parentItem.children.push(childItem);\n }\n }\n });\n\n // Return only root-level items (those without a ParentID)\n const rootItems: TimelineItem[] = [];\n steps.forEach(step => {\n if (!step.ParentID) {\n const item = itemMap.get(step.ID);\n if (item) {\n rootItems.push(item);\n }\n }\n });\n\n return rootItems;\n }\n \n /\n Font Awesome class for a node that runs a known action or agent, or null to keep the default.\n \n Why the row kind is the wrong answer. The same action reaches this timeline through two\n * arms of the run-tree query — as a graph Task and as a loop pass — and each arm had its own\n * generic glyph, so one Google Custom Search drew a lightning bolt and the next a paper plane.\n * What the step IS does not change with where it ran.\n \n No hop. The tree carries `ActionID` and `AgentID` directly (a task holds them as columns;\n * a pass takes them from the log it expanded from), so this is one cache read. The first version\n * of this went through the execution log and silently resolved NOTHING for graph steps, because\n * the logs it consulted are only loaded for run steps of type `Actions` — of which a dispatched\n * workflow has none.\n \n Loops keep their own icon. A ForEach carries the ActionID of the action it repeats, and\n * drawing that action's mark on the loop row would say \"this is a Google search\" about a row that\n * is a loop over five of them. The distinction the loop icon carries is worth more.\n /\n private resolveActionIcon(node: AgentRunTreeNode): string \| null {\n if (LOOP_KINDS.has(node.SourceKind ?? '')) return null;\n\n if (node.ActionID) {\n const action = ActionEngineBase.Instance.Actions?.find((a) => UUIDsEqual(a.ID, node.ActionID!));\n if (action?.IconClass) return action.IconClass;\n }\n if (node.AgentID) {\n const agent = AIEngineBase.Instance.Agents?.find((a) => UUIDsEqual(a.ID, node.AgentID!));\n if (agent?.IconClass) return agent.IconClass;\n }\n return null;\n }\n\n\n\n /\n The graph a TaskGraph step dispatched, from the run tree.\n \n Null until the tree arrives (the setter above republishes then) and null for a submission that\n * produced no graph — a failed submit, where the step's own status IS the story.\n /\n private graphNodeForStep(stepID: string): AgentRunTreeNode \| null {\n if (!this.runTree) return null;\n const stepNode = FindAgentRunTreeNodes(this.runTree, (n) => UUIDsEqual(n.NodeID, stepID))[0] ?? null;\n return stepNode?.Children.find((c) => c.NodeType === 'TaskGraph') ?? null;\n }\n\n private createTimelineItemFromStep(step: MJAIAgentRunStepEntity, level: number, promptRuns?: MJAIPromptRunEntity[]): TimelineItem {\n let subtitle = `Type: ${step.StepType}`;\n\n // For prompt steps, try to find the associated prompt run to get model/vendor info\n if (step.StepType === 'Prompt' && step.TargetLogID && promptRuns) {\n const promptRun = promptRuns.find(pr => UUIDsEqual(pr.ID, step.TargetLogID));\n if (promptRun) {\n subtitle = `Model: ${promptRun.Model \|\| 'Unknown'} \| Vendor: ${promptRun.Vendor \|\| 'Unknown'}`;\n }\n }\n\n // Get icon and logoUrl based on step type\n const iconInfo = this.getStepIconInfo(step);\n\n // A dispatched workflow's row describes the WORKFLOW, not the handoff that started it. The\n // step's own status is about submission — Completed in ~300ms, correctly — and showing that\n // under a title naming the workflow is how the timeline came to report a running graph as\n // finished while the page header said \"Workflow still running\".\n const graph = step.StepType === 'TaskGraph' ? this.graphNodeForStep(step.ID) : null;\n if (graph) {\n subtitle = `${subtitle} · dispatched in ${this.calculateDuration(step.StartedAt, step.CompletedAt)}`;\n }\n\n return {\n id: step.ID,\n type: 'step',\n title: step.StepName \|\| `Step ${step.StepNumber}`,\n subtitle: subtitle,\n status: graph ? NormalizeStatus(graph.Status) : step.Status,\n startTime: step.StartedAt,\n endTime: (graph ? graph.CompletedAt : step.CompletedAt) \|\| undefined,\n // A graph that has not started yet has no duration of its own — the submission's stands in,\n // and the subtitle says which it is either way.\n duration: graph?.StartedAt\n ? this.calculateDuration(graph.StartedAt, graph.CompletedAt)\n : this.calculateDuration(step.StartedAt, step.CompletedAt),\n icon: iconInfo.icon,\n logoUrl: iconInfo.logoUrl,\n color: this.getStatusColor(graph ? NormalizeStatus(graph.Status) : step.Status),\n data: step,\n children: [],\n level,\n isExpanded: false\n };\n }\n \n\n private getStepIconInfo(step: MJAIAgentRunStepEntity): { icon: string; logoUrl?: string } {\n // For sub-agents, try to get agent-specific icon/logo\n if (step.StepType === 'Sub-Agent' && step.TargetID) {\n const agent = AIEngineBase.Instance.Agents.find(a => UUIDsEqual(a.ID, step.TargetID));\n if (agent) {\n // Prefer LogoURL - if present, use it with robot as fallback icon (icon won't be shown when logoUrl exists)\n if (agent.LogoURL) {\n return { icon: 'fa-robot', logoUrl: agent.LogoURL };\n }\n // Next preference: IconClass from agent metadata\n else if (agent.IconClass) {\n return { icon: agent.IconClass };\n }\n // Agent exists but has no custom icon or logo - use default robot icon\n else {\n return { icon: 'fa-robot' };\n }\n }\n }\n\n // An action step draws its OWN action's icon, exactly as a sub-agent step draws its agent's —\n // the two cases are the same idea, and only one of them was implemented. `TargetLogID` names\n // the execution log this run already loaded; that log names the action, whose IconClass is in\n // ActionEngineBase's cache. A step whose action cannot be resolved (an action with no icon, a\n // cache that did not load) falls through to the step-type default below, which is the same\n // lightning bolt it drew before.\n if (step.StepType === 'Actions' && step.TargetLogID) {\n const actionID = this.actionIDByLogID.get(step.TargetLogID.toLowerCase());\n const action = actionID\n ? ActionEngineBase.Instance.Actions?.find((a) => UUIDsEqual(a.ID, actionID))\n : undefined;\n if (action?.IconClass) return { icon: action.IconClass };\n }\n\n // Default icons for each step type (includes fa-robot for sub-agents without agent metadata)\n const icon = this.getStepIcon(step.StepType);\n return { icon };\n }\n\n private getStepIcon(stepType: string): string {\n const iconMap: Record<string, string> = {\n 'Prompt': 'fa-brain',\n 'Tool': 'fa-tools',\n 'Sub-Agent': 'fa-robot',\n 'Decision': 'fa-code-branch',\n 'Actions': 'fa-wrench',\n 'Validation': 'fa-square-check',\n 'ForEach': 'fa-repeat',\n 'While': 'fa-rotate',\n 'Skill': 'fa-wand-magic-sparkles',\n 'Plan': 'fa-clipboard-check'\n };\n return iconMap[stepType] \|\| 'fa-circle';\n }\n \n private getStatusColor(status: string): string {\n const colorMap: Record<string, string> = {\n 'Running': 'info',\n 'Completed': 'success',\n 'Failed': 'error',\n 'Cancelled': 'warning',\n 'Paused': 'secondary'\n };\n return colorMap[status] \|\| 'secondary';\n }\n \n calculateDuration(start: Date, end?: Date \| null): string {\n if (!end) return 'Running...';\n \n const startTime = new Date(start).getTime();\n const endTime = new Date(end).getTime();\n const duration = endTime - startTime;\n \n if (duration < 1000) return `${duration}ms`;\n if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;\n if (duration < 3600000) return `${Math.floor(duration / 60000)}m ${Math.floor((duration % 60000) / 1000)}s`;\n return `${Math.floor(duration / 3600000)}h ${Math.floor((duration % 3600000) / 60000)}m`;\n }\n \n selectItem(item: TimelineItem) {\n this.selectedItem = item;\n this.itemSelected.emit(item);\n }\n \n async toggleItemExpansion(item: TimelineItem, event: Event) {\n event.stopPropagation();\n\n // Toggle expansion state\n item.isExpanded = !item.isExpanded;\n\n // For Sub-Agent steps, load their run data on demand (requires DB query)\n if (item.isExpanded && !item.childrenLoaded && item.type === 'step' && item.data?.StepType === 'Sub-Agent') {\n await this.loadSubAgentChildren(item);\n }\n\n // A TaskGraph step expands into the graph's own steps — one query for the whole subtree, so it\n // never shows a per-level loading state the way the sub-agent path has to.\n if (item.isExpanded && item.type === 'step' && item.data?.StepType === 'TaskGraph') {\n await this.ExpandTaskGraph(item);\n }\n\n // For parent steps (loop containers like ForEach/While), children are already loaded via ParentID\n // Just toggle - no additional loading needed since we already have all steps from the run\n // The children were already attached in buildTimelineItems()\n }\n \n private async loadSubAgentChildren(item: TimelineItem) {\n try {\n const subAgentRunId = item.data?.TargetLogID;\n\n if (!subAgentRunId) {\n item.hasNoChildren = true;\n item.children = [];\n item.childrenLoaded = true;\n return;\n }\n\n // Load sub-agent data through service\n const data = await this.dataHelper.loadSubAgentData(subAgentRunId);\n\n if (!data.steps \|\| data.steps.length === 0) {\n item.hasNoChildren = true;\n item.children = [];\n item.childrenLoaded = true;\n return;\n }\n\n // Build hierarchical timeline items with ParentID relationships\n // This ensures that loop steps (ForEach/While) within sub-agents also show their children\n item.children = this.buildHierarchicalItems(data.steps, item.level + 1, data.promptRuns);\n\n item.childrenLoaded = true;\n // Trigger change detection after updating the data\n this.cdr.markForCheck();\n } catch (error) {\n console.error('🔄 Timeline: Error loading sub-agent children:', error);\n item.hasNoChildren = true;\n item.childrenLoaded = true;\n // Trigger change detection for error state\n this.cdr.markForCheck();\n }\n }\n \n navigateToSubRun(runId: string, event: Event) {\n event.stopPropagation();\n this.navigateToEntity.emit({ entityName: 'MJ: AI Agent Runs', recordId: runId });\n }\n \n navigateToActionLog(logId: string, event: Event) {\n event.stopPropagation();\n this.navigateToEntity.emit({ entityName: 'MJ: Action Execution Logs', recordId: logId });\n }\n \n navigateToPromptRun(runId: string, event: Event) {\n event.stopPropagation();\n this.navigateToEntity.emit({ entityName: 'MJ: AI Prompt Runs', recordId: runId });\n }\n \n /\n TrackBy function for timeline items\n /\n /\n The graph a TaskGraph step submitted, read from the step's own output.\n \n `executeTasksStep` records `parentTaskID` there whether or not submission succeeded, because a\n * rejected graph is the case where forensics matter most. A step with no id therefore means the\n * graph never reached the dispatcher — a real state the caller renders differently, which is why\n * this returns null rather than an empty string.\n /\n GetGraphParentTaskID(item: TimelineItem): string \| null {\n const raw = item?.data?.OutputData;\n if (!raw) return null;\n try {\n const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;\n const id = parsed?.parentTaskID;\n return typeof id === 'string' && id.length > 0 ? id : null;\n } catch {\n return null;\n }\n }\n\n /\n A step inside the graph was selected.\n \n An Agent node carries the run it started, so selecting one offers the same navigation a\n * Sub-Agent step already does — that link is the seam between the two views, and without it a\n * dispatched sub-agent run is unreachable from the run that caused it.\n /\n OnGraphNodeSelected(event: { TaskID: string; Task: MJTaskEntity \| null }): void {\n const agentRunID = event.Task?.AgentRunID;\n if (agentRunID) {\n this.navigateToEntity.emit({ entityName: 'MJ: AI Agent Runs', recordId: agentRunID });\n return;\n }\n if (event.Task?.ActionID) {\n this.navigateToEntity.emit({ entityName: 'MJ: Tasks', recordId: event.TaskID });\n }\n }\n\n /\n Expands a task-graph step into the graph's own steps, as ordinary timeline rows.\n \n The graph's steps are steps. They used to appear as an embedded canvas inside the list — a\n * diagram wedged into a vertical column, in a different visual language from everything around it,\n * and the only work in a run that could not be read, selected or navigated the same way as the\n * rest. They are rows now, colour-coded so their provenance is obvious, with the canvas moved to\n * the detail panel where edges have room to be seen.\n \n One query rather than a walk: the whole subtree arrives at once, so there is no\n * \"Loading sub-agent steps…\" and no per-level round trip.\n /\n async ExpandTaskGraph(item: TimelineItem): Promise<void> {\n if (item.childrenLoaded \|\| this.expandingGraphIDs.has(item.id)) return;\n\n this.expandingGraphIDs.add(item.id);\n this.cdr.markForCheck();\n try {\n if (!this.RunTree) {\n this.error = 'The run tree is not loaded yet, so this workflow cannot be expanded.';\n return;\n }\n\n // The graph hangs off THIS step in the tree, so the subtree to splice in is the node whose id\n // matches the step — not the whole run, which is already on screen above it.\n const stepNode = FindAgentRunTreeNodes(this.RunTree, (n) => n.NodeID === item.id)[0] ?? null;\n\n item.children = ProjectRunTreeToTimeline(stepNode, item.level + 1, true, (n) => this.resolveActionIcon(n));\n item.childrenLoaded = true;\n item.hasNoChildren = item.children.length === 0;\n } catch (e) {\n this.error = e instanceof Error ? e.message : String(e);\n } finally {\n this.expandingGraphIDs.delete(item.id);\n this.cdr.markForCheck();\n }\n }\n\n /* True while a graph's steps are being fetched, so the row can say so. /\n IsExpandingGraph(item: TimelineItem): boolean {\n return this.expandingGraphIDs.has(item.id);\n }\n\n trackByItemId(index: number, item: TimelineItem): string {\n return item.id;\n }\n \n createSubRunDataHelper(): AIAgentRunDataHelper {\n // Create a new data helper instance for sub-runs to prevent caching conflicts\n return new AIAgentRunDataHelper();\n }\n}","@if (loading) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading run steps...\" size=\"medium\"></mj-loading>\n </div>\n} @else if (timelineItems$ \| async; as items) {\n <div class=\"timeline-container\">\n @if (items.length > 0) {\n <div class=\"timeline\">\n @for (item of items; track trackByItemId($index, item)) {\n <!-- Main Timeline Item -->\n <mj-ai-agent-run-step-node\n [item]=\"item\"\n [isSelected]=\"selectedItem?.id === item.id\"\n (itemClick)=\"selectItem(item)\"\n (expandToggle)=\"toggleItemExpansion(item, $event)\"\n (navigateToEntity)=\"navigateToEntity.emit($event)\">\n </mj-ai-agent-run-step-node>\n <!-- Children Container (for both Sub-Agent and ParentID relationships) -->\n @if (item.isExpanded) {\n <!-- Show loading indicator while loading Sub-Agent children -->\n @if (item.type === 'step' && item.data?.StepType === 'Sub-Agent' && !item.childrenLoaded) {\n <div class=\"loading-children\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading sub-agent steps...\n </div>\n }\n <!-- Show no children message for Sub-Agents -->\n @if (item.type === 'step' && item.data?.StepType === 'Sub-Agent' && item.childrenLoaded && item.hasNoChildren) {\n <div class=\"no-children\">\n <i class=\"fas fa-info-circle\"></i> No sub-agent steps found\n </div>\n }\n <!-- Render children recursively (works for both Sub-Agent and ParentID children) -->\n @if (item.children && item.children.length > 0) {\n <ng-container ngTemplateOutlet=\"recursiveSteps; context: { $implicit: item.children }\"></ng-container>\n }\n <!-- A TaskGraph step stands in for a whole graph of Task rows. Its steps render as\n ORDINARY ROWS, colour-coded for provenance — they are steps, and squeezing a diagram\n into the column made them the only work in a run that could not be read, selected or\n navigated like everything else. The canvas lives in the detail panel, where edges\n (which branch was taken, and why) have the room they need. -->\n @if (item.type === 'step' && item.data?.StepType === 'TaskGraph') {\n @if (IsExpandingGraph(item)) {\n <div class=\"loading-children\">\n <i class=\"fas fa-spinner fa-spin\"></i> Loading workflow steps...\n </div>\n } @else if (!GetGraphParentTaskID(item)) {\n <div class=\"no-children\">\n <i class=\"fas fa-info-circle\"></i>\n This workflow was recorded but never reached the dispatcher.\n </div>\n } @else if (item.childrenLoaded && item.hasNoChildren) {\n <div class=\"no-children\">\n <i class=\"fas fa-info-circle\"></i> This workflow has no steps yet.\n </div>\n }\n }\n <!-- For actual sub-run items (from the initial load) - legacy support -->\n @if (item.type === 'subrun' && item.data?.ID) {\n <mj-ai-agent-run-timeline\n [aiAgentRunId]=\"item.data.ID\"\n [dataHelper]=\"createSubRunDataHelper()\"\n [autoRefresh]=\"false\"\n (itemSelected)=\"selectItem($event)\"\n (navigateToEntity)=\"navigateToEntity.emit($event)\">\n </mj-ai-agent-run-timeline>\n }\n }\n }\n </div>\n }\n @if (items.length === 0) {\n <mj-empty-state\n Icon=\"fa-solid fa-stream\"\n Title=\"No execution steps found\" />\n }\n </div>\n} @else {\n <!-- timelineItems$ hasn't emitted yet -->\n <div class=\"loading-state\">\n <mj-loading text=\"Loading run steps...\" size=\"medium\"></mj-loading>\n </div>\n}\n\n@if (error) {\n <mj-empty-state\n Variant=\"error\"\n [Message]=\"error\" />\n}\n\n<!-- Recursive template for rendering nested children (ParentID relationships) -->\n<ng-template #recursiveSteps let-steps>\n @for (step of steps; track trackByItemId($index, step)) {\n <mj-ai-agent-run-step-node\n [item]=\"step\"\n [isSelected]=\"selectedItem?.id === step.id\"\n (itemClick)=\"selectItem(step)\"\n (expandToggle)=\"toggleItemExpansion(step, $event)\"\n (navigateToEntity)=\"navigateToEntity.emit($event)\">\n </mj-ai-agent-run-step-node>\n <!-- Recursively render this step's children if expanded -->\n @if (step.isExpanded && step.children && step.children.length > 0) {\n <ng-container *ngTemplateOutlet=\"recursiveSteps; context: { $implicit: step.children }\"></ng-container>\n }\n }\n</ng-template>"]}

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

@@ -221,14 +221,14 @@ function MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("size", 45);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("selectedTimelineItem", ctx_r0.selectedTimelineItem);
+    i0.ɵɵproperty("selectedTimelineItem", ctx_r0.selectedTimelineItem)("Provider", ctx_r0.ProviderToUse);
 } }
 function MJAIAgentRunFormComponentExtended_Conditional_55_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 35)(1, "as-split", 52)(2, "as-split-area", 53)(3, "mj-ai-agent-run-timeline", 54);
     i0.ɵɵlistener("itemSelected", function MJAIAgentRunFormComponentExtended_Conditional_55_Template_mj_ai_agent_run_timeline_itemSelected_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectTimelineItem($event)); })("navigateToEntity", function MJAIAgentRunFormComponentExtended_Conditional_55_Template_mj_ai_agent_run_timeline_navigateToEntity_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToEntityRecord($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(4, MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template, 2, 2, "as-split-area", 53);
+    i0.ɵɵconditionalCreate(4, MJAIAgentRunFormComponentExtended_Conditional_55_Conditional_4_Template, 2, 3, "as-split-area", 53);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1548,7 +1548,7 @@ let MJAIAgentRunFormComponentExtended = class MJAIAgentRunFormComponentExtended
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.timelineComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.analyticsComponent = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 59, vars: 35, consts: [["analyticsComponent", ""], [1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [1, "fas", 3, "ngClass"], [1, "fas", "fa-robot"], [1, "header-info"], [1, "meta-info"], [1, "agent-name"], [1, "run-id"], [1, "parent-run"], ["title", "Open conversation in Chat app", 1, "conversation-pill"], [1, "header-right"], ["title", "This run executed in Plan Mode \u2014 the agent presented a plan for human approval before executing actions or sub-agents", 1, "plan-mode-badge"], [1, "status-badge"], ["title", "This run submitted a workflow that runs on the dispatcher. The run finished when the workflow was submitted; the workflow itself is still going. This view refreshes on its own.", 1, "workflow-running-badge"], [1, "header-actions"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], [1, "configuration-bar"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-diagram-project"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-info-circle"], [1, "content-area"], [1, "tab-content", 2, "height", "100%"], [1, "tab-content"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], [1, "fas", "fa-level-up-alt"], [1, "parent-link", 3, "click"], ["title", "Open conversation in Chat app", 1, "conversation-pill", 3, "click"], [1, "fas", "fa-comments"], [1, "fas", "fa-external-link-alt", "pill-action"], [1, "fas", "fa-clipboard-check"], [1, "fas", "fa-circle-notch", "fa-spin"], [1, "value", "loading"], [1, "fas", "fa-spinner", "fa-spin"], [1, "config-item"], [1, "fas", "fa-cog"], [1, "config-content"], [1, "config-label"], [1, "config-value"], ["direction", "horizontal", 2, "height", "100%"], [3, "size"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "dataHelper", "RunTree"], [3, "closePanel", "navigateToActionLog", "copyToClipboard", "selectedTimelineItem"], [3, "aiAgentRunId", "dataHelper", "agentName", "runStatus", "agentIconClass", "agentLogoUrl", "RunTree"], [3, "agentRunId", "RunTree"], [3, "Expanded"], ["mjAccordionTitle", ""], [1, "details-grid"], [1, "detail-item"], ["href", "javascript:void(0)", 1, "entity-link"], [1, "success"], [1, "error-message"], [1, "detail-item", "full-width"], [1, "fas", "fa-cogs"], [1, "fas", "fa-tasks"], [1, "message"], [1, "fas", "fa-dollar-sign"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [2, "padding", "20px", "text-align", "center", "color", "var(--mj-text-muted)"], [1, "fas", "fa-code"], [1, "fas", "fa-upload"], [1, "fas", "fa-database"], [1, "fas", "fa-download"], [2, "padding", "20px", "background", "var(--mj-bg-surface-card)"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "fas", "fa-code-compare"]], template: function MJAIAgentRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 59, vars: 35, consts: [["analyticsComponent", ""], [1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [1, "fas", 3, "ngClass"], [1, "fas", "fa-robot"], [1, "header-info"], [1, "meta-info"], [1, "agent-name"], [1, "run-id"], [1, "parent-run"], ["title", "Open conversation in Chat app", 1, "conversation-pill"], [1, "header-right"], ["title", "This run executed in Plan Mode \u2014 the agent presented a plan for human approval before executing actions or sub-agents", 1, "plan-mode-badge"], [1, "status-badge"], ["title", "This run submitted a workflow that runs on the dispatcher. The run finished when the workflow was submitted; the workflow itself is still going. This view refreshes on its own.", 1, "workflow-running-badge"], [1, "header-actions"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], [1, "configuration-bar"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-diagram-project"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-info-circle"], [1, "content-area"], [1, "tab-content", 2, "height", "100%"], [1, "tab-content"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], [1, "fas", "fa-level-up-alt"], [1, "parent-link", 3, "click"], ["title", "Open conversation in Chat app", 1, "conversation-pill", 3, "click"], [1, "fas", "fa-comments"], [1, "fas", "fa-external-link-alt", "pill-action"], [1, "fas", "fa-clipboard-check"], [1, "fas", "fa-circle-notch", "fa-spin"], [1, "value", "loading"], [1, "fas", "fa-spinner", "fa-spin"], [1, "config-item"], [1, "fas", "fa-cog"], [1, "config-content"], [1, "config-label"], [1, "config-value"], ["direction", "horizontal", 2, "height", "100%"], [3, "size"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "dataHelper", "RunTree"], [3, "closePanel", "navigateToActionLog", "copyToClipboard", "selectedTimelineItem", "Provider"], [3, "aiAgentRunId", "dataHelper", "agentName", "runStatus", "agentIconClass", "agentLogoUrl", "RunTree"], [3, "agentRunId", "RunTree"], [3, "Expanded"], ["mjAccordionTitle", ""], [1, "details-grid"], [1, "detail-item"], ["href", "javascript:void(0)", 1, "entity-link"], [1, "success"], [1, "error-message"], [1, "detail-item", "full-width"], [1, "fas", "fa-cogs"], [1, "fas", "fa-tasks"], [1, "message"], [1, "fas", "fa-dollar-sign"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [2, "padding", "20px", "text-align", "center", "color", "var(--mj-text-muted)"], [1, "fas", "fa-code"], [1, "fas", "fa-upload"], [1, "fas", "fa-database"], [1, "fas", "fa-download"], [2, "padding", "20px", "background", "var(--mj-bg-surface-card)"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "fas", "fa-code-compare"]], template: function MJAIAgentRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "div", 5)(5, "div", 6);
             i0.ɵɵconditionalCreate(6, MJAIAgentRunFormComponentExtended_Conditional_6_Template, 1, 2, "img", 7);
             i0.ɵɵconditionalCreate(7, MJAIAgentRunFormComponentExtended_Conditional_7_Template, 1, 1, "i", 8);
@@ -1683,7 +1683,7 @@ MJAIAgentRunFormComponentExtended = __decorate([
 export { MJAIAgentRunFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIAgentRunFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-agent-run-form', template: "<div class=\"record-form-container ai-agent-run-form\">\n  <div class=\"record-form\">\n    <!-- Header -->\n    <div class=\"header\">\n      <div class=\"header-content\">\n        <div class=\"header-left\">\n          <div class=\"icon-wrapper\">\n            @if (agent && agent.LogoURL) {\n              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name || 'Agent'\" class=\"agent-logo\" />\n            }\n            @if (agent && !agent.LogoURL && agent.IconClass) {\n              <i class=\"fas\" [ngClass]=\"agent.IconClass\"></i>\n            }\n            @if (!agent || (!agent.LogoURL && !agent.IconClass)) {\n              <i class=\"fas fa-robot\"></i>\n            }\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Run</h2>\n            <div class=\"meta-info\">\n              @if (agent) {\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agents', record.AgentID)\">\n                    {{ agent.Name }}\n                  </a>\n                </span>\n              }\n              <span class=\"run-id\">{{ record.ID }}</span>\n              @if (record.ParentRunID) {\n                <span class=\"parent-run\">\n                  <i class=\"fas fa-level-up-alt\"></i>\n                  <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n                </span>\n              }\n              <!-- Conversation Link Pill -->\n              @if (record.ConversationID) {\n                <span class=\"conversation-pill\" (click)=\"navigateToConversation()\" title=\"Open conversation in Chat app\">\n                  <i class=\"fas fa-comments\"></i>\n                  <span>Conversation</span>\n                  <i class=\"fas fa-external-link-alt pill-action\"></i>\n                </span>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"header-right\">\n          @if (record.PlanMode) {\n            <div class=\"plan-mode-badge\" title=\"This run executed in Plan Mode \u2014 the agent presented a plan for human approval before executing actions or sub-agents\">\n              <i class=\"fas fa-clipboard-check\"></i>\n              Plan Mode\n            </div>\n          }\n          <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n            <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n            {{ record.Status }}\n          </div>\n          <!-- A workflow outlives the run that submitted it, so a Completed run can still have work\n               in flight. Said beside the status rather than instead of it \u2014 both are true. -->\n          @if (WorkflowStillRunning) {\n            <div class=\"workflow-running-badge\"\n                 title=\"This run submitted a workflow that runs on the dispatcher. The run finished when the workflow was submitted; the workflow itself is still going. This view refreshes on its own.\">\n              <i class=\"fas fa-circle-notch fa-spin\"></i>\n              Workflow still running\n            </div>\n          }\n          <div class=\"header-actions\">\n            <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n              <i class=\"fas fa-sync-alt\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat\">\n          <span class=\"label\">Started</span>\n          <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n        </div>\n        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Completed</span>\n            <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n          </div>\n        }\n        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Duration</span>\n            <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n          </div>\n        }\n        @if (record.Success !== null && record.CompletedAt !== null) {\n          <div class=\"stat\">\n            <span class=\"label\">Result</span>\n            <span class=\"value\" [class.success]=\"record.Success\" [class.error]=\"!record.Success\">\n              {{ record.Success ? 'Success' : 'Failed' }}\n            </span>\n          </div>\n        }\n        @if (costMetrics && (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Tokens</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">{{ (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) | number:'1.0-0' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (costMetrics && costMetrics.totalCost > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Cost</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">${{ costMetrics.totalCost | number:'1.2-4' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (record.EffortLevel) {\n          <div class=\"stat\">\n            <span class=\"label\">Effort Level</span>\n            <span class=\"value\">{{ record.EffortLevel }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n      @if (record.ConfigurationID) {\n        <div class=\"configuration-bar\">\n          <div class=\"config-item\">\n            <i class=\"fas fa-cog\"></i>\n            <div class=\"config-content\">\n              <div class=\"config-label\">Configuration</div>\n              <div class=\"config-value\">\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Configurations', record.ConfigurationID)\">\n                  {{ record.Configuration || 'Unknown' }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"tabs\">\n      <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"changeTab('timeline')\">\n        <i class=\"fas fa-stream\"></i> Timeline\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'visualization'\" (click)=\"changeTab('visualization')\">\n        <i class=\"fas fa-diagram-project\"></i> Visualization\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'analytics'\" (click)=\"changeTab('analytics')\">\n        <i class=\"fas fa-chart-line\"></i> Analytics\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\">\n        <i class=\"fas fa-info-circle\"></i> Details\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"content-area\">\n      <!-- Timeline Tab -->\n      @if (activeTab === 'timeline') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          <as-split direction=\"horizontal\" style=\"height: 100%;\">\n            <!-- Timeline Pane -->\n            <as-split-area [size]=\"selectedTimelineItem ? 55 : 100\">\n              <mj-ai-agent-run-timeline\n                [aiAgentRunId]=\"record.ID\"\n                [dataHelper]=\"dataHelper\"\n                [RunTree]=\"runTree\"\n                (itemSelected)=\"selectTimelineItem($event)\"\n                (navigateToEntity)=\"navigateToEntityRecord($event)\">\n              </mj-ai-agent-run-timeline>\n            </as-split-area>\n            <!-- JSON Detail Pane -->\n            @if (selectedTimelineItem) {\n              <as-split-area [size]=\"45\">\n                <mj-ai-agent-run-step-detail\n                  [selectedTimelineItem]=\"selectedTimelineItem\"\n                  (closePanel)=\"closeJsonPanel()\"\n                  (navigateToActionLog)=\"navigateToActionLog($event)\"\n                  (copyToClipboard)=\"copyToClipboard($event)\">\n                </mj-ai-agent-run-step-detail>\n              </as-split-area>\n            }\n          </as-split>\n        </div>\n      }\n\n      <!-- Visualization Tab (animated flow views + static flowchart) -->\n      @if (activeTab === 'visualization') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (visualizationLoaded) {\n            <mj-ai-agent-run-flow\n              [aiAgentRunId]=\"record.ID\"\n              [dataHelper]=\"dataHelper\"\n              [agentName]=\"agent?.Name || null\"\n              [runStatus]=\"record.Status || ''\"\n              [agentIconClass]=\"agent?.IconClass || null\"\n              [agentLogoUrl]=\"agent?.LogoURL || null\"\n              [RunTree]=\"runTree\">\n            </mj-ai-agent-run-flow>\n          }\n        </div>\n      }\n\n      <!-- Analytics Tab -->\n      @if (activeTab === 'analytics') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (analyticsLoaded) {\n            <mj-ai-agent-run-analytics\n              #analyticsComponent\n              [agentRunId]=\"record.ID\"\n              [RunTree]=\"runTree\"\n              >\n            </mj-ai-agent-run-analytics>\n          }\n        </div>\n      }\n\n      <!-- Details Tab -->\n      @if (activeTab === 'details') {\n        <div class=\"tab-content\">\n          <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-info-circle\"></i> General Information\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Agent</label>\n                    <span>\n                      <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agents', record.AgentID)\">\n                        {{ agent?.Name || 'N/A' }}\n                      </a>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Parent Run ID</label>\n                    <span>\n                      @if (record.ParentRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n                          {{ record.ParentRunID }}\n                        </a>\n                      }\n                      @if (!record.ParentRunID) {\n                        <span>None (Root)</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Last Run ID</label>\n                    <span>\n                      @if (record.LastRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n                          {{ record.LastRunID }}\n                        </a>\n                      }\n                      @if (!record.LastRunID) {\n                        <span>None</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Conversation ID</label>\n                    <span>\n                      @if (record.ConversationID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Conversations', record.ConversationID)\">\n                          {{ record.ConversationID }}\n                        </a>\n                      }\n                      @if (!record.ConversationID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>User</label>\n                    <span>\n                      @if (record.UserID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Users', record.UserID)\">\n                          {{ record.User || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.UserID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-cogs\"></i> Execution Settings\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Override Model</label>\n                    <span>\n                      @if (record.OverrideModelID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Models', record.OverrideModelID)\">\n                          {{ record.OverrideModel || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideModelID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Override Vendor</label>\n                    <span>\n                      @if (record.OverrideVendorID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Vendors', record.OverrideVendorID)\">\n                          {{ record.OverrideVendor || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideVendorID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Verbose Logging</label>\n                    <span>{{ record.Verbose ? 'Yes' : 'No' }}</span>\n                  </div>\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-tasks\"></i> Execution Status\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Status</label>\n                    <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n                      {{ record.Status }}\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Success</label>\n                    @if (record.Success === null) {\n                      <span>In Progress</span>\n                    }\n                    @else if (record.Success) {\n                      <span class=\"success\">Yes</span>\n                    }\n                    @else {\n                      <span class=\"error-message\">No</span>\n                    }\n                  </div>\n                  @if (record.Message) {\n                    <div class=\"detail-item full-width\">\n                      <label>Message</label>\n                      <div class=\"message\">{{ record.Message }}</div>\n                    </div>\n                  }\n                  @if (record.ErrorMessage) {\n                    <div class=\"detail-item full-width\">\n                      <label>Error Message</label>\n                      <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n                    </div>\n                  }\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-dollar-sign\"></i> Usage &amp; Cost\n            </ng-template>\n            <div class=\"details-grid\">\n              <div class=\"detail-item\">\n                <label>Total Tokens Used</label>\n                <span>{{ record.TotalTokensUsed ? (record.TotalTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Prompt Tokens</label>\n                <span>{{ record.TotalPromptTokensUsed ? (record.TotalPromptTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Completion Tokens</label>\n                <span>{{ record.TotalCompletionTokensUsed ? (record.TotalCompletionTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Total Cost</label>\n                <span>{{ record.TotalCost != null ? ('$' + (record.TotalCost | number:'1.2-4')) : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Total Prompt Iterations</label>\n                <span>{{ record.TotalPromptIterations != null ? (record.TotalPromptIterations | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n            </div>\n          </mj-accordion-panel>\n          @if (record.Result) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-code\"></i> Result\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedResult\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading result data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.StartingPayload) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-upload\"></i> Starting Payload\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedStartingPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.Data) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-database\"></i> Execution Data\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedData\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading execution data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.FinalPayload) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-download\"></i> Final Payload\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedFinalPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading final payload data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (showPayloadDiff) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-code-compare\"></i> Payload Diff\n              </ng-template>\n              <div style=\"padding: 20px; background: var(--mj-bg-surface-card);\">\n                @if (isParsingComplete) {\n                  <mj-deep-diff\n                    [oldValue]=\"startingPayloadObject\"\n                    [newValue]=\"finalPayloadObject\"\n                    [title]=\"''\"\n                    [showSummary]=\"true\"\n                    [showUnchanged]=\"false\"\n                    [expandAll]=\"false\"\n                    [maxDepth]=\"10\"\n                    [maxStringLength]=\"200\"\n                    [treatNullAsUndefined]=\"true\">\n                  </mj-deep-diff>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload diff...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n    </div>\n  }\n</div>\n</div>\n</div>", styles: [".ai-agent-run-form {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form > .record-form,\n.ai-agent-run-form > .record-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* Header Styles */\n.header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 20px;\n  overflow: hidden;\n}\n\n.agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n}\n\n.parent-run {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link {\n  color: var(--mj-status-error);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link:hover {\n  color: var(--mj-status-error);\n  text-decoration: underline;\n}\n\n.agent-name {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.run-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n/* Conversation Link Pill */\n.conversation-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.conversation-pill i:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill .pill-action {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill:hover .pill-action {\n  opacity: 1;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge[data-status=\"Paused\"] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.small {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n/* Plan Mode chip \u2014 shown next to the status badge when AIAgentRun.PlanMode = 1 */\n.plan-mode-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon {\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.btn-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n/* Configuration Bar */\n.configuration-bar {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n  margin-top: 16px;\n}\n\n.config-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item > i {\n  font-size: 1.2em;\n  color: var(--mj-text-muted);\n  width: 24px;\n  text-align: center;\n}\n\n.config-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-value .entity-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value .entity-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat .label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.stat .value.success {\n  color: var(--mj-status-success);\n}\n\n.stat .value.error {\n  color: var(--mj-status-error);\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.tab {\n  padding: 12px 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n/* Content Area */\n.content-area {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content {\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n}\n\n/* Details tab accordion panels */\n.tab-content mj-accordion-panel {\n  display: block;\n  margin-bottom: 8px;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-pane-header h3 i {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.json-pane-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta .meta-item label {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link {\n  margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-link .btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  overflow: auto;\n  padding: 20px;\n  gap: 10px;\n  min-height: 0;\n  margin-bottom: 45px;\n}\n\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n/* Timeline Styles */\n.timeline-container {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline-container > .timeline {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.timeline {\n  position: relative;\n  padding-left: 40px;\n}\n\n.timeline::before {\n  content: '';\n  position: absolute;\n  left: 20px;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n.timeline-item {\n  position: relative;\n  margin-bottom: 24px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n  transform: translateX(4px);\n}\n\n.timeline-item.selected {\n  transform: translateX(8px);\n}\n\n.timeline-item.selected .timeline-content {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.timeline-marker {\n  position: absolute;\n  left: -30px;\n  top: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-border-default);\n  z-index: 1;\n  transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"] {\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"] {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"info\"] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.timeline-marker[data-color=\"warning\"] {\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n  border-color: var(--mj-text-muted);\n  color: var(--mj-text-muted);\n}\n\n.timeline-marker.small {\n  width: 28px;\n  height: 28px;\n  font-size: 12px;\n}\n\n.timeline-content {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 16px 20px;\n  margin-left: 20px;\n  box-shadow: var(--mj-shadow-sm);\n  transition: all 0.2s ease;\n}\n\n.timeline-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.timeline-header h4 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.timeline-header h5 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-time {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-family: monospace;\n}\n\n.timeline-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.timeline-meta {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.timeline-meta .status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.timeline-meta .status[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.timeline-meta .status[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.timeline-meta .status[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.timeline-meta .status[data-status=\"Paused\"] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.duration {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.timeline-actions {\n  position: absolute;\n  right: 20px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s ease;\n}\n\n.btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.btn-expand {\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.btn-expand:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n/* Timeline Children */\n.timeline-children {\n  position: relative;\n  margin-top: 12px;\n  margin-bottom: 12px;\n}\n\n.timeline-children::before {\n  content: '';\n  position: absolute;\n  left: -10px;\n  top: -12px;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n.child-item {\n  margin-bottom: 12px;\n}\n\n.child-item .timeline-content {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-default);\n}\n\n/* Sub-run timeline styles */\n.sub-run-timeline {\n  background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n  border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  margin-left: 20px;\n  padding-left: 20px;\n  margin-top: 8px;\n  margin-bottom: 8px;\n}\n\n.sub-run-item .timeline-marker {\n  border-width: 2px;\n}\n\n.sub-run-item .timeline-content {\n  transition: all 0.2s ease;\n}\n\n/* JSON Detail Pane (in splitter) */\n.json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-weight: 600;\n}\n\n.json-pane-content {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n}\n\n.json-meta .meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.json-meta span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.action-link .btn-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  font-size: 14px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 4px;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n\n.action-link .btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  text-decoration: none;\n}\n\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n/* Details Tab */\n.details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.detail-item label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-item span {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.error-message {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  padding: 12px;\n  border-radius: 8px;\n  font-size: 13px;\n}\n\n.result-viewer,\n.state-viewer {\n  padding: 20px;\n  max-height: 450px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.result-viewer mj-code-editor,\n.state-viewer mj-code-editor {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Empty States */\n.empty-state,\n.loading-state,\n.error-state {\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i,\n.loading-state i,\n.error-state i {\n  opacity: 0.3;\n  margin-bottom: 16px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n  \n  .header-stats {\n    flex-wrap: wrap;\n  }\n  \n  .json-detail-pane {\n    width: 100%;\n  }\n  \n  .timeline {\n    padding-left: 30px;\n  }\n  \n  .timeline-marker {\n    left: -25px;\n    width: 32px;\n    height: 32px;\n  }\n  \n  .timeline-content {\n    margin-left: 10px;\n  }\n}\n\n/* Entity Link Styles */\n.entity-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  transition: all 0.2s ease;\n  border-bottom: 1px solid transparent;\n  display: inline-block;\n}\n\n.entity-link:hover {\n  color: var(--mj-brand-primary-hover);\n  border-bottom-color: var(--mj-brand-primary-hover);\n}\n\n.entity-link:active {\n  color: var(--mj-brand-primary-hover);\n}\n\n/* Detail Pane Tabs */\n.detail-pane-tabs {\n  display: flex;\n  gap: 8px;\n  margin: 8px 0 0 0;\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 16px;\n}\n\n.detail-tab {\n  padding: 10px 16px;\n  background: none;\n  border: none;\n  border-bottom: 3px solid transparent;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.detail-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.detail-tab i {\n  font-size: 14px;\n}\n\n/* Detail Pane Content */\n.detail-pane-content {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs {\n  /* When tabs are shown, content starts right after tabs */\n  margin-top: 0;\n}\n\n/* Step Payload Diff */\n.step-payload-diff {\n  height: 100%;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.step-payload-diff mj-deep-diff {\n  display: block;\n  height: 100%;\n}\n\n/* JSON Viewer adjustments when no tabs */\n.detail-pane-content:not(.with-tabs) .json-viewer {\n  margin-top: 16px;\n}\n/* A detached workflow still executing after its run completed. Blue rather than green or amber: it\n   is neither finished nor wrong, it is the same \"workflow\" provenance the timeline uses. */\n.workflow-running-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full, 999px);\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  white-space: nowrap;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-ai-agent-run-form', template: "<div class=\"record-form-container ai-agent-run-form\">\n  <div class=\"record-form\">\n    <!-- Header -->\n    <div class=\"header\">\n      <div class=\"header-content\">\n        <div class=\"header-left\">\n          <div class=\"icon-wrapper\">\n            @if (agent && agent.LogoURL) {\n              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name || 'Agent'\" class=\"agent-logo\" />\n            }\n            @if (agent && !agent.LogoURL && agent.IconClass) {\n              <i class=\"fas\" [ngClass]=\"agent.IconClass\"></i>\n            }\n            @if (!agent || (!agent.LogoURL && !agent.IconClass)) {\n              <i class=\"fas fa-robot\"></i>\n            }\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Run</h2>\n            <div class=\"meta-info\">\n              @if (agent) {\n                <span class=\"agent-name\">\n                  <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agents', record.AgentID)\">\n                    {{ agent.Name }}\n                  </a>\n                </span>\n              }\n              <span class=\"run-id\">{{ record.ID }}</span>\n              @if (record.ParentRunID) {\n                <span class=\"parent-run\">\n                  <i class=\"fas fa-level-up-alt\"></i>\n                  <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n                </span>\n              }\n              <!-- Conversation Link Pill -->\n              @if (record.ConversationID) {\n                <span class=\"conversation-pill\" (click)=\"navigateToConversation()\" title=\"Open conversation in Chat app\">\n                  <i class=\"fas fa-comments\"></i>\n                  <span>Conversation</span>\n                  <i class=\"fas fa-external-link-alt pill-action\"></i>\n                </span>\n              }\n            </div>\n          </div>\n        </div>\n        <div class=\"header-right\">\n          @if (record.PlanMode) {\n            <div class=\"plan-mode-badge\" title=\"This run executed in Plan Mode \u2014 the agent presented a plan for human approval before executing actions or sub-agents\">\n              <i class=\"fas fa-clipboard-check\"></i>\n              Plan Mode\n            </div>\n          }\n          <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n            <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n            {{ record.Status }}\n          </div>\n          <!-- A workflow outlives the run that submitted it, so a Completed run can still have work\n               in flight. Said beside the status rather than instead of it \u2014 both are true. -->\n          @if (WorkflowStillRunning) {\n            <div class=\"workflow-running-badge\"\n                 title=\"This run submitted a workflow that runs on the dispatcher. The run finished when the workflow was submitted; the workflow itself is still going. This view refreshes on its own.\">\n              <i class=\"fas fa-circle-notch fa-spin\"></i>\n              Workflow still running\n            </div>\n          }\n          <div class=\"header-actions\">\n            <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n              <i class=\"fas fa-sync-alt\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat\">\n          <span class=\"label\">Started</span>\n          <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n        </div>\n        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Completed</span>\n            <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n          </div>\n        }\n        @if (record.CompletedAt) {\n          <div class=\"stat\">\n            <span class=\"label\">Duration</span>\n            <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n          </div>\n        }\n        @if (record.Success !== null && record.CompletedAt !== null) {\n          <div class=\"stat\">\n            <span class=\"label\">Result</span>\n            <span class=\"value\" [class.success]=\"record.Success\" [class.error]=\"!record.Success\">\n              {{ record.Success ? 'Success' : 'Failed' }}\n            </span>\n          </div>\n        }\n        @if (costMetrics && (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Tokens</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">{{ (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) | number:'1.0-0' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (costMetrics && costMetrics.totalCost > 0) {\n          <div class=\"stat\">\n            <span class=\"label\">Cost</span>\n            @if (!costMetrics.isLoading) {\n              <span class=\"value\">${{ costMetrics.totalCost | number:'1.2-4' }}</span>\n            }\n            @if (costMetrics.isLoading) {\n              <span class=\"value loading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n            }\n          </div>\n        }\n        @if (record.EffortLevel) {\n          <div class=\"stat\">\n            <span class=\"label\">Effort Level</span>\n            <span class=\"value\">{{ record.EffortLevel }}</span>\n          </div>\n        }\n      </div>\n\n      <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n      @if (record.ConfigurationID) {\n        <div class=\"configuration-bar\">\n          <div class=\"config-item\">\n            <i class=\"fas fa-cog\"></i>\n            <div class=\"config-content\">\n              <div class=\"config-label\">Configuration</div>\n              <div class=\"config-value\">\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Configurations', record.ConfigurationID)\">\n                  {{ record.Configuration || 'Unknown' }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"tabs\">\n      <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"changeTab('timeline')\">\n        <i class=\"fas fa-stream\"></i> Timeline\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'visualization'\" (click)=\"changeTab('visualization')\">\n        <i class=\"fas fa-diagram-project\"></i> Visualization\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'analytics'\" (click)=\"changeTab('analytics')\">\n        <i class=\"fas fa-chart-line\"></i> Analytics\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\">\n        <i class=\"fas fa-info-circle\"></i> Details\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"content-area\">\n      <!-- Timeline Tab -->\n      @if (activeTab === 'timeline') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          <as-split direction=\"horizontal\" style=\"height: 100%;\">\n            <!-- Timeline Pane -->\n            <as-split-area [size]=\"selectedTimelineItem ? 55 : 100\">\n              <mj-ai-agent-run-timeline\n                [aiAgentRunId]=\"record.ID\"\n                [dataHelper]=\"dataHelper\"\n                [RunTree]=\"runTree\"\n                (itemSelected)=\"selectTimelineItem($event)\"\n                (navigateToEntity)=\"navigateToEntityRecord($event)\">\n              </mj-ai-agent-run-timeline>\n            </as-split-area>\n            <!-- JSON Detail Pane -->\n            @if (selectedTimelineItem) {\n              <as-split-area [size]=\"45\">\n                <mj-ai-agent-run-step-detail\n                  [selectedTimelineItem]=\"selectedTimelineItem\"\n                  [Provider]=\"ProviderToUse\"\n                  (closePanel)=\"closeJsonPanel()\"\n                  (navigateToActionLog)=\"navigateToActionLog($event)\"\n                  (copyToClipboard)=\"copyToClipboard($event)\">\n                </mj-ai-agent-run-step-detail>\n              </as-split-area>\n            }\n          </as-split>\n        </div>\n      }\n\n      <!-- Visualization Tab (animated flow views + static flowchart) -->\n      @if (activeTab === 'visualization') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (visualizationLoaded) {\n            <mj-ai-agent-run-flow\n              [aiAgentRunId]=\"record.ID\"\n              [dataHelper]=\"dataHelper\"\n              [agentName]=\"agent?.Name || null\"\n              [runStatus]=\"record.Status || ''\"\n              [agentIconClass]=\"agent?.IconClass || null\"\n              [agentLogoUrl]=\"agent?.LogoURL || null\"\n              [RunTree]=\"runTree\">\n            </mj-ai-agent-run-flow>\n          }\n        </div>\n      }\n\n      <!-- Analytics Tab -->\n      @if (activeTab === 'analytics') {\n        <div class=\"tab-content\" style=\"height: 100%;\">\n          @if (analyticsLoaded) {\n            <mj-ai-agent-run-analytics\n              #analyticsComponent\n              [agentRunId]=\"record.ID\"\n              [RunTree]=\"runTree\"\n              >\n            </mj-ai-agent-run-analytics>\n          }\n        </div>\n      }\n\n      <!-- Details Tab -->\n      @if (activeTab === 'details') {\n        <div class=\"tab-content\">\n          <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-info-circle\"></i> General Information\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Agent</label>\n                    <span>\n                      <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agents', record.AgentID)\">\n                        {{ agent?.Name || 'N/A' }}\n                      </a>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Parent Run ID</label>\n                    <span>\n                      @if (record.ParentRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n                          {{ record.ParentRunID }}\n                        </a>\n                      }\n                      @if (!record.ParentRunID) {\n                        <span>None (Root)</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Last Run ID</label>\n                    <span>\n                      @if (record.LastRunID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n                          {{ record.LastRunID }}\n                        </a>\n                      }\n                      @if (!record.LastRunID) {\n                        <span>None</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Conversation ID</label>\n                    <span>\n                      @if (record.ConversationID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Conversations', record.ConversationID)\">\n                          {{ record.ConversationID }}\n                        </a>\n                      }\n                      @if (!record.ConversationID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>User</label>\n                    <span>\n                      @if (record.UserID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: Users', record.UserID)\">\n                          {{ record.User || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.UserID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-cogs\"></i> Execution Settings\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Override Model</label>\n                    <span>\n                      @if (record.OverrideModelID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Models', record.OverrideModelID)\">\n                          {{ record.OverrideModel || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideModelID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Override Vendor</label>\n                    <span>\n                      @if (record.OverrideVendorID) {\n                        <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Vendors', record.OverrideVendorID)\">\n                          {{ record.OverrideVendor || 'N/A' }}\n                        </a>\n                      }\n                      @if (!record.OverrideVendorID) {\n                        <span>N/A</span>\n                      }\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Verbose Logging</label>\n                    <span>{{ record.Verbose ? 'Yes' : 'No' }}</span>\n                  </div>\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-tasks\"></i> Execution Status\n            </ng-template>\n                <div class=\"details-grid\">\n                  <div class=\"detail-item\">\n                    <label>Status</label>\n                    <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n                      {{ record.Status }}\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <label>Success</label>\n                    @if (record.Success === null) {\n                      <span>In Progress</span>\n                    }\n                    @else if (record.Success) {\n                      <span class=\"success\">Yes</span>\n                    }\n                    @else {\n                      <span class=\"error-message\">No</span>\n                    }\n                  </div>\n                  @if (record.Message) {\n                    <div class=\"detail-item full-width\">\n                      <label>Message</label>\n                      <div class=\"message\">{{ record.Message }}</div>\n                    </div>\n                  }\n                  @if (record.ErrorMessage) {\n                    <div class=\"detail-item full-width\">\n                      <label>Error Message</label>\n                      <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n                    </div>\n                  }\n                </div>\n          </mj-accordion-panel>\n          <mj-accordion-panel [Expanded]=\"false\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-dollar-sign\"></i> Usage &amp; Cost\n            </ng-template>\n            <div class=\"details-grid\">\n              <div class=\"detail-item\">\n                <label>Total Tokens Used</label>\n                <span>{{ record.TotalTokensUsed ? (record.TotalTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Prompt Tokens</label>\n                <span>{{ record.TotalPromptTokensUsed ? (record.TotalPromptTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Completion Tokens</label>\n                <span>{{ record.TotalCompletionTokensUsed ? (record.TotalCompletionTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Total Cost</label>\n                <span>{{ record.TotalCost != null ? ('$' + (record.TotalCost | number:'1.2-4')) : 'N/A' }}</span>\n              </div>\n              <div class=\"detail-item\">\n                <label>Total Prompt Iterations</label>\n                <span>{{ record.TotalPromptIterations != null ? (record.TotalPromptIterations | number:'1.0-0') : 'N/A' }}</span>\n              </div>\n            </div>\n          </mj-accordion-panel>\n          @if (record.Result) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-code\"></i> Result\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedResult\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading result data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.StartingPayload) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-upload\"></i> Starting Payload\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedStartingPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.Data) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-database\"></i> Execution Data\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedData\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading execution data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (record.FinalPayload) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-download\"></i> Final Payload\n              </ng-template>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedFinalPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading final payload data...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n          @if (showPayloadDiff) {\n            <mj-accordion-panel [Expanded]=\"false\">\n              <ng-template mjAccordionTitle>\n                <i class=\"fas fa-code-compare\"></i> Payload Diff\n              </ng-template>\n              <div style=\"padding: 20px; background: var(--mj-bg-surface-card);\">\n                @if (isParsingComplete) {\n                  <mj-deep-diff\n                    [oldValue]=\"startingPayloadObject\"\n                    [newValue]=\"finalPayloadObject\"\n                    [title]=\"''\"\n                    [showSummary]=\"true\"\n                    [showUnchanged]=\"false\"\n                    [expandAll]=\"false\"\n                    [maxDepth]=\"10\"\n                    [maxStringLength]=\"200\"\n                    [treatNullAsUndefined]=\"true\">\n                  </mj-deep-diff>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: var(--mj-text-muted);\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload diff...\n                  </div>\n                }\n              </div>\n            </mj-accordion-panel>\n          }\n    </div>\n  }\n</div>\n</div>\n</div>", styles: [".ai-agent-run-form {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form > .record-form,\n.ai-agent-run-form > .record-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* Header Styles */\n.header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n  flex-shrink: 0;\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-brand-primary);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 20px;\n  overflow: hidden;\n}\n\n.agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n}\n\n.parent-run {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link {\n  color: var(--mj-status-error);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link:hover {\n  color: var(--mj-status-error);\n  text-decoration: underline;\n}\n\n.agent-name {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.run-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n/* Conversation Link Pill */\n.conversation-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.conversation-pill i:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill .pill-action {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill:hover .pill-action {\n  opacity: 1;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge[data-status=\"Paused\"] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.small {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n/* Plan Mode chip \u2014 shown next to the status badge when AIAgentRun.PlanMode = 1 */\n.plan-mode-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon {\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.btn-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n/* Configuration Bar */\n.configuration-bar {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid var(--mj-border-default);\n  margin-top: 16px;\n}\n\n.config-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item > i {\n  font-size: 1.2em;\n  color: var(--mj-text-muted);\n  width: 24px;\n  text-align: center;\n}\n\n.config-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.config-value .entity-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value .entity-link:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat .label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.stat .value.success {\n  color: var(--mj-status-success);\n}\n\n.stat .value.error {\n  color: var(--mj-status-error);\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.tab {\n  padding: 12px 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n/* Content Area */\n.content-area {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.tab-content {\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n}\n\n/* Details tab accordion panels */\n.tab-content mj-accordion-panel {\n  display: block;\n  margin-bottom: 8px;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-pane-header h3 i {\n  color: var(--mj-text-muted);\n  font-size: 14px;\n}\n\n.json-pane-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta .meta-item label {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link {\n  margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-link .btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  overflow: auto;\n  padding: 20px;\n  gap: 10px;\n  min-height: 0;\n  margin-bottom: 45px;\n}\n\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n/* Timeline Styles */\n.timeline-container {\n  height: 100%;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.timeline-container > .timeline {\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.timeline {\n  position: relative;\n  padding-left: 40px;\n}\n\n.timeline::before {\n  content: '';\n  position: absolute;\n  left: 20px;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n.timeline-item {\n  position: relative;\n  margin-bottom: 24px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n  transform: translateX(4px);\n}\n\n.timeline-item.selected {\n  transform: translateX(8px);\n}\n\n.timeline-item.selected .timeline-content {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.timeline-marker {\n  position: absolute;\n  left: -30px;\n  top: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface);\n  border: 3px solid var(--mj-border-default);\n  z-index: 1;\n  transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"] {\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"] {\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"info\"] {\n  border-color: var(--mj-status-info);\n  color: var(--mj-status-info);\n}\n\n.timeline-marker[data-color=\"warning\"] {\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n  border-color: var(--mj-text-muted);\n  color: var(--mj-text-muted);\n}\n\n.timeline-marker.small {\n  width: 28px;\n  height: 28px;\n  font-size: 12px;\n}\n\n.timeline-content {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 16px 20px;\n  margin-left: 20px;\n  box-shadow: var(--mj-shadow-sm);\n  transition: all 0.2s ease;\n}\n\n.timeline-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.timeline-header h4 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.timeline-header h5 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.timeline-time {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  font-family: monospace;\n}\n\n.timeline-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.timeline-meta {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.timeline-meta .status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.timeline-meta .status[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.timeline-meta .status[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.timeline-meta .status[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-status-info) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.timeline-meta .status[data-status=\"Paused\"] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n}\n\n.duration {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.timeline-actions {\n  position: absolute;\n  right: 20px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s ease;\n}\n\n.btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.btn-expand {\n  width: 24px;\n  height: 24px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.btn-expand:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n/* Timeline Children */\n.timeline-children {\n  position: relative;\n  margin-top: 12px;\n  margin-bottom: 12px;\n}\n\n.timeline-children::before {\n  content: '';\n  position: absolute;\n  left: -10px;\n  top: -12px;\n  bottom: 0;\n  width: 2px;\n  background: var(--mj-border-default);\n}\n\n.child-item {\n  margin-bottom: 12px;\n}\n\n.child-item .timeline-content {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-default);\n}\n\n/* Sub-run timeline styles */\n.sub-run-timeline {\n  background: color-mix(in srgb, var(--mj-brand-primary) 2%, var(--mj-bg-surface));\n  border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  margin-left: 20px;\n  padding-left: 20px;\n  margin-top: 8px;\n  margin-bottom: 8px;\n}\n\n.sub-run-item .timeline-marker {\n  border-width: 2px;\n}\n\n.sub-run-item .timeline-content {\n  transition: all 0.2s ease;\n}\n\n/* JSON Detail Pane (in splitter) */\n.json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-weight: 600;\n}\n\n.json-pane-content {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta {\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n}\n\n.json-meta .meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.json-meta span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.action-link {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.action-link .btn-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  font-size: 14px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n  border-radius: 4px;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n\n.action-link .btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  text-decoration: none;\n}\n\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n/* Details Tab */\n.details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.detail-item label {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.detail-item span {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.error-message {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n  padding: 12px;\n  border-radius: 8px;\n  font-size: 13px;\n}\n\n.result-viewer,\n.state-viewer {\n  padding: 20px;\n  max-height: 450px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.result-viewer mj-code-editor,\n.state-viewer mj-code-editor {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Empty States */\n.empty-state,\n.loading-state,\n.error-state {\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i,\n.loading-state i,\n.error-state i {\n  opacity: 0.3;\n  margin-bottom: 16px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n  \n  .header-stats {\n    flex-wrap: wrap;\n  }\n  \n  .json-detail-pane {\n    width: 100%;\n  }\n  \n  .timeline {\n    padding-left: 30px;\n  }\n  \n  .timeline-marker {\n    left: -25px;\n    width: 32px;\n    height: 32px;\n  }\n  \n  .timeline-content {\n    margin-left: 10px;\n  }\n}\n\n/* Entity Link Styles */\n.entity-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  transition: all 0.2s ease;\n  border-bottom: 1px solid transparent;\n  display: inline-block;\n}\n\n.entity-link:hover {\n  color: var(--mj-brand-primary-hover);\n  border-bottom-color: var(--mj-brand-primary-hover);\n}\n\n.entity-link:active {\n  color: var(--mj-brand-primary-hover);\n}\n\n/* Detail Pane Tabs */\n.detail-pane-tabs {\n  display: flex;\n  gap: 8px;\n  margin: 8px 0 0 0;\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 16px;\n}\n\n.detail-tab {\n  padding: 10px 16px;\n  background: none;\n  border: none;\n  border-bottom: 3px solid transparent;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, var(--mj-bg-surface));\n}\n\n.detail-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.detail-tab i {\n  font-size: 14px;\n}\n\n/* Detail Pane Content */\n.detail-pane-content {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs {\n  /* When tabs are shown, content starts right after tabs */\n  margin-top: 0;\n}\n\n/* Step Payload Diff */\n.step-payload-diff {\n  height: 100%;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n.step-payload-diff mj-deep-diff {\n  display: block;\n  height: 100%;\n}\n\n/* JSON Viewer adjustments when no tabs */\n.detail-pane-content:not(.with-tabs) .json-viewer {\n  margin-top: 16px;\n}\n/* A detached workflow still executing after its run completed. Blue rather than green or amber: it\n   is neither finished nor wrong, it is the same \"workflow\" provenance the timeline uses. */\n.workflow-running-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full, 999px);\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  white-space: nowrap;\n}\n"] }]
     }], null, { timelineComponent: [{
             type: ViewChild,
             args: [AIAgentRunTimelineComponent]