@memberjunction/ng-core-entity-forms 5.11.0 → 5.12.0

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 (100) hide show
  1. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.js +2 -2
  2. package/dist/lib/custom/AIAgents/add-action-dialog.component.js +2 -2
  3. package/dist/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.js +2 -2
  4. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts +8 -0
  5. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts.map +1 -1
  6. package/dist/lib/custom/AIAgents/ai-agent-form.component.js +199 -139
  7. package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
  8. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.js +2 -2
  9. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.js +2 -2
  10. package/dist/lib/custom/AIAgents/new-agent-dialog.component.js +2 -2
  11. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js +6 -6
  12. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js.map +1 -1
  13. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.js +2 -2
  14. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js +6 -6
  15. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js.map +1 -1
  16. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +2 -2
  17. package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js +2 -2
  18. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js +4 -4
  19. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js.map +1 -1
  20. package/dist/lib/custom/AIPrompts/template-selector-dialog.component.js +2 -2
  21. package/dist/lib/custom/Actions/action-execution-log-form.component.js +4 -4
  22. package/dist/lib/custom/Actions/action-execution-log-form.component.js.map +1 -1
  23. package/dist/lib/custom/Actions/action-form.component.js +22 -22
  24. package/dist/lib/custom/Actions/action-form.component.js.map +1 -1
  25. package/dist/lib/custom/Entities/entity-form.component.d.ts +11 -0
  26. package/dist/lib/custom/Entities/entity-form.component.d.ts.map +1 -1
  27. package/dist/lib/custom/Entities/entity-form.component.js +244 -217
  28. package/dist/lib/custom/Entities/entity-form.component.js.map +1 -1
  29. package/dist/lib/custom/EntityActions/entityaction.form.component.js +2 -2
  30. package/dist/lib/custom/Lists/list-form.component.js +3 -3
  31. package/dist/lib/custom/Lists/list-form.component.js.map +1 -1
  32. package/dist/lib/custom/Queries/query-category-dialog.component.js +3 -3
  33. package/dist/lib/custom/Queries/query-category-dialog.component.js.map +1 -1
  34. package/dist/lib/custom/Queries/query-form.component.js +2 -2
  35. package/dist/lib/custom/Queries/query-run-dialog.component.js +3 -3
  36. package/dist/lib/custom/Queries/query-run-dialog.component.js.map +1 -1
  37. package/dist/lib/custom/Templates/template-param-dialog.component.js +107 -111
  38. package/dist/lib/custom/Templates/template-param-dialog.component.js.map +1 -1
  39. package/dist/lib/custom/Templates/template-params-grid.component.js +2 -2
  40. package/dist/lib/custom/Templates/templates-form.component.js +40 -43
  41. package/dist/lib/custom/Templates/templates-form.component.js.map +1 -1
  42. package/dist/lib/custom/Tests/entity-link-pill.component.js +2 -2
  43. package/dist/lib/custom/Tests/entity-link-pill.component.js.map +1 -1
  44. package/dist/lib/custom/Tests/test-form.component.js +2 -2
  45. package/dist/lib/custom/Tests/test-rubric-form.component.js +2 -2
  46. package/dist/lib/custom/Tests/test-rubric-form.component.js.map +1 -1
  47. package/dist/lib/custom/Tests/test-run-feedback-form.component.js +2 -2
  48. package/dist/lib/custom/Tests/test-run-feedback-form.component.js.map +1 -1
  49. package/dist/lib/custom/Tests/test-run-form.component.js +2 -2
  50. package/dist/lib/custom/Tests/test-suite-form.component.js +2 -2
  51. package/dist/lib/custom/Tests/test-suite-run-form.component.js +2 -2
  52. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js +2 -2
  53. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js +2 -2
  54. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.js +2 -2
  55. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js +2 -2
  56. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts +1 -0
  57. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts.map +1 -1
  58. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js +28 -18
  59. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js.map +1 -1
  60. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +2 -2
  61. package/dist/lib/custom/custom-forms.module.d.ts +2 -1
  62. package/dist/lib/custom/custom-forms.module.d.ts.map +1 -1
  63. package/dist/lib/custom/custom-forms.module.js +7 -3
  64. package/dist/lib/custom/custom-forms.module.js.map +1 -1
  65. package/dist/lib/custom/shared/entity-selector-dialog.component.js +2 -2
  66. package/dist/lib/custom/shared/entity-selector-dialog.component.js.map +1 -1
  67. package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.js +155 -153
  68. package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.js.map +1 -1
  69. package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.d.ts +10 -0
  70. package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.d.ts.map +1 -0
  71. package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.js +105 -0
  72. package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.js.map +1 -0
  73. package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.d.ts.map +1 -1
  74. package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.js +31 -7
  75. package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.js.map +1 -1
  76. package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.d.ts +10 -0
  77. package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.d.ts.map +1 -0
  78. package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.js +89 -0
  79. package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.js.map +1 -0
  80. package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.d.ts.map +1 -1
  81. package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.js +50 -14
  82. package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.js.map +1 -1
  83. package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.d.ts.map +1 -1
  84. package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.js +22 -4
  85. package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.js.map +1 -1
  86. package/dist/lib/generated/Entities/MJAIAgentType/mjaiagenttype.form.component.js +13 -11
  87. package/dist/lib/generated/Entities/MJAIAgentType/mjaiagenttype.form.component.js.map +1 -1
  88. package/dist/lib/generated/Entities/MJAction/mjaction.form.component.js +83 -81
  89. package/dist/lib/generated/Entities/MJAction/mjaction.form.component.js.map +1 -1
  90. package/dist/lib/generated/Entities/MJIntegration/mjintegration.form.component.js +35 -33
  91. package/dist/lib/generated/Entities/MJIntegration/mjintegration.form.component.js.map +1 -1
  92. package/dist/lib/generated/Entities/MJIntegrationObject/mjintegrationobject.form.component.js +25 -19
  93. package/dist/lib/generated/Entities/MJIntegrationObject/mjintegrationobject.form.component.js.map +1 -1
  94. package/dist/lib/generated/generated-forms.module.d.ts +289 -287
  95. package/dist/lib/generated/generated-forms.module.d.ts.map +1 -1
  96. package/dist/lib/generated/generated-forms.module.js +102 -96
  97. package/dist/lib/generated/generated-forms.module.js.map +1 -1
  98. package/dist/lib/shared/components/template-editor.component.js +85 -89
  99. package/dist/lib/shared/components/template-editor.component.js.map +1 -1
  100. package/package.json +31 -31
package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js CHANGED
@@ -2169,11 +2169,11 @@ export class AIAgentRunAnalyticsComponent {
2169
2169
  i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 2 : -1);
2170
2170
  i0.ɵɵadvance();
2171
2171
  i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 3 : -1);
