@memberjunction/ng-core-entity-forms 2.81.0 → 2.82.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.
- package/dist/lib/custom/AIAgents/ai-agent-form.component.js +88 -71
- package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +299 -283
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
- package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js +474 -456
- package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js.map +1 -1
- package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +114 -100
- package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIAgent/sections/details.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/AIAgent/sections/details.component.js +13 -4
- package/dist/lib/generated/Entities/AIAgent/sections/details.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIAgentRun/sections/details.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/AIAgentRun/sections/details.component.js +13 -4
- package/dist/lib/generated/Entities/AIAgentRun/sections/details.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIPrompt/sections/details.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/AIPrompt/sections/details.component.js +13 -4
- package/dist/lib/generated/Entities/AIPrompt/sections/details.component.js.map +1 -1
- package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.js +13 -4
- package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.js.map +1 -1
- package/dist/lib/generated/Entities/ConversationArtifact/conversationartifact.form.component.js +6 -6
- package/dist/lib/generated/Entities/ConversationArtifact/conversationartifact.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/User/user.form.component.js +6 -6
- package/dist/lib/generated/Entities/User/user.form.component.js.map +1 -1
- package/package.json +16 -16
|
@@ -1395,7 +1395,7 @@ function AIAgentFormComponentExtended_form_2_ng_template_36_Template(rf, ctx) {
|
|
|
1395
1395
|
} }
|
|
1396
1396
|
function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_19_Template(rf, ctx) { if (rf & 1) {
|
|
1397
1397
|
const _r40 = i0.ɵɵgetCurrentView();
|
|
1398
|
-
i0.ɵɵelementStart(0, "kendo-dropdownlist",
|
|
1398
|
+
i0.ɵɵelementStart(0, "kendo-dropdownlist", 220);
|
|
1399
1399
|
i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_19_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
|
|
1400
1400
|
i0.ɵɵelementEnd();
|
|
1401
1401
|
} if (rf & 2) {
|
|
@@ -1414,7 +1414,7 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_20_Templ
|
|
|
1414
1414
|
} }
|
|
1415
1415
|
function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_31_Template(rf, ctx) { if (rf & 1) {
|
|
1416
1416
|
const _r41 = i0.ɵɵgetCurrentView();
|
|
1417
|
-
i0.ɵɵelementStart(0, "kendo-dropdownlist",
|
|
1417
|
+
i0.ɵɵelementStart(0, "kendo-dropdownlist", 221);
|
|
1418
1418
|
i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_31_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TypeID, $event) || (ctx_r1.record.TypeID = $event); return i0.ɵɵresetView($event); });
|
|
1419
1419
|
i0.ɵɵelementEnd();
|
|
1420
1420
|
} if (rf & 2) {
|
|
@@ -1431,8 +1431,8 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_32_Templ
|
|
|
1431
1431
|
i0.ɵɵadvance();
|
|
1432
1432
|
i0.ɵɵtextInterpolate(ctx_r1.record.Type || "Not Set");
|
|
1433
1433
|
} }
|
|
1434
|
-
function
|
|
1435
|
-
i0.ɵɵelementStart(0, "span",
|
|
1434
|
+
function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
1435
|
+
i0.ɵɵelementStart(0, "span", 228);
|
|
1436
1436
|
i0.ɵɵtext(1);
|
|
1437
1437
|
i0.ɵɵelementEnd();
|
|
1438
1438
|
} if (rf & 2) {
|
|
@@ -1440,29 +1440,29 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_144_Cond
|
|
|
1440
1440
|
i0.ɵɵadvance();
|
|
1441
1441
|
i0.ɵɵtextInterpolate(ctx_r1.selectedContextCompressionPrompt.Name);
|
|
1442
1442
|
} }
|
|
1443
|
-
function
|
|
1444
|
-
i0.ɵɵelementStart(0, "span",
|
|
1443
|
+
function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
1444
|
+
i0.ɵɵelementStart(0, "span", 229);
|
|
1445
1445
|
i0.ɵɵtext(1, "No prompt selected");
|
|
1446
1446
|
i0.ɵɵelementEnd();
|
|
1447
1447
|
} }
|
|
1448
|
-
function
|
|
1448
|
+
function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
1449
1449
|
const _r43 = i0.ɵɵgetCurrentView();
|
|
1450
|
-
i0.ɵɵelementStart(0, "button",
|
|
1451
|
-
i0.ɵɵlistener("click", function
|
|
1452
|
-
i0.ɵɵelement(1, "i",
|
|
1450
|
+
i0.ɵɵelementStart(0, "button", 234);
|
|
1451
|
+
i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r43); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
|
|
1452
|
+
i0.ɵɵelement(1, "i", 235);
|
|
1453
1453
|
i0.ɵɵelementEnd();
|
|
1454
1454
|
} }
|
|
1455
|
-
function
|
|
1455
|
+
function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Template(rf, ctx) { if (rf & 1) {
|
|
1456
1456
|
const _r42 = i0.ɵɵgetCurrentView();
|
|
1457
|
-
i0.ɵɵelementStart(0, "div",
|
|
1458
|
-
i0.ɵɵtemplate(2,
|
|
1457
|
+
i0.ɵɵelementStart(0, "div", 226)(1, "div", 227);
|
|
1458
|
+
i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template, 2, 1, "span", 228)(3, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template, 2, 0, "span", 229);
|
|
1459
1459
|
i0.ɵɵelementEnd();
|
|
1460
|
-
i0.ɵɵelementStart(4, "div",
|
|
1461
|
-
i0.ɵɵlistener("click", function
|
|
1462
|
-
i0.ɵɵelement(6, "i",
|
|
1460
|
+
i0.ɵɵelementStart(4, "div", 230)(5, "button", 231);
|
|
1461
|
+
i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
|
|
1462
|
+
i0.ɵɵelement(6, "i", 232);
|
|
1463
1463
|
i0.ɵɵtext(7);
|
|
1464
1464
|
i0.ɵɵelementEnd();
|
|
1465
|
-
i0.ɵɵtemplate(8,
|
|
1465
|
+
i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template, 2, 0, "button", 233);
|
|
1466
1466
|
i0.ɵɵelementEnd()();
|
|
1467
1467
|
} if (rf & 2) {
|
|
1468
1468
|
const ctx_r1 = i0.ɵɵnextContext(4);
|
|
@@ -1473,7 +1473,7 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_144_Cond
|
|
|
1473
1473
|
i0.ɵɵadvance();
|
|
1474
1474
|
i0.ɵɵconditional(ctx_r1.selectedContextCompressionPrompt ? 8 : -1);
|
|
1475
1475
|
} }
|
|
1476
|
-
function
|
|
1476
|
+
function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_33_Template(rf, ctx) { if (rf & 1) {
|
|
1477
1477
|
i0.ɵɵelementStart(0, "span", 199);
|
|
1478
1478
|
i0.ɵɵtext(1);
|
|
1479
1479
|
i0.ɵɵelementEnd();
|
|
@@ -1482,9 +1482,9 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_144_Cond
|
|
|
1482
1482
|
i0.ɵɵadvance();
|
|
1483
1483
|
i0.ɵɵtextInterpolate((ctx_r1.selectedContextCompressionPrompt == null ? null : ctx_r1.selectedContextCompressionPrompt.Name) || ctx_r1.record.ContextCompressionPrompt || "Not Set");
|
|
1484
1484
|
} }
|
|
1485
|
-
function
|
|
1485
|
+
function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Template(rf, ctx) { if (rf & 1) {
|
|
1486
1486
|
i0.ɵɵelementStart(0, "div", 192)(1, "div", 193)(2, "div", 194);
|
|
1487
|
-
i0.ɵɵelement(3, "i",
|
|
1487
|
+
i0.ɵɵelement(3, "i", 222);
|
|
1488
1488
|
i0.ɵɵelementEnd();
|
|
1489
1489
|
i0.ɵɵelementStart(4, "div", 196)(5, "h4");
|
|
1490
1490
|
i0.ɵɵtext(6, "Message Threshold");
|
|
@@ -1493,10 +1493,10 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_144_Temp
|
|
|
1493
1493
|
i0.ɵɵtext(8, "Messages before compression triggers");
|
|
1494
1494
|
i0.ɵɵelementEnd()()();
|
|
1495
1495
|
i0.ɵɵelementStart(9, "div", 197);
|
|
1496
|
-
i0.ɵɵelement(10, "mj-form-field",
|
|
1496
|
+
i0.ɵɵelement(10, "mj-form-field", 223);
|
|
1497
1497
|
i0.ɵɵelementEnd()();
|
|
1498
1498
|
i0.ɵɵelementStart(11, "div", 192)(12, "div", 193)(13, "div", 194);
|
|
1499
|
-
i0.ɵɵelement(14, "i",
|
|
1499
|
+
i0.ɵɵelement(14, "i", 224);
|
|
1500
1500
|
i0.ɵɵelementEnd();
|
|
1501
1501
|
i0.ɵɵelementStart(15, "div", 196)(16, "h4");
|
|
1502
1502
|
i0.ɵɵtext(17, "Messages to Keep");
|
|
@@ -1505,7 +1505,7 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_144_Temp
|
|
|
1505
1505
|
i0.ɵɵtext(19, "Recent messages to retain uncompressed");
|
|
1506
1506
|
i0.ɵɵelementEnd()()();
|
|
1507
1507
|
i0.ɵɵelementStart(20, "div", 197);
|
|
1508
|
-
i0.ɵɵelement(21, "mj-form-field",
|
|
1508
|
+
i0.ɵɵelement(21, "mj-form-field", 225);
|
|
1509
1509
|
i0.ɵɵelementEnd()();
|
|
1510
1510
|
i0.ɵɵelementStart(22, "div", 192)(23, "div", 193)(24, "div", 194);
|
|
1511
1511
|
i0.ɵɵelement(25, "i", 127);
|
|
@@ -1517,7 +1517,7 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_144_Temp
|
|
|
1517
1517
|
i0.ɵɵtext(30, "Prompt used for summarization");
|
|
1518
1518
|
i0.ɵɵelementEnd()()();
|
|
1519
1519
|
i0.ɵɵelementStart(31, "div", 197);
|
|
1520
|
-
i0.ɵɵtemplate(32,
|
|
1520
|
+
i0.ɵɵtemplate(32, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Template, 9, 3, "div", 226)(33, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_33_Template, 2, 1, "span", 199);
|
|
1521
1521
|
i0.ɵɵelementEnd()();
|
|
1522
1522
|
} if (rf & 2) {
|
|
1523
1523
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
@@ -1614,70 +1614,85 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Template(rf, ctx) {
|
|
|
1614
1614
|
i0.ɵɵelement(81, "mj-form-field", 208);
|
|
1615
1615
|
i0.ɵɵelementEnd()();
|
|
1616
1616
|
i0.ɵɵelementStart(82, "div", 192)(83, "div", 193)(84, "div", 194);
|
|
1617
|
-
i0.ɵɵelement(85, "i",
|
|
1617
|
+
i0.ɵɵelement(85, "i", 209);
|
|
1618
1618
|
i0.ɵɵelementEnd();
|
|
1619
1619
|
i0.ɵɵelementStart(86, "div", 196)(87, "h4");
|
|
1620
|
-
i0.ɵɵtext(88, "
|
|
1620
|
+
i0.ɵɵtext(88, "Default Effort Level");
|
|
1621
1621
|
i0.ɵɵelementEnd();
|
|
1622
1622
|
i0.ɵɵelementStart(89, "p");
|
|
1623
|
-
i0.ɵɵtext(90, "
|
|
1623
|
+
i0.ɵɵtext(90, "Default effort level for all prompts (1-100)");
|
|
1624
1624
|
i0.ɵɵelementEnd()()();
|
|
1625
1625
|
i0.ɵɵelementStart(91, "div", 197);
|
|
1626
|
-
i0.ɵɵelement(92, "mj-form-field",
|
|
1626
|
+
i0.ɵɵelement(92, "mj-form-field", 210);
|
|
1627
|
+
i0.ɵɵelementStart(93, "div", 211);
|
|
1628
|
+
i0.ɵɵelement(94, "i", 160);
|
|
1629
|
+
i0.ɵɵtext(95, " Higher values request more thorough reasoning (1=minimal, 100=maximum) ");
|
|
1630
|
+
i0.ɵɵelementEnd()()();
|
|
1631
|
+
i0.ɵɵelementStart(96, "div", 192)(97, "div", 193)(98, "div", 194);
|
|
1632
|
+
i0.ɵɵelement(99, "i", 177);
|
|
1633
|
+
i0.ɵɵelementEnd();
|
|
1634
|
+
i0.ɵɵelementStart(100, "div", 196)(101, "h4");
|
|
1635
|
+
i0.ɵɵtext(102, "Driver Class");
|
|
1636
|
+
i0.ɵɵelementEnd();
|
|
1637
|
+
i0.ɵɵelementStart(103, "p");
|
|
1638
|
+
i0.ɵɵtext(104, "Custom implementation class");
|
|
1639
|
+
i0.ɵɵelementEnd()()();
|
|
1640
|
+
i0.ɵɵelementStart(105, "div", 197);
|
|
1641
|
+
i0.ɵɵelement(106, "mj-form-field", 212);
|
|
1627
1642
|
i0.ɵɵelementEnd()()()();
|
|
1628
|
-
i0.ɵɵelementStart(
|
|
1629
|
-
i0.ɵɵelement(
|
|
1630
|
-
i0.ɵɵtext(
|
|
1643
|
+
i0.ɵɵelementStart(107, "div", 188)(108, "h3", 189);
|
|
1644
|
+
i0.ɵɵelement(109, "i", 213);
|
|
1645
|
+
i0.ɵɵtext(110, " Visual Identity ");
|
|
1631
1646
|
i0.ɵɵelementEnd();
|
|
1632
|
-
i0.ɵɵelementStart(
|
|
1633
|
-
i0.ɵɵelement(
|
|
1647
|
+
i0.ɵɵelementStart(111, "div", 191)(112, "div", 192)(113, "div", 193)(114, "div", 194);
|
|
1648
|
+
i0.ɵɵelement(115, "i", 214);
|
|
1634
1649
|
i0.ɵɵelementEnd();
|
|
1635
|
-
i0.ɵɵelementStart(
|
|
1636
|
-
i0.ɵɵtext(
|
|
1650
|
+
i0.ɵɵelementStart(116, "div", 196)(117, "h4");
|
|
1651
|
+
i0.ɵɵtext(118, "Icon Class");
|
|
1637
1652
|
i0.ɵɵelementEnd();
|
|
1638
|
-
i0.ɵɵelementStart(
|
|
1639
|
-
i0.ɵɵtext(
|
|
1653
|
+
i0.ɵɵelementStart(119, "p");
|
|
1654
|
+
i0.ɵɵtext(120, "Font Awesome icon class");
|
|
1640
1655
|
i0.ɵɵelementEnd()()();
|
|
1641
|
-
i0.ɵɵelementStart(
|
|
1642
|
-
i0.ɵɵelement(
|
|
1643
|
-
i0.ɵɵelementStart(
|
|
1644
|
-
i0.ɵɵelement(
|
|
1645
|
-
i0.ɵɵtext(
|
|
1646
|
-
i0.ɵɵelementStart(
|
|
1647
|
-
i0.ɵɵtext(
|
|
1656
|
+
i0.ɵɵelementStart(121, "div", 197);
|
|
1657
|
+
i0.ɵɵelement(122, "mj-form-field", 215);
|
|
1658
|
+
i0.ɵɵelementStart(123, "div", 211);
|
|
1659
|
+
i0.ɵɵelement(124, "i", 160);
|
|
1660
|
+
i0.ɵɵtext(125, " Example: ");
|
|
1661
|
+
i0.ɵɵelementStart(126, "code");
|
|
1662
|
+
i0.ɵɵtext(127, "fa-solid fa-robot");
|
|
1648
1663
|
i0.ɵɵelementEnd()()()();
|
|
1649
|
-
i0.ɵɵelementStart(
|
|
1650
|
-
i0.ɵɵelement(
|
|
1664
|
+
i0.ɵɵelementStart(128, "div", 192)(129, "div", 193)(130, "div", 194);
|
|
1665
|
+
i0.ɵɵelement(131, "i", 216);
|
|
1651
1666
|
i0.ɵɵelementEnd();
|
|
1652
|
-
i0.ɵɵelementStart(
|
|
1653
|
-
i0.ɵɵtext(
|
|
1667
|
+
i0.ɵɵelementStart(132, "div", 196)(133, "h4");
|
|
1668
|
+
i0.ɵɵtext(134, "Logo URL");
|
|
1654
1669
|
i0.ɵɵelementEnd();
|
|
1655
|
-
i0.ɵɵelementStart(
|
|
1656
|
-
i0.ɵɵtext(
|
|
1670
|
+
i0.ɵɵelementStart(135, "p");
|
|
1671
|
+
i0.ɵɵtext(136, "URL for agent logo image");
|
|
1657
1672
|
i0.ɵɵelementEnd()()();
|
|
1658
|
-
i0.ɵɵelementStart(
|
|
1659
|
-
i0.ɵɵelement(
|
|
1660
|
-
i0.ɵɵelementStart(
|
|
1661
|
-
i0.ɵɵelement(
|
|
1662
|
-
i0.ɵɵtext(
|
|
1673
|
+
i0.ɵɵelementStart(137, "div", 197);
|
|
1674
|
+
i0.ɵɵelement(138, "mj-form-field", 217);
|
|
1675
|
+
i0.ɵɵelementStart(139, "div", 211);
|
|
1676
|
+
i0.ɵɵelement(140, "i", 160);
|
|
1677
|
+
i0.ɵɵtext(141, " Takes precedence over Icon Class ");
|
|
1663
1678
|
i0.ɵɵelementEnd()()()()();
|
|
1664
|
-
i0.ɵɵelementStart(
|
|
1665
|
-
i0.ɵɵelement(
|
|
1666
|
-
i0.ɵɵtext(
|
|
1679
|
+
i0.ɵɵelementStart(142, "div", 188)(143, "h3", 189);
|
|
1680
|
+
i0.ɵɵelement(144, "i", 218);
|
|
1681
|
+
i0.ɵɵtext(145, " Context Compression ");
|
|
1667
1682
|
i0.ɵɵelementEnd();
|
|
1668
|
-
i0.ɵɵelementStart(
|
|
1669
|
-
i0.ɵɵelement(
|
|
1683
|
+
i0.ɵɵelementStart(146, "div", 191)(147, "div", 202)(148, "div", 193)(149, "div", 194);
|
|
1684
|
+
i0.ɵɵelement(150, "i", 195);
|
|
1670
1685
|
i0.ɵɵelementEnd();
|
|
1671
|
-
i0.ɵɵelementStart(
|
|
1672
|
-
i0.ɵɵtext(
|
|
1686
|
+
i0.ɵɵelementStart(151, "div", 196)(152, "h4");
|
|
1687
|
+
i0.ɵɵtext(153, "Enable Context Compression");
|
|
1673
1688
|
i0.ɵɵelementEnd();
|
|
1674
|
-
i0.ɵɵelementStart(
|
|
1675
|
-
i0.ɵɵtext(
|
|
1689
|
+
i0.ɵɵelementStart(154, "p");
|
|
1690
|
+
i0.ɵɵtext(155, "Automatically compress conversation context when message threshold is reached");
|
|
1676
1691
|
i0.ɵɵelementEnd()()();
|
|
1677
|
-
i0.ɵɵelementStart(
|
|
1678
|
-
i0.ɵɵlistener("valueChange", function
|
|
1692
|
+
i0.ɵɵelementStart(156, "div", 197)(157, "mj-form-field", 219);
|
|
1693
|
+
i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_37_Template_mj_form_field_valueChange_157_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
|
|
1679
1694
|
i0.ɵɵelementEnd()()();
|
|
1680
|
-
i0.ɵɵtemplate(
|
|
1695
|
+
i0.ɵɵtemplate(158, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Template, 34, 5);
|
|
1681
1696
|
i0.ɵɵelementEnd()()();
|
|
1682
1697
|
} if (rf & 2) {
|
|
1683
1698
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -1695,6 +1710,8 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Template(rf, ctx) {
|
|
|
1695
1710
|
i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
|
|
1696
1711
|
i0.ɵɵadvance(11);
|
|
1697
1712
|
i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
|
|
1713
|
+
i0.ɵɵadvance(14);
|
|
1714
|
+
i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
|
|
1698
1715
|
i0.ɵɵadvance(16);
|
|
1699
1716
|
i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
|
|
1700
1717
|
i0.ɵɵadvance(16);
|
|
@@ -1702,7 +1719,7 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Template(rf, ctx) {
|
|
|
1702
1719
|
i0.ɵɵadvance(19);
|
|
1703
1720
|
i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
|
|
1704
1721
|
i0.ɵɵadvance();
|
|
1705
|
-
i0.ɵɵconditional(ctx_r1.record.EnableContextCompression ?
|
|
1722
|
+
i0.ɵɵconditional(ctx_r1.record.EnableContextCompression ? 158 : -1);
|
|
1706
1723
|
} }
|
|
1707
1724
|
function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
|
|
1708
1725
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
@@ -1731,7 +1748,7 @@ function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
1731
1748
|
i0.ɵɵtemplate(33, AIAgentFormComponentExtended_form_2_ng_template_33_Template, 2, 0, "ng-template", 27)(34, AIAgentFormComponentExtended_form_2_ng_template_34_Template, 9, 8, "ng-template", 28);
|
|
1732
1749
|
i0.ɵɵelementEnd();
|
|
1733
1750
|
i0.ɵɵelementStart(35, "kendo-panelbar-item", 26);
|
|
1734
|
-
i0.ɵɵtemplate(36, AIAgentFormComponentExtended_form_2_ng_template_36_Template, 2, 0, "ng-template", 27)(37, AIAgentFormComponentExtended_form_2_ng_template_37_Template,
|
|
1751
|
+
i0.ɵɵtemplate(36, AIAgentFormComponentExtended_form_2_ng_template_36_Template, 2, 0, "ng-template", 27)(37, AIAgentFormComponentExtended_form_2_ng_template_37_Template, 159, 21, "ng-template", 28);
|
|
1735
1752
|
i0.ɵɵelementEnd()()()();
|
|
1736
1753
|
} if (rf & 2) {
|
|
1737
1754
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -3678,7 +3695,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
|
|
|
3678
3695
|
} if (rf & 2) {
|
|
3679
3696
|
let _t;
|
|
3680
3697
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customSectionContainer = _t.first);
|
|
3681
|
-
} }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["form", "ngForm"], ["customSectionContainer", ""], [1, "record-form-container"], ["kendoDialogContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "keepItemContent"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [3, "stateChange", "expanded"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "custom-agent-type-section"], [1, "fa-solid", "fa-history"], [1, "panel-content", "execution-history-panel"], [1, "empty-state"], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "view-more-item"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "execution-actions"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-stopwatch"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-dollar-sign"], [1, "detailed-metrics"], [1, "metrics-grid"], [1, "metric-detail"], [1, "metric-info"], [1, "metric-title"], [1, "metric-data"], [1, "result-section"], [1, "error-section"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-calculator"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-file-text"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "section-header"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "entity-list"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "section-description"], ["kendoButton", "", "themeColor", "secondary", "size", "small", 3, "click"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent", 3, "click"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-shield-halved"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "record"], [1, "fa-solid", "fa-cogs"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], [1, "config-field-display"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card-hint"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "record"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "kendoButton", "", "fillMode", "outline", "size", "small", 1, "prompt-select-btn", 3, "click"], [1, "fa-solid", "fa-search"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
|
|
3698
|
+
} }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["form", "ngForm"], ["customSectionContainer", ""], [1, "record-form-container"], ["kendoDialogContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "keepItemContent"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [3, "stateChange", "expanded"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "custom-agent-type-section"], [1, "fa-solid", "fa-history"], [1, "panel-content", "execution-history-panel"], [1, "empty-state"], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "view-more-item"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "execution-actions"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-stopwatch"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-dollar-sign"], [1, "detailed-metrics"], [1, "metrics-grid"], [1, "metric-detail"], [1, "metric-info"], [1, "metric-title"], [1, "metric-data"], [1, "result-section"], [1, "error-section"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-calculator"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-file-text"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "section-header"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "entity-list"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "section-description"], ["kendoButton", "", "themeColor", "secondary", "size", "small", 3, "click"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent", 3, "click"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-shield-halved"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "record"], [1, "fa-solid", "fa-cogs"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], [1, "config-field-display"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-tachometer-alt"], ["FieldName", "DefaultPromptEffortLevel", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card-hint"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "record"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "kendoButton", "", "fillMode", "outline", "size", "small", 1, "prompt-select-btn", 3, "click"], [1, "fa-solid", "fa-search"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
|
|
3682
3699
|
i0.ɵɵelementStart(0, "div", 2);
|
|
3683
3700
|
i0.ɵɵelement(1, "div", 3);
|
|
3684
3701
|
i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_Template, 38, 18, "form", 4);
|
|
@@ -3694,7 +3711,7 @@ AIAgentFormComponentExtended = __decorate([
|
|
|
3694
3711
|
export { AIAgentFormComponentExtended };
|
|
3695
3712
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentFormComponentExtended, [{
|
|
3696
3713
|
type: Component,
|
|
3697
|
-
args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n <!-- Dialog container for Kendo dialogs -->\n <div kendoDialogContainer></div>\n <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n <!-- Compact Header with Agent Overview -->\n <div class=\"agent-header\">\n <div class=\"agent-header-content\">\n <div class=\"agent-overview\">\n <div class=\"agent-icon-wrapper\">\n @if (hasLogoURL()) {\n <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n } @else {\n <i [class]=\"getAgentIcon()\"></i>\n }\n </div>\n <div class=\"agent-info\">\n @if (EditMode) {\n <kendo-textbox [(ngModel)]=\"record.Name\" \n name=\"agentName\"\n placeholder=\"Enter agent name...\"\n class=\"agent-name-input\">\n </kendo-textbox>\n } @else {\n <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n }\n <div class=\"agent-meta\">\n @if (record.Status) {\n <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n <i class=\"fa-solid fa-circle\"></i>\n {{ record.Status }}\n </span>\n }\n @if (record.Type) {\n <span class=\"execution-mode\">\n Agent Type: {{ record.Type }}\n </span>\n }\n @if (record.Parent) {\n <span class=\"parent-agent\">\n <i class=\"fa-solid fa-sitemap\"></i>\n Child of {{ record.Parent }}\n </span>\n }\n </div>\n </div>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"agent-actions\">\n @if (record.ID) {\n <button kendoButton themeColor=\"primary\" size=\"large\"\n (click)=\"openTestHarness()\"\n [disabled]=\"record.Status !== 'Active'\"\n title=\"Run this AI agent\">\n <i class=\"fa-solid fa-play\"></i>\n Run\n </button>\n }\n <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Single Pane Layout with Expander Panels -->\n <div class=\"form-content\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <!-- Custom Agent Type Section (if defined) -->\n @if (record.ID && agentType && agentType.UIFormSectionKey) {\n <kendo-panelbar-item \n [expanded]=\"agentType.UIFormSectionExpandedByDefault\" \n (stateChange)=\"onCustomSectionStateChange($event)\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-puzzle-piece\"></i> {{ agentType.Name }} Configuration\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content custom-agent-type-section\" [style.display]=\"'block'\">\n <ng-container #customSectionContainer></ng-container>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Requests & History -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-history\"></i> Execution History{{ executionHistoryCount > 0 ? ' (' + executionHistoryCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content execution-history-panel\">\n \n @if (executionHistoryCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-history\"></i>\n <h4>No Execution History</h4>\n <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n </div>\n } @else {\n <div class=\"execution-history-list\">\n @for (execution of recentExecutions; track execution.ID) {\n <div class=\"execution-card\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n <div class=\"execution-left-section\">\n <div class=\"execution-status\">\n <div class=\"status-indicator\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n </div>\n <div class=\"execution-info\">\n <div class=\"execution-title\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"expandedExecutions[execution.ID]\"></i>\n Execution #{{ execution.ID.substring(0, 8) }}\n </div>\n <div class=\"execution-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n </div>\n </div>\n \n <div class=\"execution-metrics\">\n @if (execution.Configuration) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-cog\"></i>\n <span class=\"metric-label\">Config:</span>\n <span class=\"metric-value\">{{ execution.Configuration }}</span>\n </div>\n }\n \n @if (execution.CompletedAt) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-stopwatch\"></i>\n <span class=\"metric-label\">Duration:</span>\n <span class=\"metric-value\">{{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}</span>\n </div>\n } @else if (execution.Status === 'Running') {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <span class=\"metric-label\">Running:</span>\n <span class=\"metric-value\">{{ getRunningTime(execution.StartedAt) }}</span>\n </div>\n }\n \n @if (execution.TotalTokensUsedRollup || execution.TotalTokensUsed) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-microchip\"></i>\n <span class=\"metric-label\">Tokens:</span>\n <span class=\"metric-value\">{{ formatTokenCount(execution.TotalTokensUsedRollup || execution.TotalTokensUsed) }}</span>\n </div>\n }\n \n @if (execution.TotalCostRollup || execution.TotalCost) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <span class=\"metric-label\">Cost:</span>\n <span class=\"metric-value\">${{ formatCost(execution.TotalCostRollup || execution.TotalCost) }}</span>\n </div>\n }\n </div>\n </div>\n \n <div class=\"execution-actions\">\n <button class=\"action-btn\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\" title=\"View details\">\n <i class=\"fa-solid fa-external-link-alt\"></i>\n </button>\n </div>\n </div>\n @if (expandedExecutions[execution.ID]) {\n <div class=\"execution-expanded-content\">\n <!-- Detailed Metrics -->\n <div class=\"detailed-metrics\">\n <div class=\"metrics-grid\">\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-clock\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Started</span>\n <span class=\"metric-data\">{{ execution.StartedAt | date:'medium' }}</span>\n </div>\n </div>\n \n @if (execution.CompletedAt) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Completed</span>\n <span class=\"metric-data\">{{ execution.CompletedAt | date:'medium' }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalTokensUsed) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-microchip\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Direct Tokens</span>\n <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsed) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalTokensUsedRollup && execution.TotalTokensUsedRollup !== execution.TotalTokensUsed) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-sitemap\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Total + Sub-agents</span>\n <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsedRollup) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalCost) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Direct Cost</span>\n <span class=\"metric-data\">${{ formatCost(execution.TotalCost) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalCostRollup && execution.TotalCostRollup !== execution.TotalCost) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-calculator\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Total + Sub-agents</span>\n <span class=\"metric-data\">${{ formatCost(execution.TotalCostRollup) }}</span>\n </div>\n </div>\n }\n \n @if (execution.ConversationID) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-comments\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Conversation</span>\n <span class=\"metric-data\">{{ execution.ConversationID.substring(0, 8) }}...</span>\n </div>\n </div>\n }\n </div>\n </div>\n \n @if (execution.Result) {\n <div class=\"result-section\">\n <h5><i class=\"fa-solid fa-file-text\"></i> Result</h5>\n <mj-code-editor \n [value]=\"getExecutionResultPreview(execution, false)\"\n [readonly]=\"true\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"max-height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n }\n \n @if (execution.ErrorMessage) {\n <div class=\"error-section\">\n <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h5>\n <div class=\"error-content\">{{ execution.ErrorMessage }}</div>\n </div>\n }\n </div>\n }\n </div>\n }\n @if (executionHistoryCount > recentExecutions.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\">\n <span>View all {{ executionHistoryCount }} executions...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Actions -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateActions) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n <i class=\"fa-solid fa-plus\"></i> Add Action\n </button>\n }\n </div>\n </div>\n \n @if (actionCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-bolt\"></i>\n <h4>No Actions Configured</h4>\n <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n @if (EditMode && UserCanCreateActions) {\n <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n <i class=\"fa-solid fa-plus\"></i> Configure First Action\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (action of agentActions; track action.ID) {\n <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n <div class=\"item-icon\">\n <i [class]=\"getActionIcon(action)\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n @if (action.Description) {\n <div class=\"item-preview\">{{ action.Description }}</div>\n }\n <div class=\"item-meta\">\n @if (action.Type) {\n <span class=\"meta-tag\">{{ action.Type }}</span>\n }\n <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n {{ action.Status }}\n </span>\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanDeleteActions) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removeAction(action, $event)\"\n title=\"Remove action\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (actionCount > agentActions.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n <span>View all {{ actionCount }} actions...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Sub-Agents -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Manage hierarchical relationships with child agents that work under this agent.\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addSubAgents()\">\n <i class=\"fa-solid fa-plus\"></i> Add Subagent\n </button>\n <button kendoButton themeColor=\"secondary\" size=\"small\" (click)=\"createSubAgent()\">\n <i class=\"fa-solid fa-plus\"></i> Create Sub-Agent\n </button>\n }\n </div>\n </div>\n \n @if (subAgentCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sitemap\"></i>\n <h4>No Sub-Agents</h4>\n <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton themeColor=\"primary\" (click)=\"addSubAgents()\">\n <i class=\"fa-solid fa-plus\"></i> Add Subagent\n </button>\n <button kendoButton themeColor=\"secondary\" (click)=\"createSubAgent()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (subAgent of subAgents; track subAgent.ID) {\n <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n <div class=\"item-icon\">\n @if (hasSubAgentLogoURL(subAgent)) {\n <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n } @else {\n <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n }\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n @if (subAgent.Description) {\n <div class=\"item-preview\">{{ subAgent.Description }}</div>\n }\n <div class=\"item-meta\">\n @if (subAgent.Status) {\n <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n {{ subAgent.Status }}\n </span>\n }\n @if (subAgent.ExecutionMode) {\n <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openSubAgentAdvancedSettings(subAgent, $event)\"\n title=\"Advanced settings\">\n <i class=\"fa-solid fa-cog\"></i>\n </button>\n }\n @if (EditMode && UserCanDeleteSubAgents) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removeSubAgent(subAgent, $event)\"\n title=\"Remove sub-agent\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (subAgentCount > subAgents.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n <span>View all {{ subAgentCount }} sub-agents...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Prompts (With Model Selection) -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"prompt-controls\">\n <!-- Model Selection Mode Control -->\n <div class=\"model-selection-mode\">\n <label class=\"model-selection-label\">\n <i class=\"fa-solid fa-sliders\"></i>\n Model Selection:\n </label>\n @if (EditMode) {\n <kendo-dropdownlist\n [(ngModel)]=\"record.ModelSelectionMode\"\n name=\"modelSelectionMode\"\n [data]=\"modelSelectionModes\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n class=\"model-selection-dropdown\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n }\n </div>\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateNewPrompts) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i> Add Prompt\n </button>\n }\n </div>\n </div>\n \n @if (promptCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comments\"></i>\n <h4>No Prompts Configured</h4>\n <p>Add prompts to define how this agent processes requests and generates responses.</p>\n @if (EditMode && UserCanCreateNewPrompts) {\n <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (prompt of agentPrompts; track prompt.ID) {\n <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ prompt.Name }}</div>\n @if (prompt.TemplateText) {\n <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n }\n <div class=\"item-meta\">\n @if (prompt.PromptRole) {\n <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanCreatePrompts) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openPromptAdvancedSettings(prompt, $event)\"\n title=\"Advanced settings\">\n <i class=\"fa-solid fa-cog\"></i>\n </button>\n }\n @if (EditMode && UserCanDeletePrompts) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removePrompt(prompt, $event)\"\n title=\"Remove prompt\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (promptCount > agentPrompts.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n <span>View all {{ promptCount }} prompts...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n\n <!-- Learning & Analytics -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Monitor and manage learning cycles, training sessions, and performance analytics.\n </div>\n </div>\n \n @if (learningCycleCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-brain\"></i>\n <h4>No Learning Cycles</h4>\n <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (cycle of learningCycles; track cycle.ID) {\n <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-brain\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n <div class=\"item-meta\">\n @if (cycle.StartedAt) {\n <span class=\"meta-tag\">\n <i class=\"fa-solid fa-calendar\"></i>\n {{ cycle.StartedAt | date:'short' }}\n </span>\n }\n @if (cycle.Status) {\n <span class=\"status-tag\">{{ cycle.Status }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (learningCycleCount > learningCycles.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n <span>View all {{ learningCycleCount }} cycles...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Notes & Documentation -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Manage notes, documentation, and annotations for this agent.\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateNotes) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n <i class=\"fa-solid fa-plus\"></i> Add Note\n </button>\n }\n </div>\n </div>\n \n @if (noteCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sticky-note\"></i>\n <h4>No Notes</h4>\n <p>Add notes to document important information, observations, or instructions for this agent.</p>\n @if (EditMode && UserCanCreateNotes) {\n <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Note\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (note of agentNotes; track note.ID) {\n <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-sticky-note\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n @if (note.Note) {\n <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n }\n <div class=\"item-meta\">\n @if (note.__mj_CreatedAt) {\n <span class=\"meta-tag\">\n <i class=\"fa-solid fa-calendar\"></i>\n {{ note.__mj_CreatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (noteCount > agentNotes.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n <span>View all {{ noteCount }} notes...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n\n\n <!-- Payload -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Configure how this agent handles data payloads, path routing, and validation between parent and child agents.\n </div>\n </div>\n \n <!-- Payload Scope Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-target\"></i>\n Payload Scope\n </h3>\n \n <div class=\"payload-field-container\">\n <div class=\"payload-field-info\">\n <label class=\"payload-field-label\">Payload Scope Path</label>\n <p class=\"payload-field-description\">\n Specify a path within the parent payload that this sub-agent should operate on. \n Leave empty to receive the entire payload.\n </p>\n </div>\n \n <div class=\"payload-field-input\">\n <mj-form-field \n FieldName=\"PayloadScope\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n <div class=\"payload-field-example\">\n <i class=\"fa-solid fa-lightbulb\"></i>\n <span>Example: <code>/customer/profile</code> or <code>/analysis/results</code></span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Path Configuration Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-route\"></i>\n Path Configuration\n </h3>\n \n <div class=\"payload-paths-grid\">\n <!-- Downstream Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon downstream\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Downstream Paths</h4>\n <p>JSON array of paths to pass to sub-agents</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadDownstreamPaths || '["*"]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Use <code>[\"*\"]</code> to pass entire payload or specify paths like <code>[\"user.id\", \"order.*\"]</code>\n </div>\n </div>\n </div>\n\n <!-- Upstream Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon upstream\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Upstream Paths</h4>\n <p>JSON array of paths sub-agents can write back</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadUpstreamPaths || '["*"]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Use <code>[\"*\"]</code> to allow all writes or limit to specific paths\n </div>\n </div>\n </div>\n\n <!-- Self Read Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon self-read\">\n <i class=\"fa-solid fa-eye\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Self Read Paths</h4>\n <p>JSON array of paths this agent can read</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadSelfReadPaths || '[]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Paths this agent's prompts can read from the payload\n </div>\n </div>\n </div>\n\n <!-- Self Write Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon self-write\">\n <i class=\"fa-solid fa-pen\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Self Write Paths</h4>\n <p>JSON array of paths this agent can write to</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadSelfWritePaths || '[]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Paths this agent's prompts can write back to the payload\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Validation Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-shield-check\"></i>\n Final Payload Validation\n </h3>\n \n <div class=\"payload-validation-container\">\n <div class=\"payload-validation-settings\">\n <div class=\"validation-field-group\">\n <label class=\"validation-field-label\">Validation Mode</label>\n <p class=\"validation-field-description\">How to handle validation failures</p>\n <mj-form-field \n FieldName=\"FinalPayloadValidationMode\" \n Type=\"dropdownlist\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n \n <div class=\"validation-field-group\">\n <label class=\"validation-field-label\">Max Retries</label>\n <p class=\"validation-field-description\">Maximum validation retry attempts</p>\n <mj-form-field \n FieldName=\"FinalPayloadValidationMaxRetries\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n </div>\n \n <div class=\"payload-validation-schema\">\n <label class=\"validation-schema-label\">\n <i class=\"fa-solid fa-code\"></i>\n Validation Schema\n </label>\n <p class=\"validation-schema-description\">\n JSON schema or validation rules for the final payload structure\n </p>\n <div class=\"validation-schema-editor\">\n <mj-code-editor \n [value]=\"record.FinalPayloadValidation || '{}'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\"\n (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n </mj-code-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n\n\n <!-- Execution Guardrails (New Separate Panel) -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Set limits to prevent runaway agent executions and control resource usage.\n </div>\n </div>\n \n <div class=\"form-fields-grid\">\n <mj-form-field \n FieldName=\"MaxCostPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Cost ($)\"\n Description=\"Maximum cost per run\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxTokensPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Tokens\"\n Description=\"Maximum tokens per run\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxIterationsPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Iterations\"\n Description=\"Maximum prompt iterations\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxTimePerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Time (seconds)\"\n Description=\"Maximum execution time\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n <!-- Configuration (Settings Panel) -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-cogs\"></i> Configuration\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Configure agent behavior, execution settings, and advanced features.\n </div>\n </div>\n \n <!-- Identity & Behavior Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-id-card\"></i>\n Identity & Behavior\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Agent Status</h4>\n <p>Current availability and operational status</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <kendo-dropdownlist \n [(ngModel)]=\"record.Status\"\n [data]=\"statusOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n name=\"agentStatus\"\n class=\"config-field-input\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n }\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-sitemap\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Agent Type</h4>\n <p>Category and system-level behavior</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <kendo-dropdownlist \n [(ngModel)]=\"record.TypeID\"\n [data]=\"agentTypes\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n name=\"agentTypeID\"\n class=\"config-field-input\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n }\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-bolt\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Expose as Action</h4>\n <p>Make available as an action for other agents</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExposeAsAction\" \n Type=\"checkbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card full-width\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-align-left\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Description</h4>\n <p>Detailed agent description and purpose</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"Description\" \n Type=\"textarea\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Execution Settings Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-play\"></i>\n Execution Settings\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-layer-group\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Execution Mode</h4>\n <p>How sub-agents are executed</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExecutionMode\" \n Type=\"dropdownlist\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-sort-numeric-down\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Execution Order</h4>\n <p>Order when run with siblings</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExecutionOrder\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-code\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Driver Class</h4>\n <p>Custom implementation class</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"DriverClass\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Visual Identity Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-palette\"></i>\n Visual Identity\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-icons\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Icon Class</h4>\n <p>Font Awesome icon class</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"IconClass\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Example: <code>fa-solid fa-robot</code>\n </div>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-image\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Logo URL</h4>\n <p>URL for agent logo image</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"LogoURL\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Takes precedence over Icon Class\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Context Compression Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-compress\"></i>\n Context Compression\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card full-width\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Enable Context Compression</h4>\n <p>Automatically compress conversation context when message threshold is reached</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"EnableContextCompression\" \n Type=\"checkbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n (valueChange)=\"onContextCompressionToggle($event)\">\n </mj-form-field>\n </div>\n </div>\n\n @if (record.EnableContextCompression) {\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-hashtag\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Message Threshold</h4>\n <p>Messages before compression triggers</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ContextCompressionMessageThreshold\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-save\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Messages to Keep</h4>\n <p>Recent messages to retain uncompressed</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ContextCompressionMessageRetentionCount\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Compression Prompt</h4>\n <p>Prompt used for summarization</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <div class=\"prompt-selector-container\">\n <div class=\"prompt-display\">\n @if (selectedContextCompressionPrompt) {\n <span class=\"prompt-name\">{{ selectedContextCompressionPrompt.Name }}</span>\n } @else {\n <span class=\"no-prompt\">No prompt selected</span>\n }\n </div>\n <div class=\"prompt-actions\">\n <button type=\"button\" \n kendoButton \n fillMode=\"outline\" \n size=\"small\"\n (click)=\"openContextCompressionPromptSelector()\"\n class=\"prompt-select-btn\">\n <i class=\"fa-solid fa-search\"></i>\n {{ selectedContextCompressionPrompt ? 'Change' : 'Select' }} Prompt\n </button>\n @if (selectedContextCompressionPrompt) {\n <button type=\"button\" \n kendoButton \n fillMode=\"flat\" \n size=\"small\"\n (click)=\"clearContextCompressionPrompt()\"\n class=\"prompt-clear-btn\"\n title=\"Clear selection\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n } @else {\n <span class=\"config-field-display\">{{ selectedContextCompressionPrompt?.Name || record.ContextCompressionPrompt || 'Not Set' }}</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n\n\n\n </kendo-panelbar>\n </div>\n </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f5f7fa;\n}\n\n.record-form {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 12px 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n}\n\n.agent-overview {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n.agent-icon-wrapper {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n color: white;\n font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.agent-info {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name {\n font-size: 22px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n line-height: 1.2;\n}\n\n.agent-name-input {\n font-size: 18px !important;\n font-weight: 500 !important;\n height: 36px !important;\n width: 100% !important;\n max-width: 400px !important;\n}\n\n.agent-meta {\n display: flex;\n align-items: center;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.status-badge {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge.active {\n background: #28a745;\n color: white;\n}\n\n.status-badge.pending {\n background: #ffc107;\n color: #212529;\n}\n\n.status-badge.disabled {\n background: #6c757d;\n color: white;\n}\n\n.execution-mode,\n.parent-agent {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 10px;\n border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n font-size: 12px;\n opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n flex: 1;\n margin-right: 16px;\n}\n\n.agent-meta-info {\n display: flex;\n gap: 24px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.meta-value {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n.agent-description {\n margin-top: 16px;\n color: #6c757d;\n line-height: 1.6;\n font-size: 15px;\n}\n\n.agent-description-input {\n width: 100%;\n max-width: 600px;\n min-height: 80px;\n resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.action-buttons-row {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.action-button {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n border-radius: 8px;\n font-weight: 500;\n font-size: 14px;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n background: #2196f3;\n color: white;\n}\n\n.action-button.primary:hover {\n background: #1976d2;\n}\n\n.action-button.secondary {\n background: #6c757d;\n color: white;\n}\n\n.action-button.secondary:hover {\n background: #5a6268;\n}\n\n.action-warnings {\n margin-top: 8px;\n font-size: 13px;\n color: #dc3545;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n overflow-x: hidden;\n background: #f5f7fa;\n padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n border: none;\n background: transparent;\n}\n\n::ng-deep .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 .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 .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n::ng-deep .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 .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 .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n::ng-deep .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 .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 .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n/* Panel Content */\n.panel-content {\n padding: 16px;\n background: white;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.section-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-bottom: 16px;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tab-section {\n background: white;\n border-radius: 12px;\n padding: 24px;\n margin-bottom: 24px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0;\n color: #2c3e50;\n font-size: 18px;\n font-weight: 600;\n}\n\n.section-title i {\n color: #2196f3;\n font-size: 20px;\n}\n\n.section-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.form-field-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.form-field-label {\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n height: 500px;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state i {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state h4 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.loading-spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.spinner-icon {\n width: 48px;\n height: 48px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2196f3;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n display: flex;\n gap: 16px;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n flex: 1;\n padding: 16px;\n background: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n}\n\n.quick-action-card:hover {\n background: white;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.quick-action-icon {\n font-size: 32px;\n color: #2196f3;\n margin-bottom: 8px;\n}\n\n.quick-action-title {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 4px;\n}\n\n.quick-action-description {\n font-size: 12px;\n color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.entity-item {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-1px);\n}\n\n.item-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n color: #6c757d;\n font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n color: white;\n}\n\n.item-icon img.sub-agent-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 6px;\n}\n\n.item-content {\n flex: 1;\n min-width: 0;\n}\n\n.item-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n}\n\n.item-preview {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n margin: 4px 0 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.item-meta {\n display: flex;\n gap: 12px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 6px;\n font-weight: 500;\n}\n\n.meta-tag {\n background: #e9ecef;\n color: #495057;\n}\n\n.priority-tag {\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-tag {\n background: #e9ecef;\n color: #495057;\n}\n\n.status-tag.active {\n background: #d4edda;\n color: #28a745;\n}\n\n.status-tag.inactive {\n background: #f8d7da;\n color: #dc3545;\n}\n\n.item-actions {\n opacity: 0;\n transition: opacity 0.2s ease;\n color: #6c757d;\n font-size: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n color: #2196f3;\n}\n\n.view-more-item {\n padding: 16px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 10px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-more-item:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n color: #2196f3;\n}\n\n/* Payload Section Styles */\n.payload-config-section,\n.payload-paths-section,\n.payload-validation-section {\n margin-bottom: 32px;\n}\n\n.subsection-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.subsection-title i {\n color: #2196f3;\n}\n\n.subsection-divider {\n margin-top: 32px;\n margin-bottom: 16px;\n padding-top: 24px;\n border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.payload-field-group {\n margin-bottom: 20px;\n}\n\n.payload-field-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n}\n\n.payload-field-label i {\n color: #6c757d;\n font-size: 16px;\n}\n\n.field-description {\n font-size: 12px;\n font-weight: normal;\n color: #6c757d;\n margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n border: 1px solid #dee2e6;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n border-color: #2196f3;\n}\n\n/* Payload textarea styling */\n.payload-field-group mj-form-field ::ng-deep textarea {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n line-height: 1.5;\n min-height: 120px;\n resize: vertical;\n}\n\n/* Execution History Panel */\n.execution-history-panel {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 16px;\n}\n\n.timeline-item {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n color: white;\n font-size: 14px;\n}\n\n.timeline-content {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n\n.timeline-date {\n font-size: 12px;\n color: #6c757d;\n background: #e9ecef;\n padding: 2px 8px;\n border-radius: 6px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.timeline-meta {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.timeline-preview {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n margin-top: 16px;\n}\n\n.entity-card {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n padding: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n position: relative;\n overflow: hidden;\n}\n\n.entity-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n border-color: #2196f3;\n}\n\n.entity-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #2196f3, #42a5f5);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n opacity: 1;\n}\n\n.card-header {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.card-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n font-size: 18px;\n color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n color: white;\n}\n\n.card-title-section {\n flex: 1;\n min-width: 0;\n}\n\n.card-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n word-wrap: break-word;\n}\n\n.card-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta {\n display: flex;\n gap: 16px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #6c757d;\n padding: 4px 8px;\n background: #f8f9fa;\n border-radius: 6px;\n}\n\n.meta-item i {\n font-size: 11px;\n opacity: 0.8;\n}\n\n.meta-item.active {\n color: #28a745;\n background: #d4edda;\n}\n\n.meta-item.inactive {\n color: #dc3545;\n background: #f8d7da;\n}\n\n.card-actions {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n opacity: 1;\n color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n color: white;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.type-badge {\n padding: 2px 8px;\n border-radius: 6px;\n font-size: 11px;\n font-weight: 500;\n background: #e9ecef;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 120px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n transform: translateY(-2px);\n}\n\n.view-all-content {\n text-align: center;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-all-content i {\n font-size: 24px;\n margin-bottom: 8px;\n display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n position: relative;\n margin-top: 16px;\n}\n\n.timeline-item {\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n transition: all 0.3s ease;\n border-radius: 12px;\n padding: 16px;\n background: transparent;\n border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n background: #f8f9fa;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n cursor: pointer;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-marker {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n flex-shrink: 0;\n position: relative;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n content: '';\n position: absolute;\n top: 50px;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 24px;\n background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n display: none;\n}\n\n.timeline-marker i {\n color: white;\n font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n background: #6c757d;\n}\n\n.timeline-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-header {\n flex: 1;\n cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n gap: 16px;\n}\n\n.expand-icon {\n transition: transform 0.3s ease;\n margin-right: 8px;\n color: #6c757d;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n.timeline-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0;\n line-height: 1.3;\n}\n\n.timeline-date {\n font-size: 12px;\n color: #6c757d;\n white-space: nowrap;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n margin-left: auto;\n}\n\n.timeline-preview {\n font-size: 13px;\n color: #6c757d;\n line-height: 1.5;\n margin-top: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.execution-time {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n}\n\n.timeline-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n}\n\n.timeline-error {\n color: #dc3545;\n font-size: 13px;\n background: #f8d7da;\n padding: 8px 12px;\n border-radius: 6px;\n margin-top: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-error i {\n flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.result-section,\n.error-section {\n margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section h5 {\n color: #dc3545;\n}\n\n.result-content,\n.error-content {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #495057;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* Code editor styling within result section */\n.result-section mj-code-editor {\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.error-content {\n background: #f8d7da;\n border-color: #f5c6cb;\n color: #721c24;\n}\n\n.execution-details {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.detail-row {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.detail-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n min-width: 80px;\n}\n\n.detail-value {\n font-size: 14px;\n color: #495057;\n word-break: break-all;\n}\n\n.timeline-actions {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.btn-primary {\n padding: 8px 16px;\n background: #2196f3;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n background: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n background: #f8f9fa;\n border-radius: 12px;\n border: 2px dashed #dee2e6;\n margin-top: 16px;\n}\n\n.empty-state i {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state h4 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n font-size: 18px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n /* Header Responsiveness */\n .agent-header {\n padding: 16px;\n }\n \n .agent-header-content {\n flex-direction: column;\n gap: 16px;\n }\n \n .agent-overview {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .agent-meta {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .agent-actions {\n width: 100%;\n align-self: stretch;\n }\n \n .action-button {\n flex: 1;\n justify-content: center;\n }\n \n /* Panel Responsiveness */\n .form-content {\n padding: 12px;\n }\n \n ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n padding: 16px 20px;\n font-size: 15px;\n }\n \n .panel-content {\n padding: 20px 16px;\n }\n \n .section-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .header-actions {\n flex-wrap: wrap;\n align-self: stretch;\n }\n \n /* Entity List Responsiveness */\n .entity-item {\n padding: 12px;\n gap: 12px;\n }\n \n .item-icon {\n width: 36px;\n height: 36px;\n }\n \n .item-icon i {\n font-size: 16px;\n }\n \n .item-title {\n font-size: 15px;\n }\n \n .item-preview {\n font-size: 13px;\n }\n \n .item-meta {\n gap: 8px;\n }\n \n /* Timeline Responsiveness */\n .timeline-item {\n padding: 12px;\n gap: 12px;\n }\n \n .timeline-marker {\n width: 28px;\n height: 28px;\n }\n \n .timeline-marker i {\n font-size: 12px;\n }\n \n .timeline-title {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .timeline-date {\n align-self: flex-start;\n }\n \n /* Form Field Responsiveness */\n .form-fields-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n \n /* Legacy card support */\n .cards-container {\n grid-template-columns: 1fr;\n }\n}\n\n/* Execution History Panel - Max Height and Scroll */\n.execution-history-panel {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Custom scrollbar for execution history */\n.execution-history-panel::-webkit-scrollbar {\n width: 8px;\n}\n\n.execution-history-panel::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n}\n\n/* New Execution History Card Design */\n.execution-history-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.execution-card {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.execution-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n border-color: #2196f3;\n box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header {\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n\n.execution-left-section {\n display: flex;\n flex-direction: column;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.execution-status {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.status-indicator {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator i {\n color: white;\n font-size: 14px;\n}\n\n.execution-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.execution-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.execution-date {\n font-size: 12px;\n color: #6c757d;\n}\n\n.execution-metrics {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n flex-wrap: wrap;\n margin-left: 44px; /* Align with execution title text, accounting for status indicator + gap */\n}\n\n.metric-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n background: #f8f9fa;\n padding: 6px 10px;\n border-radius: 6px;\n color: #495057;\n white-space: nowrap;\n}\n\n.metric-item i {\n color: #6c757d;\n font-size: 12px;\n}\n\n.metric-label {\n font-weight: 500;\n}\n\n.metric-value {\n font-weight: 600;\n color: #2c3e50;\n}\n\n.execution-actions {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.action-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: #f8f9fa;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.action-btn:hover {\n background: #2196f3;\n color: white;\n transform: translateY(-1px);\n}\n\n.action-btn i {\n font-size: 12px;\n}\n\n.expand-icon {\n transition: transform 0.2s ease;\n color: #6c757d;\n margin-right: 4px;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n/* Execution Expanded Content */\n.execution-expanded-content {\n padding: 16px;\n border-top: 1px solid #f0f4f8;\n background: #fafbfc;\n animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n to {\n opacity: 1;\n max-height: 500px;\n padding-top: 16px;\n padding-bottom: 16px;\n }\n}\n\n.detailed-metrics {\n margin-bottom: 20px;\n}\n\n.metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.metric-detail {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n}\n\n.metric-detail i {\n color: #2196f3;\n font-size: 16px;\n width: 20px;\n text-align: center;\n}\n\n.metric-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n}\n\n.metric-title {\n font-size: 11px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-data {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.result-section {\n margin-top: 16px;\n}\n\n.result-section h5 {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section h5 {\n color: #dc3545;\n}\n\n.error-content {\n background: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #721c24;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 150px;\n overflow-y: auto;\n}\n\n/* Responsive adjustments for execution history */\n@media (max-width: 768px) {\n .execution-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .execution-left-section {\n width: 100%;\n }\n \n .execution-metrics {\n margin-left: 0; /* Remove left margin on mobile */\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n }\n \n .metric-item {\n font-size: 11px;\n padding: 4px 8px;\n }\n \n .metrics-grid {\n grid-template-columns: 1fr;\n }\n}\n\n/* === PAYLOAD MANAGEMENT SECTION === */\n.payload-section {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.payload-section-title {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.payload-section-title i {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n/* Payload Scope Styling */\n.payload-field-container {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-field-info {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.payload-field-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.payload-field-input {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-example {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.85rem;\n color: #6c757d;\n background: #f8f9fa;\n padding: 0.5rem 0.75rem;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.payload-field-example i {\n color: #ffc107;\n font-size: 0.9rem;\n}\n\n.payload-field-example code {\n background: #e9ecef;\n padding: 0.2rem 0.4rem;\n border-radius: 4px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8rem;\n color: #495057;\n}\n\n/* Path Configuration Grid */\n.payload-paths-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n}\n\n.payload-path-card {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.payload-path-icon.downstream {\n background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream {\n background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read {\n background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write {\n background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon i {\n color: white;\n font-size: 1.2rem;\n}\n\n.payload-path-info h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.payload-path-info p {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-content {\n padding: 1rem;\n}\n\n.json-editor-container {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n border-color: #2196f3;\n}\n\n.payload-path-hint {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-hint i {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.payload-path-hint code {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n/* Payload Validation Container */\n.payload-validation-container {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-validation-settings {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.validation-field-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.validation-field-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.validation-field-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.validation-schema-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.validation-schema-label i {\n color: #2196f3;\n}\n\n.validation-schema-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0;\n}\n\n.validation-schema-editor {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n border-color: #2196f3;\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.config-section-title {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.config-section-title i {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n.config-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n width: 100%;\n}\n\n.config-card {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width {\n grid-column: 1 / -1;\n}\n\n.config-card-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.config-card-icon i {\n color: white;\n font-size: 1.2rem;\n}\n\n.config-card-info h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.config-card-info p {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.config-card-content {\n padding: 1rem;\n}\n\n/* Custom field styling for config cards */\n.config-field-input {\n width: 100%;\n min-width: 250px;\n}\n\n/* Fix numeric textbox cutoff issue */\n.config-card-content ::ng-deep kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-card-content ::ng-deep mj-form-field {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-field-display {\n color: #495057;\n font-size: 14px;\n font-weight: 500;\n padding: 8px 0;\n display: block;\n min-height: 20px;\n}\n\n/* Prompt selector styling */\n.prompt-selector-container {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n.prompt-display {\n flex: 1;\n min-width: 0;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n border-radius: 6px;\n}\n\n.prompt-name {\n color: #495057;\n font-weight: 500;\n font-size: 14px;\n}\n\n.no-prompt {\n color: #6c757d;\n font-style: italic;\n font-size: 14px;\n}\n\n.prompt-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.prompt-select-btn {\n white-space: nowrap;\n}\n\n.prompt-clear-btn {\n min-width: 32px;\n}\n\n.config-card-hint {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.config-card-hint code {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n\n/* === RESPONSIVE DESIGN === */\n@media (max-width: 768px) {\n .payload-field-container,\n .payload-validation-container {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n \n .payload-paths-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .config-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .payload-section-title,\n .config-section-title {\n padding: 0.75rem 1rem;\n font-size: 1rem;\n }\n \n .payload-path-header,\n .config-card-header {\n padding: 0.75rem;\n }\n \n .payload-path-content,\n .config-card-content {\n padding: 0.75rem;\n }\n \n .payload-field-container,\n .payload-validation-container {\n padding: 1rem;\n }\n}\n\n"] }]
|
|
3714
|
+
args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n <!-- Dialog container for Kendo dialogs -->\n <div kendoDialogContainer></div>\n <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n <!-- Compact Header with Agent Overview -->\n <div class=\"agent-header\">\n <div class=\"agent-header-content\">\n <div class=\"agent-overview\">\n <div class=\"agent-icon-wrapper\">\n @if (hasLogoURL()) {\n <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n } @else {\n <i [class]=\"getAgentIcon()\"></i>\n }\n </div>\n <div class=\"agent-info\">\n @if (EditMode) {\n <kendo-textbox [(ngModel)]=\"record.Name\" \n name=\"agentName\"\n placeholder=\"Enter agent name...\"\n class=\"agent-name-input\">\n </kendo-textbox>\n } @else {\n <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n }\n <div class=\"agent-meta\">\n @if (record.Status) {\n <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n <i class=\"fa-solid fa-circle\"></i>\n {{ record.Status }}\n </span>\n }\n @if (record.Type) {\n <span class=\"execution-mode\">\n Agent Type: {{ record.Type }}\n </span>\n }\n @if (record.Parent) {\n <span class=\"parent-agent\">\n <i class=\"fa-solid fa-sitemap\"></i>\n Child of {{ record.Parent }}\n </span>\n }\n </div>\n </div>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"agent-actions\">\n @if (record.ID) {\n <button kendoButton themeColor=\"primary\" size=\"large\"\n (click)=\"openTestHarness()\"\n [disabled]=\"record.Status !== 'Active'\"\n title=\"Run this AI agent\">\n <i class=\"fa-solid fa-play\"></i>\n Run\n </button>\n }\n <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Single Pane Layout with Expander Panels -->\n <div class=\"form-content\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <!-- Custom Agent Type Section (if defined) -->\n @if (record.ID && agentType && agentType.UIFormSectionKey) {\n <kendo-panelbar-item \n [expanded]=\"agentType.UIFormSectionExpandedByDefault\" \n (stateChange)=\"onCustomSectionStateChange($event)\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-puzzle-piece\"></i> {{ agentType.Name }} Configuration\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content custom-agent-type-section\" [style.display]=\"'block'\">\n <ng-container #customSectionContainer></ng-container>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Requests & History -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-history\"></i> Execution History{{ executionHistoryCount > 0 ? ' (' + executionHistoryCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content execution-history-panel\">\n \n @if (executionHistoryCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-history\"></i>\n <h4>No Execution History</h4>\n <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n </div>\n } @else {\n <div class=\"execution-history-list\">\n @for (execution of recentExecutions; track execution.ID) {\n <div class=\"execution-card\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n <div class=\"execution-left-section\">\n <div class=\"execution-status\">\n <div class=\"status-indicator\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n </div>\n <div class=\"execution-info\">\n <div class=\"execution-title\">\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"expandedExecutions[execution.ID]\"></i>\n Execution #{{ execution.ID.substring(0, 8) }}\n </div>\n <div class=\"execution-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n </div>\n </div>\n \n <div class=\"execution-metrics\">\n @if (execution.Configuration) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-cog\"></i>\n <span class=\"metric-label\">Config:</span>\n <span class=\"metric-value\">{{ execution.Configuration }}</span>\n </div>\n }\n \n @if (execution.CompletedAt) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-stopwatch\"></i>\n <span class=\"metric-label\">Duration:</span>\n <span class=\"metric-value\">{{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}</span>\n </div>\n } @else if (execution.Status === 'Running') {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <span class=\"metric-label\">Running:</span>\n <span class=\"metric-value\">{{ getRunningTime(execution.StartedAt) }}</span>\n </div>\n }\n \n @if (execution.TotalTokensUsedRollup || execution.TotalTokensUsed) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-microchip\"></i>\n <span class=\"metric-label\">Tokens:</span>\n <span class=\"metric-value\">{{ formatTokenCount(execution.TotalTokensUsedRollup || execution.TotalTokensUsed) }}</span>\n </div>\n }\n \n @if (execution.TotalCostRollup || execution.TotalCost) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <span class=\"metric-label\">Cost:</span>\n <span class=\"metric-value\">${{ formatCost(execution.TotalCostRollup || execution.TotalCost) }}</span>\n </div>\n }\n </div>\n </div>\n \n <div class=\"execution-actions\">\n <button class=\"action-btn\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\" title=\"View details\">\n <i class=\"fa-solid fa-external-link-alt\"></i>\n </button>\n </div>\n </div>\n @if (expandedExecutions[execution.ID]) {\n <div class=\"execution-expanded-content\">\n <!-- Detailed Metrics -->\n <div class=\"detailed-metrics\">\n <div class=\"metrics-grid\">\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-clock\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Started</span>\n <span class=\"metric-data\">{{ execution.StartedAt | date:'medium' }}</span>\n </div>\n </div>\n \n @if (execution.CompletedAt) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Completed</span>\n <span class=\"metric-data\">{{ execution.CompletedAt | date:'medium' }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalTokensUsed) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-microchip\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Direct Tokens</span>\n <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsed) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalTokensUsedRollup && execution.TotalTokensUsedRollup !== execution.TotalTokensUsed) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-sitemap\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Total + Sub-agents</span>\n <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsedRollup) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalCost) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Direct Cost</span>\n <span class=\"metric-data\">${{ formatCost(execution.TotalCost) }}</span>\n </div>\n </div>\n }\n \n @if (execution.TotalCostRollup && execution.TotalCostRollup !== execution.TotalCost) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-calculator\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Total + Sub-agents</span>\n <span class=\"metric-data\">${{ formatCost(execution.TotalCostRollup) }}</span>\n </div>\n </div>\n }\n \n @if (execution.ConversationID) {\n <div class=\"metric-detail\">\n <i class=\"fa-solid fa-comments\"></i>\n <div class=\"metric-info\">\n <span class=\"metric-title\">Conversation</span>\n <span class=\"metric-data\">{{ execution.ConversationID.substring(0, 8) }}...</span>\n </div>\n </div>\n }\n </div>\n </div>\n \n @if (execution.Result) {\n <div class=\"result-section\">\n <h5><i class=\"fa-solid fa-file-text\"></i> Result</h5>\n <mj-code-editor \n [value]=\"getExecutionResultPreview(execution, false)\"\n [readonly]=\"true\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"max-height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n }\n \n @if (execution.ErrorMessage) {\n <div class=\"error-section\">\n <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h5>\n <div class=\"error-content\">{{ execution.ErrorMessage }}</div>\n </div>\n }\n </div>\n }\n </div>\n }\n @if (executionHistoryCount > recentExecutions.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\">\n <span>View all {{ executionHistoryCount }} executions...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Actions -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateActions) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n <i class=\"fa-solid fa-plus\"></i> Add Action\n </button>\n }\n </div>\n </div>\n \n @if (actionCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-bolt\"></i>\n <h4>No Actions Configured</h4>\n <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n @if (EditMode && UserCanCreateActions) {\n <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n <i class=\"fa-solid fa-plus\"></i> Configure First Action\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (action of agentActions; track action.ID) {\n <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n <div class=\"item-icon\">\n <i [class]=\"getActionIcon(action)\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n @if (action.Description) {\n <div class=\"item-preview\">{{ action.Description }}</div>\n }\n <div class=\"item-meta\">\n @if (action.Type) {\n <span class=\"meta-tag\">{{ action.Type }}</span>\n }\n <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n {{ action.Status }}\n </span>\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanDeleteActions) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removeAction(action, $event)\"\n title=\"Remove action\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (actionCount > agentActions.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n <span>View all {{ actionCount }} actions...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Sub-Agents -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Manage hierarchical relationships with child agents that work under this agent.\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addSubAgents()\">\n <i class=\"fa-solid fa-plus\"></i> Add Subagent\n </button>\n <button kendoButton themeColor=\"secondary\" size=\"small\" (click)=\"createSubAgent()\">\n <i class=\"fa-solid fa-plus\"></i> Create Sub-Agent\n </button>\n }\n </div>\n </div>\n \n @if (subAgentCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sitemap\"></i>\n <h4>No Sub-Agents</h4>\n <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton themeColor=\"primary\" (click)=\"addSubAgents()\">\n <i class=\"fa-solid fa-plus\"></i> Add Subagent\n </button>\n <button kendoButton themeColor=\"secondary\" (click)=\"createSubAgent()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (subAgent of subAgents; track subAgent.ID) {\n <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n <div class=\"item-icon\">\n @if (hasSubAgentLogoURL(subAgent)) {\n <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n } @else {\n <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n }\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n @if (subAgent.Description) {\n <div class=\"item-preview\">{{ subAgent.Description }}</div>\n }\n <div class=\"item-meta\">\n @if (subAgent.Status) {\n <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n {{ subAgent.Status }}\n </span>\n }\n @if (subAgent.ExecutionMode) {\n <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanCreateSubAgents) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openSubAgentAdvancedSettings(subAgent, $event)\"\n title=\"Advanced settings\">\n <i class=\"fa-solid fa-cog\"></i>\n </button>\n }\n @if (EditMode && UserCanDeleteSubAgents) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removeSubAgent(subAgent, $event)\"\n title=\"Remove sub-agent\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (subAgentCount > subAgents.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n <span>View all {{ subAgentCount }} sub-agents...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Prompts (With Model Selection) -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"prompt-controls\">\n <!-- Model Selection Mode Control -->\n <div class=\"model-selection-mode\">\n <label class=\"model-selection-label\">\n <i class=\"fa-solid fa-sliders\"></i>\n Model Selection:\n </label>\n @if (EditMode) {\n <kendo-dropdownlist\n [(ngModel)]=\"record.ModelSelectionMode\"\n name=\"modelSelectionMode\"\n [data]=\"modelSelectionModes\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n class=\"model-selection-dropdown\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n }\n </div>\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateNewPrompts) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i> Add Prompt\n </button>\n }\n </div>\n </div>\n \n @if (promptCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comments\"></i>\n <h4>No Prompts Configured</h4>\n <p>Add prompts to define how this agent processes requests and generates responses.</p>\n @if (EditMode && UserCanCreateNewPrompts) {\n <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (prompt of agentPrompts; track prompt.ID) {\n <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ prompt.Name }}</div>\n @if (prompt.TemplateText) {\n <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n }\n <div class=\"item-meta\">\n @if (prompt.PromptRole) {\n <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n @if (EditMode && UserCanCreatePrompts) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"primary\" \n size=\"small\"\n (click)=\"openPromptAdvancedSettings(prompt, $event)\"\n title=\"Advanced settings\">\n <i class=\"fa-solid fa-cog\"></i>\n </button>\n }\n @if (EditMode && UserCanDeletePrompts) {\n <button kendoButton\n fillMode=\"flat\" \n themeColor=\"error\" \n size=\"small\"\n (click)=\"removePrompt(prompt, $event)\"\n title=\"Remove prompt\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (promptCount > agentPrompts.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n <span>View all {{ promptCount }} prompts...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n\n <!-- Learning & Analytics -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Monitor and manage learning cycles, training sessions, and performance analytics.\n </div>\n </div>\n \n @if (learningCycleCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-brain\"></i>\n <h4>No Learning Cycles</h4>\n <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (cycle of learningCycles; track cycle.ID) {\n <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-brain\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n <div class=\"item-meta\">\n @if (cycle.StartedAt) {\n <span class=\"meta-tag\">\n <i class=\"fa-solid fa-calendar\"></i>\n {{ cycle.StartedAt | date:'short' }}\n </span>\n }\n @if (cycle.Status) {\n <span class=\"status-tag\">{{ cycle.Status }}</span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (learningCycleCount > learningCycles.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n <span>View all {{ learningCycleCount }} cycles...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n <!-- Notes & Documentation -->\n @if (record.ID) {\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Manage notes, documentation, and annotations for this agent.\n </div>\n <div class=\"header-actions\">\n @if (EditMode && UserCanCreateNotes) {\n <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n <i class=\"fa-solid fa-plus\"></i> Add Note\n </button>\n }\n </div>\n </div>\n \n @if (noteCount === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sticky-note\"></i>\n <h4>No Notes</h4>\n <p>Add notes to document important information, observations, or instructions for this agent.</p>\n @if (EditMode && UserCanCreateNotes) {\n <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n <i class=\"fa-solid fa-plus\"></i> Create First Note\n </button>\n }\n </div>\n } @else {\n <div class=\"entity-list\">\n @for (note of agentNotes; track note.ID) {\n <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n <div class=\"item-icon\">\n <i class=\"fa-solid fa-sticky-note\"></i>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n @if (note.Note) {\n <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n }\n <div class=\"item-meta\">\n @if (note.__mj_CreatedAt) {\n <span class=\"meta-tag\">\n <i class=\"fa-solid fa-calendar\"></i>\n {{ note.__mj_CreatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n <div class=\"item-actions\">\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n @if (noteCount > agentNotes.length) {\n <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n <span>View all {{ noteCount }} notes...</span>\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n\n\n\n <!-- Payload -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Configure how this agent handles data payloads, path routing, and validation between parent and child agents.\n </div>\n </div>\n \n <!-- Payload Scope Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-target\"></i>\n Payload Scope\n </h3>\n \n <div class=\"payload-field-container\">\n <div class=\"payload-field-info\">\n <label class=\"payload-field-label\">Payload Scope Path</label>\n <p class=\"payload-field-description\">\n Specify a path within the parent payload that this sub-agent should operate on. \n Leave empty to receive the entire payload.\n </p>\n </div>\n \n <div class=\"payload-field-input\">\n <mj-form-field \n FieldName=\"PayloadScope\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n <div class=\"payload-field-example\">\n <i class=\"fa-solid fa-lightbulb\"></i>\n <span>Example: <code>/customer/profile</code> or <code>/analysis/results</code></span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Path Configuration Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-route\"></i>\n Path Configuration\n </h3>\n \n <div class=\"payload-paths-grid\">\n <!-- Downstream Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon downstream\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Downstream Paths</h4>\n <p>JSON array of paths to pass to sub-agents</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadDownstreamPaths || '["*"]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Use <code>[\"*\"]</code> to pass entire payload or specify paths like <code>[\"user.id\", \"order.*\"]</code>\n </div>\n </div>\n </div>\n\n <!-- Upstream Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon upstream\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Upstream Paths</h4>\n <p>JSON array of paths sub-agents can write back</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadUpstreamPaths || '["*"]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Use <code>[\"*\"]</code> to allow all writes or limit to specific paths\n </div>\n </div>\n </div>\n\n <!-- Self Read Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon self-read\">\n <i class=\"fa-solid fa-eye\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Self Read Paths</h4>\n <p>JSON array of paths this agent can read</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadSelfReadPaths || '[]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Paths this agent's prompts can read from the payload\n </div>\n </div>\n </div>\n\n <!-- Self Write Paths -->\n <div class=\"payload-path-card\">\n <div class=\"payload-path-header\">\n <div class=\"payload-path-icon self-write\">\n <i class=\"fa-solid fa-pen\"></i>\n </div>\n <div class=\"payload-path-info\">\n <h4>Self Write Paths</h4>\n <p>JSON array of paths this agent can write to</p>\n </div>\n </div>\n <div class=\"payload-path-content\">\n <div class=\"json-editor-container\">\n <mj-code-editor \n [value]=\"record.PayloadSelfWritePaths || '[]'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 100px; width: 100%;\"\n (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n </mj-code-editor>\n </div>\n <div class=\"payload-path-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Paths this agent's prompts can write back to the payload\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Validation Section -->\n <div class=\"payload-section\">\n <h3 class=\"payload-section-title\">\n <i class=\"fa-solid fa-shield-check\"></i>\n Final Payload Validation\n </h3>\n \n <div class=\"payload-validation-container\">\n <div class=\"payload-validation-settings\">\n <div class=\"validation-field-group\">\n <label class=\"validation-field-label\">Validation Mode</label>\n <p class=\"validation-field-description\">How to handle validation failures</p>\n <mj-form-field \n FieldName=\"FinalPayloadValidationMode\" \n Type=\"dropdownlist\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n \n <div class=\"validation-field-group\">\n <label class=\"validation-field-label\">Max Retries</label>\n <p class=\"validation-field-description\">Maximum validation retry attempts</p>\n <mj-form-field \n FieldName=\"FinalPayloadValidationMaxRetries\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n </div>\n \n <div class=\"payload-validation-schema\">\n <label class=\"validation-schema-label\">\n <i class=\"fa-solid fa-code\"></i>\n Validation Schema\n </label>\n <p class=\"validation-schema-description\">\n JSON schema or validation rules for the final payload structure\n </p>\n <div class=\"validation-schema-editor\">\n <mj-code-editor \n [value]=\"record.FinalPayloadValidation || '{}'\"\n [readonly]=\"!EditMode\"\n language=\"json\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\"\n (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n </mj-code-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n\n\n <!-- Execution Guardrails (New Separate Panel) -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Set limits to prevent runaway agent executions and control resource usage.\n </div>\n </div>\n \n <div class=\"form-fields-grid\">\n <mj-form-field \n FieldName=\"MaxCostPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Cost ($)\"\n Description=\"Maximum cost per run\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxTokensPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Tokens\"\n Description=\"Maximum tokens per run\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxIterationsPerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Iterations\"\n Description=\"Maximum prompt iterations\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n\n <mj-form-field \n FieldName=\"MaxTimePerRun\" \n Type=\"numerictextbox\"\n Caption=\"Max Time (seconds)\"\n Description=\"Maximum execution time\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n <!-- Configuration (Settings Panel) -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fa-solid fa-cogs\"></i> Configuration\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"section-header\">\n <div class=\"section-description\">\n Configure agent behavior, execution settings, and advanced features.\n </div>\n </div>\n \n <!-- Identity & Behavior Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-id-card\"></i>\n Identity & Behavior\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Agent Status</h4>\n <p>Current availability and operational status</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <kendo-dropdownlist \n [(ngModel)]=\"record.Status\"\n [data]=\"statusOptions\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n name=\"agentStatus\"\n class=\"config-field-input\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n }\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-sitemap\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Agent Type</h4>\n <p>Category and system-level behavior</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <kendo-dropdownlist \n [(ngModel)]=\"record.TypeID\"\n [data]=\"agentTypes\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n name=\"agentTypeID\"\n class=\"config-field-input\">\n </kendo-dropdownlist>\n } @else {\n <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n }\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-bolt\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Expose as Action</h4>\n <p>Make available as an action for other agents</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExposeAsAction\" \n Type=\"checkbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card full-width\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-align-left\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Description</h4>\n <p>Detailed agent description and purpose</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"Description\" \n Type=\"textarea\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n style=\"width: 100%;\">\n </mj-form-field>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Execution Settings Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-play\"></i>\n Execution Settings\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-layer-group\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Execution Mode</h4>\n <p>How sub-agents are executed</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExecutionMode\" \n Type=\"dropdownlist\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-sort-numeric-down\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Execution Order</h4>\n <p>Order when run with siblings</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ExecutionOrder\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-tachometer-alt\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Default Effort Level</h4>\n <p>Default effort level for all prompts (1-100)</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"DefaultPromptEffortLevel\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Higher values request more thorough reasoning (1=minimal, 100=maximum)\n </div>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-code\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Driver Class</h4>\n <p>Custom implementation class</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"DriverClass\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Visual Identity Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-palette\"></i>\n Visual Identity\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-icons\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Icon Class</h4>\n <p>Font Awesome icon class</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"IconClass\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Example: <code>fa-solid fa-robot</code>\n </div>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-image\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Logo URL</h4>\n <p>URL for agent logo image</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"LogoURL\" \n Type=\"textbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n <div class=\"config-card-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Takes precedence over Icon Class\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Context Compression Section -->\n <div class=\"config-section\">\n <h3 class=\"config-section-title\">\n <i class=\"fa-solid fa-compress\"></i>\n Context Compression\n </h3>\n \n <div class=\"config-grid\">\n <div class=\"config-card full-width\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Enable Context Compression</h4>\n <p>Automatically compress conversation context when message threshold is reached</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"EnableContextCompression\" \n Type=\"checkbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\"\n (valueChange)=\"onContextCompressionToggle($event)\">\n </mj-form-field>\n </div>\n </div>\n\n @if (record.EnableContextCompression) {\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-hashtag\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Message Threshold</h4>\n <p>Messages before compression triggers</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ContextCompressionMessageThreshold\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-save\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Messages to Keep</h4>\n <p>Recent messages to retain uncompressed</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n <mj-form-field \n FieldName=\"ContextCompressionMessageRetentionCount\" \n Type=\"numerictextbox\"\n Caption=\"\"\n [EditMode]=\"EditMode\"\n [record]=\"record\">\n </mj-form-field>\n </div>\n </div>\n\n <div class=\"config-card\">\n <div class=\"config-card-header\">\n <div class=\"config-card-icon\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n </div>\n <div class=\"config-card-info\">\n <h4>Compression Prompt</h4>\n <p>Prompt used for summarization</p>\n </div>\n </div>\n <div class=\"config-card-content\">\n @if (EditMode) {\n <div class=\"prompt-selector-container\">\n <div class=\"prompt-display\">\n @if (selectedContextCompressionPrompt) {\n <span class=\"prompt-name\">{{ selectedContextCompressionPrompt.Name }}</span>\n } @else {\n <span class=\"no-prompt\">No prompt selected</span>\n }\n </div>\n <div class=\"prompt-actions\">\n <button type=\"button\" \n kendoButton \n fillMode=\"outline\" \n size=\"small\"\n (click)=\"openContextCompressionPromptSelector()\"\n class=\"prompt-select-btn\">\n <i class=\"fa-solid fa-search\"></i>\n {{ selectedContextCompressionPrompt ? 'Change' : 'Select' }} Prompt\n </button>\n @if (selectedContextCompressionPrompt) {\n <button type=\"button\" \n kendoButton \n fillMode=\"flat\" \n size=\"small\"\n (click)=\"clearContextCompressionPrompt()\"\n class=\"prompt-clear-btn\"\n title=\"Clear selection\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n } @else {\n <span class=\"config-field-display\">{{ selectedContextCompressionPrompt?.Name || record.ContextCompressionPrompt || 'Not Set' }}</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n\n\n\n </kendo-panelbar>\n </div>\n </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f5f7fa;\n}\n\n.record-form {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 12px 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n}\n\n.agent-overview {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n.agent-icon-wrapper {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n color: white;\n font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.agent-info {\n flex: 1;\n min-width: 0;\n}\n\n.agent-name {\n font-size: 22px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n line-height: 1.2;\n}\n\n.agent-name-input {\n font-size: 18px !important;\n font-weight: 500 !important;\n height: 36px !important;\n width: 100% !important;\n max-width: 400px !important;\n}\n\n.agent-meta {\n display: flex;\n align-items: center;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.status-badge {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge.active {\n background: #28a745;\n color: white;\n}\n\n.status-badge.pending {\n background: #ffc107;\n color: #212529;\n}\n\n.status-badge.disabled {\n background: #6c757d;\n color: white;\n}\n\n.execution-mode,\n.parent-agent {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 10px;\n border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n font-size: 12px;\n opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n flex: 1;\n margin-right: 16px;\n}\n\n.agent-meta-info {\n display: flex;\n gap: 24px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.meta-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.meta-value {\n font-size: 14px;\n color: #495057;\n font-weight: 500;\n}\n\n.agent-description {\n margin-top: 16px;\n color: #6c757d;\n line-height: 1.6;\n font-size: 15px;\n}\n\n.agent-description-input {\n width: 100%;\n max-width: 600px;\n min-height: 80px;\n resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.action-buttons-row {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.action-button {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 20px;\n border-radius: 8px;\n font-weight: 500;\n font-size: 14px;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n background: #2196f3;\n color: white;\n}\n\n.action-button.primary:hover {\n background: #1976d2;\n}\n\n.action-button.secondary {\n background: #6c757d;\n color: white;\n}\n\n.action-button.secondary:hover {\n background: #5a6268;\n}\n\n.action-warnings {\n margin-top: 8px;\n font-size: 13px;\n color: #dc3545;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n overflow-x: hidden;\n background: #f5f7fa;\n padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n border: none;\n background: transparent;\n}\n\n::ng-deep .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 .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 .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n::ng-deep .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 .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 .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n::ng-deep .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 .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 .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n/* Panel Content */\n.panel-content {\n padding: 16px;\n background: white;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.section-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-bottom: 16px;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-shrink: 0;\n}\n\n.tab-section {\n background: white;\n border-radius: 12px;\n padding: 24px;\n margin-bottom: 24px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n border: 1px solid #e0e6ed;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin: 0;\n color: #2c3e50;\n font-size: 18px;\n font-weight: 600;\n}\n\n.section-title i {\n color: #2196f3;\n font-size: 20px;\n}\n\n.section-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.6;\n margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-top: 20px;\n}\n\n.form-field-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.form-field-label {\n font-size: 13px;\n font-weight: 600;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n height: 500px;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state i {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state h4 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.loading-spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.spinner-icon {\n width: 48px;\n height: 48px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid #2196f3;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n display: flex;\n gap: 16px;\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n flex: 1;\n padding: 16px;\n background: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n}\n\n.quick-action-card:hover {\n background: white;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-2px);\n}\n\n.quick-action-icon {\n font-size: 32px;\n color: #2196f3;\n margin-bottom: 8px;\n}\n\n.quick-action-title {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 4px;\n}\n\n.quick-action-description {\n font-size: 12px;\n color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.entity-item {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n transform: translateY(-1px);\n}\n\n.item-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n color: #6c757d;\n font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n color: white;\n}\n\n.item-icon img.sub-agent-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 6px;\n}\n\n.item-content {\n flex: 1;\n min-width: 0;\n}\n\n.item-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n}\n\n.item-preview {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n margin: 4px 0 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.item-meta {\n display: flex;\n gap: 12px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n padding: 3px 8px;\n border-radius: 6px;\n font-weight: 500;\n}\n\n.meta-tag {\n background: #e9ecef;\n color: #495057;\n}\n\n.priority-tag {\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-tag {\n background: #e9ecef;\n color: #495057;\n}\n\n.status-tag.active {\n background: #d4edda;\n color: #28a745;\n}\n\n.status-tag.inactive {\n background: #f8d7da;\n color: #dc3545;\n}\n\n.item-actions {\n opacity: 0;\n transition: opacity 0.2s ease;\n color: #6c757d;\n font-size: 16px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n color: #2196f3;\n}\n\n.view-more-item {\n padding: 16px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 10px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-more-item:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n color: #2196f3;\n}\n\n/* Payload Section Styles */\n.payload-config-section,\n.payload-paths-section,\n.payload-validation-section {\n margin-bottom: 32px;\n}\n\n.subsection-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 16px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.subsection-title i {\n color: #2196f3;\n}\n\n.subsection-divider {\n margin-top: 32px;\n margin-bottom: 16px;\n padding-top: 24px;\n border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.payload-field-group {\n margin-bottom: 20px;\n}\n\n.payload-field-label {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n}\n\n.payload-field-label i {\n color: #6c757d;\n font-size: 16px;\n}\n\n.field-description {\n font-size: 12px;\n font-weight: normal;\n color: #6c757d;\n margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n border: 1px solid #dee2e6;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n border-color: #2196f3;\n}\n\n/* Payload textarea styling */\n.payload-field-group mj-form-field ::ng-deep textarea {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n line-height: 1.5;\n min-height: 120px;\n resize: vertical;\n}\n\n/* Execution History Panel */\n.execution-history-panel {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 16px;\n}\n\n.timeline-item {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: #f8f9fa;\n border: 1px solid #e0e6ed;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n background: white;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n color: white;\n font-size: 14px;\n}\n\n.timeline-content {\n flex: 1;\n min-width: 0;\n}\n\n.timeline-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 8px 0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n\n.timeline-date {\n font-size: 12px;\n color: #6c757d;\n background: #e9ecef;\n padding: 2px 8px;\n border-radius: 6px;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.timeline-meta {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.timeline-preview {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 20px;\n margin-top: 16px;\n}\n\n.entity-card {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n padding: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n position: relative;\n overflow: hidden;\n}\n\n.entity-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n border-color: #2196f3;\n}\n\n.entity-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #2196f3, #42a5f5);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n opacity: 1;\n}\n\n.card-header {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.card-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n font-size: 18px;\n color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n color: white;\n}\n\n.card-title-section {\n flex: 1;\n min-width: 0;\n}\n\n.card-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0 0 4px 0;\n line-height: 1.3;\n word-wrap: break-word;\n}\n\n.card-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta {\n display: flex;\n gap: 16px;\n margin-top: 12px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: #6c757d;\n padding: 4px 8px;\n background: #f8f9fa;\n border-radius: 6px;\n}\n\n.meta-item i {\n font-size: 11px;\n opacity: 0.8;\n}\n\n.meta-item.active {\n color: #28a745;\n background: #d4edda;\n}\n\n.meta-item.inactive {\n color: #dc3545;\n background: #f8d7da;\n}\n\n.card-actions {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n opacity: 1;\n color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n color: white;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.type-badge {\n padding: 2px 8px;\n border-radius: 6px;\n font-size: 11px;\n font-weight: 500;\n background: #e9ecef;\n color: #495057;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 120px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n transform: translateY(-2px);\n}\n\n.view-all-content {\n text-align: center;\n color: #6c757d;\n font-weight: 500;\n}\n\n.view-all-content i {\n font-size: 24px;\n margin-bottom: 8px;\n display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n position: relative;\n margin-top: 16px;\n}\n\n.timeline-item {\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n transition: all 0.3s ease;\n border-radius: 12px;\n padding: 16px;\n background: transparent;\n border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n background: #f8f9fa;\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n cursor: pointer;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n background: linear-gradient(135deg, #e9ecef, #dee2e6);\n border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-marker {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n flex-shrink: 0;\n position: relative;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n content: '';\n position: absolute;\n top: 50px;\n left: 50%;\n transform: translateX(-50%);\n width: 2px;\n height: 24px;\n background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n display: none;\n}\n\n.timeline-marker i {\n color: white;\n font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n background: #6c757d;\n}\n\n.timeline-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: flex-start;\n}\n\n.timeline-header {\n flex: 1;\n cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n gap: 16px;\n}\n\n.expand-icon {\n transition: transform 0.3s ease;\n margin-right: 8px;\n color: #6c757d;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n.timeline-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n margin: 0;\n line-height: 1.3;\n}\n\n.timeline-date {\n font-size: 12px;\n color: #6c757d;\n white-space: nowrap;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n margin-left: auto;\n}\n\n.timeline-preview {\n font-size: 13px;\n color: #6c757d;\n line-height: 1.5;\n margin-top: 8px;\n padding: 8px 12px;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.execution-time {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n color: #6c757d;\n background: #f8f9fa;\n padding: 4px 8px;\n border-radius: 6px;\n}\n\n.timeline-description {\n color: #6c757d;\n font-size: 14px;\n line-height: 1.5;\n margin: 8px 0;\n}\n\n.timeline-error {\n color: #dc3545;\n font-size: 13px;\n background: #f8d7da;\n padding: 8px 12px;\n border-radius: 6px;\n margin-top: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.timeline-error i {\n flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #e0e6ed;\n animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.result-section,\n.error-section {\n margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section h5 {\n color: #dc3545;\n}\n\n.result-content,\n.error-content {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #495057;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* Code editor styling within result section */\n.result-section mj-code-editor {\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.error-content {\n background: #f8d7da;\n border-color: #f5c6cb;\n color: #721c24;\n}\n\n.execution-details {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.detail-row {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.detail-label {\n font-size: 12px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n min-width: 80px;\n}\n\n.detail-value {\n font-size: 14px;\n color: #495057;\n word-break: break-all;\n}\n\n.timeline-actions {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n}\n\n.btn-primary {\n padding: 8px 16px;\n background: #2196f3;\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n background: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n background: #f8f9fa;\n border-radius: 12px;\n border: 2px dashed #dee2e6;\n margin-top: 16px;\n}\n\n.empty-state i {\n font-size: 48px;\n color: #dee2e6;\n margin-bottom: 16px;\n}\n\n.empty-state h4 {\n color: #495057;\n font-weight: 600;\n margin-bottom: 8px;\n font-size: 18px;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n /* Header Responsiveness */\n .agent-header {\n padding: 16px;\n }\n \n .agent-header-content {\n flex-direction: column;\n gap: 16px;\n }\n \n .agent-overview {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .agent-meta {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .agent-actions {\n width: 100%;\n align-self: stretch;\n }\n \n .action-button {\n flex: 1;\n justify-content: center;\n }\n \n /* Panel Responsiveness */\n .form-content {\n padding: 12px;\n }\n \n ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n padding: 16px 20px;\n font-size: 15px;\n }\n \n .panel-content {\n padding: 20px 16px;\n }\n \n .section-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .header-actions {\n flex-wrap: wrap;\n align-self: stretch;\n }\n \n /* Entity List Responsiveness */\n .entity-item {\n padding: 12px;\n gap: 12px;\n }\n \n .item-icon {\n width: 36px;\n height: 36px;\n }\n \n .item-icon i {\n font-size: 16px;\n }\n \n .item-title {\n font-size: 15px;\n }\n \n .item-preview {\n font-size: 13px;\n }\n \n .item-meta {\n gap: 8px;\n }\n \n /* Timeline Responsiveness */\n .timeline-item {\n padding: 12px;\n gap: 12px;\n }\n \n .timeline-marker {\n width: 28px;\n height: 28px;\n }\n \n .timeline-marker i {\n font-size: 12px;\n }\n \n .timeline-title {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n \n .timeline-date {\n align-self: flex-start;\n }\n \n /* Form Field Responsiveness */\n .form-fields-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n \n /* Legacy card support */\n .cards-container {\n grid-template-columns: 1fr;\n }\n}\n\n/* Execution History Panel - Max Height and Scroll */\n.execution-history-panel {\n max-height: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Custom scrollbar for execution history */\n.execution-history-panel::-webkit-scrollbar {\n width: 8px;\n}\n\n.execution-history-panel::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n}\n\n/* New Execution History Card Design */\n.execution-history-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 16px;\n}\n\n.execution-card {\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n.execution-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n border-color: #2196f3;\n box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header {\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n\n.execution-left-section {\n display: flex;\n flex-direction: column;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.execution-status {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.status-indicator {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator i {\n color: white;\n font-size: 14px;\n}\n\n.execution-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.execution-title {\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.execution-date {\n font-size: 12px;\n color: #6c757d;\n}\n\n.execution-metrics {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n flex-wrap: wrap;\n margin-left: 44px; /* Align with execution title text, accounting for status indicator + gap */\n}\n\n.metric-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n background: #f8f9fa;\n padding: 6px 10px;\n border-radius: 6px;\n color: #495057;\n white-space: nowrap;\n}\n\n.metric-item i {\n color: #6c757d;\n font-size: 12px;\n}\n\n.metric-label {\n font-weight: 500;\n}\n\n.metric-value {\n font-weight: 600;\n color: #2c3e50;\n}\n\n.execution-actions {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.action-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: #f8f9fa;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.action-btn:hover {\n background: #2196f3;\n color: white;\n transform: translateY(-1px);\n}\n\n.action-btn i {\n font-size: 12px;\n}\n\n.expand-icon {\n transition: transform 0.2s ease;\n color: #6c757d;\n margin-right: 4px;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n/* Execution Expanded Content */\n.execution-expanded-content {\n padding: 16px;\n border-top: 1px solid #f0f4f8;\n background: #fafbfc;\n animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n }\n to {\n opacity: 1;\n max-height: 500px;\n padding-top: 16px;\n padding-bottom: 16px;\n }\n}\n\n.detailed-metrics {\n margin-bottom: 20px;\n}\n\n.metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.metric-detail {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: white;\n border: 1px solid #e0e6ed;\n border-radius: 8px;\n}\n\n.metric-detail i {\n color: #2196f3;\n font-size: 16px;\n width: 20px;\n text-align: center;\n}\n\n.metric-info {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n}\n\n.metric-title {\n font-size: 11px;\n font-weight: 600;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-data {\n font-size: 14px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.result-section {\n margin-top: 16px;\n}\n\n.result-section h5 {\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-section h5 {\n color: #dc3545;\n}\n\n.error-content {\n background: #f8d7da;\n border: 1px solid #f5c6cb;\n border-radius: 8px;\n padding: 12px 16px;\n font-size: 14px;\n line-height: 1.6;\n color: #721c24;\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 150px;\n overflow-y: auto;\n}\n\n/* Responsive adjustments for execution history */\n@media (max-width: 768px) {\n .execution-header {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n \n .execution-left-section {\n width: 100%;\n }\n \n .execution-metrics {\n margin-left: 0; /* Remove left margin on mobile */\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n width: 100%;\n }\n \n .metric-item {\n font-size: 11px;\n padding: 4px 8px;\n }\n \n .metrics-grid {\n grid-template-columns: 1fr;\n }\n}\n\n/* === PAYLOAD MANAGEMENT SECTION === */\n.payload-section {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.payload-section-title {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.payload-section-title i {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n/* Payload Scope Styling */\n.payload-field-container {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-field-info {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.payload-field-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.payload-field-input {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.payload-field-example {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.85rem;\n color: #6c757d;\n background: #f8f9fa;\n padding: 0.5rem 0.75rem;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.payload-field-example i {\n color: #ffc107;\n font-size: 0.9rem;\n}\n\n.payload-field-example code {\n background: #e9ecef;\n padding: 0.2rem 0.4rem;\n border-radius: 4px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8rem;\n color: #495057;\n}\n\n/* Path Configuration Grid */\n.payload-paths-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n}\n\n.payload-path-card {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.payload-path-icon.downstream {\n background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream {\n background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read {\n background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write {\n background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon i {\n color: white;\n font-size: 1.2rem;\n}\n\n.payload-path-info h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.payload-path-info p {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-content {\n padding: 1rem;\n}\n\n.json-editor-container {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n border-color: #2196f3;\n}\n\n.payload-path-hint {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.payload-path-hint i {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.payload-path-hint code {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n/* Payload Validation Container */\n.payload-validation-container {\n padding: 1.5rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n align-items: start;\n}\n\n.payload-validation-settings {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.validation-field-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.validation-field-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n}\n\n.validation-field-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.validation-schema-label {\n font-weight: 600;\n color: #495057;\n font-size: 0.95rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.validation-schema-label i {\n color: #2196f3;\n}\n\n.validation-schema-description {\n color: #6c757d;\n font-size: 0.9rem;\n line-height: 1.4;\n margin: 0;\n}\n\n.validation-schema-editor {\n border: 1px solid #dee2e6;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n border-color: #2196f3;\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n margin-bottom: 2rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e0e0e0;\n overflow: hidden;\n}\n\n.config-section-title {\n margin: 0;\n padding: 1rem 1.5rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n color: #495057;\n font-size: 1.1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.config-section-title i {\n color: #2196f3;\n font-size: 1.2rem;\n}\n\n.config-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 1.5rem;\n padding: 1.5rem;\n width: 100%;\n}\n\n.config-card {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n transition: all 0.2s ease;\n}\n\n.config-card:hover {\n border-color: #2196f3;\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width {\n grid-column: 1 / -1;\n}\n\n.config-card-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.config-card-icon i {\n color: white;\n font-size: 1.2rem;\n}\n\n.config-card-info h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: #495057;\n}\n\n.config-card-info p {\n margin: 0;\n font-size: 0.85rem;\n color: #6c757d;\n line-height: 1.4;\n}\n\n.config-card-content {\n padding: 1rem;\n}\n\n/* Custom field styling for config cards */\n.config-field-input {\n width: 100%;\n min-width: 250px;\n}\n\n/* Fix numeric textbox cutoff issue */\n.config-card-content ::ng-deep kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-card-content ::ng-deep mj-form-field {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-numerictextbox {\n width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-input {\n width: 100% !important;\n min-width: 200px !important;\n}\n\n.config-field-display {\n color: #495057;\n font-size: 14px;\n font-weight: 500;\n padding: 8px 0;\n display: block;\n min-height: 20px;\n}\n\n/* Prompt selector styling */\n.prompt-selector-container {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n.prompt-display {\n flex: 1;\n min-width: 0;\n padding: 8px 12px;\n background: #f8f9fa;\n border: 1px solid #dee2e6;\n border-radius: 6px;\n}\n\n.prompt-name {\n color: #495057;\n font-weight: 500;\n font-size: 14px;\n}\n\n.no-prompt {\n color: #6c757d;\n font-style: italic;\n font-size: 14px;\n}\n\n.prompt-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.prompt-select-btn {\n white-space: nowrap;\n}\n\n.prompt-clear-btn {\n min-width: 32px;\n}\n\n.config-card-hint {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8rem;\n color: #6c757d;\n line-height: 1.4;\n margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n color: #17a2b8;\n margin-top: 0.1rem;\n flex-shrink: 0;\n}\n\n.config-card-hint code {\n background: #e9ecef;\n padding: 0.1rem 0.3rem;\n border-radius: 3px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.75rem;\n color: #495057;\n}\n\n\n/* === RESPONSIVE DESIGN === */\n@media (max-width: 768px) {\n .payload-field-container,\n .payload-validation-container {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n \n .payload-paths-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .config-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n padding: 1rem;\n }\n \n .payload-section-title,\n .config-section-title {\n padding: 0.75rem 1rem;\n font-size: 1rem;\n }\n \n .payload-path-header,\n .config-card-header {\n padding: 0.75rem;\n }\n \n .payload-path-content,\n .config-card-content {\n padding: 0.75rem;\n }\n \n .payload-field-container,\n .payload-validation-container {\n padding: 1rem;\n }\n}\n\n"] }]
|
|
3698
3715
|
}], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.DialogService }, { type: i0.ViewContainerRef }, { type: i4.AIAgentManagementService }, { type: i5.AITestHarnessDialogService }], { customSectionContainer: [{
|
|
3699
3716
|
type: ViewChild,
|
|
3700
3717
|
args: ['customSectionContainer', { read: ViewContainerRef }]
|