@memberjunction/ng-core-entity-forms 5.13.0 → 5.15.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/AIPromptRuns/ai-prompt-run-form.component.js +55 -33
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
- package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js +340 -315
- package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js.map +1 -1
- package/dist/lib/custom/Entities/entity-form.component.d.ts +35 -2
- package/dist/lib/custom/Entities/entity-form.component.d.ts.map +1 -1
- package/dist/lib/custom/Entities/entity-form.component.js +917 -632
- package/dist/lib/custom/Entities/entity-form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAICredentialBinding/mjaicredentialbinding.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJAICredentialBinding/mjaicredentialbinding.form.component.js +16 -4
- package/dist/lib/generated/Entities/MJAICredentialBinding/mjaicredentialbinding.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIModel/mjaimodel.form.component.js +117 -113
- package/dist/lib/generated/Entities/MJAIModel/mjaimodel.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIModelType/mjaimodeltype.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJAIModelType/mjaimodeltype.form.component.js +23 -13
- package/dist/lib/generated/Entities/MJAIModelType/mjaimodeltype.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIModelVendor/mjaimodelvendor.form.component.js +15 -11
- package/dist/lib/generated/Entities/MJAIModelVendor/mjaimodelvendor.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIPrompt/mjaiprompt.form.component.js +91 -87
- package/dist/lib/generated/Entities/MJAIPrompt/mjaiprompt.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIPromptModel/mjaipromptmodel.form.component.js +2 -2
- package/dist/lib/generated/Entities/MJAIPromptModel/mjaipromptmodel.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIPromptRun/mjaipromptrun.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJAIPromptRun/mjaipromptrun.form.component.js +13 -15
- package/dist/lib/generated/Entities/MJAIPromptRun/mjaipromptrun.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJAIVendor/mjaivendor.form.component.js +2 -2
- package/dist/lib/generated/Entities/MJAIVendor/mjaivendor.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJCompanyIntegration/mjcompanyintegration.form.component.js +39 -37
- package/dist/lib/generated/Entities/MJCompanyIntegration/mjcompanyintegration.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJCompanyIntegrationRun/mjcompanyintegrationrun.form.component.js +29 -27
- package/dist/lib/generated/Entities/MJCompanyIntegrationRun/mjcompanyintegrationrun.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJCredential/mjcredential.form.component.js +2 -2
- package/dist/lib/generated/Entities/MJCredential/mjcredential.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJEntity/mjentity.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJEntity/mjentity.form.component.js +109 -73
- package/dist/lib/generated/Entities/MJEntity/mjentity.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJEntityOrganicKey/mjentityorganickey.form.component.d.ts +10 -0
- package/dist/lib/generated/Entities/MJEntityOrganicKey/mjentityorganickey.form.component.d.ts.map +1 -0
- package/dist/lib/generated/Entities/MJEntityOrganicKey/mjentityorganickey.form.component.js +99 -0
- package/dist/lib/generated/Entities/MJEntityOrganicKey/mjentityorganickey.form.component.js.map +1 -0
- package/dist/lib/generated/Entities/MJEntityOrganicKeyRelatedEntity/mjentityorganickeyrelatedentity.form.component.d.ts +10 -0
- package/dist/lib/generated/Entities/MJEntityOrganicKeyRelatedEntity/mjentityorganickeyrelatedentity.form.component.d.ts.map +1 -0
- package/dist/lib/generated/Entities/MJEntityOrganicKeyRelatedEntity/mjentityorganickeyrelatedentity.form.component.js +87 -0
- package/dist/lib/generated/Entities/MJEntityOrganicKeyRelatedEntity/mjentityorganickeyrelatedentity.form.component.js.map +1 -0
- package/dist/lib/generated/Entities/MJScheduledJob/mjscheduledjob.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJScheduledJob/mjscheduledjob.form.component.js +22 -4
- package/dist/lib/generated/Entities/MJScheduledJob/mjscheduledjob.form.component.js.map +1 -1
- package/dist/lib/generated/Entities/MJScheduledJobRun/mjscheduledjobrun.form.component.d.ts.map +1 -1
- package/dist/lib/generated/Entities/MJScheduledJobRun/mjscheduledjobrun.form.component.js +22 -4
- package/dist/lib/generated/Entities/MJScheduledJobRun/mjscheduledjobrun.form.component.js.map +1 -1
- package/dist/lib/generated/generated-forms.module.d.ts +137 -135
- package/dist/lib/generated/generated-forms.module.d.ts.map +1 -1
- package/dist/lib/generated/generated-forms.module.js +49 -43
- package/dist/lib/generated/generated-forms.module.js.map +1 -1
- package/package.json +31 -31
|
@@ -1218,9 +1218,9 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Conditi
|
|
|
1218
1218
|
i0.ɵɵelementStart(0, "div", 149)(1, "label");
|
|
1219
1219
|
i0.ɵɵtext(2, "Agent");
|
|
1220
1220
|
i0.ɵɵelementEnd();
|
|
1221
|
-
i0.ɵɵelementStart(3, "div",
|
|
1221
|
+
i0.ɵɵelementStart(3, "div", 156);
|
|
1222
1222
|
i0.ɵɵlistener("click", function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Conditional_2_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agents", ctx_r1.record.AgentID)); });
|
|
1223
|
-
i0.ɵɵelement(4, "i",
|
|
1223
|
+
i0.ɵɵelement(4, "i", 157);
|
|
1224
1224
|
i0.ɵɵtext(5);
|
|
1225
1225
|
i0.ɵɵelement(6, "i", 103);
|
|
1226
1226
|
i0.ɵɵelementEnd()();
|
|
@@ -1257,7 +1257,7 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Conditi
|
|
|
1257
1257
|
i0.ɵɵadvance(5);
|
|
1258
1258
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.record.ResponseFormat, " ");
|
|
1259
1259
|
} }
|
|
1260
|
-
function
|
|
1260
|
+
function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Conditional_59_Template(rf, ctx) { if (rf & 1) {
|
|
1261
1261
|
i0.ɵɵelementStart(0, "div", 149)(1, "label");
|
|
1262
1262
|
i0.ɵɵtext(2, "Started At");
|
|
1263
1263
|
i0.ɵɵelementEnd();
|
|
@@ -1271,12 +1271,12 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Conditi
|
|
|
1271
1271
|
i0.ɵɵadvance(5);
|
|
1272
1272
|
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(6, 1, ctx_r1.record.RunAt, "medium"), " ");
|
|
1273
1273
|
} }
|
|
1274
|
-
function
|
|
1274
|
+
function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Conditional_60_Template(rf, ctx) { if (rf & 1) {
|
|
1275
1275
|
i0.ɵɵelementStart(0, "div", 149)(1, "label");
|
|
1276
1276
|
i0.ɵɵtext(2, "Completed At");
|
|
1277
1277
|
i0.ɵɵelementEnd();
|
|
1278
1278
|
i0.ɵɵelementStart(3, "div", 150);
|
|
1279
|
-
i0.ɵɵelement(4, "i",
|
|
1279
|
+
i0.ɵɵelement(4, "i", 158);
|
|
1280
1280
|
i0.ɵɵtext(5);
|
|
1281
1281
|
i0.ɵɵpipe(6, "date");
|
|
1282
1282
|
i0.ɵɵelementEnd()();
|
|
@@ -1339,8 +1339,22 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Templat
|
|
|
1339
1339
|
i0.ɵɵelement(45, "i", 153);
|
|
1340
1340
|
i0.ɵɵtext(46);
|
|
1341
1341
|
i0.ɵɵelementEnd()();
|
|
1342
|
-
i0.ɵɵ
|
|
1343
|
-
i0.ɵɵ
|
|
1342
|
+
i0.ɵɵelementStart(47, "div", 149)(48, "label");
|
|
1343
|
+
i0.ɵɵtext(49, "Stop Sequences");
|
|
1344
|
+
i0.ɵɵelementEnd();
|
|
1345
|
+
i0.ɵɵelementStart(50, "div", 150);
|
|
1346
|
+
i0.ɵɵelement(51, "i", 154);
|
|
1347
|
+
i0.ɵɵtext(52);
|
|
1348
|
+
i0.ɵɵelementEnd()();
|
|
1349
|
+
i0.ɵɵelementStart(53, "div", 149)(54, "label");
|
|
1350
|
+
i0.ɵɵtext(55, "Assistant Prefill");
|
|
1351
|
+
i0.ɵɵelementEnd();
|
|
1352
|
+
i0.ɵɵelementStart(56, "div", 150);
|
|
1353
|
+
i0.ɵɵelement(57, "i", 155);
|
|
1354
|
+
i0.ɵɵtext(58);
|
|
1355
|
+
i0.ɵɵelementEnd()();
|
|
1356
|
+
i0.ɵɵconditionalCreate(59, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Conditional_59_Template, 7, 4, "div", 149);
|
|
1357
|
+
i0.ɵɵconditionalCreate(60, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Conditional_60_Template, 7, 4, "div", 149);
|
|
1344
1358
|
i0.ɵɵelementEnd()();
|
|
1345
1359
|
} if (rf & 2) {
|
|
1346
1360
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -1378,10 +1392,18 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Templat
|
|
|
1378
1392
|
i0.ɵɵclassProp("null-value", ctx_r1.record.Seed === null || ctx_r1.record.Seed === undefined);
|
|
1379
1393
|
i0.ɵɵadvance(2);
|
|
1380
1394
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Seed !== null && ctx_r1.record.Seed !== undefined ? ctx_r1.record.Seed : "\u2014", " ");
|
|
1395
|
+
i0.ɵɵadvance(4);
|
|
1396
|
+
i0.ɵɵclassProp("null-value", !ctx_r1.record.StopSequences);
|
|
1397
|
+
i0.ɵɵadvance(2);
|
|
1398
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.record.StopSequences || "\u2014", " ");
|
|
1399
|
+
i0.ɵɵadvance(4);
|
|
1400
|
+
i0.ɵɵclassProp("null-value", !ctx_r1.record.AssistantPrefill);
|
|
1401
|
+
i0.ɵɵadvance(2);
|
|
1402
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.record.AssistantPrefill || "\u2014", " ");
|
|
1381
1403
|
i0.ɵɵadvance();
|
|
1382
|
-
i0.ɵɵconditional(ctx_r1.record.RunAt ?
|
|
1404
|
+
i0.ɵɵconditional(ctx_r1.record.RunAt ? 59 : -1);
|
|
1383
1405
|
i0.ɵɵadvance();
|
|
1384
|
-
i0.ɵɵconditional(ctx_r1.record.CompletedAt ?
|
|
1406
|
+
i0.ɵɵconditional(ctx_r1.record.CompletedAt ? 60 : -1);
|
|
1385
1407
|
} }
|
|
1386
1408
|
function MJAIPromptRunFormComponentExtended_Conditional_1_Conditional_45_ng_template_1_Template(rf, ctx) { if (rf & 1) {
|
|
1387
1409
|
i0.ɵɵelementStart(0, "span", 54);
|
|
@@ -1398,7 +1420,7 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_Conditional_45_ng_temp
|
|
|
1398
1420
|
i0.ɵɵelement(4, "i", 67);
|
|
1399
1421
|
i0.ɵɵtext(5, " Copy ");
|
|
1400
1422
|
i0.ɵɵelementEnd()();
|
|
1401
|
-
i0.ɵɵelementStart(6, "mj-code-editor",
|
|
1423
|
+
i0.ɵɵelementStart(6, "mj-code-editor", 159);
|
|
1402
1424
|
i0.ɵɵtwoWayListener("ngModelChange", function MJAIPromptRunFormComponentExtended_Conditional_1_Conditional_45_ng_template_2_Template_mj_code_editor_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.formattedModelSpecificResponseDetails, $event) || (ctx_r1.formattedModelSpecificResponseDetails = $event); return i0.ɵɵresetView($event); });
|
|
1403
1425
|
i0.ɵɵelementEnd()()();
|
|
1404
1426
|
} if (rf & 2) {
|
|
@@ -1442,11 +1464,11 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_47_Templat
|
|
|
1442
1464
|
i0.ɵɵconditional(ctx_r1.record.WasSelectedResult ? 4 : -1);
|
|
1443
1465
|
} }
|
|
1444
1466
|
function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_26_Template(rf, ctx) { if (rf & 1) {
|
|
1445
|
-
i0.ɵɵelementStart(0, "div",
|
|
1467
|
+
i0.ɵɵelementStart(0, "div", 162)(1, "label");
|
|
1446
1468
|
i0.ɵɵtext(2, "Cache Key");
|
|
1447
1469
|
i0.ɵɵelementEnd();
|
|
1448
1470
|
i0.ɵɵelementStart(3, "div", 150);
|
|
1449
|
-
i0.ɵɵelement(4, "i",
|
|
1471
|
+
i0.ɵɵelement(4, "i", 165);
|
|
1450
1472
|
i0.ɵɵelementStart(5, "code");
|
|
1451
1473
|
i0.ɵɵtext(6);
|
|
1452
1474
|
i0.ɵɵelementEnd()()();
|
|
@@ -1460,9 +1482,9 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditi
|
|
|
1460
1482
|
i0.ɵɵelementStart(0, "div", 149)(1, "label");
|
|
1461
1483
|
i0.ɵɵtext(2, "Judge Prompt");
|
|
1462
1484
|
i0.ɵɵelementEnd();
|
|
1463
|
-
i0.ɵɵelementStart(3, "div",
|
|
1485
|
+
i0.ɵɵelementStart(3, "div", 166);
|
|
1464
1486
|
i0.ɵɵlistener("click", function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_27_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Prompts", ctx_r1.record.JudgeID)); });
|
|
1465
|
-
i0.ɵɵelement(4, "i",
|
|
1487
|
+
i0.ɵɵelement(4, "i", 167);
|
|
1466
1488
|
i0.ɵɵtext(5);
|
|
1467
1489
|
i0.ɵɵelement(6, "i", 103);
|
|
1468
1490
|
i0.ɵɵelementEnd()();
|
|
@@ -1476,7 +1498,7 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditi
|
|
|
1476
1498
|
i0.ɵɵtext(2, "Judge Score");
|
|
1477
1499
|
i0.ɵɵelementEnd();
|
|
1478
1500
|
i0.ɵɵelementStart(3, "div", 150);
|
|
1479
|
-
i0.ɵɵelement(4, "i",
|
|
1501
|
+
i0.ɵɵelement(4, "i", 168);
|
|
1480
1502
|
i0.ɵɵtext(5);
|
|
1481
1503
|
i0.ɵɵelementEnd()();
|
|
1482
1504
|
} if (rf & 2) {
|
|
@@ -1489,7 +1511,7 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditi
|
|
|
1489
1511
|
i0.ɵɵtext(2, "First Token Time");
|
|
1490
1512
|
i0.ɵɵelementEnd();
|
|
1491
1513
|
i0.ɵɵelementStart(3, "div", 150);
|
|
1492
|
-
i0.ɵɵelement(4, "i",
|
|
1514
|
+
i0.ɵɵelement(4, "i", 169);
|
|
1493
1515
|
i0.ɵɵtext(5);
|
|
1494
1516
|
i0.ɵɵelementEnd()();
|
|
1495
1517
|
} if (rf & 2) {
|
|
@@ -1498,11 +1520,11 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditi
|
|
|
1498
1520
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.record.FirstTokenTime, " ms ");
|
|
1499
1521
|
} }
|
|
1500
1522
|
function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_42_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
1501
|
-
i0.ɵɵelementStart(0, "div",
|
|
1523
|
+
i0.ɵɵelementStart(0, "div", 162)(1, "label");
|
|
1502
1524
|
i0.ɵɵtext(2, "Cancellation Reason");
|
|
1503
1525
|
i0.ɵɵelementEnd();
|
|
1504
1526
|
i0.ɵɵelementStart(3, "div", 150);
|
|
1505
|
-
i0.ɵɵelement(4, "i",
|
|
1527
|
+
i0.ɵɵelement(4, "i", 172);
|
|
1506
1528
|
i0.ɵɵtext(5);
|
|
1507
1529
|
i0.ɵɵelementEnd()();
|
|
1508
1530
|
} if (rf & 2) {
|
|
@@ -1514,11 +1536,11 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditi
|
|
|
1514
1536
|
i0.ɵɵelementStart(0, "div", 149)(1, "label");
|
|
1515
1537
|
i0.ɵɵtext(2, "Cancelled");
|
|
1516
1538
|
i0.ɵɵelementEnd();
|
|
1517
|
-
i0.ɵɵelementStart(3, "div",
|
|
1518
|
-
i0.ɵɵelement(4, "i",
|
|
1539
|
+
i0.ɵɵelementStart(3, "div", 170);
|
|
1540
|
+
i0.ɵɵelement(4, "i", 171);
|
|
1519
1541
|
i0.ɵɵtext(5, " Yes ");
|
|
1520
1542
|
i0.ɵɵelementEnd()();
|
|
1521
|
-
i0.ɵɵconditionalCreate(6, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_42_Conditional_6_Template, 6, 1, "div",
|
|
1543
|
+
i0.ɵɵconditionalCreate(6, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_42_Conditional_6_Template, 6, 1, "div", 162);
|
|
1522
1544
|
} if (rf & 2) {
|
|
1523
1545
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
1524
1546
|
i0.ɵɵadvance(6);
|
|
@@ -1526,10 +1548,10 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditi
|
|
|
1526
1548
|
} }
|
|
1527
1549
|
function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_43_Template(rf, ctx) { if (rf & 1) {
|
|
1528
1550
|
const _r23 = i0.ɵɵgetCurrentView();
|
|
1529
|
-
i0.ɵɵelementStart(0, "div",
|
|
1551
|
+
i0.ɵɵelementStart(0, "div", 163)(1, "h4");
|
|
1530
1552
|
i0.ɵɵtext(2, "Model Selection Details");
|
|
1531
1553
|
i0.ɵɵelementEnd();
|
|
1532
|
-
i0.ɵɵelementStart(3, "div", 129)(4, "mj-code-editor",
|
|
1554
|
+
i0.ɵɵelementStart(3, "div", 129)(4, "mj-code-editor", 173);
|
|
1533
1555
|
i0.ɵɵtwoWayListener("ngModelChange", function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_43_Template_mj_code_editor_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.formattedModelSelection, $event) || (ctx_r1.formattedModelSelection = $event); return i0.ɵɵresetView($event); });
|
|
1534
1556
|
i0.ɵɵelementEnd()()();
|
|
1535
1557
|
} if (rf & 2) {
|
|
@@ -1540,10 +1562,10 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditi
|
|
|
1540
1562
|
} }
|
|
1541
1563
|
function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_44_Template(rf, ctx) { if (rf & 1) {
|
|
1542
1564
|
const _r24 = i0.ɵɵgetCurrentView();
|
|
1543
|
-
i0.ɵɵelementStart(0, "div",
|
|
1565
|
+
i0.ɵɵelementStart(0, "div", 164)(1, "h4");
|
|
1544
1566
|
i0.ɵɵtext(2, "Error Details");
|
|
1545
1567
|
i0.ɵɵelementEnd();
|
|
1546
|
-
i0.ɵɵelementStart(3, "div", 129)(4, "mj-code-editor",
|
|
1568
|
+
i0.ɵɵelementStart(3, "div", 129)(4, "mj-code-editor", 174);
|
|
1547
1569
|
i0.ɵɵtwoWayListener("ngModelChange", function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_44_Template_mj_code_editor_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.formattedErrorDetails, $event) || (ctx_r1.formattedErrorDetails = $event); return i0.ɵɵresetView($event); });
|
|
1548
1570
|
i0.ɵɵelementEnd()()();
|
|
1549
1571
|
} if (rf & 2) {
|
|
@@ -1564,14 +1586,14 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Templat
|
|
|
1564
1586
|
i0.ɵɵtext(10, "Selection Strategy");
|
|
1565
1587
|
i0.ɵɵelementEnd();
|
|
1566
1588
|
i0.ɵɵelementStart(11, "div", 150);
|
|
1567
|
-
i0.ɵɵelement(12, "i",
|
|
1589
|
+
i0.ɵɵelement(12, "i", 160);
|
|
1568
1590
|
i0.ɵɵtext(13);
|
|
1569
1591
|
i0.ɵɵelementEnd()();
|
|
1570
1592
|
i0.ɵɵelementStart(14, "div", 149)(15, "label");
|
|
1571
1593
|
i0.ɵɵtext(16, "Model Power Rank");
|
|
1572
1594
|
i0.ɵɵelementEnd();
|
|
1573
1595
|
i0.ɵɵelementStart(17, "div", 150);
|
|
1574
|
-
i0.ɵɵelement(18, "i",
|
|
1596
|
+
i0.ɵɵelement(18, "i", 161);
|
|
1575
1597
|
i0.ɵɵtext(19);
|
|
1576
1598
|
i0.ɵɵelementEnd()();
|
|
1577
1599
|
i0.ɵɵelementStart(20, "div", 149)(21, "label");
|
|
@@ -1581,7 +1603,7 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Templat
|
|
|
1581
1603
|
i0.ɵɵelement(24, "i");
|
|
1582
1604
|
i0.ɵɵtext(25);
|
|
1583
1605
|
i0.ɵɵelementEnd()();
|
|
1584
|
-
i0.ɵɵconditionalCreate(26, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_26_Template, 7, 1, "div",
|
|
1606
|
+
i0.ɵɵconditionalCreate(26, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_26_Template, 7, 1, "div", 162);
|
|
1585
1607
|
i0.ɵɵconditionalCreate(27, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_27_Template, 7, 1, "div", 149);
|
|
1586
1608
|
i0.ɵɵconditionalCreate(28, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_28_Template, 6, 1, "div", 149);
|
|
1587
1609
|
i0.ɵɵelementStart(29, "div", 149)(30, "label");
|
|
@@ -1601,8 +1623,8 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Templat
|
|
|
1601
1623
|
i0.ɵɵconditionalCreate(41, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_41_Template, 6, 1, "div", 149);
|
|
1602
1624
|
i0.ɵɵconditionalCreate(42, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_42_Template, 7, 1);
|
|
1603
1625
|
i0.ɵɵelementEnd();
|
|
1604
|
-
i0.ɵɵconditionalCreate(43, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_43_Template, 5, 4, "div",
|
|
1605
|
-
i0.ɵɵconditionalCreate(44, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_44_Template, 5, 4, "div",
|
|
1626
|
+
i0.ɵɵconditionalCreate(43, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_43_Template, 5, 4, "div", 163);
|
|
1627
|
+
i0.ɵɵconditionalCreate(44, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_48_Conditional_44_Template, 5, 4, "div", 164);
|
|
1606
1628
|
i0.ɵɵelementEnd();
|
|
1607
1629
|
} if (rf & 2) {
|
|
1608
1630
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -1688,7 +1710,7 @@ function MJAIPromptRunFormComponentExtended_Conditional_1_Template(rf, ctx) { if
|
|
|
1688
1710
|
i0.ɵɵconditionalCreate(40, MJAIPromptRunFormComponentExtended_Conditional_1_Conditional_40_Template, 3, 1, "kendo-panelbar-item", 29);
|
|
1689
1711
|
i0.ɵɵconditionalCreate(41, MJAIPromptRunFormComponentExtended_Conditional_1_Conditional_41_Template, 3, 1, "kendo-panelbar-item", 29);
|
|
1690
1712
|
i0.ɵɵelementStart(42, "kendo-panelbar-item", 29);
|
|
1691
|
-
i0.ɵɵtemplate(43, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_43_Template, 3, 0, "ng-template", 27)(44, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Template,
|
|
1713
|
+
i0.ɵɵtemplate(43, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_43_Template, 3, 0, "ng-template", 27)(44, MJAIPromptRunFormComponentExtended_Conditional_1_ng_template_44_Template, 61, 32, "ng-template", 28);
|
|
1692
1714
|
i0.ɵɵelementEnd();
|
|
1693
1715
|
i0.ɵɵconditionalCreate(45, MJAIPromptRunFormComponentExtended_Conditional_1_Conditional_45_Template, 3, 1, "kendo-panelbar-item", 29);
|
|
1694
1716
|
i0.ɵɵelementStart(46, "kendo-panelbar-item", 26);
|
|
@@ -2207,7 +2229,7 @@ let MJAIPromptRunFormComponentExtended = class MJAIPromptRunFormComponentExtende
|
|
|
2207
2229
|
// Don't auto-expand validation panel anymore - let user expand when needed
|
|
2208
2230
|
}
|
|
2209
2231
|
static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJAIPromptRunFormComponentExtended_BaseFactory; return function MJAIPromptRunFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJAIPromptRunFormComponentExtended_BaseFactory || (ɵMJAIPromptRunFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJAIPromptRunFormComponentExtended)))(__ngFactoryType__ || MJAIPromptRunFormComponentExtended); }; })(); }
|
|
2210
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAIPromptRunFormComponentExtended, selectors: [["mj-ai-prompt-run-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [3, "Form"], [1, "prompt-run-header"], [1, "header-content"], [1, "run-overview"], [1, "run-icon-wrapper"], [1, "run-info"], [1, "run-title"], [1, "run-id"], [1, "run-meta"], [1, "status-badge"], [1, "run-type-badge", 3, "color"], ["title", "View Prompt", 1, "prompt-name"], ["title", "View Model", 1, "model-name"], ["title", "View Vendor", 1, "vendor-name"], ["title", "View Original Run", 1, "original-run"], [1, "run-actions"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Re-run this prompt", 3, "click"], [1, "fa-solid", "fa-play-circle"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "metrics-bar"], [1, "form-content", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [3, "keepItemContent"], [3, "stateChange", "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], [3, "expanded"], [1, "run-type-badge"], ["title", "View Prompt", 1, "prompt-name", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["title", "View Model", 1, "model-name", 3, "click"], [1, "fa-solid", "fa-microchip"], ["title", "View Vendor", 1, "vendor-name", 3, "click"], [1, "fa-solid", "fa-building"], [1, "fa-solid", "fa-level-up-alt"], [1, "original-link", 3, "click"], [1, "metric-item"], [1, "fa-solid", "fa-cog"], [1, "metric-content"], [1, "metric-label"], [1, "metric-value"], ["href", "javascript:void(0)", 1, "config-link", 3, "click"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-coins"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "fa-temperature-high"], [1, "fa-solid", "fa-percentage"], [1, "fa-solid", "fa-list-ol"], [1, "fa-solid", "fa-tachometer-alt"], [1, "fa-solid", "fa-code"], [1, "fa-solid", "fa-calendar"], [1, "panel-title"], [1, "panel-badge"], [1, "panel-content"], [1, "nested-panels"], [1, "empty-state"], [1, "sub-expansion-panel", 3, "expanded", "animation"], ["kendoExpansionPanelTitleDirective", ""], [1, "sub-panel-content"], [1, "loading-state"], [3, "messages"], [1, "json-editor-container"], [1, "json-toolbar"], ["kendoButton", "", "fillMode", "flat", "size", "small", "title", "Copy JSON", 3, "click"], [1, "fa-solid", "fa-copy"], ["name", "formattedMessages", 2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "sub-panel-title"], [1, "fa-solid", "fa-comments"], [1, "panel-count"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-comment-slash"], [1, "fa-solid", "fa-database"], ["name", "formattedData", 2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fa-solid", "fa-square-check"], [1, "panel-badge", "error"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], ["name", "formattedResult", 2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fa-solid", "fa-inbox"], [1, "error-info"], [1, "finish-reason"], [1, "error-details"], [1, "error-hint"], [2, "height", "200px", "width", "100%", 3, "ngModel", "disabled", "language", "lineWrapping"], [1, "fa-solid", "fa-chart-line"], [1, "metrics-grid"], [1, "metric-card"], [1, "metric-header"], [1, "fa-solid", "fa-message"], [1, "metric-value", "large"], [1, "metric-rollup"], [1, "fa-solid", "fa-reply"], [1, "metric-currency"], [1, "additional-metrics"], [1, "metric-row"], [1, "fa-solid", "fa-hourglass-start"], [1, "fa-solid", "fa-brain"], [1, "fa-solid", "fa-flag-checkered"], [1, "metric-value", "link", 3, "click"], [1, "fa-solid", "fa-external-link"], [1, "fa-solid", "fa-shield-check"], [1, "panel-badge", "success"], [1, "validation-summary"], [1, "summary-header"], [1, "validation-status"], [1, "validation-metrics"], [1, "metric-card", "small"], [1, "validation-error"], [1, "common-error"], [1, "retry-timeline"], [1, "validation-attempts"], [1, "validation-json"], [1, "error-count"], [1, "fa-solid", "fa-repeat"], [1, "timeline-info"], [1, "timeline-stat"], [1, "fa-solid", "fa-stopwatch"], [1, "attempts-list"], [1, "attempt-item", 3, "success", "failed"], [1, "attempt-item"], [1, "attempt-number"], [1, "attempt-details"], [1, "attempt-time"], [1, "output-length"], [1, "attempt-error"], [1, "json-viewer-container"], ["name", "formattedValidationSummary", 2, "height", "200px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], ["name", "formattedValidationAttempts", 2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fa-solid", "fa-sitemap"], [1, "parent-run-section"], [1, "child-runs-section"], [1, "run-item", "parent", 3, "click"], [1, "run-item-icon"], [1, "run-item-content"], [1, "run-item-title"], [1, "run-item-type"], [1, "run-item-meta"], [1, "fa-solid", "fa-level-down-alt"], [1, "runs-list"], [1, "run-item", "child"], [1, "run-item", "child", 3, "click"], [1, "execution-order"], [1, "status-indicator"], [1, "fa-solid", "fa-info-circle"], [1, "detail-fields-grid"], [1, "detail-field"], [1, "detail-value"], [1, "fa-solid", "fa-filter"], [1, "fa-solid", "fa-plus-circle"], [1, "fa-solid", "fa-seedling"], ["title", "View Agent", 1, "detail-value", "clickable", 3, "click"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-check-circle"], ["name", "formattedModelSpecificResponseDetails", 2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fa-solid", "fa-strategy"], [1, "fa-solid", "fa-ranking-star"], [1, "detail-field", "full-width"], [1, "model-selection-json"], [1, "error-details-json"], [1, "fa-solid", "fa-key"], ["title", "View Judge Prompt", 1, "detail-value", "clickable", 3, "click"], [1, "fa-solid", "fa-gavel"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-bolt"], [1, "detail-value", "error"], [1, "fa-solid", "fa-ban"], [1, "fa-solid", "fa-exclamation-circle"], ["name", "formattedModelSelection", 2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], ["name", "formattedErrorDetails", 2, "height", "200px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"]], template: function MJAIPromptRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
|
|
2232
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAIPromptRunFormComponentExtended, selectors: [["mj-ai-prompt-run-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [3, "Form"], [1, "prompt-run-header"], [1, "header-content"], [1, "run-overview"], [1, "run-icon-wrapper"], [1, "run-info"], [1, "run-title"], [1, "run-id"], [1, "run-meta"], [1, "status-badge"], [1, "run-type-badge", 3, "color"], ["title", "View Prompt", 1, "prompt-name"], ["title", "View Model", 1, "model-name"], ["title", "View Vendor", 1, "vendor-name"], ["title", "View Original Run", 1, "original-run"], [1, "run-actions"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Re-run this prompt", 3, "click"], [1, "fa-solid", "fa-play-circle"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "metrics-bar"], [1, "form-content", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [3, "keepItemContent"], [3, "stateChange", "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], [3, "expanded"], [1, "run-type-badge"], ["title", "View Prompt", 1, "prompt-name", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["title", "View Model", 1, "model-name", 3, "click"], [1, "fa-solid", "fa-microchip"], ["title", "View Vendor", 1, "vendor-name", 3, "click"], [1, "fa-solid", "fa-building"], [1, "fa-solid", "fa-level-up-alt"], [1, "original-link", 3, "click"], [1, "metric-item"], [1, "fa-solid", "fa-cog"], [1, "metric-content"], [1, "metric-label"], [1, "metric-value"], ["href", "javascript:void(0)", 1, "config-link", 3, "click"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-coins"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "fa-temperature-high"], [1, "fa-solid", "fa-percentage"], [1, "fa-solid", "fa-list-ol"], [1, "fa-solid", "fa-tachometer-alt"], [1, "fa-solid", "fa-code"], [1, "fa-solid", "fa-calendar"], [1, "panel-title"], [1, "panel-badge"], [1, "panel-content"], [1, "nested-panels"], [1, "empty-state"], [1, "sub-expansion-panel", 3, "expanded", "animation"], ["kendoExpansionPanelTitleDirective", ""], [1, "sub-panel-content"], [1, "loading-state"], [3, "messages"], [1, "json-editor-container"], [1, "json-toolbar"], ["kendoButton", "", "fillMode", "flat", "size", "small", "title", "Copy JSON", 3, "click"], [1, "fa-solid", "fa-copy"], ["name", "formattedMessages", 2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "sub-panel-title"], [1, "fa-solid", "fa-comments"], [1, "panel-count"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-comment-slash"], [1, "fa-solid", "fa-database"], ["name", "formattedData", 2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fa-solid", "fa-square-check"], [1, "panel-badge", "error"], [1, "error-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], ["name", "formattedResult", 2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fa-solid", "fa-inbox"], [1, "error-info"], [1, "finish-reason"], [1, "error-details"], [1, "error-hint"], [2, "height", "200px", "width", "100%", 3, "ngModel", "disabled", "language", "lineWrapping"], [1, "fa-solid", "fa-chart-line"], [1, "metrics-grid"], [1, "metric-card"], [1, "metric-header"], [1, "fa-solid", "fa-message"], [1, "metric-value", "large"], [1, "metric-rollup"], [1, "fa-solid", "fa-reply"], [1, "metric-currency"], [1, "additional-metrics"], [1, "metric-row"], [1, "fa-solid", "fa-hourglass-start"], [1, "fa-solid", "fa-brain"], [1, "fa-solid", "fa-flag-checkered"], [1, "metric-value", "link", 3, "click"], [1, "fa-solid", "fa-external-link"], [1, "fa-solid", "fa-shield-check"], [1, "panel-badge", "success"], [1, "validation-summary"], [1, "summary-header"], [1, "validation-status"], [1, "validation-metrics"], [1, "metric-card", "small"], [1, "validation-error"], [1, "common-error"], [1, "retry-timeline"], [1, "validation-attempts"], [1, "validation-json"], [1, "error-count"], [1, "fa-solid", "fa-repeat"], [1, "timeline-info"], [1, "timeline-stat"], [1, "fa-solid", "fa-stopwatch"], [1, "attempts-list"], [1, "attempt-item", 3, "success", "failed"], [1, "attempt-item"], [1, "attempt-number"], [1, "attempt-details"], [1, "attempt-time"], [1, "output-length"], [1, "attempt-error"], [1, "json-viewer-container"], ["name", "formattedValidationSummary", 2, "height", "200px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], ["name", "formattedValidationAttempts", 2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fa-solid", "fa-sitemap"], [1, "parent-run-section"], [1, "child-runs-section"], [1, "run-item", "parent", 3, "click"], [1, "run-item-icon"], [1, "run-item-content"], [1, "run-item-title"], [1, "run-item-type"], [1, "run-item-meta"], [1, "fa-solid", "fa-level-down-alt"], [1, "runs-list"], [1, "run-item", "child"], [1, "run-item", "child", 3, "click"], [1, "execution-order"], [1, "status-indicator"], [1, "fa-solid", "fa-info-circle"], [1, "detail-fields-grid"], [1, "detail-field"], [1, "detail-value"], [1, "fa-solid", "fa-filter"], [1, "fa-solid", "fa-plus-circle"], [1, "fa-solid", "fa-seedling"], [1, "fa-solid", "fa-stop-circle"], [1, "fa-solid", "fa-wand-magic-sparkles"], ["title", "View Agent", 1, "detail-value", "clickable", 3, "click"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-check-circle"], ["name", "formattedModelSpecificResponseDetails", 2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fa-solid", "fa-strategy"], [1, "fa-solid", "fa-ranking-star"], [1, "detail-field", "full-width"], [1, "model-selection-json"], [1, "error-details-json"], [1, "fa-solid", "fa-key"], ["title", "View Judge Prompt", 1, "detail-value", "clickable", 3, "click"], [1, "fa-solid", "fa-gavel"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-bolt"], [1, "detail-value", "error"], [1, "fa-solid", "fa-ban"], [1, "fa-solid", "fa-exclamation-circle"], ["name", "formattedModelSelection", 2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], ["name", "formattedErrorDetails", 2, "height", "200px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"]], template: function MJAIPromptRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
|
|
2211
2233
|
i0.ɵɵelementStart(0, "div", 1);
|
|
2212
2234
|
i0.ɵɵconditionalCreate(1, MJAIPromptRunFormComponentExtended_Conditional_1_Template, 49, 28, "form", 2);
|
|
2213
2235
|
i0.ɵɵelementEnd();
|
|
@@ -2222,7 +2244,7 @@ MJAIPromptRunFormComponentExtended = __decorate([
|
|
|
2222
2244
|
export { MJAIPromptRunFormComponentExtended };
|
|
2223
2245
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIPromptRunFormComponentExtended, [{
|
|
2224
2246
|
type: Component,
|
|
2225
|
-
args: [{ standalone: false, selector: 'mj-ai-prompt-run-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"record-form-container\" style=\"height: 100%; display: flex; flex-direction: column;\">\n @if (record) {\n <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n\n <!-- Header Section -->\n <div class=\"prompt-run-header\">\n <div class=\"header-content\">\n <div class=\"run-overview\">\n <div class=\"run-icon-wrapper\" [style.background-color]=\"getStatusColor() + '20'\">\n <i [class]=\"'fa-solid ' + getStatusIcon()\" [style.color]=\"getStatusColor()\"></i>\n </div>\n <div class=\"run-info\">\n <h1 class=\"run-title\">\n Prompt Run\n @if (record.ID) {\n <span class=\"run-id\">#{{ record.ID.substring(0, 8) }}</span>\n }\n </h1>\n <div class=\"run-meta\">\n <span class=\"status-badge\" [style.background-color]=\"getStatusColor()\">\n <i [class]=\"'fa-solid ' + getStatusIcon()\"></i>\n {{ getStatusText() }}\n </span>\n @if (record.RunType) {\n <span class=\"run-type-badge\" [style.color]=\"getRunTypeColor(record.RunType)\">\n <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\"></i>\n {{ record.RunType }}\n </span>\n }\n @if (prompt) {\n <span class=\"prompt-name\" (click)=\"navigateToEntity('MJ: AI Prompts', prompt.ID)\" title=\"View Prompt\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n {{ prompt.Name }}\n </span>\n }\n @if (model) {\n <span class=\"model-name\" (click)=\"navigateToEntity('MJ: AI Models', model.ID)\" title=\"View Model\">\n <i class=\"fa-solid fa-microchip\"></i>\n {{ model.Name }}\n </span>\n }\n @if (record.Vendor) {\n <span class=\"vendor-name\" (click)=\"navigateToEntity('MJ: AI Vendors', record.VendorID)\" title=\"View Vendor\">\n <i class=\"fa-solid fa-building\"></i>\n {{ record.Vendor }}\n </span>\n }\n @if (record.RerunFromPromptRunID) {\n <span class=\"original-run\" title=\"View Original Run\">\n <i class=\"fa-solid fa-level-up-alt\"></i>\n <a (click)=\"navigateToOriginalRun()\" class=\"original-link\">Original Run</a>\n </span>\n }\n </div>\n </div>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"run-actions\">\n <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"reRunPrompt()\" title=\"Re-run this prompt\">\n <i class=\"fa-solid fa-play-circle\"></i>\n Re-Run\n </button>\n <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshData()\" title=\"Refresh data\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n </div>\n </div>\n \n <!-- Key Metrics Bar -->\n @if (record.ConfigurationID) {\n <!-- Configuration Bar -->\n <div class=\"metrics-bar\">\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-cog\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Configuration</div>\n <div class=\"metric-value\">\n <a href=\"javascript:void(0)\" class=\"config-link\" (click)=\"navigateToEntity('MJ: AI Configurations', record.ConfigurationID)\">\n {{ record.Configuration || 'Unknown' }}\n </a>\n </div>\n </div>\n </div>\n @if (record.Temperature !== null && record.Temperature !== undefined) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-temperature-high\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Temperature</div>\n <div class=\"metric-value\">{{ record.Temperature }}</div>\n </div>\n </div>\n }\n @if (record.TopP !== null && record.TopP !== undefined) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-percentage\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Top P</div>\n <div class=\"metric-value\">{{ record.TopP }}</div>\n </div>\n </div>\n }\n @if (record.TopK !== null && record.TopK !== undefined) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-list-ol\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Top K</div>\n <div class=\"metric-value\">{{ record.TopK }}</div>\n </div>\n </div>\n }\n @if (record.EffortLevel !== null && record.EffortLevel !== undefined) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-tachometer-alt\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Effort Level</div>\n <div class=\"metric-value\">{{ record.EffortLevel }}</div>\n </div>\n </div>\n }\n @if (record.ResponseFormat) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-code\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Response Format</div>\n <div class=\"metric-value\">{{ record.ResponseFormat }}</div>\n </div>\n </div>\n }\n </div>\n \n <!-- Execution Metrics Bar (always show when configuration exists) -->\n <div class=\"metrics-bar\">\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Duration</div>\n <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n </div>\n </div>\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-coins\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Total Tokens</div>\n <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n </div>\n </div>\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Cost</div>\n <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n </div>\n </div>\n @if (record.RunAt) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-calendar\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Started</div>\n <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n </div>\n </div>\n }\n </div>\n } @else {\n <!-- Execution Metrics Bar (original behavior when no configuration) -->\n <div class=\"metrics-bar\">\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Duration</div>\n <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n </div>\n </div>\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-coins\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Total Tokens</div>\n <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n </div>\n </div>\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Cost</div>\n <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n </div>\n </div>\n @if (record.RunAt) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-calendar\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Started</div>\n <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Main Content with Expansion Panels -->\n <div class=\"form-content\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n <kendo-panelbar [keepItemContent]=\"true\">\n \n <!-- Input Panel with nested sub-panels -->\n <kendo-panelbar-item [expanded]=\"inputExpanded\" (stateChange)=\"onInputPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n Input\n @if (record.Messages && record.Messages.trim() !== '') {\n <span class=\"panel-badge\">JSON</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n @if (record.Messages && record.Messages.trim() !== '') {\n <!-- Nested expansion panels for sub-sections -->\n <div class=\"nested-panels\">\n <!-- Messages Sub-Panel -->\n <kendo-expansionpanel \n [expanded]=\"messagesExpanded\" \n class=\"sub-expansion-panel\"\n [animation]=\"false\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span class=\"sub-panel-title\">\n <i class=\"fa-solid fa-comments\"></i>\n Messages\n @if (chatMessages.length > 0) {\n <span class=\"panel-count\">({{ chatMessages.length }})</span>\n }\n </span>\n </ng-template>\n <div class=\"sub-panel-content\">\n @if (isParsingMessages || isLoadingRelatedData) {\n <div class=\"loading-state\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <p>Loading messages...</p>\n </div>\n } @else if (chatMessages.length > 0) {\n <mj-chat-message-viewer \n [messages]=\"chatMessages\">\n </mj-chat-message-viewer>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comment-slash\"></i>\n <p>No chat messages found</p>\n </div>\n }\n </div>\n </kendo-expansionpanel>\n \n <!-- Data Sub-Panel -->\n <kendo-expansionpanel \n [expanded]=\"dataExpanded\" \n class=\"sub-expansion-panel\"\n [animation]=\"false\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span class=\"sub-panel-title\">\n <i class=\"fa-solid fa-database\"></i>\n Data\n @if (inputData) {\n <span class=\"panel-badge\">Object</span>\n }\n </span>\n </ng-template>\n <div class=\"sub-panel-content\">\n @if (inputData && formattedData) {\n <div class=\"json-editor-container\">\n <div class=\"json-toolbar\">\n <button kendoButton\n fillMode=\"flat\" \n size=\"small\"\n (click)=\"copyToClipboard(formattedData, 'Data')\"\n title=\"Copy JSON\">\n <i class=\"fa-solid fa-copy\"></i> Copy\n </button>\n </div>\n <mj-code-editor \n [(ngModel)]=\"formattedData\"\n name=\"formattedData\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-database\"></i>\n <p>No data object found</p>\n </div>\n }\n </div>\n </kendo-expansionpanel>\n \n <!-- Raw Sub-Panel -->\n <kendo-expansionpanel \n [expanded]=\"rawExpanded\" \n class=\"sub-expansion-panel\"\n [animation]=\"false\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span class=\"sub-panel-title\">\n <i class=\"fa-solid fa-code\"></i>\n Raw\n </span>\n </ng-template>\n <div class=\"sub-panel-content\">\n <div class=\"json-editor-container\">\n <div class=\"json-toolbar\">\n <button kendoButton\n fillMode=\"flat\" \n size=\"small\"\n (click)=\"copyToClipboard(formattedMessages, 'Messages')\"\n title=\"Copy JSON\">\n <i class=\"fa-solid fa-copy\"></i> Copy\n </button>\n </div>\n <mj-code-editor \n [(ngModel)]=\"formattedMessages\"\n name=\"formattedMessages\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 400px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n </kendo-expansionpanel>\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comment-slash\"></i>\n <p>No input messages recorded</p>\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <!-- Result Panel -->\n <kendo-panelbar-item [expanded]=\"resultExpanded\" (stateChange)=\"onResultPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-square-check\"></i>\n Result\n @if (record.Result && record.Result.trim() !== '') {\n <span class=\"panel-badge\">JSON</span>\n }\n @if (record.ErrorMessage) {\n <span class=\"panel-badge error\">Error</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n @if (record.ErrorMessage) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n <div class=\"error-content\">\n <h4>Error Message</h4>\n <p>{{ record.ErrorMessage }}</p>\n </div>\n </div>\n }\n \n @if (record.Result && record.Result.trim() !== '') {\n <div class=\"json-editor-container\">\n <div class=\"json-toolbar\">\n <button kendoButton\n fillMode=\"flat\" \n size=\"small\"\n (click)=\"copyToClipboard(formattedResult, 'Result')\"\n title=\"Copy JSON\">\n <i class=\"fa-solid fa-copy\"></i> Copy\n </button>\n </div>\n <mj-code-editor \n [(ngModel)]=\"formattedResult\"\n name=\"formattedResult\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 400px; width: 100%;\">\n </mj-code-editor>\n </div>\n } @else if (!record.ErrorMessage) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No result data recorded</p>\n @if (record.Status === 'Failed' || record.Success === false) {\n <div class=\"error-info\">\n @if (record.Status) {\n <p class=\"finish-reason\">\n <strong>Status:</strong> {{ record.Status }}\n </p>\n }\n @if (formattedErrorDetails) {\n <div class=\"error-details\">\n <h4>Error Details</h4>\n <mj-code-editor\n [ngModel]=\"formattedErrorDetails\"\n [disabled]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n }\n @if (!formattedErrorDetails) {\n <p class=\"error-hint\">\n The prompt execution failed but no additional error information is available.\n </p>\n }\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <!-- Token Usage & Metrics Panel -->\n <kendo-panelbar-item [expanded]=\"metricsExpanded\" (stateChange)=\"onMetricsPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-chart-line\"></i>\n Token Usage & Metrics\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"metrics-grid\">\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-message\"></i>\n <h4>Prompt Tokens</h4>\n </div>\n <div class=\"metric-value large\">{{ formatTokens(record.TokensPrompt) }}</div>\n @if (record.TokensPromptRollup && record.TokensPromptRollup !== record.TokensPrompt) {\n <div class=\"metric-rollup\">\n <span>Rollup: {{ formatTokens(record.TokensPromptRollup) }}</span>\n </div>\n }\n </div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-reply\"></i>\n <h4>Completion Tokens</h4>\n </div>\n <div class=\"metric-value large\">{{ formatTokens(record.TokensCompletion) }}</div>\n @if (record.TokensCompletionRollup && record.TokensCompletionRollup !== record.TokensCompletion) {\n <div class=\"metric-rollup\">\n <span>Rollup: {{ formatTokens(record.TokensCompletionRollup) }}</span>\n </div>\n }\n </div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-coins\"></i>\n <h4>Total Tokens</h4>\n </div>\n <div class=\"metric-value large\">{{ formatTokens(record.TokensUsed) }}</div>\n @if (record.TokensUsedRollup && record.TokensUsedRollup !== record.TokensUsed) {\n <div class=\"metric-rollup\">\n <span>Rollup: {{ formatTokens(record.TokensUsedRollup) }}</span>\n </div>\n }\n </div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <h4>Cost</h4>\n </div>\n <div class=\"metric-value large\">{{ formatCost(record.Cost) }}</div>\n @if (record.TotalCost && record.TotalCost !== record.Cost) {\n <div class=\"metric-rollup\">\n <span>Total: {{ formatCost(record.TotalCost) }}</span>\n </div>\n }\n @if (record.CostCurrency) {\n <div class=\"metric-currency\">{{ record.CostCurrency }}</div>\n }\n </div>\n \n <!-- Timing Metrics -->\n @if (record.QueueTime != null) {\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-hourglass-start\"></i>\n <h4>Queue Time</h4>\n </div>\n <div class=\"metric-value large\">{{ formatDuration(record.QueueTime) }}</div>\n </div>\n }\n \n @if (record.PromptTime != null) {\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-brain\"></i>\n <h4>Prompt Time</h4>\n </div>\n <div class=\"metric-value large\">{{ formatDuration(record.PromptTime) }}</div>\n </div>\n }\n \n @if (record.CompletionTime != null) {\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-flag-checkered\"></i>\n <h4>Completion Time</h4>\n </div>\n <div class=\"metric-value large\">{{ formatDuration(record.CompletionTime) }}</div>\n </div>\n }\n </div>\n \n <!-- Additional Metrics -->\n <div class=\"additional-metrics\">\n @if (record.ExecutionOrder !== null) {\n <div class=\"metric-row\">\n <span class=\"metric-label\">Execution Order:</span>\n <span class=\"metric-value\">{{ record.ExecutionOrder }}</span>\n </div>\n }\n @if (record.AgentID) {\n <div class=\"metric-row\">\n <span class=\"metric-label\">Agent:</span>\n <span class=\"metric-value link\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\">\n {{ record.Agent }}\n <i class=\"fa-solid fa-external-link\"></i>\n </span>\n </div>\n }\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <!-- Validation & Retry Panel -->\n @if (record && ((record.ValidationAttemptCount && record.ValidationAttemptCount > 0) || record.ValidationBehavior)) {\n <kendo-panelbar-item [expanded]=\"validationExpanded\" (stateChange)=\"onValidationPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-shield-check\"></i>\n Validation & Retries\n @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n <span class=\"panel-count\">({{ record.ValidationAttemptCount }} attempts)</span>\n }\n @if (record.FinalValidationPassed) {\n <span class=\"panel-badge success\">Passed</span>\n } @else if (record.FinalValidationPassed === false) {\n <span class=\"panel-badge error\">Failed</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <!-- Validation Summary -->\n <div class=\"validation-summary\">\n <div class=\"summary-header\">\n <h4>Validation Summary</h4>\n <div class=\"validation-status\" [class.success]=\"record.FinalValidationPassed\" [class.failed]=\"!record.FinalValidationPassed\">\n <i [class]=\"record.FinalValidationPassed ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n {{ record.FinalValidationPassed ? 'Validation Passed' : 'Validation Failed' }}\n </div>\n </div>\n \n <div class=\"validation-metrics\">\n <div class=\"metric-card small\">\n <div class=\"metric-label\">Total Attempts</div>\n <div class=\"metric-value\">{{ record.ValidationAttemptCount || 0 }}</div>\n </div>\n <div class=\"metric-card small\">\n <div class=\"metric-label\">Successful</div>\n <div class=\"metric-value\">{{ record.SuccessfulValidationCount || 0 }}</div>\n </div>\n <div class=\"metric-card small\">\n <div class=\"metric-label\">Behavior</div>\n <div class=\"metric-value\">{{ record.ValidationBehavior || 'Not set' }}</div>\n </div>\n <div class=\"metric-card small\">\n <div class=\"metric-label\">Retry Strategy</div>\n <div class=\"metric-value\">{{ record.RetryStrategy || 'Not set' }}</div>\n </div>\n </div>\n \n @if (record.FinalValidationError) {\n <div class=\"validation-error\">\n <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Final Validation Error</h5>\n <p>{{ record.FinalValidationError }}</p>\n @if (record && record.ValidationErrorCount && record.ValidationErrorCount > 0) {\n <span class=\"error-count\">{{ record.ValidationErrorCount }} validation errors</span>\n }\n </div>\n }\n \n @if (record.CommonValidationError && record.CommonValidationError !== record.FinalValidationError) {\n <div class=\"common-error\">\n <h5><i class=\"fa-solid fa-repeat\"></i> Most Common Error</h5>\n <p>{{ record.CommonValidationError }}</p>\n </div>\n }\n </div>\n \n <!-- Retry Timeline -->\n @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n <div class=\"retry-timeline\">\n <h4>Retry Timeline</h4>\n <div class=\"timeline-info\">\n <div class=\"timeline-stat\">\n <i class=\"fa-solid fa-clock\"></i>\n <span>First Attempt: {{ record.FirstAttemptAt | date:'short' }}</span>\n </div>\n <div class=\"timeline-stat\">\n <i class=\"fa-solid fa-flag-checkered\"></i>\n <span>Last Attempt: {{ record.LastAttemptAt | date:'short' }}</span>\n </div>\n <div class=\"timeline-stat\">\n <i class=\"fa-solid fa-stopwatch\"></i>\n <span>Total Retry Duration: {{ formatDuration(record.TotalRetryDurationMS) }}</span>\n </div>\n </div>\n </div>\n }\n \n <!-- Validation Attempts Details -->\n @if (validationAttempts && validationAttempts.length > 0) {\n <div class=\"validation-attempts\">\n <h4>Validation Attempts</h4>\n <div class=\"attempts-list\">\n @for (attempt of validationAttempts; track attempt.attemptNumber) {\n <div class=\"attempt-item\" [class.success]=\"attempt.success\" [class.failed]=\"!attempt.success\">\n <div class=\"attempt-number\">\n <i [class]=\"attempt.success ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n Attempt #{{ attempt.attemptNumber }}\n </div>\n <div class=\"attempt-details\">\n <span class=\"attempt-time\">{{ attempt.timestamp }}</span>\n @if (!attempt.success) {\n <span class=\"attempt-error\">{{ attempt.errorMessage || 'Unknown error' }}</span>\n @if (attempt.validationErrorCount > 0) {\n <span class=\"error-count\">({{ attempt.validationErrorCount }} errors)</span>\n }\n }\n @if (attempt.outputLength) {\n <span class=\"output-length\">Output: {{ attempt.outputLength }} chars</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n \n <!-- Validation Summary JSON -->\n @if (validationSummary) {\n <div class=\"validation-json\">\n <h4>Validation Summary Details</h4>\n <div class=\"json-viewer-container\">\n <mj-code-editor \n [(ngModel)]=\"formattedValidationSummary\"\n name=\"formattedValidationSummary\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n \n <!-- Validation Attempts JSON -->\n @if (record.ValidationAttempts) {\n <div class=\"validation-json\">\n <h4>Validation Attempts (Raw JSON)</h4>\n <div class=\"json-viewer-container\">\n <mj-code-editor \n [(ngModel)]=\"formattedValidationAttempts\"\n name=\"formattedValidationAttempts\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n \n <!-- Hierarchy Panel (for parent/child relationships) -->\n @if (record.ParentID || childRuns.length > 0) {\n <kendo-panelbar-item [expanded]=\"hierarchyExpanded\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-sitemap\"></i>\n Run Hierarchy\n @if (childRuns.length > 0) {\n <span class=\"panel-count\">({{ childRuns.length }} children)</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n @if (parentRun) {\n <div class=\"parent-run-section\">\n <h4><i class=\"fa-solid fa-level-up-alt\"></i> Parent Run</h4>\n <div class=\"run-item parent\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', parentRun.ID)\">\n <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n <i [class]=\"'fa-solid ' + getRunTypeIcon(parentRun.RunType)\"></i>\n </div>\n <div class=\"run-item-content\">\n <div class=\"run-item-title\">\n Parent Run #{{ parentRun.ID.substring(0, 8) }}\n <span class=\"run-item-type\">{{ parentRun.RunType }}</span>\n </div>\n <div class=\"run-item-meta\">\n <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(parentRun.ExecutionTimeMS) }}</span>\n <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(parentRun.TokensUsed) }}</span>\n <span><i class=\"fa-solid fa-calendar\"></i> {{ parentRun.RunAt | date:'short' }}</span>\n </div>\n </div>\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n \n @if (childRuns.length > 0) {\n <div class=\"child-runs-section\">\n <h4><i class=\"fa-solid fa-level-down-alt\"></i> Child Runs</h4>\n <div class=\"runs-list\">\n @for (childRun of childRuns; track childRun.ID) {\n <div class=\"run-item child\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', childRun.ID)\">\n <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n <i [class]=\"'fa-solid ' + getRunTypeIcon(childRun.RunType)\"></i>\n </div>\n <div class=\"run-item-content\">\n <div class=\"run-item-title\">\n Child Run #{{ childRun.ID.substring(0, 8) }}\n @if (childRun.ExecutionOrder !== null) {\n <span class=\"execution-order\">#{{ childRun.ExecutionOrder }}</span>\n }\n <span class=\"run-item-type\">{{ childRun.RunType }}</span>\n </div>\n <div class=\"run-item-meta\">\n <span class=\"status-indicator\" [style.color]=\"getStatusColor()\">\n <i [class]=\"'fa-solid ' + getStatusIcon()\"></i>\n {{ childRun.Success ? 'Success' : childRun.ErrorMessage ? 'Failed' : 'Running' }}\n </span>\n <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(childRun.ExecutionTimeMS) }}</span>\n <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(childRun.TokensUsed) }}</span>\n </div>\n </div>\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n \n <!-- Additional Details Panel -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Additional Details\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"detail-fields-grid\">\n @if (record.AgentID) {\n <div class=\"detail-field\">\n <label>Agent</label>\n <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\" title=\"View Agent\">\n <i class=\"fa-solid fa-robot\"></i>\n {{ record.Agent || 'Unknown' }}\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n \n \n @if (record.RunType) {\n <div class=\"detail-field\">\n <label>Run Type</label>\n <div class=\"detail-value\">\n <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\"></i>\n {{ record.RunType }}\n </div>\n </div>\n }\n \n @if (record.ResponseFormat) {\n <div class=\"detail-field\">\n <label>Response Format</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-code\"></i>\n {{ record.ResponseFormat }}\n </div>\n </div>\n }\n \n <div class=\"detail-field\">\n <label>Temperature</label>\n <div class=\"detail-value\" [class.null-value]=\"record.Temperature === null || record.Temperature === undefined\">\n <i class=\"fa-solid fa-temperature-high\"></i>\n {{ record.Temperature !== null && record.Temperature !== undefined ? record.Temperature : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Top P</label>\n <div class=\"detail-value\" [class.null-value]=\"record.TopP === null || record.TopP === undefined\">\n <i class=\"fa-solid fa-percentage\"></i>\n {{ record.TopP !== null && record.TopP !== undefined ? record.TopP : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Top K</label>\n <div class=\"detail-value\" [class.null-value]=\"record.TopK === null || record.TopK === undefined\">\n <i class=\"fa-solid fa-list-ol\"></i>\n {{ record.TopK !== null && record.TopK !== undefined ? record.TopK : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Min P</label>\n <div class=\"detail-value\" [class.null-value]=\"record.MinP === null || record.MinP === undefined\">\n <i class=\"fa-solid fa-filter\"></i>\n {{ record.MinP !== null && record.MinP !== undefined ? record.MinP : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Frequency Penalty</label>\n <div class=\"detail-value\" [class.null-value]=\"record.FrequencyPenalty === null || record.FrequencyPenalty === undefined\">\n <i class=\"fa-solid fa-repeat\"></i>\n {{ record.FrequencyPenalty !== null && record.FrequencyPenalty !== undefined ? record.FrequencyPenalty : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Presence Penalty</label>\n <div class=\"detail-value\" [class.null-value]=\"record.PresencePenalty === null || record.PresencePenalty === undefined\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n {{ record.PresencePenalty !== null && record.PresencePenalty !== undefined ? record.PresencePenalty : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Seed</label>\n <div class=\"detail-value\" [class.null-value]=\"record.Seed === null || record.Seed === undefined\">\n <i class=\"fa-solid fa-seedling\"></i>\n {{ record.Seed !== null && record.Seed !== undefined ? record.Seed : '\u2014' }}\n </div>\n </div>\n \n @if (record.RunAt) {\n <div class=\"detail-field\">\n <label>Started At</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-clock\"></i>\n {{ record.RunAt | date:'medium' }}\n </div>\n </div>\n }\n \n @if (record.CompletedAt) {\n <div class=\"detail-field\">\n <label>Completed At</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-check-circle\"></i>\n {{ record.CompletedAt | date:'medium' }}\n </div>\n </div>\n }\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <!-- Model Specific Response Details Panel -->\n @if (record.ModelSpecificResponseDetails) {\n <kendo-panelbar-item [expanded]=\"modelSpecificExpanded\" (stateChange)=\"onModelSpecificPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-microchip\"></i>\n Model Specific Response Details\n <span class=\"panel-badge\">JSON</span>\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"json-editor-container\">\n <div class=\"json-toolbar\">\n <button kendoButton\n fillMode=\"flat\" \n size=\"small\"\n (click)=\"copyToClipboard(formattedModelSpecificResponseDetails, 'Model Specific Response Details')\"\n title=\"Copy JSON\">\n <i class=\"fa-solid fa-copy\"></i> Copy\n </button>\n </div>\n <mj-code-editor \n [(ngModel)]=\"formattedModelSpecificResponseDetails\"\n name=\"formattedModelSpecificResponseDetails\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 400px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n \n <!-- Model Selection & Performance Panel (v2.78 fields) -->\n <kendo-panelbar-item [expanded]=\"false\" (stateChange)=\"onModelSelectionPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-microchip\"></i>\n Model Selection & Performance\n @if (record.CacheHit) {\n <span class=\"panel-badge success\">Cached</span>\n }\n @if (record.WasSelectedResult) {\n <span class=\"panel-badge success\">Selected</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"detail-fields-grid\">\n <!-- Model Selection Details -->\n <div class=\"detail-field\">\n <label>Status</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-info-circle\"></i>\n {{ record.Status || 'Unknown' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Selection Strategy</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-strategy\"></i>\n {{ record.SelectionStrategy || '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Model Power Rank</label>\n <div class=\"detail-value\" [class.null-value]=\"record.ModelPowerRank === null\">\n <i class=\"fa-solid fa-ranking-star\"></i>\n {{ record.ModelPowerRank !== null ? record.ModelPowerRank : '\u2014' }}\n </div>\n </div>\n \n <!-- Cache Information -->\n <div class=\"detail-field\">\n <label>Cache Hit</label>\n <div class=\"detail-value\">\n <i [class]=\"record.CacheHit ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n {{ record.CacheHit ? 'Yes' : 'No' }}\n </div>\n </div>\n \n @if (record.CacheKey) {\n <div class=\"detail-field full-width\">\n <label>Cache Key</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-key\"></i>\n <code>{{ record.CacheKey }}</code>\n </div>\n </div>\n }\n \n <!-- Judge Information -->\n @if (record.JudgeID) {\n <div class=\"detail-field\">\n <label>Judge Prompt</label>\n <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Prompts', record.JudgeID)\" title=\"View Judge Prompt\">\n <i class=\"fa-solid fa-gavel\"></i>\n {{ record.Judge || 'Unknown' }}\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n \n @if (record.JudgeScore !== null) {\n <div class=\"detail-field\">\n <label>Judge Score</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-star\"></i>\n {{ record.JudgeScore }}\n </div>\n </div>\n }\n \n <div class=\"detail-field\">\n <label>Was Selected Result</label>\n <div class=\"detail-value\">\n <i [class]=\"record.WasSelectedResult ? 'fa-solid fa-trophy' : 'fa-solid fa-times'\"></i>\n {{ record.WasSelectedResult ? 'Yes' : 'No' }}\n </div>\n </div>\n \n <!-- Performance Metrics -->\n <div class=\"detail-field\">\n <label>Streaming Enabled</label>\n <div class=\"detail-value\">\n <i [class]=\"record.StreamingEnabled ? 'fa-solid fa-stream' : 'fa-solid fa-ban'\"></i>\n {{ record.StreamingEnabled ? 'Yes' : 'No' }}\n </div>\n </div>\n \n @if (record.FirstTokenTime !== null) {\n <div class=\"detail-field\">\n <label>First Token Time</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-bolt\"></i>\n {{ record.FirstTokenTime }} ms\n </div>\n </div>\n }\n \n @if (record.Cancelled) {\n <div class=\"detail-field\">\n <label>Cancelled</label>\n <div class=\"detail-value error\">\n <i class=\"fa-solid fa-ban\"></i>\n Yes\n </div>\n </div>\n \n @if (record.CancellationReason) {\n <div class=\"detail-field full-width\">\n <label>Cancellation Reason</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n {{ record.CancellationReason }}\n </div>\n </div>\n }\n }\n </div>\n \n <!-- Model Selection JSON -->\n @if (record.ModelSelection) {\n <div class=\"model-selection-json\">\n <h4>Model Selection Details</h4>\n <div class=\"json-viewer-container\">\n <mj-code-editor \n [(ngModel)]=\"formattedModelSelection\"\n name=\"formattedModelSelection\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n \n <!-- Error Details JSON -->\n @if (record.ErrorDetails) {\n <div class=\"error-details-json\">\n <h4>Error Details</h4>\n <div class=\"json-viewer-container\">\n <mj-code-editor \n [(ngModel)]=\"formattedErrorDetails\"\n name=\"formattedErrorDetails\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n </kendo-panelbar>\n </div>\n </form>\n }\n</div>", styles: ["/* Host and Container Layout */\n:host {\n display: block;\n height: 100%;\n}\n\n.record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n\n.record-form {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0 !important;\n overflow: hidden;\n}\n\n.form-content {\n padding: 16px;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n}\n\n/* Error Info Styles */\n.error-info {\n margin-top: 16px;\n padding: 16px;\n background-color: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n border-radius: 8px;\n}\n\n.finish-reason {\n margin: 0 0 12px 0;\n color: var(--mj-status-error);\n font-size: 14px;\n}\n\n.error-details {\n margin-top: 12px;\n}\n\n.error-details h4 {\n margin: 0 0 8px 0;\n color: color-mix(in srgb, var(--mj-status-error) 80%, black);\n font-size: 14px;\n font-weight: 600;\n}\n\n.error-hint {\n margin: 0;\n color: color-mix(in srgb, var(--mj-status-error) 70%, black);\n font-size: 14px;\n font-style: italic;\n}\n\n/* Header Section */\n.prompt-run-header {\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n padding: 20px;\n margin-bottom: 0;\n}\n\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 20px;\n margin-bottom: 16px;\n}\n\n.run-overview {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n flex: 1;\n}\n\n.run-icon-wrapper {\n width: 56px;\n height: 56px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.run-icon-wrapper i {\n font-size: 24px;\n}\n\n.run-info {\n flex: 1;\n min-width: 0;\n}\n\n.run-title {\n margin: 0 0 8px 0;\n font-size: 1.5em;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.run-id {\n font-size: 0.8em;\n color: var(--mj-text-muted);\n font-weight: 400;\n font-family: 'Courier New', monospace;\n}\n\n.run-meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 16px;\n color: white;\n font-size: 0.85em;\n font-weight: 500;\n}\n\n.status-badge i {\n font-size: 0.9em;\n}\n\n.run-type-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 16px;\n background: var(--mj-bg-surface-sunken);\n font-size: 0.85em;\n font-weight: 500;\n}\n\n.prompt-name, .model-name, .vendor-name {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 16px;\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 0.85em;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.prompt-name:hover, .model-name:hover, .vendor-name:hover {\n background: var(--mj-border-strong);\n color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.original-run {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 16px;\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n font-size: 0.85em;\n}\n\n.original-link {\n color: var(--mj-status-error);\n text-decoration: none;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.original-link:hover {\n color: color-mix(in srgb, var(--mj-status-error) 85%, black);\n text-decoration: underline;\n}\n\n.run-actions {\n display: flex;\n gap: 8px;\n}\n\n/* Metrics Bar */\n.metrics-bar {\n display: flex;\n gap: 24px;\n padding-top: 16px;\n border-top: 1px solid var(--mj-border-default);\n flex-wrap: wrap;\n}\n\n.metric-item {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.metric-item > i {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n width: 24px;\n text-align: center;\n}\n\n.metric-content {\n display: flex;\n flex-direction: column;\n}\n\n.metric-label {\n font-size: 0.75em;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-value {\n font-size: 1.1em;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.config-link {\n color: var(--mj-brand-primary);\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.config-link:hover {\n color: color-mix(in srgb, var(--mj-brand-primary) 75%, black);\n text-decoration: underline;\n}\n\n/* Panels */\n.form-content {\n padding: 16px;\n}\n\n.panel-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n}\n\n/* Nested Sub-Panel Styles */\n.sub-panel-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n font-size: 0.95em;\n}\n\n.sub-panel-content {\n padding: 0;\n}\n\n/* Nested kendo-panelbar styles */\n.k-panelbar .k-panelbar {\n border: none;\n background: transparent;\n}\n\n.k-panelbar .k-panelbar > .k-item {\n border: 1px solid var(--mj-border-default);\n margin-bottom: 8px;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.k-panelbar .k-panelbar > .k-item > .k-link {\n background-color: var(--mj-bg-surface-card);\n padding: 12px 16px;\n}\n\n.k-panelbar .k-panelbar > .k-item.k-expanded > .k-link {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.k-panelbar .k-panelbar .k-content {\n padding: 0;\n background: var(--mj-bg-surface);\n}\n\n/* Ensure chat message viewer takes appropriate height */\n.sub-panel-content mj-chat-message-viewer {\n display: block;\n min-height: 200px;\n max-height: 750px; /* Increased by 50% from 500px */\n height: auto;\n overflow: hidden;\n}\n\n/* Different colors for sub-expansion panels */\n.sub-expansion-panel {\n margin-bottom: 8px;\n}\n\n.sub-expansion-panel::ng-deep .k-expander {\n background-color: var(--mj-bg-surface-card);\n border-color: var(--mj-border-default);\n}\n\n.sub-expansion-panel::ng-deep .k-expander:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.sub-expansion-panel::ng-deep .k-header {\n background-color: var(--mj-bg-surface-card);\n border-color: var(--mj-border-default);\n}\n\n.sub-expansion-panel::ng-deep .k-content {\n background-color: var(--mj-bg-surface);\n border-color: var(--mj-border-default);\n}\n\n.panel-badge {\n margin-left: auto;\n padding: 2px 8px;\n border-radius: 12px;\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 0.75em;\n font-weight: 500;\n}\n\n.panel-badge.error {\n background: var(--mj-status-error);\n color: white;\n}\n\n.panel-count {\n color: var(--mj-text-muted);\n font-weight: 400;\n font-size: 0.9em;\n}\n\n.panel-content {\n padding: 20px;\n max-height: none !important;\n overflow: visible !important;\n}\n\n/* JSON Editor Container */\n.json-editor-container {\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.json-toolbar {\n background: var(--mj-bg-surface-card);\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: flex-end;\n}\n\n/* Error Message */\n.error-message {\n background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-error);\n border-radius: 6px;\n padding: 16px;\n display: flex;\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.error-message i {\n font-size: 1.5em;\n color: var(--mj-status-error);\n flex-shrink: 0;\n}\n\n.error-content h4 {\n margin: 0 0 8px 0;\n color: var(--mj-status-error);\n font-size: 1em;\n}\n\n.error-content p {\n margin: 0;\n color: var(--mj-text-secondary);\n}\n\n/* Empty State */\n.empty-state {\n text-align: center;\n padding: 60px 40px;\n color: var(--mj-text-muted);\n}\n\n.empty-state i {\n font-size: 3em;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.empty-state p {\n margin: 0;\n font-size: 1.1em;\n}\n\n/* Loading State */\n.loading-state {\n text-align: center;\n padding: 60px 40px;\n color: var(--mj-text-muted);\n}\n\n.loading-state i {\n font-size: 3em;\n margin-bottom: 16px;\n opacity: 0.6;\n color: var(--mj-brand-primary);\n}\n\n.loading-state p {\n margin: 0;\n font-size: 1.1em;\n}\n\n/* Metrics Grid */\n.metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 24px;\n}\n\n.metric-card {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 20px;\n}\n\n.metric-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.metric-header i {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.metric-header h4 {\n margin: 0;\n font-size: 0.9em;\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.metric-value.large {\n font-size: 1.8em;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.metric-rollup {\n margin-top: 8px;\n font-size: 0.85em;\n color: var(--mj-text-muted);\n}\n\n.metric-currency {\n margin-top: 4px;\n font-size: 0.85em;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n}\n\n/* Additional Metrics */\n.additional-metrics {\n padding-top: 16px;\n}\n\n.metric-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.metric-row:last-child {\n border-bottom: none;\n}\n\n.metric-row .metric-label {\n font-weight: 500;\n color: var(--mj-text-muted);\n}\n\n.metric-row .metric-value {\n font-weight: 400;\n color: var(--mj-text-primary);\n}\n\n.metric-row .metric-value.link {\n color: var(--mj-brand-primary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: color 0.2s;\n}\n\n.metric-row .metric-value.link:hover {\n color: color-mix(in srgb, var(--mj-brand-primary) 75%, black);\n}\n\n/* Hierarchy Section */\n.parent-run-section,\n.child-runs-section {\n margin-bottom: 24px;\n}\n\n.parent-run-section:last-child,\n.child-runs-section:last-child {\n margin-bottom: 0;\n}\n\n.parent-run-section h4,\n.child-runs-section h4 {\n margin: 0 0 12px 0;\n font-size: 0.95em;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.runs-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.run-item {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 12px 16px;\n display: flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.run-item:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-strong);\n}\n\n.run-item.parent {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.run-item.parent:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.run-item-icon {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.run-item-content {\n flex: 1;\n min-width: 0;\n}\n\n.run-item-title {\n font-weight: 500;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.execution-order {\n background: var(--mj-text-muted);\n color: white;\n padding: 2px 6px;\n border-radius: 10px;\n font-size: 0.75em;\n font-weight: 600;\n}\n\n.run-item-type {\n font-size: 0.85em;\n color: var(--mj-text-muted);\n font-weight: 400;\n}\n\n.run-item-meta {\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 0.85em;\n color: var(--mj-text-muted);\n}\n\n.run-item-meta span {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.status-indicator {\n font-weight: 500;\n}\n\n.run-item > i:last-child {\n color: var(--mj-text-muted);\n font-size: 0.85em;\n}\n\n/* Detail Fields Grid */\n.detail-fields-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n width: 100%;\n min-height: auto;\n overflow: visible;\n}\n\n.detail-field {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-field label {\n font-size: 0.85em;\n color: var(--mj-text-muted);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-value {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 1em;\n color: var(--mj-text-primary);\n padding: 10px 14px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n transition: all 0.2s;\n}\n\n.detail-value i:first-child {\n color: var(--mj-text-muted);\n font-size: 1.1em;\n width: 20px;\n text-align: center;\n}\n\n.detail-value.clickable {\n cursor: pointer;\n}\n\n.detail-value.clickable:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-strong);\n color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.detail-value.clickable i:last-child {\n margin-left: auto;\n font-size: 0.85em;\n opacity: 0.6;\n}\n\n.detail-value.clickable:hover i:last-child {\n opacity: 1;\n}\n\n.detail-value.null-value {\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.detail-value.null-value i:first-child {\n opacity: 0.5;\n}\n\n/* Kendo Overrides */\nkendo-panelbar {\n border: none !important;\n}\n\nkendo-panelbar-item {\n margin-bottom: 8px;\n border: 1px solid var(--mj-border-default) !important;\n border-radius: 8px !important;\n overflow: hidden;\n}\n\nkendo-panelbar-item .k-panelbar-header {\n background: var(--mj-bg-surface-card) !important;\n border: none !important;\n padding: 12px 16px !important;\n}\n\nkendo-panelbar-item .k-panelbar-header:hover {\n background: var(--mj-border-default) !important;\n}\n\nkendo-panelbar-item .k-panelbar-content {\n border: none !important;\n padding: 0 !important;\n max-height: none !important;\n overflow: visible !important;\n}\n\n/* Validation Panel Styles */\n.validation-summary {\n margin-bottom: 24px;\n}\n\n.summary-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.summary-header h4 {\n margin: 0;\n font-size: 1.1em;\n color: var(--mj-text-primary);\n}\n\n.validation-status {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n border-radius: 20px;\n font-weight: 500;\n font-size: 0.9em;\n}\n\n.validation-status.success {\n background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.validation-status.failed {\n background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.validation-metrics {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.metric-card.small {\n padding: 16px;\n text-align: center;\n}\n\n.metric-card.small .metric-label {\n font-size: 0.8em;\n margin-bottom: 8px;\n font-weight: 600;\n}\n\n.metric-card.small .metric-value {\n font-size: 1.4em;\n font-weight: 700;\n}\n\n.validation-error,\n.common-error {\n background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 18%, var(--mj-bg-surface));\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 16px;\n}\n\n.validation-error h5,\n.common-error h5 {\n margin: 0 0 8px 0;\n color: var(--mj-status-error);\n font-size: 0.95em;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.validation-error p,\n.common-error p {\n margin: 0;\n color: var(--mj-text-secondary);\n font-size: 0.9em;\n}\n\n.error-count {\n display: inline-block;\n margin-top: 8px;\n padding: 2px 8px;\n background: var(--mj-status-error);\n color: white;\n border-radius: 12px;\n font-size: 0.75em;\n font-weight: 500;\n}\n\n/* Retry Timeline */\n.retry-timeline {\n margin-bottom: 24px;\n}\n\n.retry-timeline h4 {\n margin: 0 0 12px 0;\n font-size: 1em;\n color: var(--mj-text-secondary);\n}\n\n.timeline-info {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.timeline-stat {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-muted);\n font-size: 0.9em;\n}\n\n.timeline-stat i {\n font-size: 1.1em;\n}\n\n/* Validation Attempts */\n.validation-attempts {\n margin-bottom: 24px;\n}\n\n.validation-attempts h4 {\n margin: 0 0 12px 0;\n font-size: 1em;\n color: var(--mj-text-secondary);\n}\n\n.attempts-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.attempt-item {\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 12px 16px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n\n.attempt-item.success {\n background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-success) 18%, var(--mj-bg-surface));\n}\n\n.attempt-item.failed {\n background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 18%, var(--mj-bg-surface));\n}\n\n.attempt-number {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.attempt-item.success .attempt-number {\n color: var(--mj-status-success);\n}\n\n.attempt-item.failed .attempt-number {\n color: var(--mj-status-error);\n}\n\n.attempt-details {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n font-size: 0.85em;\n}\n\n.attempt-time {\n color: var(--mj-text-muted);\n}\n\n.attempt-error {\n color: var(--mj-status-error);\n flex: 1 0 100%;\n}\n\n.output-length {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n/* Validation JSON */\n.validation-json {\n margin-top: 24px;\n}\n\n.validation-json h4 {\n margin: 0 0 12px 0;\n font-size: 1em;\n color: var(--mj-text-secondary);\n}\n\n.json-viewer-container {\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n/* Panel badge styles */\n.panel-badge.success {\n background: var(--mj-status-success);\n color: white;\n}\n"] }]
|
|
2247
|
+
args: [{ standalone: false, selector: 'mj-ai-prompt-run-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"record-form-container\" style=\"height: 100%; display: flex; flex-direction: column;\">\n @if (record) {\n <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n\n <!-- Header Section -->\n <div class=\"prompt-run-header\">\n <div class=\"header-content\">\n <div class=\"run-overview\">\n <div class=\"run-icon-wrapper\" [style.background-color]=\"getStatusColor() + '20'\">\n <i [class]=\"'fa-solid ' + getStatusIcon()\" [style.color]=\"getStatusColor()\"></i>\n </div>\n <div class=\"run-info\">\n <h1 class=\"run-title\">\n Prompt Run\n @if (record.ID) {\n <span class=\"run-id\">#{{ record.ID.substring(0, 8) }}</span>\n }\n </h1>\n <div class=\"run-meta\">\n <span class=\"status-badge\" [style.background-color]=\"getStatusColor()\">\n <i [class]=\"'fa-solid ' + getStatusIcon()\"></i>\n {{ getStatusText() }}\n </span>\n @if (record.RunType) {\n <span class=\"run-type-badge\" [style.color]=\"getRunTypeColor(record.RunType)\">\n <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\"></i>\n {{ record.RunType }}\n </span>\n }\n @if (prompt) {\n <span class=\"prompt-name\" (click)=\"navigateToEntity('MJ: AI Prompts', prompt.ID)\" title=\"View Prompt\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n {{ prompt.Name }}\n </span>\n }\n @if (model) {\n <span class=\"model-name\" (click)=\"navigateToEntity('MJ: AI Models', model.ID)\" title=\"View Model\">\n <i class=\"fa-solid fa-microchip\"></i>\n {{ model.Name }}\n </span>\n }\n @if (record.Vendor) {\n <span class=\"vendor-name\" (click)=\"navigateToEntity('MJ: AI Vendors', record.VendorID)\" title=\"View Vendor\">\n <i class=\"fa-solid fa-building\"></i>\n {{ record.Vendor }}\n </span>\n }\n @if (record.RerunFromPromptRunID) {\n <span class=\"original-run\" title=\"View Original Run\">\n <i class=\"fa-solid fa-level-up-alt\"></i>\n <a (click)=\"navigateToOriginalRun()\" class=\"original-link\">Original Run</a>\n </span>\n }\n </div>\n </div>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"run-actions\">\n <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"reRunPrompt()\" title=\"Re-run this prompt\">\n <i class=\"fa-solid fa-play-circle\"></i>\n Re-Run\n </button>\n <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshData()\" title=\"Refresh data\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n </div>\n </div>\n \n <!-- Key Metrics Bar -->\n @if (record.ConfigurationID) {\n <!-- Configuration Bar -->\n <div class=\"metrics-bar\">\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-cog\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Configuration</div>\n <div class=\"metric-value\">\n <a href=\"javascript:void(0)\" class=\"config-link\" (click)=\"navigateToEntity('MJ: AI Configurations', record.ConfigurationID)\">\n {{ record.Configuration || 'Unknown' }}\n </a>\n </div>\n </div>\n </div>\n @if (record.Temperature !== null && record.Temperature !== undefined) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-temperature-high\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Temperature</div>\n <div class=\"metric-value\">{{ record.Temperature }}</div>\n </div>\n </div>\n }\n @if (record.TopP !== null && record.TopP !== undefined) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-percentage\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Top P</div>\n <div class=\"metric-value\">{{ record.TopP }}</div>\n </div>\n </div>\n }\n @if (record.TopK !== null && record.TopK !== undefined) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-list-ol\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Top K</div>\n <div class=\"metric-value\">{{ record.TopK }}</div>\n </div>\n </div>\n }\n @if (record.EffortLevel !== null && record.EffortLevel !== undefined) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-tachometer-alt\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Effort Level</div>\n <div class=\"metric-value\">{{ record.EffortLevel }}</div>\n </div>\n </div>\n }\n @if (record.ResponseFormat) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-code\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Response Format</div>\n <div class=\"metric-value\">{{ record.ResponseFormat }}</div>\n </div>\n </div>\n }\n </div>\n \n <!-- Execution Metrics Bar (always show when configuration exists) -->\n <div class=\"metrics-bar\">\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Duration</div>\n <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n </div>\n </div>\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-coins\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Total Tokens</div>\n <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n </div>\n </div>\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Cost</div>\n <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n </div>\n </div>\n @if (record.RunAt) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-calendar\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Started</div>\n <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n </div>\n </div>\n }\n </div>\n } @else {\n <!-- Execution Metrics Bar (original behavior when no configuration) -->\n <div class=\"metrics-bar\">\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-clock\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Duration</div>\n <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n </div>\n </div>\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-coins\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Total Tokens</div>\n <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n </div>\n </div>\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Cost</div>\n <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n </div>\n </div>\n @if (record.RunAt) {\n <div class=\"metric-item\">\n <i class=\"fa-solid fa-calendar\"></i>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Started</div>\n <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Main Content with Expansion Panels -->\n <div class=\"form-content\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n <kendo-panelbar [keepItemContent]=\"true\">\n \n <!-- Input Panel with nested sub-panels -->\n <kendo-panelbar-item [expanded]=\"inputExpanded\" (stateChange)=\"onInputPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-comment-dots\"></i>\n Input\n @if (record.Messages && record.Messages.trim() !== '') {\n <span class=\"panel-badge\">JSON</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n @if (record.Messages && record.Messages.trim() !== '') {\n <!-- Nested expansion panels for sub-sections -->\n <div class=\"nested-panels\">\n <!-- Messages Sub-Panel -->\n <kendo-expansionpanel \n [expanded]=\"messagesExpanded\" \n class=\"sub-expansion-panel\"\n [animation]=\"false\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span class=\"sub-panel-title\">\n <i class=\"fa-solid fa-comments\"></i>\n Messages\n @if (chatMessages.length > 0) {\n <span class=\"panel-count\">({{ chatMessages.length }})</span>\n }\n </span>\n </ng-template>\n <div class=\"sub-panel-content\">\n @if (isParsingMessages || isLoadingRelatedData) {\n <div class=\"loading-state\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <p>Loading messages...</p>\n </div>\n } @else if (chatMessages.length > 0) {\n <mj-chat-message-viewer \n [messages]=\"chatMessages\">\n </mj-chat-message-viewer>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comment-slash\"></i>\n <p>No chat messages found</p>\n </div>\n }\n </div>\n </kendo-expansionpanel>\n \n <!-- Data Sub-Panel -->\n <kendo-expansionpanel \n [expanded]=\"dataExpanded\" \n class=\"sub-expansion-panel\"\n [animation]=\"false\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span class=\"sub-panel-title\">\n <i class=\"fa-solid fa-database\"></i>\n Data\n @if (inputData) {\n <span class=\"panel-badge\">Object</span>\n }\n </span>\n </ng-template>\n <div class=\"sub-panel-content\">\n @if (inputData && formattedData) {\n <div class=\"json-editor-container\">\n <div class=\"json-toolbar\">\n <button kendoButton\n fillMode=\"flat\" \n size=\"small\"\n (click)=\"copyToClipboard(formattedData, 'Data')\"\n title=\"Copy JSON\">\n <i class=\"fa-solid fa-copy\"></i> Copy\n </button>\n </div>\n <mj-code-editor \n [(ngModel)]=\"formattedData\"\n name=\"formattedData\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-database\"></i>\n <p>No data object found</p>\n </div>\n }\n </div>\n </kendo-expansionpanel>\n \n <!-- Raw Sub-Panel -->\n <kendo-expansionpanel \n [expanded]=\"rawExpanded\" \n class=\"sub-expansion-panel\"\n [animation]=\"false\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span class=\"sub-panel-title\">\n <i class=\"fa-solid fa-code\"></i>\n Raw\n </span>\n </ng-template>\n <div class=\"sub-panel-content\">\n <div class=\"json-editor-container\">\n <div class=\"json-toolbar\">\n <button kendoButton\n fillMode=\"flat\" \n size=\"small\"\n (click)=\"copyToClipboard(formattedMessages, 'Messages')\"\n title=\"Copy JSON\">\n <i class=\"fa-solid fa-copy\"></i> Copy\n </button>\n </div>\n <mj-code-editor \n [(ngModel)]=\"formattedMessages\"\n name=\"formattedMessages\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 400px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n </kendo-expansionpanel>\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-comment-slash\"></i>\n <p>No input messages recorded</p>\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <!-- Result Panel -->\n <kendo-panelbar-item [expanded]=\"resultExpanded\" (stateChange)=\"onResultPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-square-check\"></i>\n Result\n @if (record.Result && record.Result.trim() !== '') {\n <span class=\"panel-badge\">JSON</span>\n }\n @if (record.ErrorMessage) {\n <span class=\"panel-badge error\">Error</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n @if (record.ErrorMessage) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n <div class=\"error-content\">\n <h4>Error Message</h4>\n <p>{{ record.ErrorMessage }}</p>\n </div>\n </div>\n }\n \n @if (record.Result && record.Result.trim() !== '') {\n <div class=\"json-editor-container\">\n <div class=\"json-toolbar\">\n <button kendoButton\n fillMode=\"flat\" \n size=\"small\"\n (click)=\"copyToClipboard(formattedResult, 'Result')\"\n title=\"Copy JSON\">\n <i class=\"fa-solid fa-copy\"></i> Copy\n </button>\n </div>\n <mj-code-editor \n [(ngModel)]=\"formattedResult\"\n name=\"formattedResult\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 400px; width: 100%;\">\n </mj-code-editor>\n </div>\n } @else if (!record.ErrorMessage) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No result data recorded</p>\n @if (record.Status === 'Failed' || record.Success === false) {\n <div class=\"error-info\">\n @if (record.Status) {\n <p class=\"finish-reason\">\n <strong>Status:</strong> {{ record.Status }}\n </p>\n }\n @if (formattedErrorDetails) {\n <div class=\"error-details\">\n <h4>Error Details</h4>\n <mj-code-editor\n [ngModel]=\"formattedErrorDetails\"\n [disabled]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n }\n @if (!formattedErrorDetails) {\n <p class=\"error-hint\">\n The prompt execution failed but no additional error information is available.\n </p>\n }\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <!-- Token Usage & Metrics Panel -->\n <kendo-panelbar-item [expanded]=\"metricsExpanded\" (stateChange)=\"onMetricsPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-chart-line\"></i>\n Token Usage & Metrics\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"metrics-grid\">\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-message\"></i>\n <h4>Prompt Tokens</h4>\n </div>\n <div class=\"metric-value large\">{{ formatTokens(record.TokensPrompt) }}</div>\n @if (record.TokensPromptRollup && record.TokensPromptRollup !== record.TokensPrompt) {\n <div class=\"metric-rollup\">\n <span>Rollup: {{ formatTokens(record.TokensPromptRollup) }}</span>\n </div>\n }\n </div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-reply\"></i>\n <h4>Completion Tokens</h4>\n </div>\n <div class=\"metric-value large\">{{ formatTokens(record.TokensCompletion) }}</div>\n @if (record.TokensCompletionRollup && record.TokensCompletionRollup !== record.TokensCompletion) {\n <div class=\"metric-rollup\">\n <span>Rollup: {{ formatTokens(record.TokensCompletionRollup) }}</span>\n </div>\n }\n </div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-coins\"></i>\n <h4>Total Tokens</h4>\n </div>\n <div class=\"metric-value large\">{{ formatTokens(record.TokensUsed) }}</div>\n @if (record.TokensUsedRollup && record.TokensUsedRollup !== record.TokensUsed) {\n <div class=\"metric-rollup\">\n <span>Rollup: {{ formatTokens(record.TokensUsedRollup) }}</span>\n </div>\n }\n </div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-dollar-sign\"></i>\n <h4>Cost</h4>\n </div>\n <div class=\"metric-value large\">{{ formatCost(record.Cost) }}</div>\n @if (record.TotalCost && record.TotalCost !== record.Cost) {\n <div class=\"metric-rollup\">\n <span>Total: {{ formatCost(record.TotalCost) }}</span>\n </div>\n }\n @if (record.CostCurrency) {\n <div class=\"metric-currency\">{{ record.CostCurrency }}</div>\n }\n </div>\n \n <!-- Timing Metrics -->\n @if (record.QueueTime != null) {\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-hourglass-start\"></i>\n <h4>Queue Time</h4>\n </div>\n <div class=\"metric-value large\">{{ formatDuration(record.QueueTime) }}</div>\n </div>\n }\n \n @if (record.PromptTime != null) {\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-brain\"></i>\n <h4>Prompt Time</h4>\n </div>\n <div class=\"metric-value large\">{{ formatDuration(record.PromptTime) }}</div>\n </div>\n }\n \n @if (record.CompletionTime != null) {\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fa-solid fa-flag-checkered\"></i>\n <h4>Completion Time</h4>\n </div>\n <div class=\"metric-value large\">{{ formatDuration(record.CompletionTime) }}</div>\n </div>\n }\n </div>\n \n <!-- Additional Metrics -->\n <div class=\"additional-metrics\">\n @if (record.ExecutionOrder !== null) {\n <div class=\"metric-row\">\n <span class=\"metric-label\">Execution Order:</span>\n <span class=\"metric-value\">{{ record.ExecutionOrder }}</span>\n </div>\n }\n @if (record.AgentID) {\n <div class=\"metric-row\">\n <span class=\"metric-label\">Agent:</span>\n <span class=\"metric-value link\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\">\n {{ record.Agent }}\n <i class=\"fa-solid fa-external-link\"></i>\n </span>\n </div>\n }\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <!-- Validation & Retry Panel -->\n @if (record && ((record.ValidationAttemptCount && record.ValidationAttemptCount > 0) || record.ValidationBehavior)) {\n <kendo-panelbar-item [expanded]=\"validationExpanded\" (stateChange)=\"onValidationPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-shield-check\"></i>\n Validation & Retries\n @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n <span class=\"panel-count\">({{ record.ValidationAttemptCount }} attempts)</span>\n }\n @if (record.FinalValidationPassed) {\n <span class=\"panel-badge success\">Passed</span>\n } @else if (record.FinalValidationPassed === false) {\n <span class=\"panel-badge error\">Failed</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <!-- Validation Summary -->\n <div class=\"validation-summary\">\n <div class=\"summary-header\">\n <h4>Validation Summary</h4>\n <div class=\"validation-status\" [class.success]=\"record.FinalValidationPassed\" [class.failed]=\"!record.FinalValidationPassed\">\n <i [class]=\"record.FinalValidationPassed ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n {{ record.FinalValidationPassed ? 'Validation Passed' : 'Validation Failed' }}\n </div>\n </div>\n \n <div class=\"validation-metrics\">\n <div class=\"metric-card small\">\n <div class=\"metric-label\">Total Attempts</div>\n <div class=\"metric-value\">{{ record.ValidationAttemptCount || 0 }}</div>\n </div>\n <div class=\"metric-card small\">\n <div class=\"metric-label\">Successful</div>\n <div class=\"metric-value\">{{ record.SuccessfulValidationCount || 0 }}</div>\n </div>\n <div class=\"metric-card small\">\n <div class=\"metric-label\">Behavior</div>\n <div class=\"metric-value\">{{ record.ValidationBehavior || 'Not set' }}</div>\n </div>\n <div class=\"metric-card small\">\n <div class=\"metric-label\">Retry Strategy</div>\n <div class=\"metric-value\">{{ record.RetryStrategy || 'Not set' }}</div>\n </div>\n </div>\n \n @if (record.FinalValidationError) {\n <div class=\"validation-error\">\n <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Final Validation Error</h5>\n <p>{{ record.FinalValidationError }}</p>\n @if (record && record.ValidationErrorCount && record.ValidationErrorCount > 0) {\n <span class=\"error-count\">{{ record.ValidationErrorCount }} validation errors</span>\n }\n </div>\n }\n \n @if (record.CommonValidationError && record.CommonValidationError !== record.FinalValidationError) {\n <div class=\"common-error\">\n <h5><i class=\"fa-solid fa-repeat\"></i> Most Common Error</h5>\n <p>{{ record.CommonValidationError }}</p>\n </div>\n }\n </div>\n \n <!-- Retry Timeline -->\n @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n <div class=\"retry-timeline\">\n <h4>Retry Timeline</h4>\n <div class=\"timeline-info\">\n <div class=\"timeline-stat\">\n <i class=\"fa-solid fa-clock\"></i>\n <span>First Attempt: {{ record.FirstAttemptAt | date:'short' }}</span>\n </div>\n <div class=\"timeline-stat\">\n <i class=\"fa-solid fa-flag-checkered\"></i>\n <span>Last Attempt: {{ record.LastAttemptAt | date:'short' }}</span>\n </div>\n <div class=\"timeline-stat\">\n <i class=\"fa-solid fa-stopwatch\"></i>\n <span>Total Retry Duration: {{ formatDuration(record.TotalRetryDurationMS) }}</span>\n </div>\n </div>\n </div>\n }\n \n <!-- Validation Attempts Details -->\n @if (validationAttempts && validationAttempts.length > 0) {\n <div class=\"validation-attempts\">\n <h4>Validation Attempts</h4>\n <div class=\"attempts-list\">\n @for (attempt of validationAttempts; track attempt.attemptNumber) {\n <div class=\"attempt-item\" [class.success]=\"attempt.success\" [class.failed]=\"!attempt.success\">\n <div class=\"attempt-number\">\n <i [class]=\"attempt.success ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n Attempt #{{ attempt.attemptNumber }}\n </div>\n <div class=\"attempt-details\">\n <span class=\"attempt-time\">{{ attempt.timestamp }}</span>\n @if (!attempt.success) {\n <span class=\"attempt-error\">{{ attempt.errorMessage || 'Unknown error' }}</span>\n @if (attempt.validationErrorCount > 0) {\n <span class=\"error-count\">({{ attempt.validationErrorCount }} errors)</span>\n }\n }\n @if (attempt.outputLength) {\n <span class=\"output-length\">Output: {{ attempt.outputLength }} chars</span>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n \n <!-- Validation Summary JSON -->\n @if (validationSummary) {\n <div class=\"validation-json\">\n <h4>Validation Summary Details</h4>\n <div class=\"json-viewer-container\">\n <mj-code-editor \n [(ngModel)]=\"formattedValidationSummary\"\n name=\"formattedValidationSummary\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n \n <!-- Validation Attempts JSON -->\n @if (record.ValidationAttempts) {\n <div class=\"validation-json\">\n <h4>Validation Attempts (Raw JSON)</h4>\n <div class=\"json-viewer-container\">\n <mj-code-editor \n [(ngModel)]=\"formattedValidationAttempts\"\n name=\"formattedValidationAttempts\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n \n <!-- Hierarchy Panel (for parent/child relationships) -->\n @if (record.ParentID || childRuns.length > 0) {\n <kendo-panelbar-item [expanded]=\"hierarchyExpanded\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-sitemap\"></i>\n Run Hierarchy\n @if (childRuns.length > 0) {\n <span class=\"panel-count\">({{ childRuns.length }} children)</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n @if (parentRun) {\n <div class=\"parent-run-section\">\n <h4><i class=\"fa-solid fa-level-up-alt\"></i> Parent Run</h4>\n <div class=\"run-item parent\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', parentRun.ID)\">\n <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n <i [class]=\"'fa-solid ' + getRunTypeIcon(parentRun.RunType)\"></i>\n </div>\n <div class=\"run-item-content\">\n <div class=\"run-item-title\">\n Parent Run #{{ parentRun.ID.substring(0, 8) }}\n <span class=\"run-item-type\">{{ parentRun.RunType }}</span>\n </div>\n <div class=\"run-item-meta\">\n <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(parentRun.ExecutionTimeMS) }}</span>\n <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(parentRun.TokensUsed) }}</span>\n <span><i class=\"fa-solid fa-calendar\"></i> {{ parentRun.RunAt | date:'short' }}</span>\n </div>\n </div>\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n \n @if (childRuns.length > 0) {\n <div class=\"child-runs-section\">\n <h4><i class=\"fa-solid fa-level-down-alt\"></i> Child Runs</h4>\n <div class=\"runs-list\">\n @for (childRun of childRuns; track childRun.ID) {\n <div class=\"run-item child\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', childRun.ID)\">\n <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n <i [class]=\"'fa-solid ' + getRunTypeIcon(childRun.RunType)\"></i>\n </div>\n <div class=\"run-item-content\">\n <div class=\"run-item-title\">\n Child Run #{{ childRun.ID.substring(0, 8) }}\n @if (childRun.ExecutionOrder !== null) {\n <span class=\"execution-order\">#{{ childRun.ExecutionOrder }}</span>\n }\n <span class=\"run-item-type\">{{ childRun.RunType }}</span>\n </div>\n <div class=\"run-item-meta\">\n <span class=\"status-indicator\" [style.color]=\"getStatusColor()\">\n <i [class]=\"'fa-solid ' + getStatusIcon()\"></i>\n {{ childRun.Success ? 'Success' : childRun.ErrorMessage ? 'Failed' : 'Running' }}\n </span>\n <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(childRun.ExecutionTimeMS) }}</span>\n <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(childRun.TokensUsed) }}</span>\n </div>\n </div>\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n }\n </div>\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n \n <!-- Additional Details Panel -->\n <kendo-panelbar-item [expanded]=\"false\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-info-circle\"></i>\n Additional Details\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"detail-fields-grid\">\n @if (record.AgentID) {\n <div class=\"detail-field\">\n <label>Agent</label>\n <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\" title=\"View Agent\">\n <i class=\"fa-solid fa-robot\"></i>\n {{ record.Agent || 'Unknown' }}\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n \n \n @if (record.RunType) {\n <div class=\"detail-field\">\n <label>Run Type</label>\n <div class=\"detail-value\">\n <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\"></i>\n {{ record.RunType }}\n </div>\n </div>\n }\n \n @if (record.ResponseFormat) {\n <div class=\"detail-field\">\n <label>Response Format</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-code\"></i>\n {{ record.ResponseFormat }}\n </div>\n </div>\n }\n \n <div class=\"detail-field\">\n <label>Temperature</label>\n <div class=\"detail-value\" [class.null-value]=\"record.Temperature === null || record.Temperature === undefined\">\n <i class=\"fa-solid fa-temperature-high\"></i>\n {{ record.Temperature !== null && record.Temperature !== undefined ? record.Temperature : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Top P</label>\n <div class=\"detail-value\" [class.null-value]=\"record.TopP === null || record.TopP === undefined\">\n <i class=\"fa-solid fa-percentage\"></i>\n {{ record.TopP !== null && record.TopP !== undefined ? record.TopP : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Top K</label>\n <div class=\"detail-value\" [class.null-value]=\"record.TopK === null || record.TopK === undefined\">\n <i class=\"fa-solid fa-list-ol\"></i>\n {{ record.TopK !== null && record.TopK !== undefined ? record.TopK : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Min P</label>\n <div class=\"detail-value\" [class.null-value]=\"record.MinP === null || record.MinP === undefined\">\n <i class=\"fa-solid fa-filter\"></i>\n {{ record.MinP !== null && record.MinP !== undefined ? record.MinP : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Frequency Penalty</label>\n <div class=\"detail-value\" [class.null-value]=\"record.FrequencyPenalty === null || record.FrequencyPenalty === undefined\">\n <i class=\"fa-solid fa-repeat\"></i>\n {{ record.FrequencyPenalty !== null && record.FrequencyPenalty !== undefined ? record.FrequencyPenalty : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Presence Penalty</label>\n <div class=\"detail-value\" [class.null-value]=\"record.PresencePenalty === null || record.PresencePenalty === undefined\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n {{ record.PresencePenalty !== null && record.PresencePenalty !== undefined ? record.PresencePenalty : '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Seed</label>\n <div class=\"detail-value\" [class.null-value]=\"record.Seed === null || record.Seed === undefined\">\n <i class=\"fa-solid fa-seedling\"></i>\n {{ record.Seed !== null && record.Seed !== undefined ? record.Seed : '\u2014' }}\n </div>\n </div>\n\n <div class=\"detail-field\">\n <label>Stop Sequences</label>\n <div class=\"detail-value\" [class.null-value]=\"!record.StopSequences\">\n <i class=\"fa-solid fa-stop-circle\"></i>\n {{ record.StopSequences || '\u2014' }}\n </div>\n </div>\n\n <div class=\"detail-field\">\n <label>Assistant Prefill</label>\n <div class=\"detail-value\" [class.null-value]=\"!record.AssistantPrefill\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n {{ record.AssistantPrefill || '\u2014' }}\n </div>\n </div>\n\n @if (record.RunAt) {\n <div class=\"detail-field\">\n <label>Started At</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-clock\"></i>\n {{ record.RunAt | date:'medium' }}\n </div>\n </div>\n }\n \n @if (record.CompletedAt) {\n <div class=\"detail-field\">\n <label>Completed At</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-check-circle\"></i>\n {{ record.CompletedAt | date:'medium' }}\n </div>\n </div>\n }\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <!-- Model Specific Response Details Panel -->\n @if (record.ModelSpecificResponseDetails) {\n <kendo-panelbar-item [expanded]=\"modelSpecificExpanded\" (stateChange)=\"onModelSpecificPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-microchip\"></i>\n Model Specific Response Details\n <span class=\"panel-badge\">JSON</span>\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"json-editor-container\">\n <div class=\"json-toolbar\">\n <button kendoButton\n fillMode=\"flat\" \n size=\"small\"\n (click)=\"copyToClipboard(formattedModelSpecificResponseDetails, 'Model Specific Response Details')\"\n title=\"Copy JSON\">\n <i class=\"fa-solid fa-copy\"></i> Copy\n </button>\n </div>\n <mj-code-editor \n [(ngModel)]=\"formattedModelSpecificResponseDetails\"\n name=\"formattedModelSpecificResponseDetails\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 400px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n }\n \n <!-- Model Selection & Performance Panel (v2.78 fields) -->\n <kendo-panelbar-item [expanded]=\"false\" (stateChange)=\"onModelSelectionPanelToggle($event)\">\n <ng-template kendoPanelBarItemTitle>\n <span class=\"panel-title\">\n <i class=\"fa-solid fa-microchip\"></i>\n Model Selection & Performance\n @if (record.CacheHit) {\n <span class=\"panel-badge success\">Cached</span>\n }\n @if (record.WasSelectedResult) {\n <span class=\"panel-badge success\">Selected</span>\n }\n </span>\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"panel-content\">\n <div class=\"detail-fields-grid\">\n <!-- Model Selection Details -->\n <div class=\"detail-field\">\n <label>Status</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-info-circle\"></i>\n {{ record.Status || 'Unknown' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Selection Strategy</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-strategy\"></i>\n {{ record.SelectionStrategy || '\u2014' }}\n </div>\n </div>\n \n <div class=\"detail-field\">\n <label>Model Power Rank</label>\n <div class=\"detail-value\" [class.null-value]=\"record.ModelPowerRank === null\">\n <i class=\"fa-solid fa-ranking-star\"></i>\n {{ record.ModelPowerRank !== null ? record.ModelPowerRank : '\u2014' }}\n </div>\n </div>\n \n <!-- Cache Information -->\n <div class=\"detail-field\">\n <label>Cache Hit</label>\n <div class=\"detail-value\">\n <i [class]=\"record.CacheHit ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n {{ record.CacheHit ? 'Yes' : 'No' }}\n </div>\n </div>\n \n @if (record.CacheKey) {\n <div class=\"detail-field full-width\">\n <label>Cache Key</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-key\"></i>\n <code>{{ record.CacheKey }}</code>\n </div>\n </div>\n }\n \n <!-- Judge Information -->\n @if (record.JudgeID) {\n <div class=\"detail-field\">\n <label>Judge Prompt</label>\n <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Prompts', record.JudgeID)\" title=\"View Judge Prompt\">\n <i class=\"fa-solid fa-gavel\"></i>\n {{ record.Judge || 'Unknown' }}\n <i class=\"fa-solid fa-external-link\"></i>\n </div>\n </div>\n }\n \n @if (record.JudgeScore !== null) {\n <div class=\"detail-field\">\n <label>Judge Score</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-star\"></i>\n {{ record.JudgeScore }}\n </div>\n </div>\n }\n \n <div class=\"detail-field\">\n <label>Was Selected Result</label>\n <div class=\"detail-value\">\n <i [class]=\"record.WasSelectedResult ? 'fa-solid fa-trophy' : 'fa-solid fa-times'\"></i>\n {{ record.WasSelectedResult ? 'Yes' : 'No' }}\n </div>\n </div>\n \n <!-- Performance Metrics -->\n <div class=\"detail-field\">\n <label>Streaming Enabled</label>\n <div class=\"detail-value\">\n <i [class]=\"record.StreamingEnabled ? 'fa-solid fa-stream' : 'fa-solid fa-ban'\"></i>\n {{ record.StreamingEnabled ? 'Yes' : 'No' }}\n </div>\n </div>\n \n @if (record.FirstTokenTime !== null) {\n <div class=\"detail-field\">\n <label>First Token Time</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-bolt\"></i>\n {{ record.FirstTokenTime }} ms\n </div>\n </div>\n }\n \n @if (record.Cancelled) {\n <div class=\"detail-field\">\n <label>Cancelled</label>\n <div class=\"detail-value error\">\n <i class=\"fa-solid fa-ban\"></i>\n Yes\n </div>\n </div>\n \n @if (record.CancellationReason) {\n <div class=\"detail-field full-width\">\n <label>Cancellation Reason</label>\n <div class=\"detail-value\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n {{ record.CancellationReason }}\n </div>\n </div>\n }\n }\n </div>\n \n <!-- Model Selection JSON -->\n @if (record.ModelSelection) {\n <div class=\"model-selection-json\">\n <h4>Model Selection Details</h4>\n <div class=\"json-viewer-container\">\n <mj-code-editor \n [(ngModel)]=\"formattedModelSelection\"\n name=\"formattedModelSelection\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n \n <!-- Error Details JSON -->\n @if (record.ErrorDetails) {\n <div class=\"error-details-json\">\n <h4>Error Details</h4>\n <div class=\"json-viewer-container\">\n <mj-code-editor \n [(ngModel)]=\"formattedErrorDetails\"\n name=\"formattedErrorDetails\"\n [readonly]=\"true\"\n [language]=\"'json'\"\n [lineWrapping]=\"true\"\n style=\"height: 200px; width: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n </kendo-panelbar>\n </div>\n </form>\n }\n</div>", styles: ["/* Host and Container Layout */\n:host {\n display: block;\n height: 100%;\n}\n\n.record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n\n.record-form {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0 !important;\n overflow: hidden;\n}\n\n.form-content {\n padding: 16px;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n}\n\n/* Error Info Styles */\n.error-info {\n margin-top: 16px;\n padding: 16px;\n background-color: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n border-radius: 8px;\n}\n\n.finish-reason {\n margin: 0 0 12px 0;\n color: var(--mj-status-error);\n font-size: 14px;\n}\n\n.error-details {\n margin-top: 12px;\n}\n\n.error-details h4 {\n margin: 0 0 8px 0;\n color: color-mix(in srgb, var(--mj-status-error) 80%, black);\n font-size: 14px;\n font-weight: 600;\n}\n\n.error-hint {\n margin: 0;\n color: color-mix(in srgb, var(--mj-status-error) 70%, black);\n font-size: 14px;\n font-style: italic;\n}\n\n/* Header Section */\n.prompt-run-header {\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n padding: 20px;\n margin-bottom: 0;\n}\n\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 20px;\n margin-bottom: 16px;\n}\n\n.run-overview {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n flex: 1;\n}\n\n.run-icon-wrapper {\n width: 56px;\n height: 56px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.run-icon-wrapper i {\n font-size: 24px;\n}\n\n.run-info {\n flex: 1;\n min-width: 0;\n}\n\n.run-title {\n margin: 0 0 8px 0;\n font-size: 1.5em;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.run-id {\n font-size: 0.8em;\n color: var(--mj-text-muted);\n font-weight: 400;\n font-family: 'Courier New', monospace;\n}\n\n.run-meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 16px;\n color: white;\n font-size: 0.85em;\n font-weight: 500;\n}\n\n.status-badge i {\n font-size: 0.9em;\n}\n\n.run-type-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 16px;\n background: var(--mj-bg-surface-sunken);\n font-size: 0.85em;\n font-weight: 500;\n}\n\n.prompt-name, .model-name, .vendor-name {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 16px;\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 0.85em;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.prompt-name:hover, .model-name:hover, .vendor-name:hover {\n background: var(--mj-border-strong);\n color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.original-run {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 16px;\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n font-size: 0.85em;\n}\n\n.original-link {\n color: var(--mj-status-error);\n text-decoration: none;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.original-link:hover {\n color: color-mix(in srgb, var(--mj-status-error) 85%, black);\n text-decoration: underline;\n}\n\n.run-actions {\n display: flex;\n gap: 8px;\n}\n\n/* Metrics Bar */\n.metrics-bar {\n display: flex;\n gap: 24px;\n padding-top: 16px;\n border-top: 1px solid var(--mj-border-default);\n flex-wrap: wrap;\n}\n\n.metric-item {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.metric-item > i {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n width: 24px;\n text-align: center;\n}\n\n.metric-content {\n display: flex;\n flex-direction: column;\n}\n\n.metric-label {\n font-size: 0.75em;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-value {\n font-size: 1.1em;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.config-link {\n color: var(--mj-brand-primary);\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.config-link:hover {\n color: color-mix(in srgb, var(--mj-brand-primary) 75%, black);\n text-decoration: underline;\n}\n\n/* Panels */\n.form-content {\n padding: 16px;\n}\n\n.panel-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n}\n\n/* Nested Sub-Panel Styles */\n.sub-panel-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 500;\n font-size: 0.95em;\n}\n\n.sub-panel-content {\n padding: 0;\n}\n\n/* Nested kendo-panelbar styles */\n.k-panelbar .k-panelbar {\n border: none;\n background: transparent;\n}\n\n.k-panelbar .k-panelbar > .k-item {\n border: 1px solid var(--mj-border-default);\n margin-bottom: 8px;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.k-panelbar .k-panelbar > .k-item > .k-link {\n background-color: var(--mj-bg-surface-card);\n padding: 12px 16px;\n}\n\n.k-panelbar .k-panelbar > .k-item.k-expanded > .k-link {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.k-panelbar .k-panelbar .k-content {\n padding: 0;\n background: var(--mj-bg-surface);\n}\n\n/* Ensure chat message viewer takes appropriate height */\n.sub-panel-content mj-chat-message-viewer {\n display: block;\n min-height: 200px;\n max-height: 750px; /* Increased by 50% from 500px */\n height: auto;\n overflow: hidden;\n}\n\n/* Different colors for sub-expansion panels */\n.sub-expansion-panel {\n margin-bottom: 8px;\n}\n\n.sub-expansion-panel::ng-deep .k-expander {\n background-color: var(--mj-bg-surface-card);\n border-color: var(--mj-border-default);\n}\n\n.sub-expansion-panel::ng-deep .k-expander:hover {\n background-color: var(--mj-bg-surface-sunken);\n}\n\n.sub-expansion-panel::ng-deep .k-header {\n background-color: var(--mj-bg-surface-card);\n border-color: var(--mj-border-default);\n}\n\n.sub-expansion-panel::ng-deep .k-content {\n background-color: var(--mj-bg-surface);\n border-color: var(--mj-border-default);\n}\n\n.panel-badge {\n margin-left: auto;\n padding: 2px 8px;\n border-radius: 12px;\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n font-size: 0.75em;\n font-weight: 500;\n}\n\n.panel-badge.error {\n background: var(--mj-status-error);\n color: white;\n}\n\n.panel-count {\n color: var(--mj-text-muted);\n font-weight: 400;\n font-size: 0.9em;\n}\n\n.panel-content {\n padding: 20px;\n max-height: none !important;\n overflow: visible !important;\n}\n\n/* JSON Editor Container */\n.json-editor-container {\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.json-toolbar {\n background: var(--mj-bg-surface-card);\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: flex-end;\n}\n\n/* Error Message */\n.error-message {\n background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-error);\n border-radius: 6px;\n padding: 16px;\n display: flex;\n gap: 16px;\n margin-bottom: 16px;\n}\n\n.error-message i {\n font-size: 1.5em;\n color: var(--mj-status-error);\n flex-shrink: 0;\n}\n\n.error-content h4 {\n margin: 0 0 8px 0;\n color: var(--mj-status-error);\n font-size: 1em;\n}\n\n.error-content p {\n margin: 0;\n color: var(--mj-text-secondary);\n}\n\n/* Empty State */\n.empty-state {\n text-align: center;\n padding: 60px 40px;\n color: var(--mj-text-muted);\n}\n\n.empty-state i {\n font-size: 3em;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.empty-state p {\n margin: 0;\n font-size: 1.1em;\n}\n\n/* Loading State */\n.loading-state {\n text-align: center;\n padding: 60px 40px;\n color: var(--mj-text-muted);\n}\n\n.loading-state i {\n font-size: 3em;\n margin-bottom: 16px;\n opacity: 0.6;\n color: var(--mj-brand-primary);\n}\n\n.loading-state p {\n margin: 0;\n font-size: 1.1em;\n}\n\n/* Metrics Grid */\n.metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 24px;\n}\n\n.metric-card {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 20px;\n}\n\n.metric-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n.metric-header i {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.metric-header h4 {\n margin: 0;\n font-size: 0.9em;\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.metric-value.large {\n font-size: 1.8em;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.metric-rollup {\n margin-top: 8px;\n font-size: 0.85em;\n color: var(--mj-text-muted);\n}\n\n.metric-currency {\n margin-top: 4px;\n font-size: 0.85em;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n}\n\n/* Additional Metrics */\n.additional-metrics {\n padding-top: 16px;\n}\n\n.metric-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 0;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.metric-row:last-child {\n border-bottom: none;\n}\n\n.metric-row .metric-label {\n font-weight: 500;\n color: var(--mj-text-muted);\n}\n\n.metric-row .metric-value {\n font-weight: 400;\n color: var(--mj-text-primary);\n}\n\n.metric-row .metric-value.link {\n color: var(--mj-brand-primary);\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: color 0.2s;\n}\n\n.metric-row .metric-value.link:hover {\n color: color-mix(in srgb, var(--mj-brand-primary) 75%, black);\n}\n\n/* Hierarchy Section */\n.parent-run-section,\n.child-runs-section {\n margin-bottom: 24px;\n}\n\n.parent-run-section:last-child,\n.child-runs-section:last-child {\n margin-bottom: 0;\n}\n\n.parent-run-section h4,\n.child-runs-section h4 {\n margin: 0 0 12px 0;\n font-size: 0.95em;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.runs-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.run-item {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 12px 16px;\n display: flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.run-item:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-strong);\n}\n\n.run-item.parent {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.run-item.parent:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.run-item-icon {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.run-item-content {\n flex: 1;\n min-width: 0;\n}\n\n.run-item-title {\n font-weight: 500;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.execution-order {\n background: var(--mj-text-muted);\n color: white;\n padding: 2px 6px;\n border-radius: 10px;\n font-size: 0.75em;\n font-weight: 600;\n}\n\n.run-item-type {\n font-size: 0.85em;\n color: var(--mj-text-muted);\n font-weight: 400;\n}\n\n.run-item-meta {\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 0.85em;\n color: var(--mj-text-muted);\n}\n\n.run-item-meta span {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.status-indicator {\n font-weight: 500;\n}\n\n.run-item > i:last-child {\n color: var(--mj-text-muted);\n font-size: 0.85em;\n}\n\n/* Detail Fields Grid */\n.detail-fields-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n width: 100%;\n min-height: auto;\n overflow: visible;\n}\n\n.detail-field {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-field label {\n font-size: 0.85em;\n color: var(--mj-text-muted);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-value {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 1em;\n color: var(--mj-text-primary);\n padding: 10px 14px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n transition: all 0.2s;\n}\n\n.detail-value i:first-child {\n color: var(--mj-text-muted);\n font-size: 1.1em;\n width: 20px;\n text-align: center;\n}\n\n.detail-value.clickable {\n cursor: pointer;\n}\n\n.detail-value.clickable:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-strong);\n color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.detail-value.clickable i:last-child {\n margin-left: auto;\n font-size: 0.85em;\n opacity: 0.6;\n}\n\n.detail-value.clickable:hover i:last-child {\n opacity: 1;\n}\n\n.detail-value.null-value {\n color: var(--mj-text-disabled);\n font-style: italic;\n}\n\n.detail-value.null-value i:first-child {\n opacity: 0.5;\n}\n\n/* Kendo Overrides */\nkendo-panelbar {\n border: none !important;\n}\n\nkendo-panelbar-item {\n margin-bottom: 8px;\n border: 1px solid var(--mj-border-default) !important;\n border-radius: 8px !important;\n overflow: hidden;\n}\n\nkendo-panelbar-item .k-panelbar-header {\n background: var(--mj-bg-surface-card) !important;\n border: none !important;\n padding: 12px 16px !important;\n}\n\nkendo-panelbar-item .k-panelbar-header:hover {\n background: var(--mj-border-default) !important;\n}\n\nkendo-panelbar-item .k-panelbar-content {\n border: none !important;\n padding: 0 !important;\n max-height: none !important;\n overflow: visible !important;\n}\n\n/* Validation Panel Styles */\n.validation-summary {\n margin-bottom: 24px;\n}\n\n.summary-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.summary-header h4 {\n margin: 0;\n font-size: 1.1em;\n color: var(--mj-text-primary);\n}\n\n.validation-status {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n border-radius: 20px;\n font-weight: 500;\n font-size: 0.9em;\n}\n\n.validation-status.success {\n background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.validation-status.failed {\n background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.validation-metrics {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.metric-card.small {\n padding: 16px;\n text-align: center;\n}\n\n.metric-card.small .metric-label {\n font-size: 0.8em;\n margin-bottom: 8px;\n font-weight: 600;\n}\n\n.metric-card.small .metric-value {\n font-size: 1.4em;\n font-weight: 700;\n}\n\n.validation-error,\n.common-error {\n background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 18%, var(--mj-bg-surface));\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 16px;\n}\n\n.validation-error h5,\n.common-error h5 {\n margin: 0 0 8px 0;\n color: var(--mj-status-error);\n font-size: 0.95em;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.validation-error p,\n.common-error p {\n margin: 0;\n color: var(--mj-text-secondary);\n font-size: 0.9em;\n}\n\n.error-count {\n display: inline-block;\n margin-top: 8px;\n padding: 2px 8px;\n background: var(--mj-status-error);\n color: white;\n border-radius: 12px;\n font-size: 0.75em;\n font-weight: 500;\n}\n\n/* Retry Timeline */\n.retry-timeline {\n margin-bottom: 24px;\n}\n\n.retry-timeline h4 {\n margin: 0 0 12px 0;\n font-size: 1em;\n color: var(--mj-text-secondary);\n}\n\n.timeline-info {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.timeline-stat {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-muted);\n font-size: 0.9em;\n}\n\n.timeline-stat i {\n font-size: 1.1em;\n}\n\n/* Validation Attempts */\n.validation-attempts {\n margin-bottom: 24px;\n}\n\n.validation-attempts h4 {\n margin: 0 0 12px 0;\n font-size: 1em;\n color: var(--mj-text-secondary);\n}\n\n.attempts-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.attempt-item {\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n padding: 12px 16px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n\n.attempt-item.success {\n background: color-mix(in srgb, var(--mj-status-success) 6%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-success) 18%, var(--mj-bg-surface));\n}\n\n.attempt-item.failed {\n background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 18%, var(--mj-bg-surface));\n}\n\n.attempt-number {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.attempt-item.success .attempt-number {\n color: var(--mj-status-success);\n}\n\n.attempt-item.failed .attempt-number {\n color: var(--mj-status-error);\n}\n\n.attempt-details {\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n font-size: 0.85em;\n}\n\n.attempt-time {\n color: var(--mj-text-muted);\n}\n\n.attempt-error {\n color: var(--mj-status-error);\n flex: 1 0 100%;\n}\n\n.output-length {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n/* Validation JSON */\n.validation-json {\n margin-top: 24px;\n}\n\n.validation-json h4 {\n margin: 0 0 12px 0;\n font-size: 1em;\n color: var(--mj-text-secondary);\n}\n\n.json-viewer-container {\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n}\n\n/* Panel badge styles */\n.panel-badge.success {\n background: var(--mj-status-success);\n color: white;\n}\n"] }]
|
|
2226
2248
|
}], null, null); })();
|
|
2227
2249
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIPromptRunFormComponentExtended, { className: "MJAIPromptRunFormComponentExtended", filePath: "src/lib/custom/AIPromptRuns/ai-prompt-run-form.component.ts", lineNumber: 21 }); })();
|
|
2228
2250
|
//# sourceMappingURL=ai-prompt-run-form.component.js.map
|