2172
- } }, dependencies: [i2.NgClass, i3.PanelBarComponent, i3.PanelBarItemComponent, i3.PanelBarContentDirective, i3.PanelBarItemTitleDirective, i4.ButtonComponent, i2.DecimalPipe, i2.KeyValuePipe], styles: [".analytics-container[_ngcontent-%COMP%] {\n padding: 20px;\n height: 100%;\n overflow-y: auto;\n background-color: #f8f9fa;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color: #6c757d;\n}\n\n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-bottom: 15px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n\n\n.summary-cards[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n background: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 20px;\n font-size: 24px;\n color: white;\n}\n\n.card-icon.prompts[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n font-size: 28px;\n font-weight: 700;\n color: #212529;\n margin-bottom: 4px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n}\n\n.metric-detail[_ngcontent-%COMP%] .success[_ngcontent-%COMP%] {\n color: #28a745;\n margin-right: 10px;\n}\n\n.metric-detail[_ngcontent-%COMP%] .failed[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n\n\n.analytics-panel[_ngcontent-%COMP%] {\n padding: 15px;\n}\n\n\n\n .analytics-content .k-panelbar {\n border: none;\n background: transparent;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: white;\n overflow: hidden;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n background: white;\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: #2c3e50;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: #2196f3;\n color: white;\n border-radius: 12px 12px 0 0;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: white;\n border-radius: 0 0 12px 12px;\n}\n\n .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n\n\n.charts-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 20px;\n margin-bottom: 20px;\n}\n\n\n\n.chart-card[_ngcontent-%COMP%] {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.chart-card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: #f8f9fa;\n border-bottom: 1px solid #e9ecef;\n cursor: pointer;\n user-select: none;\n}\n\n.chart-card-header[_ngcontent-%COMP%]:hover {\n background-color: #e9ecef;\n}\n\n.chart-card-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.chart-card-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n color: #6c757d;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: #6c757d;\n transition: color 0.2s;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n color: #495057;\n}\n\n.chart-card-body[_ngcontent-%COMP%] {\n padding: 16px;\n background: white;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] .chart-card-body[_ngcontent-%COMP%] {\n padding: 24px;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] .chart-container[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] {\n min-height: 400px;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 16px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.chart-container[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 10px 0;\n font-size: 15px;\n font-weight: 500;\n color: #495057;\n}\n\n.chart-container[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] {\n min-height: 220px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n\n\n.chart-container[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n display: block;\n margin: 0 auto;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n margin-top: 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n font-size: 12px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.legend-color[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n}\n\n.chart-total[_ngcontent-%COMP%] {\n text-align: center;\n margin-top: 10px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n\n\n.detailed-metrics[_ngcontent-%COMP%] {\n margin-top: 20px;\n border-top: 1px solid #e9ecef;\n padding-top: 20px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n margin-bottom: 15px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 8px;\n}\n\n.metrics-table[_ngcontent-%COMP%] {\n overflow-x: auto;\n}\n\n.metrics-table[_ngcontent-%COMP%] table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.metrics-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background-color: #f8f9fa;\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: #495057;\n border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background-color: #f8f9fa;\n}\n\n.success-rate[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.success-rate.high[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.success-rate.medium[_ngcontent-%COMP%] {\n color: #ffc107;\n}\n\n.success-rate.low[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n\n\n.error-analysis[_ngcontent-%COMP%] {\n margin-top: 30px;\n padding: 20px;\n background-color: #fff5f5;\n border-radius: 8px;\n border: 1px solid #f5c6cb;\n}\n\n.error-analysis[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 15px 0;\n color: #721c24;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-analysis-description[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #856404;\n margin-bottom: 20px;\n line-height: 1.5;\n}\n\n.error-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.error-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 10px;\n background-color: white;\n border-radius: 4px;\n font-size: 14px;\n}\n\n.error-count[_ngcontent-%COMP%] {\n background-color: #dc3545;\n color: white;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.error-message[_ngcontent-%COMP%] {\n flex: 1;\n color: #495057;\n}\n\n\n\n.no-errors[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background-color: #d4edda;\n border-radius: 8px;\n border: 1px solid #c3e6cb;\n color: #155724;\n}\n\n.no-errors[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: #28a745;\n}\n\n.no-errors[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n}\n\n\n\n.no-data-message[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.no-data-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 20px;\n color: #dee2e6;\n}\n\n.no-data-message[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 10px 0;\n font-size: 16px;\n}\n\n.no-data-message[_ngcontent-%COMP%] p.small[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #adb5bd;\n}\n\n\n\n.model-comparison[_ngcontent-%COMP%] {\n overflow-x: auto;\n}\n\n.model-comparison[_ngcontent-%COMP%] table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.model-comparison[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background-color: #f8f9fa;\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: #495057;\n border-bottom: 2px solid #dee2e6;\n white-space: nowrap;\n}\n\n.model-comparison[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background-color: #f8f9fa;\n}\n\n\n\n.timeline-stats[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n background-color: #f8f9fa;\n border-radius: 8px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 32px;\n font-weight: 700;\n color: #212529;\n}\n\n.step-breakdown[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 15px 0;\n font-size: 16px;\n font-weight: 500;\n color: #495057;\n}\n\n.step-type-list[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 12px;\n}\n\n.step-type-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n background-color: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.step-type-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 30px;\n text-align: center;\n color: #6c757d;\n}\n\n.type-name[_ngcontent-%COMP%] {\n flex: 1;\n font-weight: 500;\n}\n\n.type-count[_ngcontent-%COMP%] {\n font-weight: 700;\n color: #212529;\n}\n\n.type-percentage[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n margin-left: 5px;\n}\n\n\n\n@media (max-width: 768px) {\n .summary-cards[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .charts-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .timeline-stats[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n}"], changeDetection: 0 }); }
2172
+ } }, dependencies: [i2.NgClass, i3.PanelBarComponent, i3.PanelBarItemComponent, i3.PanelBarContentDirective, i3.PanelBarItemTitleDirective, i4.ButtonComponent, i2.DecimalPipe, i2.KeyValuePipe], styles: [".analytics-container[_ngcontent-%COMP%] {\n padding: 20px;\n height: 100%;\n overflow-y: auto;\n background-color: var(--mj-bg-surface-sunken);\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-bottom: 15px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n.summary-cards[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 20px;\n box-shadow: var(--mj-shadow-sm);\n display: flex;\n align-items: center;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 20px;\n font-size: 24px;\n color: var(--mj-text-inverse);\n}\n\n.card-icon.prompts[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n.card-icon.actions[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n\n.card-icon.cost[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n.card-icon.time[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n\n.card-content[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n font-size: 28px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.metric-detail[_ngcontent-%COMP%] .success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n margin-right: 10px;\n}\n\n.metric-detail[_ngcontent-%COMP%] .failed[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n.analytics-panel[_ngcontent-%COMP%] {\n padding: 15px;\n}\n\n\n\n .analytics-content .k-panelbar {\n border: none;\n background: transparent;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: var(--mj-bg-surface-card);\n overflow: hidden;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n background: var(--mj-bg-surface-card);\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: var(--mj-text-primary);\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-radius: 12px 12px 0 0;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: var(--mj-bg-surface-sunken);\n border-radius: 0 0 12px 12px;\n}\n\n .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: var(--mj-brand-primary);\n margin-right: 8px;\n}\n\n .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: var(--mj-text-inverse);\n}\n\n\n\n.charts-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 20px;\n margin-bottom: 20px;\n}\n\n\n\n.chart-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.chart-card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n cursor: pointer;\n user-select: none;\n}\n\n.chart-card-header[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.chart-card-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.chart-card-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--mj-text-muted);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: color 0.2s;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.chart-card-body[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--mj-bg-surface-card);\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] .chart-card-body[_ngcontent-%COMP%] {\n padding: 24px;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] .chart-container[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] {\n min-height: 400px;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 16px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.chart-container[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 10px 0;\n font-size: 15px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.chart-container[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] {\n min-height: 220px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n\n\n.chart-container[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n display: block;\n margin: 0 auto;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n margin-top: 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n font-size: 12px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.legend-color[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n}\n\n.chart-total[_ngcontent-%COMP%] {\n text-align: center;\n margin-top: 10px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n\n\n.detailed-metrics[_ngcontent-%COMP%] {\n margin-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n padding-top: 20px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n margin-bottom: 15px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 8px;\n}\n\n.metrics-table[_ngcontent-%COMP%] {\n overflow-x: auto;\n}\n\n.metrics-table[_ngcontent-%COMP%] table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.metrics-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface-sunken);\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 2px solid var(--mj-border-strong);\n}\n\n.metrics-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.metrics-table[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.success-rate[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n.success-rate.high[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.success-rate.medium[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.success-rate.low[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n.error-analysis[_ngcontent-%COMP%] {\n margin-top: 30px;\n padding: 20px;\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border-radius: 8px;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.error-analysis[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 15px 0;\n color: var(--mj-status-error);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-analysis-description[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin-bottom: 20px;\n line-height: 1.5;\n}\n\n.error-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.error-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 10px;\n background-color: var(--mj-bg-surface);\n border-radius: 4px;\n font-size: 14px;\n}\n\n.error-count[_ngcontent-%COMP%] {\n background-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.error-message[_ngcontent-%COMP%] {\n flex: 1;\n color: var(--mj-text-secondary);\n}\n\n\n\n.no-errors[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background-color: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n border-radius: 8px;\n border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.no-errors[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-status-success);\n}\n\n.no-errors[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n}\n\n\n\n.no-data-message[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: var(--mj-text-muted);\n}\n\n.no-data-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 20px;\n color: var(--mj-border-strong);\n}\n\n.no-data-message[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 10px 0;\n font-size: 16px;\n}\n\n.no-data-message[_ngcontent-%COMP%] p.small[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n}\n\n\n\n.model-comparison[_ngcontent-%COMP%] {\n overflow-x: auto;\n}\n\n.model-comparison[_ngcontent-%COMP%] table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.model-comparison[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface-sunken);\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 2px solid var(--mj-border-strong);\n white-space: nowrap;\n}\n\n.model-comparison[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.model-comparison[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n\n\n.timeline-stats[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n background-color: var(--mj-bg-surface-sunken);\n border-radius: 8px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin-bottom: 8px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 32px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.step-breakdown[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 15px 0;\n font-size: 16px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.step-type-list[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 12px;\n}\n\n.step-type-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n background-color: var(--mj-bg-surface-sunken);\n border-radius: 6px;\n border: 1px solid var(--mj-border-default);\n}\n\n.step-type-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 30px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.type-name[_ngcontent-%COMP%] {\n flex: 1;\n font-weight: 500;\n}\n\n.type-count[_ngcontent-%COMP%] {\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.type-percentage[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-left: 5px;\n}\n\n\n\n@media (max-width: 768px) {\n .summary-cards[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .charts-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .timeline-stats[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n}"], changeDetection: 0 }); }
2173
2173
  }
2174
2174
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunAnalyticsComponent, [{
2175
2175
  type: Component,
2176
- args: [{ standalone: false, selector: 'mj-ai-agent-run-analytics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"analytics-container\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-state\">\n <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n <p>Loading analytics data...</p>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-state\">\n <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n <p>{{ error }}</p>\n <button kendoButton (click)=\"loadData()\">Retry</button>\n </div>\n }\n\n <!-- Analytics Content -->\n @if (!isLoading && !error) {\n <div class=\"analytics-content\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <!-- Summary Cards -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-tachometer-alt\"></i> Overview\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"summary-cards\">\n <div class=\"summary-card\">\n <div class=\"card-icon prompts\">\n <i class=\"fas fa-microchip\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Prompts</h3>\n <div class=\"metric-value\">{{ promptMetrics.totalCount }}</div>\n <div class=\"metric-detail\">\n <span class=\"success\">{{ promptMetrics.statusBreakdown.success }} successful</span>\n @if (promptMetrics.statusBreakdown.failed > 0) {\n <span class=\"failed\">{{ promptMetrics.statusBreakdown.failed }} failed</span>\n }\n </div>\n </div>\n </div>\n <div class=\"summary-card\">\n <div class=\"card-icon actions\">\n <i class=\"fas fa-cog\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Actions</h3>\n <div class=\"metric-value\">{{ actionMetrics.totalCount }}</div>\n <div class=\"metric-detail\">\n <span class=\"success\">{{ actionMetrics.statusBreakdown.success }} successful</span>\n @if (actionMetrics.statusBreakdown.failed > 0) {\n <span class=\"failed\">{{ actionMetrics.statusBreakdown.failed }} failed</span>\n }\n </div>\n </div>\n </div>\n <div class=\"summary-card\">\n <div class=\"card-icon cost\">\n <i class=\"fas fa-dollar-sign\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Cost</h3>\n <div class=\"metric-value\">{{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n <div class=\"metric-detail\">\n <span>{{ promptMetrics.tokenUsage.totalInput + promptMetrics.tokenUsage.totalOutput }} tokens</span>\n </div>\n </div>\n </div>\n <div class=\"summary-card\">\n <div class=\"card-icon time\">\n <i class=\"fas fa-clock\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Execution Time</h3>\n <div class=\"metric-value\">{{ formatDuration(promptMetrics.totalExecutionTime + actionMetrics.totalExecutionTime) }}</div>\n <div class=\"metric-detail\">\n <span>{{ timelineMetrics.totalSteps }} total steps</span>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n <!-- Prompt Analytics -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-microchip\"></i> Prompt Analytics\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <!-- View Mode Toggle -->\n @if (promptMetrics.totalCount > 0) {\n <div class=\"view-mode-toggle\">\n <button kendoButton\n fillMode=\"flat\"\n size=\"small\"\n (click)=\"toggleViewMode()\">\n <i class=\"fas\" [ngClass]=\"viewMode === 'grid' ? 'fa-expand-arrows-alt' : 'fa-compress-arrows-alt'\"></i>\n {{ viewMode === 'grid' ? 'Expand All' : 'Collapse All' }}\n </button>\n </div>\n }\n <!-- No prompts message -->\n @if (promptMetrics.totalCount === 0) {\n <div class=\"no-data-message\">\n <i class=\"fas fa-info-circle\"></i>\n <p>No prompt executions found in this agent run.</p>\n <p class=\"small\">This agent run may have only executed actions without any AI prompts.</p>\n </div>\n }\n @if (promptMetrics.totalCount > 0) {\n <div class=\"charts-grid\">\n <!-- Model Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['modelDistribution']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('modelDistribution')\">\n <h3><i class=\"fas fa-chart-pie\"></i> Prompts by Model</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['modelDistribution'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"modelDistributionChart\" #modelDistributionChart></div>\n @if (promptMetrics.byModel.size > 0) {\n <div class=\"chart-legend\">\n @for (item of promptMetrics.byModel | keyvalue; track trackByKey($index, item)) {\n <div class=\"legend-item\">\n <span class=\"legend-color\" [style.backgroundColor]=\"getModelColor(item.key)\"></span>\n <span class=\"legend-label\">{{ item.key }}: {{ item.value.count }} ({{ (item.value.count / promptMetrics.totalCount * 100).toFixed(1) }}%)</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <!-- Execution Time by Vendor -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['executionTime']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('executionTime')\">\n <h3><i class=\"fas fa-clock\"></i> Average Execution Time by Vendor</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['executionTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"executionTimeChart\" #executionTimeChart></div>\n </div>\n </div>\n </div>\n <!-- Cost by Vendor -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['costByVendor']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('costByVendor')\">\n <h3><i class=\"fas fa-dollar-sign\"></i> Cost Distribution by Vendor</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['costByVendor'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"costByVendorChart\" #costByVendorChart></div>\n <div class=\"chart-total\">Total: {{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n </div>\n </div>\n </div>\n <!-- Token Usage -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['tokenUsage']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('tokenUsage')\">\n <h3><i class=\"fas fa-coins\"></i> Token Usage by Model</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['tokenUsage'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"tokenUsageChart\" #tokenUsageChart></div>\n </div>\n </div>\n </div>\n </div>\n }\n <!-- Additional Prompt Analytics Charts -->\n @if (promptMetrics.totalCount > 0) {\n <div class=\"charts-grid\" style=\"margin-top: 20px;\">\n <!-- Prompt Execution Time Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptTime']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptTime')\">\n <h3><i class=\"fas fa-hourglass-half\"></i> Average Execution Time by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptTimeDistributionChart\" #promptTimeDistributionChart></div>\n </div>\n </div>\n </div>\n <!-- Prompt Token Usage -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptToken']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptToken')\">\n <h3><i class=\"fas fa-database\"></i> Token Usage by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptToken'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptTokenDistributionChart\" #promptTokenDistributionChart></div>\n </div>\n </div>\n </div>\n <!-- Prompt Cost Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCost']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCost')\">\n <h3><i class=\"fas fa-chart-pie\"></i> Cost Distribution by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptCost'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptCostDistributionChart\" #promptCostDistributionChart></div>\n </div>\n </div>\n </div>\n <!-- Prompt Count by Name -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCount']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCount')\">\n <h3><i class=\"fas fa-list-ol\"></i> Prompt Execution Count</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptCount'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptCountByNameChart\" #promptCountByNameChart></div>\n </div>\n </div>\n </div>\n </div>\n }\n <!-- Detailed Prompt Metrics -->\n <div class=\"detailed-metrics\">\n <button kendoButton\n fillMode=\"flat\"\n (click)=\"promptDetailsExpanded = !promptDetailsExpanded\">\n <i class=\"fas\" [ngClass]=\"promptDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n Detailed Prompt Metrics\n </button>\n @if (promptDetailsExpanded) {\n <div class=\"metrics-table\">\n <table>\n <thead>\n <tr>\n <th>Prompt Name</th>\n <th>Count</th>\n <th>Avg Time</th>\n <th>Total Time</th>\n <th>Success Rate</th>\n </tr>\n </thead>\n <tbody>\n @for (prompt of promptMetrics.byPrompt | keyvalue; track trackByKey($index, prompt)) {\n <tr>\n <td>{{ prompt.key }}</td>\n <td>{{ prompt.value.count }}</td>\n <td>{{ formatDuration(prompt.value.avgTime) }}</td>\n <td>{{ formatDuration(prompt.value.totalTime) }}</td>\n <td>\n <span class=\"success-rate\">\n <!-- Calculate success rate for this prompt -->\n {{ calculatePromptSuccessRate(prompt.key) }}%\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n <!-- Action Analytics -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-cog\"></i> Action Analytics\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <div class=\"charts-grid\">\n <!-- Action Success Rate -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['actionSuccess']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('actionSuccess')\">\n <h3><i class=\"fas fa-chart-bar\"></i> Action Success Rate</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['actionSuccess'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"actionSuccessRateChart\" #actionSuccessRateChart></div>\n </div>\n </div>\n </div>\n <!-- Step Type Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['stepType']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('stepType')\">\n <h3><i class=\"fas fa-layer-group\"></i> Step Type Distribution</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['stepType'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"stepTypeChart\" #stepTypeChart></div>\n </div>\n </div>\n </div>\n </div>\n <!-- Detailed Action Metrics -->\n <div class=\"detailed-metrics\">\n <button kendoButton\n fillMode=\"flat\"\n (click)=\"actionDetailsExpanded = !actionDetailsExpanded\">\n <i class=\"fas\" [ngClass]=\"actionDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n Detailed Action Metrics\n </button>\n @if (actionDetailsExpanded) {\n <div class=\"metrics-table\">\n <table>\n <thead>\n <tr>\n <th>Action Name</th>\n <th>Count</th>\n <th>Avg Time</th>\n <th>Success Rate</th>\n <th>Type</th>\n </tr>\n </thead>\n <tbody>\n @for (action of actionMetrics.byAction | keyvalue; track trackByKey($index, action)) {\n <tr>\n <td>{{ action.key }}</td>\n <td>{{ action.value.count }}</td>\n <td>{{ formatDuration(action.value.avgTime) }}</td>\n <td>\n <span class=\"success-rate\" [class.high]=\"action.value.successRate > 0.9\"\n [class.medium]=\"action.value.successRate > 0.7 && action.value.successRate <= 0.9\"\n [class.low]=\"action.value.successRate <= 0.7\">\n {{ (action.value.successRate * 100).toFixed(1) }}%\n </span>\n </td>\n <td>{{ getActionType(action.key) }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n <!-- Error Analysis -->\n <div class=\"error-analysis-section\">\n @if (actionMetrics.errorAnalysis.size > 0) {\n <div class=\"error-analysis\">\n <h3>\n <i class=\"fas fa-exclamation-triangle\"></i>\n Common Errors\n </h3>\n <p class=\"error-analysis-description\">\n This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention.\n </p>\n <div class=\"error-list\">\n @for (error of getTopErrors(); track trackByErrorMessage($index, error)) {\n <div class=\"error-item\">\n <span class=\"error-count\">{{ error.count }}x</span>\n <span class=\"error-message\">{{ error.message }}</span>\n </div>\n }\n </div>\n </div>\n }\n @if (actionMetrics.errorAnalysis.size === 0) {\n <div class=\"no-errors\">\n <i class=\"fas fa-check-circle\"></i>\n <p>No action errors detected in this run. All actions completed successfully!</p>\n </div>\n }\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n <!-- Model Performance Comparison -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-chart-line\"></i> Model Performance Comparison\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <div class=\"model-comparison\">\n <table>\n <thead>\n <tr>\n <th>Model</th>\n <th>Vendor</th>\n <th>Prompts</th>\n <th>Avg Time</th>\n <th>Total Cost</th>\n <th>Avg Cost/Prompt</th>\n <th>Input Tokens</th>\n <th>Output Tokens</th>\n </tr>\n </thead>\n <tbody>\n @for (model of getModelPerformanceData(); track trackByModelName($index, model)) {\n <tr>\n <td>{{ model.name }}</td>\n <td>{{ model.vendor }}</td>\n <td>{{ model.count }}</td>\n <td>{{ formatDuration(model.avgTime) }}</td>\n <td>{{ formatCost(model.totalCost) }}</td>\n <td>{{ formatCost(model.avgCost) }}</td>\n <td>{{ model.inputTokens | number:'1.0-0' }}</td>\n <td>{{ model.outputTokens | number:'1.0-0' }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n <!-- Timeline Analysis -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-stream\"></i> Execution Timeline Analysis\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <div class=\"timeline-stats\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Total Steps</span>\n <span class=\"stat-value\">{{ timelineMetrics.totalSteps }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Parallel Executions</span>\n <span class=\"stat-value\">{{ timelineMetrics.parallelExecutions }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Max Nesting Depth</span>\n <span class=\"stat-value\">{{ timelineMetrics.deepestNesting }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Sub-Agent Runs</span>\n <span class=\"stat-value\">{{ subAgentRuns.length }}</span>\n </div>\n </div>\n <div class=\"step-breakdown\">\n <h3>Steps by Type</h3>\n <div class=\"step-type-list\">\n @for (type of timelineMetrics.stepsByType | keyvalue; track trackByKey($index, type)) {\n <div class=\"step-type-item\">\n <i class=\"fas\" [ngClass]=\"getStepTypeIcon(type.key)\"></i>\n <span class=\"type-name\">{{ type.key }}</span>\n <span class=\"type-count\">{{ type.value }}</span>\n <span class=\"type-percentage\">({{ (type.value / timelineMetrics.totalSteps * 100).toFixed(1) }}%)</span>\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n </kendo-panelbar>\n </div>\n }\n</div>", styles: [".analytics-container {\n padding: 20px;\n height: 100%;\n overflow-y: auto;\n background-color: #f8f9fa;\n}\n\n/* Loading and Error States */\n.loading-state,\n.error-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color: #6c757d;\n}\n\n.loading-state i,\n.error-state i {\n margin-bottom: 15px;\n}\n\n.error-state {\n color: #dc3545;\n}\n\n/* Summary Cards */\n.summary-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.summary-card {\n background: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 20px;\n font-size: 24px;\n color: white;\n}\n\n.card-icon.prompts {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time {\n background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content h3 {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-value {\n font-size: 28px;\n font-weight: 700;\n color: #212529;\n margin-bottom: 4px;\n}\n\n.metric-detail {\n font-size: 13px;\n color: #6c757d;\n}\n\n.metric-detail .success {\n color: #28a745;\n margin-right: 10px;\n}\n\n.metric-detail .failed {\n color: #dc3545;\n}\n\n/* Analytics Panels */\n.analytics-panel {\n padding: 15px;\n}\n\n/* Kendo PanelBar Styling - Copied from AI Agent Form */\n::ng-deep .analytics-content .k-panelbar {\n border: none;\n background: transparent;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: white;\n overflow: hidden;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n background: white;\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: #2c3e50;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: #2196f3;\n color: white;\n border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: white;\n border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n/* Charts */\n.charts-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 20px;\n margin-bottom: 20px;\n}\n\n/* Chart Cards */\n.chart-card {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n.chart-card.expanded {\n grid-column: 1 / -1;\n}\n\n.chart-card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: #f8f9fa;\n border-bottom: 1px solid #e9ecef;\n cursor: pointer;\n user-select: none;\n}\n\n.chart-card-header:hover {\n background-color: #e9ecef;\n}\n\n.chart-card-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.chart-card-header h3 i {\n font-size: 16px;\n color: #6c757d;\n}\n\n.expand-btn {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: #6c757d;\n transition: color 0.2s;\n}\n\n.expand-btn:hover {\n color: #495057;\n}\n\n.chart-card-body {\n padding: 16px;\n background: white;\n}\n\n.chart-card.expanded .chart-card-body {\n padding: 24px;\n}\n\n.chart-card.expanded .chart-container > div {\n min-height: 400px;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 16px;\n}\n\n.view-mode-toggle button {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.chart-container {\n position: relative;\n}\n\n.chart-container h3 {\n margin: 0 0 10px 0;\n font-size: 15px;\n font-weight: 500;\n color: #495057;\n}\n\n.chart-container > div {\n min-height: 220px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* Ensure SVG charts are centered */\n.chart-container svg {\n display: block;\n margin: 0 auto;\n}\n\n.chart-legend {\n margin-top: 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n font-size: 12px;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.legend-color {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n}\n\n.chart-total {\n text-align: center;\n margin-top: 10px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n/* Detailed Metrics */\n.detailed-metrics {\n margin-top: 20px;\n border-top: 1px solid #e9ecef;\n padding-top: 20px;\n}\n\n.detailed-metrics button {\n margin-bottom: 15px;\n}\n\n.detailed-metrics button i {\n margin-right: 8px;\n}\n\n.metrics-table {\n overflow-x: auto;\n}\n\n.metrics-table table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.metrics-table th {\n background-color: #f8f9fa;\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: #495057;\n border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table td {\n padding: 12px;\n border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table tr:hover {\n background-color: #f8f9fa;\n}\n\n.success-rate {\n font-weight: 500;\n}\n\n.success-rate.high {\n color: #28a745;\n}\n\n.success-rate.medium {\n color: #ffc107;\n}\n\n.success-rate.low {\n color: #dc3545;\n}\n\n/* Error Analysis */\n.error-analysis {\n margin-top: 30px;\n padding: 20px;\n background-color: #fff5f5;\n border-radius: 8px;\n border: 1px solid #f5c6cb;\n}\n\n.error-analysis h3 {\n margin: 0 0 15px 0;\n color: #721c24;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-analysis-description {\n font-size: 14px;\n color: #856404;\n margin-bottom: 20px;\n line-height: 1.5;\n}\n\n.error-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.error-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 10px;\n background-color: white;\n border-radius: 4px;\n font-size: 14px;\n}\n\n.error-count {\n background-color: #dc3545;\n color: white;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.error-message {\n flex: 1;\n color: #495057;\n}\n\n/* No errors state */\n.no-errors {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background-color: #d4edda;\n border-radius: 8px;\n border: 1px solid #c3e6cb;\n color: #155724;\n}\n\n.no-errors i {\n font-size: 24px;\n color: #28a745;\n}\n\n.no-errors p {\n margin: 0;\n font-size: 14px;\n}\n\n/* No data message */\n.no-data-message {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.no-data-message i {\n font-size: 48px;\n margin-bottom: 20px;\n color: #dee2e6;\n}\n\n.no-data-message p {\n margin: 0 0 10px 0;\n font-size: 16px;\n}\n\n.no-data-message p.small {\n font-size: 14px;\n color: #adb5bd;\n}\n\n/* Model Comparison Table */\n.model-comparison {\n overflow-x: auto;\n}\n\n.model-comparison table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.model-comparison th {\n background-color: #f8f9fa;\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: #495057;\n border-bottom: 2px solid #dee2e6;\n white-space: nowrap;\n}\n\n.model-comparison td {\n padding: 12px;\n border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison tr:hover {\n background-color: #f8f9fa;\n}\n\n/* Timeline Analysis */\n.timeline-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.stat-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n background-color: #f8f9fa;\n border-radius: 8px;\n}\n\n.stat-label {\n font-size: 14px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.stat-value {\n font-size: 32px;\n font-weight: 700;\n color: #212529;\n}\n\n.step-breakdown h3 {\n margin: 0 0 15px 0;\n font-size: 16px;\n font-weight: 500;\n color: #495057;\n}\n\n.step-type-list {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 12px;\n}\n\n.step-type-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n background-color: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.step-type-item i {\n width: 30px;\n text-align: center;\n color: #6c757d;\n}\n\n.type-name {\n flex: 1;\n font-weight: 500;\n}\n\n.type-count {\n font-weight: 700;\n color: #212529;\n}\n\n.type-percentage {\n font-size: 13px;\n color: #6c757d;\n margin-left: 5px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .summary-cards {\n grid-template-columns: 1fr;\n }\n \n .charts-grid {\n grid-template-columns: 1fr;\n }\n \n .timeline-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n}"] }]
2176
+ args: [{ standalone: false, selector: 'mj-ai-agent-run-analytics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"analytics-container\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-state\">\n <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n <p>Loading analytics data...</p>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-state\">\n <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n <p>{{ error }}</p>\n <button kendoButton (click)=\"loadData()\">Retry</button>\n </div>\n }\n\n <!-- Analytics Content -->\n @if (!isLoading && !error) {\n <div class=\"analytics-content\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <!-- Summary Cards -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-tachometer-alt\"></i> Overview\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"summary-cards\">\n <div class=\"summary-card\">\n <div class=\"card-icon prompts\">\n <i class=\"fas fa-microchip\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Prompts</h3>\n <div class=\"metric-value\">{{ promptMetrics.totalCount }}</div>\n <div class=\"metric-detail\">\n <span class=\"success\">{{ promptMetrics.statusBreakdown.success }} successful</span>\n @if (promptMetrics.statusBreakdown.failed > 0) {\n <span class=\"failed\">{{ promptMetrics.statusBreakdown.failed }} failed</span>\n }\n </div>\n </div>\n </div>\n <div class=\"summary-card\">\n <div class=\"card-icon actions\">\n <i class=\"fas fa-cog\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Actions</h3>\n <div class=\"metric-value\">{{ actionMetrics.totalCount }}</div>\n <div class=\"metric-detail\">\n <span class=\"success\">{{ actionMetrics.statusBreakdown.success }} successful</span>\n @if (actionMetrics.statusBreakdown.failed > 0) {\n <span class=\"failed\">{{ actionMetrics.statusBreakdown.failed }} failed</span>\n }\n </div>\n </div>\n </div>\n <div class=\"summary-card\">\n <div class=\"card-icon cost\">\n <i class=\"fas fa-dollar-sign\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Cost</h3>\n <div class=\"metric-value\">{{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n <div class=\"metric-detail\">\n <span>{{ promptMetrics.tokenUsage.totalInput + promptMetrics.tokenUsage.totalOutput }} tokens</span>\n </div>\n </div>\n </div>\n <div class=\"summary-card\">\n <div class=\"card-icon time\">\n <i class=\"fas fa-clock\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Execution Time</h3>\n <div class=\"metric-value\">{{ formatDuration(promptMetrics.totalExecutionTime + actionMetrics.totalExecutionTime) }}</div>\n <div class=\"metric-detail\">\n <span>{{ timelineMetrics.totalSteps }} total steps</span>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n <!-- Prompt Analytics -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-microchip\"></i> Prompt Analytics\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <!-- View Mode Toggle -->\n @if (promptMetrics.totalCount > 0) {\n <div class=\"view-mode-toggle\">\n <button kendoButton\n fillMode=\"flat\"\n size=\"small\"\n (click)=\"toggleViewMode()\">\n <i class=\"fas\" [ngClass]=\"viewMode === 'grid' ? 'fa-expand-arrows-alt' : 'fa-compress-arrows-alt'\"></i>\n {{ viewMode === 'grid' ? 'Expand All' : 'Collapse All' }}\n </button>\n </div>\n }\n <!-- No prompts message -->\n @if (promptMetrics.totalCount === 0) {\n <div class=\"no-data-message\">\n <i class=\"fas fa-info-circle\"></i>\n <p>No prompt executions found in this agent run.</p>\n <p class=\"small\">This agent run may have only executed actions without any AI prompts.</p>\n </div>\n }\n @if (promptMetrics.totalCount > 0) {\n <div class=\"charts-grid\">\n <!-- Model Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['modelDistribution']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('modelDistribution')\">\n <h3><i class=\"fas fa-chart-pie\"></i> Prompts by Model</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['modelDistribution'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"modelDistributionChart\" #modelDistributionChart></div>\n @if (promptMetrics.byModel.size > 0) {\n <div class=\"chart-legend\">\n @for (item of promptMetrics.byModel | keyvalue; track trackByKey($index, item)) {\n <div class=\"legend-item\">\n <span class=\"legend-color\" [style.backgroundColor]=\"getModelColor(item.key)\"></span>\n <span class=\"legend-label\">{{ item.key }}: {{ item.value.count }} ({{ (item.value.count / promptMetrics.totalCount * 100).toFixed(1) }}%)</span>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <!-- Execution Time by Vendor -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['executionTime']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('executionTime')\">\n <h3><i class=\"fas fa-clock\"></i> Average Execution Time by Vendor</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['executionTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"executionTimeChart\" #executionTimeChart></div>\n </div>\n </div>\n </div>\n <!-- Cost by Vendor -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['costByVendor']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('costByVendor')\">\n <h3><i class=\"fas fa-dollar-sign\"></i> Cost Distribution by Vendor</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['costByVendor'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"costByVendorChart\" #costByVendorChart></div>\n <div class=\"chart-total\">Total: {{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n </div>\n </div>\n </div>\n <!-- Token Usage -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['tokenUsage']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('tokenUsage')\">\n <h3><i class=\"fas fa-coins\"></i> Token Usage by Model</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['tokenUsage'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"tokenUsageChart\" #tokenUsageChart></div>\n </div>\n </div>\n </div>\n </div>\n }\n <!-- Additional Prompt Analytics Charts -->\n @if (promptMetrics.totalCount > 0) {\n <div class=\"charts-grid\" style=\"margin-top: 20px;\">\n <!-- Prompt Execution Time Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptTime']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptTime')\">\n <h3><i class=\"fas fa-hourglass-half\"></i> Average Execution Time by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptTimeDistributionChart\" #promptTimeDistributionChart></div>\n </div>\n </div>\n </div>\n <!-- Prompt Token Usage -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptToken']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptToken')\">\n <h3><i class=\"fas fa-database\"></i> Token Usage by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptToken'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptTokenDistributionChart\" #promptTokenDistributionChart></div>\n </div>\n </div>\n </div>\n <!-- Prompt Cost Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCost']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCost')\">\n <h3><i class=\"fas fa-chart-pie\"></i> Cost Distribution by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptCost'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptCostDistributionChart\" #promptCostDistributionChart></div>\n </div>\n </div>\n </div>\n <!-- Prompt Count by Name -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCount']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCount')\">\n <h3><i class=\"fas fa-list-ol\"></i> Prompt Execution Count</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptCount'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptCountByNameChart\" #promptCountByNameChart></div>\n </div>\n </div>\n </div>\n </div>\n }\n <!-- Detailed Prompt Metrics -->\n <div class=\"detailed-metrics\">\n <button kendoButton\n fillMode=\"flat\"\n (click)=\"promptDetailsExpanded = !promptDetailsExpanded\">\n <i class=\"fas\" [ngClass]=\"promptDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n Detailed Prompt Metrics\n </button>\n @if (promptDetailsExpanded) {\n <div class=\"metrics-table\">\n <table>\n <thead>\n <tr>\n <th>Prompt Name</th>\n <th>Count</th>\n <th>Avg Time</th>\n <th>Total Time</th>\n <th>Success Rate</th>\n </tr>\n </thead>\n <tbody>\n @for (prompt of promptMetrics.byPrompt | keyvalue; track trackByKey($index, prompt)) {\n <tr>\n <td>{{ prompt.key }}</td>\n <td>{{ prompt.value.count }}</td>\n <td>{{ formatDuration(prompt.value.avgTime) }}</td>\n <td>{{ formatDuration(prompt.value.totalTime) }}</td>\n <td>\n <span class=\"success-rate\">\n <!-- Calculate success rate for this prompt -->\n {{ calculatePromptSuccessRate(prompt.key) }}%\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n <!-- Action Analytics -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-cog\"></i> Action Analytics\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <div class=\"charts-grid\">\n <!-- Action Success Rate -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['actionSuccess']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('actionSuccess')\">\n <h3><i class=\"fas fa-chart-bar\"></i> Action Success Rate</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['actionSuccess'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"actionSuccessRateChart\" #actionSuccessRateChart></div>\n </div>\n </div>\n </div>\n <!-- Step Type Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['stepType']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('stepType')\">\n <h3><i class=\"fas fa-layer-group\"></i> Step Type Distribution</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['stepType'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"stepTypeChart\" #stepTypeChart></div>\n </div>\n </div>\n </div>\n </div>\n <!-- Detailed Action Metrics -->\n <div class=\"detailed-metrics\">\n <button kendoButton\n fillMode=\"flat\"\n (click)=\"actionDetailsExpanded = !actionDetailsExpanded\">\n <i class=\"fas\" [ngClass]=\"actionDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n Detailed Action Metrics\n </button>\n @if (actionDetailsExpanded) {\n <div class=\"metrics-table\">\n <table>\n <thead>\n <tr>\n <th>Action Name</th>\n <th>Count</th>\n <th>Avg Time</th>\n <th>Success Rate</th>\n <th>Type</th>\n </tr>\n </thead>\n <tbody>\n @for (action of actionMetrics.byAction | keyvalue; track trackByKey($index, action)) {\n <tr>\n <td>{{ action.key }}</td>\n <td>{{ action.value.count }}</td>\n <td>{{ formatDuration(action.value.avgTime) }}</td>\n <td>\n <span class=\"success-rate\" [class.high]=\"action.value.successRate > 0.9\"\n [class.medium]=\"action.value.successRate > 0.7 && action.value.successRate <= 0.9\"\n [class.low]=\"action.value.successRate <= 0.7\">\n {{ (action.value.successRate * 100).toFixed(1) }}%\n </span>\n </td>\n <td>{{ getActionType(action.key) }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n <!-- Error Analysis -->\n <div class=\"error-analysis-section\">\n @if (actionMetrics.errorAnalysis.size > 0) {\n <div class=\"error-analysis\">\n <h3>\n <i class=\"fas fa-exclamation-triangle\"></i>\n Common Errors\n </h3>\n <p class=\"error-analysis-description\">\n This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention.\n </p>\n <div class=\"error-list\">\n @for (error of getTopErrors(); track trackByErrorMessage($index, error)) {\n <div class=\"error-item\">\n <span class=\"error-count\">{{ error.count }}x</span>\n <span class=\"error-message\">{{ error.message }}</span>\n </div>\n }\n </div>\n </div>\n }\n @if (actionMetrics.errorAnalysis.size === 0) {\n <div class=\"no-errors\">\n <i class=\"fas fa-check-circle\"></i>\n <p>No action errors detected in this run. All actions completed successfully!</p>\n </div>\n }\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n <!-- Model Performance Comparison -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-chart-line\"></i> Model Performance Comparison\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <div class=\"model-comparison\">\n <table>\n <thead>\n <tr>\n <th>Model</th>\n <th>Vendor</th>\n <th>Prompts</th>\n <th>Avg Time</th>\n <th>Total Cost</th>\n <th>Avg Cost/Prompt</th>\n <th>Input Tokens</th>\n <th>Output Tokens</th>\n </tr>\n </thead>\n <tbody>\n @for (model of getModelPerformanceData(); track trackByModelName($index, model)) {\n <tr>\n <td>{{ model.name }}</td>\n <td>{{ model.vendor }}</td>\n <td>{{ model.count }}</td>\n <td>{{ formatDuration(model.avgTime) }}</td>\n <td>{{ formatCost(model.totalCost) }}</td>\n <td>{{ formatCost(model.avgCost) }}</td>\n <td>{{ model.inputTokens | number:'1.0-0' }}</td>\n <td>{{ model.outputTokens | number:'1.0-0' }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n <!-- Timeline Analysis -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-stream\"></i> Execution Timeline Analysis\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <div class=\"timeline-stats\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Total Steps</span>\n <span class=\"stat-value\">{{ timelineMetrics.totalSteps }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Parallel Executions</span>\n <span class=\"stat-value\">{{ timelineMetrics.parallelExecutions }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Max Nesting Depth</span>\n <span class=\"stat-value\">{{ timelineMetrics.deepestNesting }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Sub-Agent Runs</span>\n <span class=\"stat-value\">{{ subAgentRuns.length }}</span>\n </div>\n </div>\n <div class=\"step-breakdown\">\n <h3>Steps by Type</h3>\n <div class=\"step-type-list\">\n @for (type of timelineMetrics.stepsByType | keyvalue; track trackByKey($index, type)) {\n <div class=\"step-type-item\">\n <i class=\"fas\" [ngClass]=\"getStepTypeIcon(type.key)\"></i>\n <span class=\"type-name\">{{ type.key }}</span>\n <span class=\"type-count\">{{ type.value }}</span>\n <span class=\"type-percentage\">({{ (type.value / timelineMetrics.totalSteps * 100).toFixed(1) }}%)</span>\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n </kendo-panelbar>\n </div>\n }\n</div>", styles: [".analytics-container {\n padding: 20px;\n height: 100%;\n overflow-y: auto;\n background-color: var(--mj-bg-surface-sunken);\n}\n\n/* Loading and Error States */\n.loading-state,\n.error-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color: var(--mj-text-muted);\n}\n\n.loading-state i,\n.error-state i {\n margin-bottom: 15px;\n}\n\n.error-state {\n color: var(--mj-status-error);\n}\n\n/* Summary Cards */\n.summary-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.summary-card {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 20px;\n box-shadow: var(--mj-shadow-sm);\n display: flex;\n align-items: center;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 20px;\n font-size: 24px;\n color: var(--mj-text-inverse);\n}\n\n.card-icon.prompts {\n background: var(--mj-brand-primary);\n}\n\n.card-icon.actions {\n background: var(--mj-status-error);\n}\n\n.card-icon.cost {\n background: var(--mj-status-success);\n}\n\n.card-icon.time {\n background: var(--mj-status-warning);\n}\n\n.card-content h3 {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-value {\n font-size: 28px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.metric-detail {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n.metric-detail .success {\n color: var(--mj-status-success);\n margin-right: 10px;\n}\n\n.metric-detail .failed {\n color: var(--mj-status-error);\n}\n\n/* Analytics Panels */\n.analytics-panel {\n padding: 15px;\n}\n\n/* Kendo PanelBar Styling - Copied from AI Agent Form */\n::ng-deep .analytics-content .k-panelbar {\n border: none;\n background: transparent;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: var(--mj-bg-surface-card);\n overflow: hidden;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n background: var(--mj-bg-surface-card);\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: var(--mj-text-primary);\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: var(--mj-bg-surface-sunken);\n border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: var(--mj-brand-primary);\n margin-right: 8px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: var(--mj-text-inverse);\n}\n\n/* Charts */\n.charts-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 20px;\n margin-bottom: 20px;\n}\n\n/* Chart Cards */\n.chart-card {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n.chart-card.expanded {\n grid-column: 1 / -1;\n}\n\n.chart-card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n cursor: pointer;\n user-select: none;\n}\n\n.chart-card-header:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.chart-card-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.chart-card-header h3 i {\n font-size: 16px;\n color: var(--mj-text-muted);\n}\n\n.expand-btn {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: color 0.2s;\n}\n\n.expand-btn:hover {\n color: var(--mj-text-secondary);\n}\n\n.chart-card-body {\n padding: 16px;\n background: var(--mj-bg-surface-card);\n}\n\n.chart-card.expanded .chart-card-body {\n padding: 24px;\n}\n\n.chart-card.expanded .chart-container > div {\n min-height: 400px;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 16px;\n}\n\n.view-mode-toggle button {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.chart-container {\n position: relative;\n}\n\n.chart-container h3 {\n margin: 0 0 10px 0;\n font-size: 15px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.chart-container > div {\n min-height: 220px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* Ensure SVG charts are centered */\n.chart-container svg {\n display: block;\n margin: 0 auto;\n}\n\n.chart-legend {\n margin-top: 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n font-size: 12px;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.legend-color {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n}\n\n.chart-total {\n text-align: center;\n margin-top: 10px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n/* Detailed Metrics */\n.detailed-metrics {\n margin-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n padding-top: 20px;\n}\n\n.detailed-metrics button {\n margin-bottom: 15px;\n}\n\n.detailed-metrics button i {\n margin-right: 8px;\n}\n\n.metrics-table {\n overflow-x: auto;\n}\n\n.metrics-table table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.metrics-table th {\n background-color: var(--mj-bg-surface-sunken);\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 2px solid var(--mj-border-strong);\n}\n\n.metrics-table td {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.metrics-table tr:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.success-rate {\n font-weight: 500;\n}\n\n.success-rate.high {\n color: var(--mj-status-success);\n}\n\n.success-rate.medium {\n color: var(--mj-status-warning);\n}\n\n.success-rate.low {\n color: var(--mj-status-error);\n}\n\n/* Error Analysis */\n.error-analysis {\n margin-top: 30px;\n padding: 20px;\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border-radius: 8px;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.error-analysis h3 {\n margin: 0 0 15px 0;\n color: var(--mj-status-error);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-analysis-description {\n font-size: 14px;\n color: var(--mj-text-secondary);\n margin-bottom: 20px;\n line-height: 1.5;\n}\n\n.error-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.error-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 10px;\n background-color: var(--mj-bg-surface);\n border-radius: 4px;\n font-size: 14px;\n}\n\n.error-count {\n background-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.error-message {\n flex: 1;\n color: var(--mj-text-secondary);\n}\n\n/* No errors state */\n.no-errors {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background-color: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n border-radius: 8px;\n border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.no-errors i {\n font-size: 24px;\n color: var(--mj-status-success);\n}\n\n.no-errors p {\n margin: 0;\n font-size: 14px;\n}\n\n/* No data message */\n.no-data-message {\n text-align: center;\n padding: 60px 20px;\n color: var(--mj-text-muted);\n}\n\n.no-data-message i {\n font-size: 48px;\n margin-bottom: 20px;\n color: var(--mj-border-strong);\n}\n\n.no-data-message p {\n margin: 0 0 10px 0;\n font-size: 16px;\n}\n\n.no-data-message p.small {\n font-size: 14px;\n color: var(--mj-text-disabled);\n}\n\n/* Model Comparison Table */\n.model-comparison {\n overflow-x: auto;\n}\n\n.model-comparison table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.model-comparison th {\n background-color: var(--mj-bg-surface-sunken);\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: var(--mj-text-secondary);\n border-bottom: 2px solid var(--mj-border-strong);\n white-space: nowrap;\n}\n\n.model-comparison td {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.model-comparison tr:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n/* Timeline Analysis */\n.timeline-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.stat-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n background-color: var(--mj-bg-surface-sunken);\n border-radius: 8px;\n}\n\n.stat-label {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin-bottom: 8px;\n}\n\n.stat-value {\n font-size: 32px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.step-breakdown h3 {\n margin: 0 0 15px 0;\n font-size: 16px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.step-type-list {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 12px;\n}\n\n.step-type-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n background-color: var(--mj-bg-surface-sunken);\n border-radius: 6px;\n border: 1px solid var(--mj-border-default);\n}\n\n.step-type-item i {\n width: 30px;\n text-align: center;\n color: var(--mj-text-muted);\n}\n\n.type-name {\n flex: 1;\n font-weight: 500;\n}\n\n.type-count {\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.type-percentage {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-left: 5px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .summary-cards {\n grid-template-columns: 1fr;\n }\n \n .charts-grid {\n grid-template-columns: 1fr;\n }\n \n .timeline-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n}"] }]
2177
2177
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.AIAgentRunCostService }], { agentRunId: [{
2178
2178
  type: Input
2179
2179
  }], modelDistributionChart: [{
package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js CHANGED
@@ -249,11 +249,11 @@ export class AIAgentRunStepDetailComponent {
249
249
  i0.ɵɵconditionalCreate(0, AIAgentRunStepDetailComponent_Conditional_0_Template, 29, 12, "div", 0);
250
250
  } if (rf & 2) {
251
251
  i0.ɵɵconditional(ctx.selectedTimelineItem ? 0 : -1);
252
- } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.DeepDiffComponent], styles: [".json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n padding: 16px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: #6c757d;\n border-radius: 4px;\n transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: rgba(0, 0, 0, 0.05);\n color: #495057;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n gap: 24px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n color: #6c757d;\n font-weight: 600;\n}\n\n.meta-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #2c3e50;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n padding: 2px 6px;\n font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #e8f5e9;\n color: #388e3c;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #ffebee;\n color: #d32f2f;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n background: #fff3e0;\n color: #f57c00;\n}\n\n.action-link[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\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 font-size: 13px;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.1);\n color: #1976d2;\n}\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 0;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n color: #6c757d;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n font-weight: 600;\n}\n\n.detail-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0; \n\n}\n\n\n\n\n\n\n\n\n.json-viewer[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0; \n\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n display: flex;\n gap: 4px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n min-height: 0; \n\n}\n\n\n\n.json-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}"] }); }
252
+ } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.DeepDiffComponent], styles: [".json-detail-pane[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n padding: 16px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--mj-bg-surface-sunken);\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n border-radius: 4px;\n transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n color: var(--mj-text-secondary);\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n gap: 24px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n\n.meta-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n padding: 2px 6px;\n font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\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\"][_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n.action-link[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-brand-primary);\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 font-size: 13px;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--mj-brand-primary);\n}\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 0;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-muted);\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n.detail-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0; \n\n}\n\n\n\n\n\n\n\n\n.json-viewer[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0; \n\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n display: flex;\n gap: 4px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n min-height: 0; \n\n}\n\n\n\n.json-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}"] }); }
253
253
  }
254
254
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunStepDetailComponent, [{
255
255
  type: Component,
256
- args: [{ standalone: false, selector: 'mj-ai-agent-run-step-detail', template: "@if (selectedTimelineItem) {\n <div class=\"json-detail-pane\">\n <div class=\"json-pane-header\">\n <h3>\n <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n {{ selectedTimelineItem.title }}\n </h3>\n <button class=\"btn-icon\" (click)=\"onClosePanel()\" title=\"Close\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"json-pane-content\">\n <div class=\"json-meta\">\n <div class=\"meta-item\">\n <label>Type</label>\n <span>{{ selectedTimelineItem.type }}</span>\n </div>\n <div class=\"meta-item\">\n <label>Status</label>\n <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n {{ selectedTimelineItem.status }}\n </span>\n </div>\n <div class=\"meta-item\">\n <label>Duration</label>\n <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n </div>\n </div>\n <!-- Action-specific link -->\n @if (selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID) {\n <div class=\"action-link\">\n <button class=\"btn-link\" (click)=\"onNavigateToActionLog(selectedTimelineItem.data.ID)\">\n <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n </button>\n </div>\n }\n <!-- Tab Navigation - Only show when we have both options -->\n @if (showStepPayloadDiff) {\n <div class=\"detail-pane-tabs\">\n <button\n class=\"detail-tab\"\n [class.active]=\"detailPaneTab === 'diff'\"\n (click)=\"detailPaneTab = 'diff'\">\n <i class=\"fa-solid fa-code-branch\"></i>\n Payload Changes\n </button>\n <button\n class=\"detail-tab\"\n [class.active]=\"detailPaneTab === 'json'\"\n (click)=\"detailPaneTab = 'json'\">\n <i class=\"fa-solid fa-code\"></i>\n Full JSON\n </button>\n </div>\n }\n <!-- Tab Content -->\n <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff\">\n <!-- Payload Diff Tab -->\n @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n <div class=\"step-payload-diff\">\n <mj-deep-diff\n [oldValue]=\"stepPayloadAtStartObject\"\n [newValue]=\"stepPayloadAtEndObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"8\"\n [maxStringLength]=\"150\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n </div>\n }\n <!-- Full JSON Tab -->\n @if (detailPaneTab === 'json' || !showStepPayloadDiff) {\n <div class=\"json-viewer\">\n <div class=\"json-toolbar\">\n <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n <i class=\"fas fa-copy\"></i>\n </button>\n </div>\n <mj-code-editor\n [(ngModel)]=\"selectedItemJsonString\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"width: 100%;\">\n </mj-code-editor>\n </div>\n }\n </div>\n </div>\n </div>\n}", styles: [".json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n padding: 16px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-icon {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: #6c757d;\n border-radius: 4px;\n transition: all 0.2s;\n}\n\n.btn-icon:hover {\n background: rgba(0, 0, 0, 0.05);\n color: #495057;\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;\n display: flex;\n gap: 24px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-item label {\n font-size: 11px;\n text-transform: uppercase;\n color: #6c757d;\n font-weight: 600;\n}\n\n.meta-item span {\n font-size: 13px;\n color: #2c3e50;\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.small {\n padding: 2px 6px;\n font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n background: #e8f5e9;\n color: #388e3c;\n}\n\n.status-badge[data-status=\"Failed\"] {\n background: #ffebee;\n color: #d32f2f;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n background: #fff3e0;\n color: #f57c00;\n}\n\n.action-link {\n padding: 12px 16px;\n border-bottom: 1px solid #e0e6ed;\n}\n\n.btn-link {\n background: none;\n border: none;\n color: #2196f3;\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 font-size: 13px;\n}\n\n.btn-link:hover {\n background: rgba(33, 150, 243, 0.1);\n color: #1976d2;\n}\n\n.detail-pane-tabs {\n display: flex;\n gap: 0;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab {\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n color: #6c757d;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n font-weight: 600;\n}\n\n.detail-pane-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0; /* Allow flexbox to properly size */\n}\n\n/* \n.detail-pane-content.with-tabs {\n // No explicit height needed with flexbox \n} \n*/\n\n.json-viewer {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0; /* Important for flexbox children to respect overflow */\n}\n\n.json-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n display: flex;\n gap: 4px;\n}\n\n.step-payload-diff {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n min-height: 0; /* Allow proper scrolling */\n}\n\n/* Specific styling for mj-code-editor container */\n.json-viewer mj-code-editor {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}"] }]
256
+ args: [{ standalone: false, selector: 'mj-ai-agent-run-step-detail', template: "@if (selectedTimelineItem) {\n <div class=\"json-detail-pane\">\n <div class=\"json-pane-header\">\n <h3>\n <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n {{ selectedTimelineItem.title }}\n </h3>\n <button class=\"btn-icon\" (click)=\"onClosePanel()\" title=\"Close\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"json-pane-content\">\n <div class=\"json-meta\">\n <div class=\"meta-item\">\n <label>Type</label>\n <span>{{ selectedTimelineItem.type }}</span>\n </div>\n <div class=\"meta-item\">\n <label>Status</label>\n <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n {{ selectedTimelineItem.status }}\n </span>\n </div>\n <div class=\"meta-item\">\n <label>Duration</label>\n <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n </div>\n </div>\n <!-- Action-specific link -->\n @if (selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID) {\n <div class=\"action-link\">\n <button class=\"btn-link\" (click)=\"onNavigateToActionLog(selectedTimelineItem.data.ID)\">\n <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n </button>\n </div>\n }\n <!-- Tab Navigation - Only show when we have both options -->\n @if (showStepPayloadDiff) {\n <div class=\"detail-pane-tabs\">\n <button\n class=\"detail-tab\"\n [class.active]=\"detailPaneTab === 'diff'\"\n (click)=\"detailPaneTab = 'diff'\">\n <i class=\"fa-solid fa-code-branch\"></i>\n Payload Changes\n </button>\n <button\n class=\"detail-tab\"\n [class.active]=\"detailPaneTab === 'json'\"\n (click)=\"detailPaneTab = 'json'\">\n <i class=\"fa-solid fa-code\"></i>\n Full JSON\n </button>\n </div>\n }\n <!-- Tab Content -->\n <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff\">\n <!-- Payload Diff Tab -->\n @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n <div class=\"step-payload-diff\">\n <mj-deep-diff\n [oldValue]=\"stepPayloadAtStartObject\"\n [newValue]=\"stepPayloadAtEndObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"8\"\n [maxStringLength]=\"150\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n </div>\n }\n <!-- Full JSON Tab -->\n @if (detailPaneTab === 'json' || !showStepPayloadDiff) {\n <div class=\"json-viewer\">\n <div class=\"json-toolbar\">\n <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n <i class=\"fas fa-copy\"></i>\n </button>\n </div>\n <mj-code-editor\n [(ngModel)]=\"selectedItemJsonString\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"width: 100%;\">\n </mj-code-editor>\n </div>\n }\n </div>\n </div>\n </div>\n}", styles: [".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;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--mj-bg-surface-sunken);\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.btn-icon {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n border-radius: 4px;\n transition: all 0.2s;\n}\n\n.btn-icon:hover {\n background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n color: var(--mj-text-secondary);\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;\n display: flex;\n gap: 24px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-item label {\n font-size: 11px;\n text-transform: uppercase;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n\n.meta-item span {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.small {\n padding: 2px 6px;\n font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\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.action-link {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.btn-link {\n background: none;\n border: none;\n color: var(--mj-brand-primary);\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 font-size: 13px;\n}\n\n.btn-link:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--mj-brand-primary);\n}\n\n.detail-pane-tabs {\n display: flex;\n gap: 0;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n padding: 0 16px;\n}\n\n.detail-tab {\n padding: 12px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-muted);\n transition: all 0.2s;\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%, transparent);\n}\n\n.detail-tab.active {\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n.detail-pane-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0; /* Allow flexbox to properly size */\n}\n\n/* \n.detail-pane-content.with-tabs {\n // No explicit height needed with flexbox \n} \n*/\n\n.json-viewer {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n min-height: 0; /* Important for flexbox children to respect overflow */\n}\n\n.json-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 10;\n display: flex;\n gap: 4px;\n}\n\n.step-payload-diff {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n min-height: 0; /* Allow proper scrolling */\n}\n\n/* Specific styling for mj-code-editor container */\n.json-viewer mj-code-editor {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}"] }]
257
257
  }], () => [{ type: i0.ChangeDetectorRef }], { selectedTimelineItem: [{
258
258
  type: Input
259
259
  }], closePanel: [{
package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.js CHANGED
@@ -254,11 +254,11 @@ export class AIAgentRunStepNodeComponent {
254
254
  i0.ɵɵtextInterpolate1(" ", ctx.item.status, " ");
255
255
  i0.ɵɵadvance(2);
256
256
  i0.ɵɵconditional(ctx.canNavigateToEntity ? 21 : -1);
257
- } }, dependencies: [i1.NgClass, i1.DatePipe], styles: [".timeline-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px;\n padding-left: 22px; \n\n margin-bottom: 8px;\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n border-color: #c1c9d2;\n background: #f8f9fa;\n transform: translateX(2px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] {\n border-color: #2196f3;\n background: #e3f2fd;\n box-shadow: 0 0 0 1px #2196f3;\n}\n\n\n\n.expand-toggle[_ngcontent-%COMP%] {\n position: absolute;\n left: -34px;\n top: 12px;\n width: 24px;\n height: 24px;\n border: 1px solid #e0e6ed;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s;\n z-index: 1;\n}\n\n.expand-toggle[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #c1c9d2;\n}\n\n.expand-toggle[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n color: #6c757d;\n}\n\n\n\n.timeline-marker[_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 14px;\n position: relative;\n overflow: hidden;\n}\n\n.timeline-marker-logo[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.timeline-marker[data-color=\"success\"][_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #4caf50, #388e3c);\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f44336, #d32f2f);\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ff9800, #f57c00);\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #9e9e9e, #757575);\n}\n\n\n\n.timeline-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 4px;\n}\n\n.timeline-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #6c757d;\n font-family: monospace;\n white-space: nowrap;\n margin-left: 12px;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n margin-bottom: 4px;\n}\n\n.timeline-additional-info[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #868e96;\n margin-bottom: 4px;\n font-style: italic;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n font-size: 11px;\n color: #6c757d;\n}\n\n.duration[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-weight: 500;\n}\n\n.status[data-status=\"Running\"][_ngcontent-%COMP%] {\n color: #1976d2;\n}\n\n.status[data-status=\"Completed\"][_ngcontent-%COMP%] {\n color: #388e3c;\n}\n\n.status[data-status=\"Failed\"][_ngcontent-%COMP%] {\n color: #d32f2f;\n}\n\n.status[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n color: #f57c00;\n}\n\n\n\n.timeline-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 11px;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.1);\n color: #1976d2;\n}\n\n.btn-link[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.action-text[_ngcontent-%COMP%] {\n display: none;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover .action-text[_ngcontent-%COMP%] {\n display: inline;\n}\n\n\n\n.timeline-item[data-type=\"subrun\"][_ngcontent-%COMP%] {\n background: linear-gradient(to right, #f3f7ff, white);\n}\n\n.timeline-item[data-type=\"action\"][_ngcontent-%COMP%] {\n border-left: 3px solid #4caf50;\n}\n\n.timeline-item[data-type=\"prompt\"][_ngcontent-%COMP%] {\n border-left: 3px solid #2196f3;\n}"] }); }
257
+ } }, dependencies: [i1.NgClass, i1.DatePipe], styles: [".timeline-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px;\n padding-left: 22px; \n\n margin-bottom: 8px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-border-strong);\n background: var(--mj-bg-surface-sunken);\n transform: translateX(2px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n box-shadow: 0 0 0 1px var(--mj-brand-primary);\n}\n\n\n\n.expand-toggle[_ngcontent-%COMP%] {\n position: absolute;\n left: -34px;\n top: 12px;\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;\n z-index: 1;\n}\n\n.expand-toggle[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.expand-toggle[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-muted);\n}\n\n\n\n.timeline-marker[_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 14px;\n position: relative;\n overflow: hidden;\n}\n\n.timeline-marker-logo[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n.timeline-marker[data-color=\"success\"][_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n background: var(--mj-text-disabled);\n}\n\n\n\n.timeline-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 4px;\n}\n\n.timeline-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-family: monospace;\n white-space: nowrap;\n margin-left: 12px;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n margin-bottom: 4px;\n}\n\n.timeline-additional-info[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n margin-bottom: 4px;\n font-style: italic;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.duration[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n font-weight: 500;\n}\n\n.status[data-status=\"Running\"][_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.status[data-status=\"Completed\"][_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.status[data-status=\"Failed\"][_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.status[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n\n\n.timeline-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-brand-primary);\n font-size: 11px;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--mj-brand-primary);\n}\n\n.btn-link[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.action-text[_ngcontent-%COMP%] {\n display: none;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover .action-text[_ngcontent-%COMP%] {\n display: inline;\n}\n\n\n\n.timeline-item[data-type=\"subrun\"][_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.timeline-item[data-type=\"action\"][_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-status-success);\n}\n\n.timeline-item[data-type=\"prompt\"][_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-brand-primary);\n}"] }); }
258
258
  }
259
259
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunStepNodeComponent, [{
260
260
  type: Component,
261
- args: [{ standalone: false, selector: 'mj-ai-agent-run-step-node', template: "<div class=\"timeline-item\"\n [class.selected]=\"isSelected\"\n [attr.data-status]=\"item.status\"\n [attr.data-type]=\"item.type\"\n [style.margin-left.px]=\"item.level * 24\"\n (click)=\"handleClick()\">\n\n <!-- Expand/Collapse Button for Sub-Agents and Parent Steps -->\n @if (canExpand) {\n <button class=\"expand-toggle\"\n (click)=\"handleExpandToggle($event)\"\n [attr.aria-expanded]=\"item.isExpanded\">\n <i class=\"fas\"\n [class.fa-chevron-right]=\"!item.isExpanded\"\n [class.fa-chevron-down]=\"item.isExpanded\"></i>\n </button>\n }\n\n <!-- Timeline Marker -->\n <div class=\"timeline-marker\" [attr.data-color]=\"item.color\">\n @if (item.logoUrl) {\n <img\n [src]=\"item.logoUrl\"\n [alt]=\"item.title\"\n class=\"timeline-marker-logo\"\n (error)=\"onLogoError($event)\" />\n }\n @if (!item.logoUrl) {\n <i class=\"fas\" [ngClass]=\"item.icon\"></i>\n }\n </div>\n\n <!-- Timeline Content -->\n <div class=\"timeline-content\">\n <div class=\"timeline-header\">\n <h4>{{ item.title }}</h4>\n <span class=\"timeline-time\">{{ item.startTime | date:'h:mm:ss.SSS a' }}</span>\n </div>\n\n <div class=\"timeline-subtitle\">{{ item.subtitle }}</div>\n\n @if (getAdditionalInfo()) {\n <div class=\"timeline-additional-info\">\n {{ getAdditionalInfo() }}\n </div>\n }\n\n <div class=\"timeline-meta\">\n @if (item.duration) {\n <span class=\"duration\">\n <i class=\"fas fa-clock\"></i> {{ item.duration }}\n </span>\n }\n <span class=\"status\" [attr.data-status]=\"item.status\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon(item.status)\"></i>\n {{ item.status }}\n </span>\n </div>\n </div>\n\n <!-- Timeline Actions -->\n <div class=\"timeline-actions\">\n @if (canNavigateToEntity) {\n <button class=\"btn-link\"\n (click)=\"navigateToRecord($event)\"\n [title]=\"entityNavigationText\">\n <i class=\"fas fa-external-link-alt\"></i>\n <span class=\"action-text\">{{ entityNavigationText }}</span>\n </button>\n }\n </div>\n</div>", styles: [".timeline-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px;\n padding-left: 22px; /* Add extra padding to accommodate expand button */\n margin-bottom: 8px;\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n}\n\n.timeline-item:hover {\n border-color: #c1c9d2;\n background: #f8f9fa;\n transform: translateX(2px);\n}\n\n.timeline-item.selected {\n border-color: #2196f3;\n background: #e3f2fd;\n box-shadow: 0 0 0 1px #2196f3;\n}\n\n/* Expand/Collapse Button */\n.expand-toggle {\n position: absolute;\n left: -34px;\n top: 12px;\n width: 24px;\n height: 24px;\n border: 1px solid #e0e6ed;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s;\n z-index: 1;\n}\n\n.expand-toggle:hover {\n background: #f8f9fa;\n border-color: #c1c9d2;\n}\n\n.expand-toggle i {\n font-size: 10px;\n color: #6c757d;\n}\n\n/* Timeline Marker */\n.timeline-marker {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 14px;\n position: relative;\n overflow: hidden;\n}\n\n.timeline-marker-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n.timeline-marker[data-color=\"info\"] {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.timeline-marker[data-color=\"success\"] {\n background: linear-gradient(135deg, #4caf50, #388e3c);\n}\n\n.timeline-marker[data-color=\"error\"] {\n background: linear-gradient(135deg, #f44336, #d32f2f);\n}\n\n.timeline-marker[data-color=\"warning\"] {\n background: linear-gradient(135deg, #ff9800, #f57c00);\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n background: linear-gradient(135deg, #9e9e9e, #757575);\n}\n\n/* Timeline Content */\n.timeline-content {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 4px;\n}\n\n.timeline-header h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.timeline-time {\n font-size: 11px;\n color: #6c757d;\n font-family: monospace;\n white-space: nowrap;\n margin-left: 12px;\n}\n\n.timeline-subtitle {\n font-size: 12px;\n color: #6c757d;\n margin-bottom: 4px;\n}\n\n.timeline-additional-info {\n font-size: 11px;\n color: #868e96;\n margin-bottom: 4px;\n font-style: italic;\n}\n\n.timeline-meta {\n display: flex;\n gap: 12px;\n font-size: 11px;\n color: #6c757d;\n}\n\n.duration {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-weight: 500;\n}\n\n.status[data-status=\"Running\"] {\n color: #1976d2;\n}\n\n.status[data-status=\"Completed\"] {\n color: #388e3c;\n}\n\n.status[data-status=\"Failed\"] {\n color: #d32f2f;\n}\n\n.status[data-status=\"Cancelled\"] {\n color: #f57c00;\n}\n\n/* Timeline Actions */\n.timeline-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 11px;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n}\n\n.btn-link:hover {\n background: rgba(33, 150, 243, 0.1);\n color: #1976d2;\n}\n\n.btn-link i {\n font-size: 10px;\n}\n\n.action-text {\n display: none;\n}\n\n.timeline-item:hover .action-text {\n display: inline;\n}\n\n/* Type-specific styling */\n.timeline-item[data-type=\"subrun\"] {\n background: linear-gradient(to right, #f3f7ff, white);\n}\n\n.timeline-item[data-type=\"action\"] {\n border-left: 3px solid #4caf50;\n}\n\n.timeline-item[data-type=\"prompt\"] {\n border-left: 3px solid #2196f3;\n}"] }]
261
+ args: [{ standalone: false, selector: 'mj-ai-agent-run-step-node', template: "<div class=\"timeline-item\"\n [class.selected]=\"isSelected\"\n [attr.data-status]=\"item.status\"\n [attr.data-type]=\"item.type\"\n [style.margin-left.px]=\"item.level * 24\"\n (click)=\"handleClick()\">\n\n <!-- Expand/Collapse Button for Sub-Agents and Parent Steps -->\n @if (canExpand) {\n <button class=\"expand-toggle\"\n (click)=\"handleExpandToggle($event)\"\n [attr.aria-expanded]=\"item.isExpanded\">\n <i class=\"fas\"\n [class.fa-chevron-right]=\"!item.isExpanded\"\n [class.fa-chevron-down]=\"item.isExpanded\"></i>\n </button>\n }\n\n <!-- Timeline Marker -->\n <div class=\"timeline-marker\" [attr.data-color]=\"item.color\">\n @if (item.logoUrl) {\n <img\n [src]=\"item.logoUrl\"\n [alt]=\"item.title\"\n class=\"timeline-marker-logo\"\n (error)=\"onLogoError($event)\" />\n }\n @if (!item.logoUrl) {\n <i class=\"fas\" [ngClass]=\"item.icon\"></i>\n }\n </div>\n\n <!-- Timeline Content -->\n <div class=\"timeline-content\">\n <div class=\"timeline-header\">\n <h4>{{ item.title }}</h4>\n <span class=\"timeline-time\">{{ item.startTime | date:'h:mm:ss.SSS a' }}</span>\n </div>\n\n <div class=\"timeline-subtitle\">{{ item.subtitle }}</div>\n\n @if (getAdditionalInfo()) {\n <div class=\"timeline-additional-info\">\n {{ getAdditionalInfo() }}\n </div>\n }\n\n <div class=\"timeline-meta\">\n @if (item.duration) {\n <span class=\"duration\">\n <i class=\"fas fa-clock\"></i> {{ item.duration }}\n </span>\n }\n <span class=\"status\" [attr.data-status]=\"item.status\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon(item.status)\"></i>\n {{ item.status }}\n </span>\n </div>\n </div>\n\n <!-- Timeline Actions -->\n <div class=\"timeline-actions\">\n @if (canNavigateToEntity) {\n <button class=\"btn-link\"\n (click)=\"navigateToRecord($event)\"\n [title]=\"entityNavigationText\">\n <i class=\"fas fa-external-link-alt\"></i>\n <span class=\"action-text\">{{ entityNavigationText }}</span>\n </button>\n }\n </div>\n</div>", styles: [".timeline-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px;\n padding-left: 22px; /* Add extra padding to accommodate expand button */\n margin-bottom: 8px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n}\n\n.timeline-item:hover {\n border-color: var(--mj-border-strong);\n background: var(--mj-bg-surface-sunken);\n transform: translateX(2px);\n}\n\n.timeline-item.selected {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n box-shadow: 0 0 0 1px var(--mj-brand-primary);\n}\n\n/* Expand/Collapse Button */\n.expand-toggle {\n position: absolute;\n left: -34px;\n top: 12px;\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;\n z-index: 1;\n}\n\n.expand-toggle:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.expand-toggle i {\n font-size: 10px;\n color: var(--mj-text-muted);\n}\n\n/* Timeline Marker */\n.timeline-marker {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 14px;\n position: relative;\n overflow: hidden;\n}\n\n.timeline-marker-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 50%;\n}\n\n.timeline-marker[data-color=\"info\"] {\n background: var(--mj-brand-primary);\n}\n\n.timeline-marker[data-color=\"success\"] {\n background: var(--mj-status-success);\n}\n\n.timeline-marker[data-color=\"error\"] {\n background: var(--mj-status-error);\n}\n\n.timeline-marker[data-color=\"warning\"] {\n background: var(--mj-status-warning);\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n background: var(--mj-text-disabled);\n}\n\n/* Timeline Content */\n.timeline-content {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 4px;\n}\n\n.timeline-header h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.timeline-time {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-family: monospace;\n white-space: nowrap;\n margin-left: 12px;\n}\n\n.timeline-subtitle {\n font-size: 12px;\n color: var(--mj-text-muted);\n margin-bottom: 4px;\n}\n\n.timeline-additional-info {\n font-size: 11px;\n color: var(--mj-text-muted);\n margin-bottom: 4px;\n font-style: italic;\n}\n\n.timeline-meta {\n display: flex;\n gap: 12px;\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.duration {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-weight: 500;\n}\n\n.status[data-status=\"Running\"] {\n color: var(--mj-brand-primary);\n}\n\n.status[data-status=\"Completed\"] {\n color: var(--mj-status-success);\n}\n\n.status[data-status=\"Failed\"] {\n color: var(--mj-status-error);\n}\n\n.status[data-status=\"Cancelled\"] {\n color: var(--mj-status-warning);\n}\n\n/* Timeline Actions */\n.timeline-actions {\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 font-size: 11px;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n}\n\n.btn-link:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--mj-brand-primary);\n}\n\n.btn-link i {\n font-size: 10px;\n}\n\n.action-text {\n display: none;\n}\n\n.timeline-item:hover .action-text {\n display: inline;\n}\n\n/* Type-specific styling */\n.timeline-item[data-type=\"subrun\"] {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.timeline-item[data-type=\"action\"] {\n border-left: 3px solid var(--mj-status-success);\n}\n\n.timeline-item[data-type=\"prompt\"] {\n border-left: 3px solid var(--mj-brand-primary);\n}"] }]
262
262
  }], null, { item: [{
263
263
  type: Input
264
264
  }], isSelected: [{
package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js CHANGED
@@ -453,11 +453,11 @@ export class AIAgentRunTimelineComponent {
453
453
  i0.ɵɵconditional(ctx.loading ? 2 : -1);
454
454
  i0.ɵɵadvance();
455
455
  i0.ɵɵconditional(ctx.error ? 3 : -1);
456
- } }, styles: [".timeline-container[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline[_ngcontent-%COMP%] {\n position: relative;\n padding-left: 40px; \n\n}\n\n.sub-timeline[_ngcontent-%COMP%] {\n margin-left: 24px;\n margin-top: 8px;\n padding-left: 12px;\n border-left: 2px dashed #e0e6ed;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: #6c757d;\n gap: 16px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n\n\n.loading-children[_ngcontent-%COMP%], \n.no-children[_ngcontent-%COMP%] {\n padding: 12px 20px;\n margin-left: 60px;\n color: #6c757d;\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.loading-children[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.no-children[_ngcontent-%COMP%] {\n color: #868e96;\n font-style: italic;\n}\n\n.no-children[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #adb5bd;\n}\n\n\n\n.sub-run-steps[_ngcontent-%COMP%] {\n margin-left: 20px;\n padding-left: 20px;\n border-left: 2px solid #e9ecef;\n margin-top: 8px;\n}"], changeDetection: 0 }); }
456
+ } }, styles: [".timeline-container[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline[_ngcontent-%COMP%] {\n position: relative;\n padding-left: 40px; \n\n}\n\n.sub-timeline[_ngcontent-%COMP%] {\n margin-left: 24px;\n margin-top: 8px;\n padding-left: 12px;\n border-left: 2px dashed var(--mj-border-default);\n}\n\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--mj-text-muted);\n gap: 16px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n.loading-children[_ngcontent-%COMP%], \n.no-children[_ngcontent-%COMP%] {\n padding: 12px 20px;\n margin-left: 60px;\n color: var(--mj-text-muted);\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.loading-children[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.no-children[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.no-children[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n}\n\n\n\n.sub-run-steps[_ngcontent-%COMP%] {\n margin-left: 20px;\n padding-left: 20px;\n border-left: 2px solid var(--mj-border-default);\n margin-top: 8px;\n}"], changeDetection: 0 }); }
457
457
  }
458
458
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunTimelineComponent, [{
459
459
  type: Component,
460
- args: [{ standalone: false, selector: 'mj-ai-agent-run-timeline', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading && (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 <!-- 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 <div class=\"empty-state\">\n <i class=\"fas fa-stream fa-3x\"></i>\n <p>No execution steps found</p>\n </div>\n }\n </div>\n}\n\n@if (loading) {\n <div class=\"loading-state\">\n <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n <p>Loading timeline...</p>\n </div>\n}\n\n@if (error) {\n <div class=\"error-state\">\n <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n <p>{{ error }}</p>\n </div>\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>", styles: [".timeline-container {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline {\n position: relative;\n padding-left: 40px; /* Add padding to accommodate expand buttons */\n}\n\n.sub-timeline {\n margin-left: 24px;\n margin-top: 8px;\n padding-left: 12px;\n border-left: 2px dashed #e0e6ed;\n}\n\n/* State Displays */\n.empty-state,\n.loading-state,\n.error-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: #6c757d;\n gap: 16px;\n}\n\n.error-state {\n color: #dc3545;\n}\n\n/* Loading and No Children States */\n.loading-children,\n.no-children {\n padding: 12px 20px;\n margin-left: 60px;\n color: #6c757d;\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.loading-children i {\n color: #2196f3;\n}\n\n.no-children {\n color: #868e96;\n font-style: italic;\n}\n\n.no-children i {\n color: #adb5bd;\n}\n\n/* Sub-run steps container */\n.sub-run-steps {\n margin-left: 20px;\n padding-left: 20px;\n border-left: 2px solid #e9ecef;\n margin-top: 8px;\n}"] }]
460
+ args: [{ standalone: false, selector: 'mj-ai-agent-run-timeline', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading && (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 <!-- 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 <div class=\"empty-state\">\n <i class=\"fas fa-stream fa-3x\"></i>\n <p>No execution steps found</p>\n </div>\n }\n </div>\n}\n\n@if (loading) {\n <div class=\"loading-state\">\n <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n <p>Loading timeline...</p>\n </div>\n}\n\n@if (error) {\n <div class=\"error-state\">\n <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n <p>{{ error }}</p>\n </div>\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>", styles: [".timeline-container {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline {\n position: relative;\n padding-left: 40px; /* Add padding to accommodate expand buttons */\n}\n\n.sub-timeline {\n margin-left: 24px;\n margin-top: 8px;\n padding-left: 12px;\n border-left: 2px dashed var(--mj-border-default);\n}\n\n/* State Displays */\n.empty-state,\n.loading-state,\n.error-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--mj-text-muted);\n gap: 16px;\n}\n\n.error-state {\n color: var(--mj-status-error);\n}\n\n/* Loading and No Children States */\n.loading-children,\n.no-children {\n padding: 12px 20px;\n margin-left: 60px;\n color: var(--mj-text-muted);\n font-size: 13px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.loading-children i {\n color: var(--mj-brand-primary);\n}\n\n.no-children {\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.no-children i {\n color: var(--mj-text-disabled);\n}\n\n/* Sub-run steps container */\n.sub-run-steps {\n margin-left: 20px;\n padding-left: 20px;\n border-left: 2px solid var(--mj-border-default);\n margin-top: 8px;\n}"] }]
461
461
  }], () => [{ type: i0.ChangeDetectorRef }], { aiAgentRunId: [{
462
462
  type: Input
463
463
  }], autoRefresh: [{
package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts CHANGED
@@ -52,6 +52,7 @@ export declare class AIAgentRunVisualizationComponent implements OnInit, OnDestr
52
52
  private getStepColor;
53
53
  private getStepEmoji;
54
54
  private getStatusColor;
55
+ private getStepDataType;
55
56
  private truncateText;
56
57
  private calculateDuration;
57
58
  private onNodeClick;
package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ai-agent-run-visualization.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-visualization.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,SAAS,EAAa,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AAItJ,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAwBnE,qBAOa,gCAAiC,YAAW,MAAM,EAAE,SAAS,EAAE,aAAa;IA+ErF,OAAO,CAAC,GAAG;IA9EiC,YAAY,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC/E,YAAY,EAAG,MAAM,CAAC;IACtB,UAAU,EAAG,oBAAoB,CAAC;IAE3C,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,eAAe,CAAS;IAEhC,wCAAwC;IACxC,OAAO,CAAC,cAAc,CAAgB;IAEtC,yCAAyC;IACzC,OAAO,CAAC,yBAAyB;IAMjC,OAAO,CAAC,WAAW,CAAgK;IAEnL,OAAO,UAAS;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5B,OAAO,CAAC,WAAW,CAAS;IAE5B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IAGzC,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,WAAW,CAAgE;IAGnF,OAAO;;;;;;;MAOL;IAGF,OAAO,CAAC,SAAS,CAgBf;IAGF,OAAO,CAAC,QAAQ,CAMd;IAGF,OAAO,CAAC,gBAAgB,CAAuB;IAG/C,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,mBAAmB,CAAkC;IAC7D,OAAO,CAAC,mBAAmB,CAAkC;IAC7D,OAAO,CAAC,iBAAiB,CAAgC;gBAG/C,GAAG,EAAE,iBAAiB;IAGhC,QAAQ;IAgDR,eAAe;IA0Bf,WAAW;IA4EX,OAAO,CAAC,aAAa;YA4CP,kBAAkB;IAsEhC,OAAO,CAAC,kBAAkB;YAiBZ,mBAAmB;IAiEjC,OAAO,CAAC,iBAAiB;YAwFX,kBAAkB;IA0FhC,OAAO,CAAC,aAAa;IAmDrB,OAAO,CAAC,eAAe;IA6DvB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,kBAAkB;YAWZ,kBAAkB;YAmBlB,iBAAiB;IAyB/B,OAAO,CAAC,gBAAgB;IAsCxB,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,WAAW,CA6BlB;IAED,OAAO,CAAC,SAAS,CAiBhB;IAGD,OAAO,CAAC,KAAK,EAAE,UAAU;IAOzB,cAAc,CAAC,KAAK,EAAE,UAAU;IAShC,cAAc,CAAC,KAAK,EAAE,UAAU;IAQhC,YAAY,CAAC,KAAK,EAAE,UAAU;IAI9B,OAAO,CAAC,eAAe;IAYvB,MAAM;IAKN,OAAO;IAKP,SAAS;IAQT,eAAe;IAKf,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAK3B,eAAe,CAAC,IAAI,EAAE,MAAM;yCA9jCvB,gCAAgC;2CAAhC,gCAAgC;CAqkC5C"}
1
+ {"version":3,"file":"ai-agent-run-visualization.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-visualization.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,SAAS,EAAa,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAA2B,MAAM,eAAe,CAAC;AAItJ,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAwBnE,qBAOa,gCAAiC,YAAW,MAAM,EAAE,SAAS,EAAE,aAAa;IA+ErF,OAAO,CAAC,GAAG;IA9EiC,YAAY,EAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC/E,YAAY,EAAG,MAAM,CAAC;IACtB,UAAU,EAAG,oBAAoB,CAAC;IAE3C,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,eAAe,CAAS;IAEhC,wCAAwC;IACxC,OAAO,CAAC,cAAc,CAAgB;IAEtC,yCAAyC;IACzC,OAAO,CAAC,yBAAyB;IAMjC,OAAO,CAAC,WAAW,CAAgK;IAEnL,OAAO,UAAS;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5B,OAAO,CAAC,WAAW,CAAS;IAE5B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAQ;IAGzC,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,MAAM,CAAgC;IAC9C,OAAO,CAAC,WAAW,CAAgE;IAGnF,OAAO;;;;;;;MAOL;IAGF,OAAO,CAAC,SAAS,CAgBf;IAGF,OAAO,CAAC,QAAQ,CAMd;IAGF,OAAO,CAAC,gBAAgB,CAAuB;IAG/C,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,mBAAmB,CAAkC;IAC7D,OAAO,CAAC,mBAAmB,CAAkC;IAC7D,OAAO,CAAC,iBAAiB,CAAgC;gBAG/C,GAAG,EAAE,iBAAiB;IAGhC,QAAQ;IAgDR,eAAe;IA0Bf,WAAW;IA4EX,OAAO,CAAC,aAAa;YA4CP,kBAAkB;IAsEhC,OAAO,CAAC,kBAAkB;YAiBZ,mBAAmB;IAiEjC,OAAO,CAAC,iBAAiB;YAyFX,kBAAkB;IAwFhC,OAAO,CAAC,aAAa;IAmDrB,OAAO,CAAC,eAAe;IA4DvB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,kBAAkB;YAWZ,kBAAkB;YAmBlB,iBAAiB;IAyB/B,OAAO,CAAC,gBAAgB;IAsCxB,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,WAAW,CA6BlB;IAED,OAAO,CAAC,SAAS,CAiBhB;IAGD,OAAO,CAAC,KAAK,EAAE,UAAU;IAOzB,cAAc,CAAC,KAAK,EAAE,UAAU;IAShC,cAAc,CAAC,KAAK,EAAE,UAAU;IAQhC,YAAY,CAAC,KAAK,EAAE,UAAU;IAI9B,OAAO,CAAC,eAAe;IAYvB,MAAM;IAKN,OAAO;IAKP,SAAS;IAQT,eAAe;IAKf,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAK3B,eAAe,CAAC,IAAI,EAAE,MAAM;yCAzkCvB,gCAAgC;2CAAhC,gCAAgC;CAglC5C"}