@memberjunction/ng-core-entity-forms 2.55.0 → 2.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts +23 -0
  2. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts.map +1 -1
  3. package/dist/lib/custom/AIAgents/ai-agent-form.component.js +517 -443
  4. package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
  5. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts +6 -0
  6. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts.map +1 -1
  7. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +656 -235
  8. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
  9. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.d.ts +4 -0
  10. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.d.ts.map +1 -1
  11. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js +63 -41
  12. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js.map +1 -1
  13. package/dist/lib/custom/Actions/action-form.component.d.ts +5 -0
  14. package/dist/lib/custom/Actions/action-form.component.d.ts.map +1 -1
  15. package/dist/lib/custom/Actions/action-form.component.js +9 -2
  16. package/dist/lib/custom/Actions/action-form.component.js.map +1 -1
  17. package/dist/lib/generated/Entities/AIAgent/sections/details.component.d.ts.map +1 -1
  18. package/dist/lib/generated/Entities/AIAgent/sections/details.component.js +13 -4
  19. package/dist/lib/generated/Entities/AIAgent/sections/details.component.js.map +1 -1
  20. package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.d.ts.map +1 -1
  21. package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.js +130 -4
  22. package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.js.map +1 -1
  23. package/dist/lib/generated/Entities/Action/sections/details.component.d.ts.map +1 -1
  24. package/dist/lib/generated/Entities/Action/sections/details.component.js +13 -4
  25. package/dist/lib/generated/Entities/Action/sections/details.component.js.map +1 -1
  26. package/package.json +13 -13
package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js CHANGED
@@ -30,7 +30,7 @@ import * as i14 from "@memberjunction/ng-code-editor";
30
30
  import * as i15 from "../../shared/components/template-editor.component";
31
31
  const _c0 = ["templateEditor"];
32
32
  const _forTrack0 = ($index, $item) => $item.ID;
33
- const _forTrack1 = ($index, $item) => $item.ID || $index;
33
+ function _forTrack1($index, $item) { return this.getModelTrackId($item) || $index; }
34
34
  const _c1 = () => ({ text: "Active", value: "Active" });
35
35
  const _c2 = () => ({ text: "Pending", value: "Pending" });
36
36
  const _c3 = () => ({ text: "Disabled", value: "Disabled" });
@@ -517,7 +517,7 @@ function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Condi
517
517
  function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
518
518
  i0.ɵɵelementStart(0, "div", 116);
519
519
  i0.ɵɵelement(1, "i", 121);
520
- i0.ɵɵtext(2, " Models are tried in priority order (1, 2, 3...). The first available model that meets requirements will be used for execution. ");
520
+ i0.ɵɵtext(2, " Models are tried in priority order (highest priority first). The first available model that meets requirements will be used for execution. ");
521
521
  i0.ɵɵelementEnd();
522
522
  } }
523
523
  function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -535,24 +535,24 @@ function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Condi
535
535
  i0.ɵɵtext(1);
536
536
  i0.ɵɵelementEnd();
537
537
  } if (rf & 2) {
538
- const ɵ$index_417_r13 = i0.ɵɵnextContext().$index;
539
- i0.ɵɵpropertyInterpolate1("title", "Priority ", ɵ$index_417_r13 + 1, " - Lower numbers are tried first");
538
+ const ctx_r13 = i0.ɵɵnextContext();
539
+ const model_r15 = ctx_r13.$implicit;
540
+ const ɵ$index_417_r13 = ctx_r13.$index;
541
+ i0.ɵɵpropertyInterpolate1("title", "Priority ", model_r15.Priority, " - Higher priority numbers are tried first");
540
542
  i0.ɵɵadvance();
541
543
  i0.ɵɵtextInterpolate1("#", ɵ$index_417_r13 + 1, "");
542
544
  } }
543
545
  function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
544
- const _r14 = i0.ɵɵgetCurrentView();
546
+ const _r16 = i0.ɵɵgetCurrentView();
545
547
  i0.ɵɵelementStart(0, "kendo-dropdownlist", 137);
546
- i0.ɵɵtwoWayListener("ngModelChange", function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_5_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const model_r15 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(model_r15.ModelID, $event) || (model_r15.ModelID = $event); return i0.ɵɵresetView($event); });
547
- i0.ɵɵlistener("valueChange", function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_5_Template_kendo_dropdownlist_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ɵ$index_417_r13 = i0.ɵɵnextContext().$index; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onModelChange($event, ɵ$index_417_r13)); });
548
+ i0.ɵɵtwoWayListener("ngModelChange", function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_5_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r16); const model_r15 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(model_r15.ModelID, $event) || (model_r15.ModelID = $event); return i0.ɵɵresetView($event); });
549
+ i0.ɵɵlistener("valueChange", function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_5_Template_kendo_dropdownlist_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r16); const ɵ$index_417_r13 = i0.ɵɵnextContext().$index; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onModelChange($event, ɵ$index_417_r13)); });
548
550
  i0.ɵɵelementEnd();
549
551
  } if (rf & 2) {
550
- const ctx_r15 = i0.ɵɵnextContext();
551
- const model_r15 = ctx_r15.$implicit;
552
- const ɵ$index_417_r13 = ctx_r15.$index;
552
+ const model_r15 = i0.ɵɵnextContext().$implicit;
553
553
  const ctx_r1 = i0.ɵɵnextContext(5);
554
554
  i0.ɵɵtwoWayProperty("ngModel", model_r15.ModelID);
555
- i0.ɵɵproperty("name", "modelId_" + ɵ$index_417_r13)("data", ctx_r1.availableModels)("valuePrimitive", true)("filterable", true);
555
+ i0.ɵɵproperty("name", "modelId_" + ctx_r1.getModelTrackId(model_r15))("data", ctx_r1.availableModels)("valuePrimitive", true)("filterable", true);
556
556
  } }
557
557
  function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
558
558
  i0.ɵɵelementStart(0, "span", 24);
@@ -597,12 +597,10 @@ function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Condi
597
597
  i0.ɵɵtemplate(1, AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_8_Conditional_0_Conditional_0_ng_template_1_Template, 3, 4, "ng-template", 141);
598
598
  i0.ɵɵelementEnd();
599
599
  } if (rf & 2) {
600
- const ctx_r15 = i0.ɵɵnextContext(3);
601
- const model_r15 = ctx_r15.$implicit;
602
- const ɵ$index_417_r13 = ctx_r15.$index;
600
+ const model_r15 = i0.ɵɵnextContext(3).$implicit;
603
601
  const ctx_r1 = i0.ɵɵnextContext(5);
604
602
  i0.ɵɵtwoWayProperty("ngModel", model_r15.VendorID);
605
- i0.ɵɵproperty("name", "vendorId_" + ɵ$index_417_r13)("data", ctx_r1.getVendorsForModelSync(model_r15.ModelID))("valuePrimitive", true)("filterable", true);
603
+ i0.ɵɵproperty("name", "vendorId_" + ctx_r1.getModelTrackId(model_r15))("data", ctx_r1.getVendorsForModelSync(model_r15.ModelID))("valuePrimitive", true)("filterable", true);
606
604
  } }
607
605
  function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_8_Conditional_0_Conditional_1_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
608
606
  i0.ɵɵelementStart(0, "span", 142);
@@ -761,9 +759,9 @@ function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Condi
761
759
  i0.ɵɵtwoWayListener("ngModelChange", function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_21_Conditional_4_Conditional_5_Template_kendo_numerictextbox_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r21); const model_r15 = i0.ɵɵnextContext(3).$implicit; i0.ɵɵtwoWayBindingSet(model_r15.ParallelCount, $event) || (model_r15.ParallelCount = $event); return i0.ɵɵresetView($event); });
762
760
  i0.ɵɵelementEnd()();
763
761
  } if (rf & 2) {
764
- const ctx_r15 = i0.ɵɵnextContext(3);
765
- const model_r15 = ctx_r15.$implicit;
766
- const ɵ$index_417_r13 = ctx_r15.$index;
762
+ const ctx_r13 = i0.ɵɵnextContext(3);
763
+ const model_r15 = ctx_r13.$implicit;
764
+ const ɵ$index_417_r13 = ctx_r13.$index;
767
765
  i0.ɵɵadvance(3);
768
766
  i0.ɵɵtwoWayProperty("ngModel", model_r15.ParallelCount);
769
767
  i0.ɵɵproperty("name", "parallelCount_" + ɵ$index_417_r13)("min", 1)("step", 1)("format", "n0");
@@ -777,9 +775,9 @@ function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Condi
777
775
  i0.ɵɵtwoWayListener("ngModelChange", function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_21_Conditional_4_Conditional_6_Template_kendo_textbox_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r22); const model_r15 = i0.ɵɵnextContext(3).$implicit; i0.ɵɵtwoWayBindingSet(model_r15.ParallelConfigParam, $event) || (model_r15.ParallelConfigParam = $event); return i0.ɵɵresetView($event); });
778
776
  i0.ɵɵelementEnd()();
779
777
  } if (rf & 2) {
780
- const ctx_r15 = i0.ɵɵnextContext(3);
781
- const model_r15 = ctx_r15.$implicit;
782
- const ɵ$index_417_r13 = ctx_r15.$index;
778
+ const ctx_r13 = i0.ɵɵnextContext(3);
779
+ const model_r15 = ctx_r13.$implicit;
780
+ const ɵ$index_417_r13 = ctx_r13.$index;
783
781
  i0.ɵɵadvance(3);
784
782
  i0.ɵɵtwoWayProperty("ngModel", model_r15.ParallelConfigParam);
785
783
  i0.ɵɵproperty("name", "parallelConfigParam_" + ɵ$index_417_r13);
@@ -795,9 +793,9 @@ function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Condi
795
793
  i0.ɵɵtemplate(5, AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_21_Conditional_4_Conditional_5_Template, 4, 5, "div")(6, AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Conditional_21_Conditional_4_Conditional_6_Template, 4, 2, "div");
796
794
  i0.ɵɵelementEnd();
797
795
  } if (rf & 2) {
798
- const ctx_r15 = i0.ɵɵnextContext(2);
799
- const model_r15 = ctx_r15.$implicit;
800
- const ɵ$index_417_r13 = ctx_r15.$index;
796
+ const ctx_r13 = i0.ɵɵnextContext(2);
797
+ const model_r15 = ctx_r13.$implicit;
798
+ const ɵ$index_417_r13 = ctx_r13.$index;
801
799
  i0.ɵɵadvance(4);
802
800
  i0.ɵɵtwoWayProperty("ngModel", model_r15.ParallelizationMode);
803
801
  i0.ɵɵproperty("name", "parallelMode_" + ɵ$index_417_r13)("data", i0.ɵɵpureFunction3(9, _c4, i0.ɵɵpureFunction0(6, _c5), i0.ɵɵpureFunction0(7, _c6), i0.ɵɵpureFunction0(8, _c7)))("valuePrimitive", true);
@@ -940,7 +938,7 @@ function AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Condi
940
938
  i0.ɵɵelementStart(12, "div");
941
939
  i0.ɵɵtext(13, "Actions");
942
940
  i0.ɵɵelementEnd()();
943
- i0.ɵɵrepeaterCreate(14, AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Template, 22, 15, null, null, _forTrack1);
941
+ i0.ɵɵrepeaterCreate(14, AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_For_15_Template, 22, 15, null, null, _forTrack1, true);
944
942
  i0.ɵɵtemplate(16, AIPromptFormComponentExtended_form_2_Conditional_42_Conditional_5_Conditional_1_Conditional_16_Template, 4, 0, "div", 120);
945
943
  } if (rf & 2) {
946
944
  const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1710,10 +1708,10 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
1710
1708
  return;
1711
1709
  }
1712
1710
  // Use the dialog service instead of inline
1713
- this.testHarnessService.openForPrompt(this.record.ID, this.viewContainerRef).subscribe({
1711
+ // Don't pass viewContainerRef so window is top-level
1712
+ this.testHarnessService.openForPrompt(this.record.ID).subscribe({
1714
1713
  next: (result) => {
1715
1714
  if (result.success) {
1716
- MJNotificationService.Instance.CreateSimpleNotification('Prompt test completed successfully', 'success', 3000);
1717
1715
  // Reload execution history
1718
1716
  this.loadExecutionHistory();
1719
1717
  }
@@ -1994,7 +1992,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
1994
1992
  const results = await rv.RunView({
1995
1993
  EntityName: 'MJ: AI Prompt Models',
1996
1994
  ExtraFilter: `PromptID='${this.record.ID}'`,
1997
- OrderBy: 'Priority ASC, __mj_CreatedAt ASC',
1995
+ OrderBy: 'Priority DESC, __mj_CreatedAt ASC',
1998
1996
  ResultType: 'entity_object'
1999
1997
  });
2000
1998
  this.promptModels = results.Results;
@@ -2020,11 +2018,12 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
2020
2018
  try {
2021
2019
  const newModel = await this._metadata.GetEntityObject('MJ: AI Prompt Models');
2022
2020
  newModel.PromptID = this.record.ID;
2023
- // Set priority to highest existing priority + 1
2024
- const maxPriority = this.promptModels.length > 0
2025
- ? Math.max(...this.promptModels.map(pm => pm.Priority || 0))
2026
- : 0;
2027
- newModel.Priority = maxPriority + 1;
2021
+ // Set priority to 1 (lowest) for new models added at the end
2022
+ newModel.Priority = 1;
2023
+ // Generate a temporary ID for tracking if the model doesn't have one
2024
+ if (!newModel.ID) {
2025
+ newModel._tempId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
2026
+ }
2028
2027
  // ModelID will be set by user
2029
2028
  this.promptModels.push(newModel);
2030
2029
  }
@@ -2306,10 +2305,15 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
2306
2305
  // Swap with previous item
2307
2306
  [newModels[index - 1], newModels[index]] =
2308
2307
  [newModels[index], newModels[index - 1]];
2309
- // Replace the array
2310
- this.promptModels = newModels;
2308
+ // Replace the array and force full re-render
2309
+ this.promptModels = [...newModels];
2311
2310
  this.updateModelPriorities();
2311
+ // Force Angular to re-evaluate all bindings
2312
2312
  this.cdr.detectChanges();
2313
+ // Additional force update for Kendo dropdowns
2314
+ setTimeout(() => {
2315
+ this.cdr.detectChanges();
2316
+ }, 0);
2313
2317
  }
2314
2318
  }
2315
2319
  /**
@@ -2322,20 +2326,33 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
2322
2326
  // Swap with next item
2323
2327
  [newModels[index], newModels[index + 1]] =
2324
2328
  [newModels[index + 1], newModels[index]];
2325
- // Replace the array
2326
- this.promptModels = newModels;
2329
+ // Replace the array and force full re-render
2330
+ this.promptModels = [...newModels];
2327
2331
  this.updateModelPriorities();
2332
+ // Force Angular to re-evaluate all bindings
2328
2333
  this.cdr.detectChanges();
2334
+ // Additional force update for Kendo dropdowns
2335
+ setTimeout(() => {
2336
+ this.cdr.detectChanges();
2337
+ }, 0);
2329
2338
  }
2330
2339
  }
2331
2340
  /**
2332
2341
  * Updates priority values based on array order
2333
2342
  */
2334
2343
  updateModelPriorities() {
2344
+ // Update priorities based on position (higher priority for items at top)
2345
+ const maxPriority = this.promptModels.length;
2335
2346
  this.promptModels.forEach((model, index) => {
2336
- model.Priority = index + 1;
2347
+ model.Priority = maxPriority - index;
2337
2348
  });
2338
2349
  }
2350
+ /**
2351
+ * Gets a stable identifier for a model (for form tracking)
2352
+ */
2353
+ getModelTrackId(model) {
2354
+ return model.ID || model._tempId || '';
2355
+ }
2339
2356
  /**
2340
2357
  * Handles drag start event
2341
2358
  */
@@ -2363,11 +2380,16 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
2363
2380
  const draggedItem = newModels.splice(this.draggedIndex, 1)[0];
2364
2381
  // Insert at new position
2365
2382
  newModels.splice(dropIndex, 0, draggedItem);
2366
- // Replace the array
2367
- this.promptModels = newModels;
2383
+ // Replace the array and force full re-render
2384
+ this.promptModels = [...newModels];
2368
2385
  // Update priorities
2369
2386
  this.updateModelPriorities();
2387
+ // Force Angular to re-evaluate all bindings
2370
2388
  this.cdr.detectChanges();
2389
+ // Additional force update for Kendo dropdowns
2390
+ setTimeout(() => {
2391
+ this.cdr.detectChanges();
2392
+ }, 0);
2371
2393
  }
2372
2394
  this.draggedIndex = -1;
2373
2395
  }
@@ -2588,7 +2610,7 @@ AIPromptFormComponentExtended = __decorate([
2588
2610
  export { AIPromptFormComponentExtended };
2589
2611
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIPromptFormComponentExtended, [{
2590
2612
  type: Component,
2591
- args: [{ selector: 'mj-ai-prompt-form', template: "<div class=\"record-form-container\">\n <!-- Dialog container for Kendo dialogs -->\n <div kendoDialogContainer></div>\n <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\" >\n <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n <!-- Main Content Area - Template Editor and Configuration -->\n <div class=\"prompt-main-area\" style=\"display: flex; flex-direction: column; height: 100%; overflow-y: auto;\">\n \n <!-- Header Section -->\n <div class=\"prompt-header\" style=\"flex-shrink: 0; padding: 20px; background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n \n <!-- Left: Prompt Info -->\n <div style=\"flex: 1; min-width: 0;\">\n <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n <i class=\"fa-solid fa-robot\" style=\"color: #6f42c1; font-size: 1.4em;\"></i>\n @if (EditMode) {\n <kendo-textbox [(ngModel)]=\"record.Name\" \n name=\"promptName\"\n placeholder=\"Enter prompt name...\"\n style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n </kendo-textbox>\n } @else {\n <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled AI Prompt' }}</h4>\n <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\" \n style=\"color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n {{ record.Status }}\n </span>\n }\n </div>\n \n <!-- Status and Type Editors when in edit mode -->\n @if (EditMode) {\n <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;\">\n <div>\n <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">Status</label>\n <kendo-dropdownlist [(ngModel)]=\"record.Status\"\n name=\"promptStatus\"\n [data]=\"[{text: 'Active', value: 'Active'}, {text: 'Pending', value: 'Pending'}, {text: 'Disabled', value: 'Disabled'}]\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n style=\"width: 150px;\">\n </kendo-dropdownlist>\n </div>\n <div>\n <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n Type <span style=\"color: #dc3545;\">*</span>\n </label>\n @if (isLoadingPromptTypes) {\n <div style=\"padding: 8px; color: #6c757d; font-style: italic; width: 200px;\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading types...\n </div>\n } @else {\n <kendo-dropdownlist [(ngModel)]=\"record.TypeID\"\n name=\"promptTypeID\"\n [data]=\"availablePromptTypes\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n [filterable]=\"true\"\n placeholder=\"Select prompt type...\"\n style=\"width: 200px;\">\n </kendo-dropdownlist>\n }\n </div>\n </div>\n }\n \n @if (EditMode) {\n <kendo-textarea [(ngModel)]=\"record.Description\" \n name=\"promptDescription\"\n [rows]=\"2\"\n placeholder=\"Enter prompt description...\"\n style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\">\n </kendo-textarea>\n } @else if (record.Description) {\n <p style=\"margin: 0 0 12px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n }\n \n <!-- Quick Config Row -->\n <div class=\"quick-config\" style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n @if (record.TypeID) {\n <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n <i class=\"fa-solid fa-tag\" style=\"color: #6c757d;\"></i>\n <span style=\"color: #6c757d;\">Type:</span>\n <span style=\"color: #495057; font-weight: 500;\">{{ getPromptTypeDisplayName(record.TypeID) }}</span>\n </div>\n }\n \n <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n <i class=\"fa-solid fa-layer-group\" style=\"color: #6c757d;\"></i>\n <span style=\"color: #6c757d;\">Parallelization:</span>\n <span style=\"color: #495057; font-weight: 500;\">{{ getParallelizationModeDisplay() }}</span>\n </div>\n \n <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n <span style=\"color: #6c757d;\">Output:</span>\n <span [style.color]=\"getValidationColor()\" style=\"font-weight: 500;\">{{ getOutputTypeDisplay() }}</span>\n </div>\n \n @if (record.EnableCaching) {\n <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n <i class=\"fa-solid fa-database\" style=\"color: #28a745;\"></i>\n <span style=\"color: #28a745; font-weight: 500;\">Caching Enabled</span>\n </div>\n }\n </div>\n </div>\n \n <!-- Right: Action Buttons -->\n <div class=\"action-buttons\" style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n <div style=\"display: flex; gap: 8px;\">\n @if (record.ID) {\n <button kendoButton [themeColor]=\"'primary'\" [size]=\"'large'\"\n (click)=\"openTestHarness()\"\n title=\"Run AI Prompt Test Harness\">\n <i class=\"fa-solid fa-play\"></i> Run\n </button>\n }\n </div>\n \n @if (!canExecute && record.ID) {\n <div style=\"font-size: 0.75em; color: #dc3545; text-align: right; max-width: 200px;\">\n @if (record.Status !== 'Active') {\n \u2022 Prompt must be Active<br>\n }\n @if (!record.TemplateID) {\n \u2022 Template is required<br>\n }\n @if (!template && record.TemplateID) {\n \u2022 Template not found<br>\n }\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Configuration Sections with Expansion Panels -->\n <div class=\"configuration-sections\" style=\"flex: 1; background: white; border-top: 2px solid #e9ecef; padding: 16px; min-height: 0;\">\n <!-- Template Editor Section -->\n <kendo-expansionpanel \n [expanded]=\"true\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n Template Editor\n @if (template) {\n <span style=\"color: #6c757d; font-size: 0.9em; font-weight: normal;\">\u2022 {{ template.Name }}</span>\n }\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div class=\"template-section\" style=\"display: flex; flex-direction: column; min-height: 400px; padding: 8px;\">\n @if (isLoadingTemplate) {\n <div class=\"loading-state\" style=\"flex: 1; display: flex; align-items: center; justify-content: center; color: #6c757d;\">\n <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; margin-right: 12px;\"></i>\n Loading template...\n </div>\n } @else if (!record.TemplateID) {\n <div class=\"no-template-state\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #6c757d;\">\n <i class=\"fa-solid fa-code\" style=\"font-size: 64px; margin-bottom: 20px; opacity: 0.3;\"></i>\n <h5 style=\"margin-bottom: 12px; color: #495057;\">No Template Associated</h5>\n <p style=\"margin-bottom: 24px; text-align: center; max-width: 400px;\">\n This AI prompt needs a template to define its structure and parameters. \n Create a new template or link to an existing one.\n </p>\n <div style=\"display: flex; gap: 12px;\">\n <button kendoButton [themeColor]=\"'primary'\" (click)=\"createNewTemplate()\">\n <i class=\"fa-solid fa-plus\"></i> Create New Template\n </button>\n <button kendoButton [fillMode]=\"'outline'\" (click)=\"linkExistingTemplate()\">\n <i class=\"fa-solid fa-link\"></i> Link Existing Template\n </button>\n </div>\n </div>\n } @else if (templateNotFoundInDatabase) {\n <div class=\"invalid-template-state\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #dc3545;\">\n <i class=\"fa-solid fa-exclamation-triangle\" style=\"font-size: 64px; margin-bottom: 20px; opacity: 0.7;\"></i>\n <h5 style=\"margin-bottom: 12px;\">Template Not Found</h5>\n <p style=\"margin-bottom: 24px; text-align: center; max-width: 400px;\">\n The referenced template could not be loaded. It may have been deleted or moved.\n </p>\n <div style=\"display: flex; gap: 12px;\">\n <button kendoButton [fillMode]=\"'outline'\" (click)=\"loadTemplate()\">\n <i class=\"fa-solid fa-refresh\"></i> Retry Loading\n </button>\n <button kendoButton [themeColor]=\"'primary'\" (click)=\"createNewTemplate()\">\n <i class=\"fa-solid fa-plus\"></i> Create New Template\n </button>\n </div>\n </div>\n } @else {\n <!-- Active Template Editor -->\n <div class=\"template-editor-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 350px;\">\n <!-- Template Editor -->\n <div style=\"flex: 1; background: white; border-radius: 6px; border: 1px solid #e9ecef;\">\n <mj-template-editor \n #templateEditor\n [template]=\"template\"\n [config]=\"templateEditorConfig\"\n (contentChange)=\"onTemplateContentChange($event)\"\n (runTemplate)=\"onTemplateRun($event)\"\n style=\"display: block; min-height: 300px;\">\n </mj-template-editor>\n </div>\n </div>\n }\n </div>\n </kendo-expansionpanel> \n\n <!-- Template Parameters Expansion Panel -->\n @if (template && templateParams.length > 0) {\n <kendo-expansionpanel \n [expanded]=\"true\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n Template Parameters\n <span class=\"badge\" style=\"background: #6f42c1; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n {{ templateParams.length }}\n </span>\n <span style=\"color: #6c757d; font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n <i class=\"fa-solid fa-info-circle\" title=\"These parameters are defined in the template and will be available when executing this prompt\"></i>\n Parameters defined in the template\n </span>\n </span>\n </ng-template>\n \n <!-- Template Parameters Display -->\n <div style=\"padding: 16px 0;\">\n @if (isLoadingTemplateParams) {\n <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading template parameters...\n </div>\n } @else if (templateParams.length === 0) {\n <div class=\"empty-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n <i class=\"fa-solid fa-info-circle\"></i> This template has no parameters defined\n </div>\n } @else {\n <!-- Parameters Grid -->\n <div style=\"display: grid; gap: 12px;\">\n @for (param of templateParams; track param.ID) {\n <div class=\"parameter-card\" \n style=\"border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; background: #f8f9fa; transition: all 0.2s;\"\n [style.border-left]=\"'4px solid ' + getParamTypeColor(param.Type)\">\n \n <!-- Parameter Header -->\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;\">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <i [class]=\"'fa-solid ' + getParamTypeIcon(param.Type)\" \n [style.color]=\"getParamTypeColor(param.Type)\"\n style=\"font-size: 1.2em;\"></i>\n <h6 style=\"margin: 0; color: #495057; font-weight: 600;\">\n {{ param.Name }}\n @if (param.IsRequired) {\n <span style=\"color: #dc3545; font-size: 0.9em; margin-left: 4px;\">*</span>\n }\n </h6>\n </div>\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <span class=\"type-badge\" \n [style.background-color]=\"getParamTypeColor(param.Type)\"\n style=\"color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n {{ param.Type }}\n </span>\n @if (param.IsRequired) {\n <span style=\"color: #dc3545; font-size: 0.85em; font-weight: 500;\">Required</span>\n } @else {\n <span style=\"color: #6c757d; font-size: 0.85em;\">Optional</span>\n }\n </div>\n </div>\n \n <!-- Parameter Description -->\n @if (param.Description) {\n <p style=\"margin: 0 0 8px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">\n {{ param.Description }}\n </p>\n }\n \n <!-- Type-specific Information -->\n <div style=\"font-size: 0.85em; color: #495057;\">\n <span style=\"display: flex; align-items: center; gap: 4px; margin-bottom: 4px;\">\n <i class=\"fa-solid fa-info-circle\" style=\"color: #6c757d;\"></i>\n {{ getParamTypeDescription(param) }}\n </span>\n </div>\n \n <!-- Additional Parameter Details -->\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px;\">\n @if (param.DefaultValue) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Default Value</label>\n <code style=\"font-size: 0.85em; color: #495057; word-break: break-all;\">{{ param.DefaultValue }}</code>\n </div>\n }\n \n @if (param.EntityID) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Entity</label>\n <span style=\"font-size: 0.85em; color: #495057;\">{{ param.Entity || 'Entity ID: ' + param.EntityID }}</span>\n </div>\n }\n \n @if (param.LinkedParameterName) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Linked To</label>\n <span style=\"font-size: 0.85em; color: #495057;\">\n {{ param.LinkedParameterName }}\n @if (param.LinkedParameterField) {\n ({{ param.LinkedParameterField }})\n }\n </span>\n </div>\n }\n \n @if (param.ExtraFilter) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Filter</label>\n <code style=\"font-size: 0.8em; color: #495057; word-break: break-all;\">{{ param.ExtraFilter }}</code>\n </div>\n }\n \n @if (param.RecordID) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Record ID</label>\n <code style=\"font-size: 0.85em; color: #495057;\">{{ param.RecordID }}</code>\n </div>\n }\n </div>\n </div>\n }\n </div>\n \n <!-- Help Text -->\n <div style=\"margin-top: 16px; padding: 12px; background: #e3f2fd; border-radius: 6px; border: 1px solid #bbdefb;\">\n <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n <i class=\"fa-solid fa-lightbulb\" style=\"color: #1976d2; margin-top: 2px;\"></i>\n <div style=\"flex: 1; font-size: 0.85em; color: #1565c0; line-height: 1.5;\">\n <strong>Using Template Parameters:</strong> When executing this prompt, you'll be prompted to provide values for all required parameters. \n Parameters can be simple values (text, numbers) or complex data structures (JSON objects, database records, or entire entity collections).\n The template will use these parameters to generate dynamic content based on the values provided at execution time.\n </div>\n </div>\n </div>\n }\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Model Configuration Expansion Panel -->\n @if (record.IsSaved) {\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-microchip\" style=\"color: #6c757d;\"></i>\n Models\n @if (promptModels.length > 0) {\n <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n {{ promptModels.length }}\n </span>\n }\n <span style=\"color: #6c757d; font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n <i class=\"fa-solid fa-info-circle\" title=\"Models are tried in order from top to bottom. The first available model will be used.\"></i>\n Priority order (first available model will be used)\n </span>\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px 0;\">\n <!-- Model Management Interface -->\n <div class=\"model-management\" style=\"border: 1px solid #dee2e6; border-radius: 6px; background: #f8f9fa;\">\n @if (isLoadingModels) {\n <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading models...\n </div>\n } @else {\n @if (promptModels.length === 0) {\n <div class=\"empty-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n <i class=\"fa-solid fa-info-circle\"></i> No models configured\n @if (EditMode) {\n <div style=\"margin-top: 10px;\">\n <button kendoButton fillMode=\"outline\" themeColor=\"primary\" size=\"small\"\n (click)=\"addNewModel()\">\n <i class=\"fa-solid fa-plus\"></i> Add Model\n </button>\n </div>\n }\n </div>\n } @else {\n <!-- Priority explanation for multiple models -->\n @if (promptModels.length > 1) {\n <div style=\"padding: 12px 16px; background: #e3f2fd; border-bottom: 1px solid #bbdefb; color: #1565c0; font-size: 0.85em;\">\n <i class=\"fa-solid fa-info-circle\" style=\"margin-right: 6px;\"></i>\n Models are tried in priority order (1, 2, 3...). The first available model that meets requirements will be used for execution.\n </div>\n }\n <!-- Column Headers -->\n <div class=\"model-header\" style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; background: #e9ecef; font-weight: 600; font-size: 0.85em; color: #495057; border-bottom: 1px solid #dee2e6;\">\n <div title=\"Priority order - models are tried from top to bottom\">\n <i class=\"fa-solid fa-sort\" style=\"color: #6c757d;\"></i>\n </div>\n <div>AI Model <span style=\"color: #dc3545;\">*</span></div>\n <div>Vendor</div>\n <div>Created</div>\n <div>Actions</div>\n </div>\n \n @for (model of promptModels; track model.ID || $index; let i = $index) {\n <div class=\"model-row\" \n [draggable]=\"EditMode\"\n (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, i)\"\n (dragend)=\"onDragEnd($event)\"\n [style.background]=\"!model.ModelID ? '#fff3cd' : (draggedIndex === i ? '#e3f2fd' : 'white')\"\n [style.border-left]=\"!model.ModelID ? '3px solid #ffc107' : 'none'\"\n [style.opacity]=\"draggedIndex === i ? '0.5' : '1'\"\n style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e9ecef; align-items: start; transition: background 0.2s, opacity 0.2s;\">\n \n <!-- Drag Handle / Priority -->\n <div class=\"drag-handle\" style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6c757d;\">\n @if (EditMode) {\n <i class=\"fa-solid fa-grip-vertical\" title=\"Drag to reorder priority\" style=\"cursor: move;\"></i>\n <span style=\"font-size: 0.7em; margin-top: 2px;\">#{{ i + 1 }}</span>\n } @else {\n <span style=\"font-size: 0.9em; font-weight: 600;\" title=\"Priority {{ i + 1 }} - Lower numbers are tried first\">#{{ i + 1 }}</span>\n }\n </div>\n \n <!-- Model Selection -->\n <div class=\"model-select\">\n @if (EditMode) {\n <kendo-dropdownlist [(ngModel)]=\"model.ModelID\"\n [name]=\"'modelId_' + i\"\n [data]=\"availableModels\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n [filterable]=\"true\"\n placeholder=\"Select a model...\"\n (valueChange)=\"onModelChange($event, i)\"\n style=\"width: 100%;\">\n </kendo-dropdownlist>\n } @else {\n <span style=\"font-weight: 500;\">{{ getModelDisplayName(model.ModelID) }}</span>\n }\n </div>\n \n <!-- Vendor -->\n <div class=\"model-vendor\">\n @if (EditMode) {\n @if (model.ModelID) {\n @if (shouldShowVendorDropdown(model.ModelID)) {\n <kendo-dropdownlist [(ngModel)]=\"model.VendorID\"\n [name]=\"'vendorId_' + i\"\n [data]=\"getVendorsForModelSync(model.ModelID)\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n [filterable]=\"true\"\n placeholder=\"Select vendor...\"\n style=\"width: 100%;\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <span [style.color]=\"getVendorStatusColor(model.ModelID, dataItem.ID)\">\n {{ dataItem.Name }}\n @if (getModelVendorStatus(model.ModelID, dataItem.ID) !== 'Active') {\n <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, dataItem.ID) }})</span>\n }\n </span>\n </ng-template>\n </kendo-dropdownlist>\n } @else {\n <!-- Single vendor - just show the name -->\n @if (getVendorsForModelSync(model.ModelID).length === 1) {\n <span [style.color]=\"getVendorStatusColor(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID)\" style=\"font-size: 0.9em; font-weight: 500;\">\n {{ getVendorsForModelSync(model.ModelID)[0].Name }}\n @if (getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) !== 'Active') {\n <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) }})</span>\n }\n </span>\n } @else {\n <span style=\"color: #6c757d; font-style: italic; font-size: 0.9em;\">No vendors available</span>\n }\n }\n } @else {\n <span style=\"color: #6c757d; font-style: italic; font-size: 0.9em;\">Select model first</span>\n }\n } @else {\n @if (model.VendorID && model.ModelID) {\n <span [style.color]=\"getVendorStatusColor(model.ModelID, model.VendorID)\" style=\"font-size: 0.9em;\">\n {{ getVendorDisplayName(model.VendorID) }}\n @if (getModelVendorStatus(model.ModelID, model.VendorID) !== 'Active') {\n <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, model.VendorID) }})</span>\n }\n </span>\n } @else {\n <span style=\"color: #6c757d; font-size: 0.9em;\">-</span>\n }\n }\n </div>\n \n \n <!-- Created Date -->\n <div class=\"model-created\">\n @if (model.ID) {\n <span style=\"color: #6c757d; font-size: 0.8em;\">{{ model.__mj_CreatedAt | date:'short' }}</span>\n } @else {\n <span style=\"color: #28a745; font-size: 0.8em; font-style: italic;\">New</span>\n }\n </div>\n \n <!-- Actions -->\n <div class=\"model-actions\" style=\"display: flex; gap: 2px; flex-direction: column;\">\n @if (EditMode) {\n <div style=\"display: flex; gap: 2px; margin-bottom: 4px;\">\n <button kendoButton fillMode=\"flat\" size=\"small\"\n (click)=\"moveModelUp(i)\"\n [disabled]=\"i === 0\"\n title=\"Move up\">\n <i class=\"fa-solid fa-chevron-up\"></i>\n </button>\n <button kendoButton fillMode=\"flat\" size=\"small\"\n (click)=\"moveModelDown(i)\"\n [disabled]=\"i === promptModels.length - 1\"\n title=\"Move down\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n </div>\n <button kendoButton fillMode=\"flat\" themeColor=\"error\" size=\"small\"\n (click)=\"removePromptModel(i)\"\n title=\"Remove model\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n \n <!-- Second row with additional details -->\n <div style=\"display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #e9ecef; background: #f8f9fa; font-size: 0.85em; color: #6c757d;\">\n <div></div>\n <div>\n <!-- Basic model details -->\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 8px;\">\n @if (model.Status) {\n <span><strong>Status:</strong> {{ model.Status }}</span>\n }\n @if (model.ConfigurationID) {\n <span><strong>Configuration:</strong> {{ model.ConfigurationID }}</span>\n }\n </div>\n \n <!-- Parallel execution fields when prompt is ModelSpecific -->\n @if (record.ParallelizationMode === 'ModelSpecific') {\n <div style=\"padding: 8px; background: #fff; border: 1px solid #dee2e6; border-radius: 4px; margin-top: 8px;\">\n <div style=\"margin-bottom: 6px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n <i class=\"fa-solid fa-layer-group\"></i> Model-Specific Parallel Execution\n </div>\n \n @if (EditMode) {\n <div style=\"display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center;\">\n <!-- Parallel Mode -->\n <div>\n <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Parallel Mode</label>\n <kendo-dropdownlist [(ngModel)]=\"model.ParallelizationMode\"\n [name]=\"'parallelMode_' + i\"\n [data]=\"[{text: 'None', value: 'None'}, {text: 'Static Count', value: 'StaticCount'}, {text: 'Config Param', value: 'ConfigParam'}]\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n placeholder=\"Select mode...\"\n style=\"width: 100%; font-size: 0.85em;\">\n </kendo-dropdownlist>\n </div>\n \n <!-- Parallel Count (when StaticCount) -->\n @if (model.ParallelizationMode === 'StaticCount') {\n <div>\n <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Parallel Count</label>\n <kendo-numerictextbox [(ngModel)]=\"model.ParallelCount\"\n [name]=\"'parallelCount_' + i\"\n [min]=\"1\"\n [step]=\"1\"\n [format]=\"'n0'\"\n placeholder=\"Count...\"\n style=\"width: 100%; font-size: 0.85em;\">\n </kendo-numerictextbox>\n </div>\n }\n \n <!-- Config Param (when ConfigParam) -->\n @if (model.ParallelizationMode === 'ConfigParam') {\n <div>\n <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Config Parameter</label>\n <kendo-textbox [(ngModel)]=\"model.ParallelConfigParam\"\n [name]=\"'parallelConfigParam_' + i\"\n placeholder=\"Parameter name...\"\n style=\"width: 100%; font-size: 0.85em;\">\n </kendo-textbox>\n </div>\n }\n </div>\n } @else {\n <!-- Read-only display -->\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center;\">\n @if (model.ParallelizationMode) {\n <span><strong>Parallel Mode:</strong> {{ model.ParallelizationMode }}</span>\n }\n @if (model.ParallelCount) {\n <span><strong>Parallel Count:</strong> {{ model.ParallelCount }}</span>\n }\n @if (model.ParallelConfigParam) {\n <span><strong>Config Param:</strong> {{ model.ParallelConfigParam }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n \n @if (EditMode) {\n <div class=\"add-model-row\" style=\"padding: 12px 16px; text-align: center; background: #f8f9fa; border-top: 1px solid #dee2e6;\">\n <button kendoButton fillMode=\"outline\" themeColor=\"success\" size=\"small\"\n (click)=\"addNewModel()\">\n <i class=\"fa-solid fa-plus\"></i> Add Model\n </button>\n </div>\n }\n }\n }\n </div>\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Advanced Configuration Expansion Panel -->\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-cogs\" style=\"color: #6c757d;\"></i>\n Advanced Configuration\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px 0;\">\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n \n <!-- Left Column -->\n <div>\n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"ParallelizationMode\"\n Type=\"dropdownlist\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n \n @if (showParallelCount) {\n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"ParallelCount\"\n Type=\"numerictextbox\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n }\n \n @if (showParallelConfigParam) {\n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"ParallelConfigParam\"\n Type=\"textbox\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n }\n \n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"OutputType\"\n Type=\"dropdownlist\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n \n </div>\n \n <!-- Right Column -->\n <div>\n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"ValidationBehavior\"\n Type=\"dropdownlist\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n \n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"EnableCaching\"\n Type=\"checkbox\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n \n <!-- Result Selector Prompt with Tree Selector -->\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n Result Selector Prompt\n </label>\n @if (EditMode) {\n @if (isLoadingResultSelectorData) {\n <div style=\"padding: 8px; color: #6c757d; font-style: italic;\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading prompts...\n </div>\n } @else {\n <kendo-dropdowntree \n [(ngModel)]=\"record.ResultSelectorPromptID\"\n name=\"resultSelectorPromptID\"\n [data]=\"resultSelectorTreeData\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [filterable]=\"true\"\n placeholder=\"Select a result selector prompt...\"\n style=\"width: 100%;\"\n (valueChange)=\"onResultSelectorChange($event)\">\n </kendo-dropdowntree>\n }\n } @else {\n <span style=\"color: #495057;\">{{ getPromptDisplayName(record.ResultSelectorPromptID || '') || 'None selected' }}</span>\n }\n </div>\n </div>\n </div>\n </div>\n </kendo-expansionpanel>\n\n <!-- Output Example Expansion Panel (when OutputType = object) -->\n @if (showOutputExample) {\n <kendo-expansionpanel \n [expanded]=\"true\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n Output Example (JSON)\n <span style=\"color: #dc3545; font-size: 0.8em; font-weight: normal;\">\u2022 Required for object output type</span>\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px;\">\n @if (EditMode) {\n <mj-code-editor \n [(ngModel)]=\"record.OutputExample\"\n name=\"outputExample\"\n language=\"json\"\n placeholder=\"Enter JSON example structure...\"\n style=\"width: 100%; height: 200px; border: 1px solid #dee2e6; border-radius: 4px;\">\n </mj-code-editor>\n <div style=\"margin-top: 8px; color: #6c757d; font-size: 0.85em;\">\n <i class=\"fa-solid fa-info-circle\"></i> Provide a JSON example that defines the expected structure for object output validation.\n </div>\n } @else if (record.OutputExample) {\n <div style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; font-family: 'Courier New', monospace; font-size: 0.9em; white-space: pre-wrap; overflow: auto; max-height: 250px;\">{{ record.OutputExample }}</div>\n } @else {\n <div style=\"background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 12px; color: #856404; text-align: center;\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i> Output example is required when output type is 'object'\n </div>\n }\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Execution History Expansion Panel -->\n @if (record.IsSaved) {\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-history\" style=\"color: #6c757d;\"></i>\n Execution History\n @if (executionHistory.length > 0) {\n <span style=\"color: #6c757d; font-weight: normal;\">({{ executionHistory.length }})</span>\n }\n </span>\n </ng-template>\n \n <!-- Custom Execution History Viewer -->\n <div style=\"padding: 16px;\">\n @if (isLoadingHistory) {\n <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; margin-bottom: 12px;\"></i>\n <p>Loading execution history...</p>\n </div>\n } @else if (executionHistory.length === 0) {\n <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n <i class=\"fa-solid fa-history\" style=\"font-size: 3em; margin-bottom: 12px; opacity: 0.3;\"></i>\n <p>No execution history yet</p>\n <p style=\"font-size: 0.9em;\">Run this prompt to see execution history here</p>\n </div>\n } @else {\n <!-- Sort Controls -->\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\n <div style=\"color: #6c757d; font-size: 0.9em;\">\n Showing {{ executionHistory.length }} executions\n </div>\n <div style=\"display: flex; gap: 8px; align-items: center;\">\n <span style=\"color: #6c757d; font-size: 0.85em;\">Sort by:</span>\n <kendo-buttongroup selection=\"single\">\n <button kendoButton \n [selected]=\"historySortField === 'runAt'\"\n (click)=\"changeHistorySort('runAt')\"\n size=\"small\">\n Date\n @if (historySortField === 'runAt') {\n <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\" \n style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n }\n </button>\n <button kendoButton \n [selected]=\"historySortField === 'executionTime'\"\n (click)=\"changeHistorySort('executionTime')\"\n size=\"small\">\n Duration\n @if (historySortField === 'executionTime') {\n <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\" \n style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n }\n </button>\n <button kendoButton \n [selected]=\"historySortField === 'tokens'\"\n (click)=\"changeHistorySort('tokens')\"\n size=\"small\">\n Tokens\n @if (historySortField === 'tokens') {\n <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\" \n style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n }\n </button>\n <button kendoButton \n [selected]=\"historySortField === 'cost'\"\n (click)=\"changeHistorySort('cost')\"\n size=\"small\">\n Cost\n @if (historySortField === 'cost') {\n <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\" \n style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n }\n </button>\n </kendo-buttongroup>\n </div>\n </div>\n \n <!-- Execution History Table -->\n <div style=\"border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden;\">\n <table style=\"width: 100%; border-collapse: collapse;\">\n <thead>\n <tr style=\"background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Status</th>\n <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Date & Time</th>\n <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Model</th>\n <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Duration</th>\n <th style=\"padding: 12px; text-align: right; font-weight: 600; color: #495057;\">Tokens</th>\n <th style=\"padding: 12px; text-align: right; font-weight: 600; color: #495057;\">Cost</th>\n <th style=\"padding: 12px; text-align: center; font-weight: 600; color: #495057;\">Type</th>\n <th style=\"padding: 12px; text-align: center; font-weight: 600; color: #495057;\">Actions</th>\n </tr>\n </thead>\n <tbody>\n @for (run of executionHistory; track run.ID; let i = $index) {\n <tr class=\"history-row\"\n [class.even-row]=\"i % 2 === 0\"\n style=\"border-bottom: 1px solid #f1f3f5;\">\n <td style=\"padding: 12px;\">\n <span style=\"display: flex; align-items: center; gap: 6px;\">\n <i [class]=\"'fa-solid ' + getExecutionStatusIcon(run.Success)\" \n [style.color]=\"getExecutionStatusColor(run.Success)\"></i>\n <span [style.color]=\"getExecutionStatusColor(run.Success)\" style=\"font-weight: 500;\">\n {{ run.Success === true ? 'Success' : run.Success === false ? 'Failed' : 'Running' }}\n </span>\n </span>\n </td>\n <td style=\"padding: 12px; color: #495057;\">\n {{ run.RunAt | date:'short' }}\n </td>\n <td style=\"padding: 12px; color: #495057;\">\n <span style=\"display: flex; align-items: center; gap: 6px;\">\n <i class=\"fa-solid fa-microchip\" style=\"color: #6c757d;\"></i>\n {{ run.Model || 'Unknown' }}\n </span>\n </td>\n <td style=\"padding: 12px; color: #495057;\">\n {{ formatDuration(run.ExecutionTimeMS) }}\n </td>\n <td style=\"padding: 12px; text-align: right; color: #495057;\">\n {{ formatTokens(run.TokensUsed) }}\n </td>\n <td style=\"padding: 12px; text-align: right; color: #495057;\">\n {{ formatCost(run.TotalCost || run.Cost) }}\n </td>\n <td style=\"padding: 12px; text-align: center;\">\n @if (run.RunType) {\n <span style=\"padding: 4px 8px; border-radius: 12px; background: #e9ecef; \n color: #495057; font-size: 0.85em; font-weight: 500;\">\n {{ run.RunType }}\n </span>\n }\n </td>\n <td style=\"padding: 12px; text-align: center;\">\n <button kendoButton \n fillMode=\"flat\"\n size=\"small\"\n (click)=\"navigateToPromptRun(run.ID)\"\n title=\"View details\">\n <i class=\"fa-solid fa-external-link\"></i>\n </button>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Cache Expansion Panel -->\n @if (record.IsSaved && record.EnableCaching) {\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-database\" style=\"color: #6c757d;\"></i>\n Result Cache\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px 0;\">\n <mj-user-view-grid \n [Params]=\"BuildRelationshipViewParamsByEntityName('AI Result Cache','AIPromptID')\" \n [NewRecordValues]=\"NewRecordValues('AI Result Cache')\"\n [AllowLoad]=\"true\"\n [EditMode]=\"GridEditMode()\" \n style=\"height: 300px;\">\n </mj-user-view-grid>\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Related Items Expansion Panel -->\n @if (record.IsSaved) {\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-link\" style=\"color: #6c757d;\"></i>\n Related Items\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px 0;\">\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n <!-- AI Agents -->\n <div>\n <h6 style=\"margin: 0 0 12px 0; color: #495057;\">AI Agents Using This Prompt</h6>\n <mj-user-view-grid \n [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Agent Prompts','PromptID')\" \n [NewRecordValues]=\"NewRecordValues('MJ: AI Agent Prompts')\"\n [AllowLoad]=\"true\"\n [EditMode]=\"GridEditMode()\" \n style=\"height: 200px;\">\n </mj-user-view-grid>\n </div>\n \n <!-- Result Selector References -->\n <div>\n <h6 style=\"margin: 0 0 12px 0; color: #495057;\">Prompts Using This as Result Selector</h6>\n <mj-user-view-grid \n [Params]=\"BuildRelationshipViewParamsByEntityName('AI Prompts','ResultSelectorPromptID')\" \n [NewRecordValues]=\"NewRecordValues('AI Prompts')\"\n [AllowLoad]=\"true\"\n [EditMode]=\"GridEditMode()\" \n style=\"height: 200px;\">\n </mj-user-view-grid>\n </div>\n </div>\n </div>\n </kendo-expansionpanel>\n }\n </div>\n </div>\n </form>\n\n \n <!-- AI Prompt Test Harness -->\n @if (showTestHarness) {\n <kendo-window \n [width]=\"1200\" \n [height]=\"800\" \n [minWidth]=\"800\"\n [minHeight]=\"600\"\n [draggable]=\"true\"\n [resizable]=\"true\"\n [state]=\"'default'\"\n (close)=\"onTestHarnessVisibilityChanged(false)\"\n title=\"Run AI Prompt - {{ record.Name || 'Untitled' }}\">\n <mj-ai-test-harness\n [entity]=\"record\"\n [mode]=\"'prompt'\"\n [isVisible]=\"showTestHarness\"\n (visibilityChange)=\"onTestHarnessVisibilityChanged($event)\">\n </mj-ai-test-harness>\n </kendo-window>\n }\n</div>", styles: [".record-form-container {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n padding: 10px;\n}\n\n.custom-toolbar-actions {\n margin-left: auto;\n}\n\n.status-badge {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n font-weight: 500;\n letter-spacing: 0.02em;\n}\n\n.config-summary {\n position: sticky;\n top: 0;\n max-height: 600px;\n overflow-y: auto;\n}\n\n.config-item {\n padding: 8px 0;\n border-bottom: 1px solid #e9ecef;\n}\n\n.config-item:last-child {\n border-bottom: none;\n}\n\n.template-tab-content {\n background: #fff;\n}\n\n.template-header h5 {\n font-size: 1.1em;\n}\n\n.loading-state,\n.no-template-state,\n.invalid-template-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.no-template-state i,\n.invalid-template-state i {\n opacity: 0.6;\n}\n\n.template-editor-container {\n background: #fff;\n border-radius: 6px;\n}\n\n/* Grid layout adjustments */\n@media (max-width: 1200px) {\n .record-form-container .mj-tab-body > div {\n grid-template-columns: 1fr !important;\n gap: 20px;\n }\n \n .config-summary {\n order: -1;\n position: static;\n max-height: none;\n }\n}\n\n/* Responsive toolbar */\n@media (max-width: 768px) {\n .custom-toolbar-actions {\n flex-direction: column;\n gap: 4px !important;\n }\n \n .status-badge {\n align-self: flex-start;\n }\n}\n\n/* Ensure proper spacing in form sections */\n.record-form-container mj-form-section {\n padding: 16px;\n}\n\n/* Smooth transitions for better UX */\n.status-badge,\n.config-item,\n.template-header {\n transition: all 0.2s ease;\n}\n\n.config-item:hover {\n background-color: rgba(0,0,0,0.02);\n border-radius: 4px;\n margin: 0 -8px;\n padding: 8px;\n}\n\n/* Execution History Table Styles */\n.history-row {\n transition: background 0.2s;\n}\n\n.history-row:not(.even-row) {\n background: #f8f9fa;\n}\n\n.history-row.even-row {\n background: white;\n}\n\n.history-row:hover {\n background: #e9ecef !important;\n}\n\n/* Template Parameters Styles */\n.parameter-card {\n position: relative;\n overflow: hidden;\n}\n\n.parameter-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background: inherit;\n transition: width 0.2s;\n}\n\n.parameter-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n.parameter-card:hover::before {\n width: 6px;\n}\n\n.type-badge {\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n transition: transform 0.2s;\n}\n\n.parameter-card:hover .type-badge {\n transform: scale(1.05);\n}\n\n/* Parameter type icons animation */\n.parameter-card i.fa-solid {\n transition: transform 0.3s;\n}\n\n.parameter-card:hover i.fa-solid {\n transform: rotate(360deg);\n}\n\n/* Grid responsive behavior */\n@media (max-width: 768px) {\n .parameter-card {\n margin-bottom: 8px;\n }\n \n .parameter-card h6 {\n font-size: 0.95em;\n }\n \n .type-badge {\n font-size: 0.7em !important;\n }\n}"] }]
2613
+ args: [{ selector: 'mj-ai-prompt-form', template: "<div class=\"record-form-container\">\n <!-- Dialog container for Kendo dialogs -->\n <div kendoDialogContainer></div>\n <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\" >\n <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n <!-- Main Content Area - Template Editor and Configuration -->\n <div class=\"prompt-main-area\" style=\"display: flex; flex-direction: column; height: 100%; overflow-y: auto;\">\n \n <!-- Header Section -->\n <div class=\"prompt-header\" style=\"flex-shrink: 0; padding: 20px; background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n \n <!-- Left: Prompt Info -->\n <div style=\"flex: 1; min-width: 0;\">\n <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n <i class=\"fa-solid fa-robot\" style=\"color: #6f42c1; font-size: 1.4em;\"></i>\n @if (EditMode) {\n <kendo-textbox [(ngModel)]=\"record.Name\" \n name=\"promptName\"\n placeholder=\"Enter prompt name...\"\n style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n </kendo-textbox>\n } @else {\n <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled AI Prompt' }}</h4>\n <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\" \n style=\"color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n {{ record.Status }}\n </span>\n }\n </div>\n \n <!-- Status and Type Editors when in edit mode -->\n @if (EditMode) {\n <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;\">\n <div>\n <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">Status</label>\n <kendo-dropdownlist [(ngModel)]=\"record.Status\"\n name=\"promptStatus\"\n [data]=\"[{text: 'Active', value: 'Active'}, {text: 'Pending', value: 'Pending'}, {text: 'Disabled', value: 'Disabled'}]\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n style=\"width: 150px;\">\n </kendo-dropdownlist>\n </div>\n <div>\n <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n Type <span style=\"color: #dc3545;\">*</span>\n </label>\n @if (isLoadingPromptTypes) {\n <div style=\"padding: 8px; color: #6c757d; font-style: italic; width: 200px;\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading types...\n </div>\n } @else {\n <kendo-dropdownlist [(ngModel)]=\"record.TypeID\"\n name=\"promptTypeID\"\n [data]=\"availablePromptTypes\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n [filterable]=\"true\"\n placeholder=\"Select prompt type...\"\n style=\"width: 200px;\">\n </kendo-dropdownlist>\n }\n </div>\n </div>\n }\n \n @if (EditMode) {\n <kendo-textarea [(ngModel)]=\"record.Description\" \n name=\"promptDescription\"\n [rows]=\"2\"\n placeholder=\"Enter prompt description...\"\n style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\">\n </kendo-textarea>\n } @else if (record.Description) {\n <p style=\"margin: 0 0 12px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n }\n \n <!-- Quick Config Row -->\n <div class=\"quick-config\" style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n @if (record.TypeID) {\n <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n <i class=\"fa-solid fa-tag\" style=\"color: #6c757d;\"></i>\n <span style=\"color: #6c757d;\">Type:</span>\n <span style=\"color: #495057; font-weight: 500;\">{{ getPromptTypeDisplayName(record.TypeID) }}</span>\n </div>\n }\n \n <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n <i class=\"fa-solid fa-layer-group\" style=\"color: #6c757d;\"></i>\n <span style=\"color: #6c757d;\">Parallelization:</span>\n <span style=\"color: #495057; font-weight: 500;\">{{ getParallelizationModeDisplay() }}</span>\n </div>\n \n <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n <span style=\"color: #6c757d;\">Output:</span>\n <span [style.color]=\"getValidationColor()\" style=\"font-weight: 500;\">{{ getOutputTypeDisplay() }}</span>\n </div>\n \n @if (record.EnableCaching) {\n <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n <i class=\"fa-solid fa-database\" style=\"color: #28a745;\"></i>\n <span style=\"color: #28a745; font-weight: 500;\">Caching Enabled</span>\n </div>\n }\n </div>\n </div>\n \n <!-- Right: Action Buttons -->\n <div class=\"action-buttons\" style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n <div style=\"display: flex; gap: 8px;\">\n @if (record.ID) {\n <button kendoButton [themeColor]=\"'primary'\" [size]=\"'large'\"\n (click)=\"openTestHarness()\"\n title=\"Run AI Prompt Test Harness\">\n <i class=\"fa-solid fa-play\"></i> Run\n </button>\n }\n </div>\n \n @if (!canExecute && record.ID) {\n <div style=\"font-size: 0.75em; color: #dc3545; text-align: right; max-width: 200px;\">\n @if (record.Status !== 'Active') {\n \u2022 Prompt must be Active<br>\n }\n @if (!record.TemplateID) {\n \u2022 Template is required<br>\n }\n @if (!template && record.TemplateID) {\n \u2022 Template not found<br>\n }\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Configuration Sections with Expansion Panels -->\n <div class=\"configuration-sections\" style=\"flex: 1; background: white; border-top: 2px solid #e9ecef; padding: 16px; min-height: 0;\">\n <!-- Template Editor Section -->\n <kendo-expansionpanel \n [expanded]=\"true\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n Template Editor\n @if (template) {\n <span style=\"color: #6c757d; font-size: 0.9em; font-weight: normal;\">\u2022 {{ template.Name }}</span>\n }\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div class=\"template-section\" style=\"display: flex; flex-direction: column; min-height: 400px; padding: 8px;\">\n @if (isLoadingTemplate) {\n <div class=\"loading-state\" style=\"flex: 1; display: flex; align-items: center; justify-content: center; color: #6c757d;\">\n <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; margin-right: 12px;\"></i>\n Loading template...\n </div>\n } @else if (!record.TemplateID) {\n <div class=\"no-template-state\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #6c757d;\">\n <i class=\"fa-solid fa-code\" style=\"font-size: 64px; margin-bottom: 20px; opacity: 0.3;\"></i>\n <h5 style=\"margin-bottom: 12px; color: #495057;\">No Template Associated</h5>\n <p style=\"margin-bottom: 24px; text-align: center; max-width: 400px;\">\n This AI prompt needs a template to define its structure and parameters. \n Create a new template or link to an existing one.\n </p>\n <div style=\"display: flex; gap: 12px;\">\n <button kendoButton [themeColor]=\"'primary'\" (click)=\"createNewTemplate()\">\n <i class=\"fa-solid fa-plus\"></i> Create New Template\n </button>\n <button kendoButton [fillMode]=\"'outline'\" (click)=\"linkExistingTemplate()\">\n <i class=\"fa-solid fa-link\"></i> Link Existing Template\n </button>\n </div>\n </div>\n } @else if (templateNotFoundInDatabase) {\n <div class=\"invalid-template-state\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #dc3545;\">\n <i class=\"fa-solid fa-exclamation-triangle\" style=\"font-size: 64px; margin-bottom: 20px; opacity: 0.7;\"></i>\n <h5 style=\"margin-bottom: 12px;\">Template Not Found</h5>\n <p style=\"margin-bottom: 24px; text-align: center; max-width: 400px;\">\n The referenced template could not be loaded. It may have been deleted or moved.\n </p>\n <div style=\"display: flex; gap: 12px;\">\n <button kendoButton [fillMode]=\"'outline'\" (click)=\"loadTemplate()\">\n <i class=\"fa-solid fa-refresh\"></i> Retry Loading\n </button>\n <button kendoButton [themeColor]=\"'primary'\" (click)=\"createNewTemplate()\">\n <i class=\"fa-solid fa-plus\"></i> Create New Template\n </button>\n </div>\n </div>\n } @else {\n <!-- Active Template Editor -->\n <div class=\"template-editor-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 350px;\">\n <!-- Template Editor -->\n <div style=\"flex: 1; background: white; border-radius: 6px; border: 1px solid #e9ecef;\">\n <mj-template-editor \n #templateEditor\n [template]=\"template\"\n [config]=\"templateEditorConfig\"\n (contentChange)=\"onTemplateContentChange($event)\"\n (runTemplate)=\"onTemplateRun($event)\"\n style=\"display: block; min-height: 300px;\">\n </mj-template-editor>\n </div>\n </div>\n }\n </div>\n </kendo-expansionpanel> \n\n <!-- Template Parameters Expansion Panel -->\n @if (template && templateParams.length > 0) {\n <kendo-expansionpanel \n [expanded]=\"true\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n Template Parameters\n <span class=\"badge\" style=\"background: #6f42c1; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n {{ templateParams.length }}\n </span>\n <span style=\"color: #6c757d; font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n <i class=\"fa-solid fa-info-circle\" title=\"These parameters are defined in the template and will be available when executing this prompt\"></i>\n Parameters defined in the template\n </span>\n </span>\n </ng-template>\n \n <!-- Template Parameters Display -->\n <div style=\"padding: 16px 0;\">\n @if (isLoadingTemplateParams) {\n <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading template parameters...\n </div>\n } @else if (templateParams.length === 0) {\n <div class=\"empty-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n <i class=\"fa-solid fa-info-circle\"></i> This template has no parameters defined\n </div>\n } @else {\n <!-- Parameters Grid -->\n <div style=\"display: grid; gap: 12px;\">\n @for (param of templateParams; track param.ID) {\n <div class=\"parameter-card\" \n style=\"border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; background: #f8f9fa; transition: all 0.2s;\"\n [style.border-left]=\"'4px solid ' + getParamTypeColor(param.Type)\">\n \n <!-- Parameter Header -->\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;\">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <i [class]=\"'fa-solid ' + getParamTypeIcon(param.Type)\" \n [style.color]=\"getParamTypeColor(param.Type)\"\n style=\"font-size: 1.2em;\"></i>\n <h6 style=\"margin: 0; color: #495057; font-weight: 600;\">\n {{ param.Name }}\n @if (param.IsRequired) {\n <span style=\"color: #dc3545; font-size: 0.9em; margin-left: 4px;\">*</span>\n }\n </h6>\n </div>\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <span class=\"type-badge\" \n [style.background-color]=\"getParamTypeColor(param.Type)\"\n style=\"color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n {{ param.Type }}\n </span>\n @if (param.IsRequired) {\n <span style=\"color: #dc3545; font-size: 0.85em; font-weight: 500;\">Required</span>\n } @else {\n <span style=\"color: #6c757d; font-size: 0.85em;\">Optional</span>\n }\n </div>\n </div>\n \n <!-- Parameter Description -->\n @if (param.Description) {\n <p style=\"margin: 0 0 8px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">\n {{ param.Description }}\n </p>\n }\n \n <!-- Type-specific Information -->\n <div style=\"font-size: 0.85em; color: #495057;\">\n <span style=\"display: flex; align-items: center; gap: 4px; margin-bottom: 4px;\">\n <i class=\"fa-solid fa-info-circle\" style=\"color: #6c757d;\"></i>\n {{ getParamTypeDescription(param) }}\n </span>\n </div>\n \n <!-- Additional Parameter Details -->\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px;\">\n @if (param.DefaultValue) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Default Value</label>\n <code style=\"font-size: 0.85em; color: #495057; word-break: break-all;\">{{ param.DefaultValue }}</code>\n </div>\n }\n \n @if (param.EntityID) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Entity</label>\n <span style=\"font-size: 0.85em; color: #495057;\">{{ param.Entity || 'Entity ID: ' + param.EntityID }}</span>\n </div>\n }\n \n @if (param.LinkedParameterName) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Linked To</label>\n <span style=\"font-size: 0.85em; color: #495057;\">\n {{ param.LinkedParameterName }}\n @if (param.LinkedParameterField) {\n ({{ param.LinkedParameterField }})\n }\n </span>\n </div>\n }\n \n @if (param.ExtraFilter) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Filter</label>\n <code style=\"font-size: 0.8em; color: #495057; word-break: break-all;\">{{ param.ExtraFilter }}</code>\n </div>\n }\n \n @if (param.RecordID) {\n <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Record ID</label>\n <code style=\"font-size: 0.85em; color: #495057;\">{{ param.RecordID }}</code>\n </div>\n }\n </div>\n </div>\n }\n </div>\n \n <!-- Help Text -->\n <div style=\"margin-top: 16px; padding: 12px; background: #e3f2fd; border-radius: 6px; border: 1px solid #bbdefb;\">\n <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n <i class=\"fa-solid fa-lightbulb\" style=\"color: #1976d2; margin-top: 2px;\"></i>\n <div style=\"flex: 1; font-size: 0.85em; color: #1565c0; line-height: 1.5;\">\n <strong>Using Template Parameters:</strong> When executing this prompt, you'll be prompted to provide values for all required parameters. \n Parameters can be simple values (text, numbers) or complex data structures (JSON objects, database records, or entire entity collections).\n The template will use these parameters to generate dynamic content based on the values provided at execution time.\n </div>\n </div>\n </div>\n }\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Model Configuration Expansion Panel -->\n @if (record.IsSaved) {\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-microchip\" style=\"color: #6c757d;\"></i>\n Models\n @if (promptModels.length > 0) {\n <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n {{ promptModels.length }}\n </span>\n }\n <span style=\"color: #6c757d; font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n <i class=\"fa-solid fa-info-circle\" title=\"Models are tried in order from top to bottom. The first available model will be used.\"></i>\n Priority order (first available model will be used)\n </span>\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px 0;\">\n <!-- Model Management Interface -->\n <div class=\"model-management\" style=\"border: 1px solid #dee2e6; border-radius: 6px; background: #f8f9fa;\">\n @if (isLoadingModels) {\n <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading models...\n </div>\n } @else {\n @if (promptModels.length === 0) {\n <div class=\"empty-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n <i class=\"fa-solid fa-info-circle\"></i> No models configured\n @if (EditMode) {\n <div style=\"margin-top: 10px;\">\n <button kendoButton fillMode=\"outline\" themeColor=\"primary\" size=\"small\"\n (click)=\"addNewModel()\">\n <i class=\"fa-solid fa-plus\"></i> Add Model\n </button>\n </div>\n }\n </div>\n } @else {\n <!-- Priority explanation for multiple models -->\n @if (promptModels.length > 1) {\n <div style=\"padding: 12px 16px; background: #e3f2fd; border-bottom: 1px solid #bbdefb; color: #1565c0; font-size: 0.85em;\">\n <i class=\"fa-solid fa-info-circle\" style=\"margin-right: 6px;\"></i>\n Models are tried in priority order (highest priority first). The first available model that meets requirements will be used for execution.\n </div>\n }\n <!-- Column Headers -->\n <div class=\"model-header\" style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; background: #e9ecef; font-weight: 600; font-size: 0.85em; color: #495057; border-bottom: 1px solid #dee2e6;\">\n <div title=\"Priority order - models are tried from top to bottom\">\n <i class=\"fa-solid fa-sort\" style=\"color: #6c757d;\"></i>\n </div>\n <div>AI Model <span style=\"color: #dc3545;\">*</span></div>\n <div>Vendor</div>\n <div>Created</div>\n <div>Actions</div>\n </div>\n \n @for (model of promptModels; track getModelTrackId(model) || $index; let i = $index) {\n <div class=\"model-row\" \n [draggable]=\"EditMode\"\n (dragstart)=\"onDragStart($event, i)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, i)\"\n (dragend)=\"onDragEnd($event)\"\n [style.background]=\"!model.ModelID ? '#fff3cd' : (draggedIndex === i ? '#e3f2fd' : 'white')\"\n [style.border-left]=\"!model.ModelID ? '3px solid #ffc107' : 'none'\"\n [style.opacity]=\"draggedIndex === i ? '0.5' : '1'\"\n style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e9ecef; align-items: start; transition: background 0.2s, opacity 0.2s;\">\n \n <!-- Drag Handle / Priority -->\n <div class=\"drag-handle\" style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6c757d;\">\n @if (EditMode) {\n <i class=\"fa-solid fa-grip-vertical\" title=\"Drag to reorder priority\" style=\"cursor: move;\"></i>\n <span style=\"font-size: 0.7em; margin-top: 2px;\">#{{ i + 1 }}</span>\n } @else {\n <span style=\"font-size: 0.9em; font-weight: 600;\" title=\"Priority {{ model.Priority }} - Higher priority numbers are tried first\">#{{ i + 1 }}</span>\n }\n </div>\n \n <!-- Model Selection -->\n <div class=\"model-select\">\n @if (EditMode) {\n <kendo-dropdownlist [(ngModel)]=\"model.ModelID\"\n [name]=\"'modelId_' + getModelTrackId(model)\"\n [data]=\"availableModels\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n [filterable]=\"true\"\n placeholder=\"Select a model...\"\n (valueChange)=\"onModelChange($event, i)\"\n style=\"width: 100%;\">\n </kendo-dropdownlist>\n } @else {\n <span style=\"font-weight: 500;\">{{ getModelDisplayName(model.ModelID) }}</span>\n }\n </div>\n \n <!-- Vendor -->\n <div class=\"model-vendor\">\n @if (EditMode) {\n @if (model.ModelID) {\n @if (shouldShowVendorDropdown(model.ModelID)) {\n <kendo-dropdownlist [(ngModel)]=\"model.VendorID\"\n [name]=\"'vendorId_' + getModelTrackId(model)\"\n [data]=\"getVendorsForModelSync(model.ModelID)\"\n textField=\"Name\"\n valueField=\"ID\"\n [valuePrimitive]=\"true\"\n [filterable]=\"true\"\n placeholder=\"Select vendor...\"\n style=\"width: 100%;\">\n <ng-template kendoDropDownListItemTemplate let-dataItem>\n <span [style.color]=\"getVendorStatusColor(model.ModelID, dataItem.ID)\">\n {{ dataItem.Name }}\n @if (getModelVendorStatus(model.ModelID, dataItem.ID) !== 'Active') {\n <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, dataItem.ID) }})</span>\n }\n </span>\n </ng-template>\n </kendo-dropdownlist>\n } @else {\n <!-- Single vendor - just show the name -->\n @if (getVendorsForModelSync(model.ModelID).length === 1) {\n <span [style.color]=\"getVendorStatusColor(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID)\" style=\"font-size: 0.9em; font-weight: 500;\">\n {{ getVendorsForModelSync(model.ModelID)[0].Name }}\n @if (getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) !== 'Active') {\n <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) }})</span>\n }\n </span>\n } @else {\n <span style=\"color: #6c757d; font-style: italic; font-size: 0.9em;\">No vendors available</span>\n }\n }\n } @else {\n <span style=\"color: #6c757d; font-style: italic; font-size: 0.9em;\">Select model first</span>\n }\n } @else {\n @if (model.VendorID && model.ModelID) {\n <span [style.color]=\"getVendorStatusColor(model.ModelID, model.VendorID)\" style=\"font-size: 0.9em;\">\n {{ getVendorDisplayName(model.VendorID) }}\n @if (getModelVendorStatus(model.ModelID, model.VendorID) !== 'Active') {\n <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, model.VendorID) }})</span>\n }\n </span>\n } @else {\n <span style=\"color: #6c757d; font-size: 0.9em;\">-</span>\n }\n }\n </div>\n \n \n <!-- Created Date -->\n <div class=\"model-created\">\n @if (model.ID) {\n <span style=\"color: #6c757d; font-size: 0.8em;\">{{ model.__mj_CreatedAt | date:'short' }}</span>\n } @else {\n <span style=\"color: #28a745; font-size: 0.8em; font-style: italic;\">New</span>\n }\n </div>\n \n <!-- Actions -->\n <div class=\"model-actions\" style=\"display: flex; gap: 2px; flex-direction: column;\">\n @if (EditMode) {\n <div style=\"display: flex; gap: 2px; margin-bottom: 4px;\">\n <button kendoButton fillMode=\"flat\" size=\"small\"\n (click)=\"moveModelUp(i)\"\n [disabled]=\"i === 0\"\n title=\"Move up\">\n <i class=\"fa-solid fa-chevron-up\"></i>\n </button>\n <button kendoButton fillMode=\"flat\" size=\"small\"\n (click)=\"moveModelDown(i)\"\n [disabled]=\"i === promptModels.length - 1\"\n title=\"Move down\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n </div>\n <button kendoButton fillMode=\"flat\" themeColor=\"error\" size=\"small\"\n (click)=\"removePromptModel(i)\"\n title=\"Remove model\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n \n <!-- Second row with additional details -->\n <div style=\"display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #e9ecef; background: #f8f9fa; font-size: 0.85em; color: #6c757d;\">\n <div></div>\n <div>\n <!-- Basic model details -->\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 8px;\">\n @if (model.Status) {\n <span><strong>Status:</strong> {{ model.Status }}</span>\n }\n @if (model.ConfigurationID) {\n <span><strong>Configuration:</strong> {{ model.ConfigurationID }}</span>\n }\n </div>\n \n <!-- Parallel execution fields when prompt is ModelSpecific -->\n @if (record.ParallelizationMode === 'ModelSpecific') {\n <div style=\"padding: 8px; background: #fff; border: 1px solid #dee2e6; border-radius: 4px; margin-top: 8px;\">\n <div style=\"margin-bottom: 6px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n <i class=\"fa-solid fa-layer-group\"></i> Model-Specific Parallel Execution\n </div>\n \n @if (EditMode) {\n <div style=\"display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center;\">\n <!-- Parallel Mode -->\n <div>\n <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Parallel Mode</label>\n <kendo-dropdownlist [(ngModel)]=\"model.ParallelizationMode\"\n [name]=\"'parallelMode_' + i\"\n [data]=\"[{text: 'None', value: 'None'}, {text: 'Static Count', value: 'StaticCount'}, {text: 'Config Param', value: 'ConfigParam'}]\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n placeholder=\"Select mode...\"\n style=\"width: 100%; font-size: 0.85em;\">\n </kendo-dropdownlist>\n </div>\n \n <!-- Parallel Count (when StaticCount) -->\n @if (model.ParallelizationMode === 'StaticCount') {\n <div>\n <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Parallel Count</label>\n <kendo-numerictextbox [(ngModel)]=\"model.ParallelCount\"\n [name]=\"'parallelCount_' + i\"\n [min]=\"1\"\n [step]=\"1\"\n [format]=\"'n0'\"\n placeholder=\"Count...\"\n style=\"width: 100%; font-size: 0.85em;\">\n </kendo-numerictextbox>\n </div>\n }\n \n <!-- Config Param (when ConfigParam) -->\n @if (model.ParallelizationMode === 'ConfigParam') {\n <div>\n <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Config Parameter</label>\n <kendo-textbox [(ngModel)]=\"model.ParallelConfigParam\"\n [name]=\"'parallelConfigParam_' + i\"\n placeholder=\"Parameter name...\"\n style=\"width: 100%; font-size: 0.85em;\">\n </kendo-textbox>\n </div>\n }\n </div>\n } @else {\n <!-- Read-only display -->\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center;\">\n @if (model.ParallelizationMode) {\n <span><strong>Parallel Mode:</strong> {{ model.ParallelizationMode }}</span>\n }\n @if (model.ParallelCount) {\n <span><strong>Parallel Count:</strong> {{ model.ParallelCount }}</span>\n }\n @if (model.ParallelConfigParam) {\n <span><strong>Config Param:</strong> {{ model.ParallelConfigParam }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n \n @if (EditMode) {\n <div class=\"add-model-row\" style=\"padding: 12px 16px; text-align: center; background: #f8f9fa; border-top: 1px solid #dee2e6;\">\n <button kendoButton fillMode=\"outline\" themeColor=\"success\" size=\"small\"\n (click)=\"addNewModel()\">\n <i class=\"fa-solid fa-plus\"></i> Add Model\n </button>\n </div>\n }\n }\n }\n </div>\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Advanced Configuration Expansion Panel -->\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-cogs\" style=\"color: #6c757d;\"></i>\n Advanced Configuration\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px 0;\">\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n \n <!-- Left Column -->\n <div>\n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"ParallelizationMode\"\n Type=\"dropdownlist\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n \n @if (showParallelCount) {\n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"ParallelCount\"\n Type=\"numerictextbox\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n }\n \n @if (showParallelConfigParam) {\n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"ParallelConfigParam\"\n Type=\"textbox\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n }\n \n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"OutputType\"\n Type=\"dropdownlist\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n \n </div>\n \n <!-- Right Column -->\n <div>\n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"ValidationBehavior\"\n Type=\"dropdownlist\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n \n <mj-form-field \n [record]=\"record\"\n [ShowLabel]=\"true\"\n FieldName=\"EnableCaching\"\n Type=\"checkbox\"\n [EditMode]=\"EditMode\">\n </mj-form-field>\n \n <!-- Result Selector Prompt with Tree Selector -->\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n Result Selector Prompt\n </label>\n @if (EditMode) {\n @if (isLoadingResultSelectorData) {\n <div style=\"padding: 8px; color: #6c757d; font-style: italic;\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading prompts...\n </div>\n } @else {\n <kendo-dropdowntree \n [(ngModel)]=\"record.ResultSelectorPromptID\"\n name=\"resultSelectorPromptID\"\n [data]=\"resultSelectorTreeData\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [filterable]=\"true\"\n placeholder=\"Select a result selector prompt...\"\n style=\"width: 100%;\"\n (valueChange)=\"onResultSelectorChange($event)\">\n </kendo-dropdowntree>\n }\n } @else {\n <span style=\"color: #495057;\">{{ getPromptDisplayName(record.ResultSelectorPromptID || '') || 'None selected' }}</span>\n }\n </div>\n </div>\n </div>\n </div>\n </kendo-expansionpanel>\n\n <!-- Output Example Expansion Panel (when OutputType = object) -->\n @if (showOutputExample) {\n <kendo-expansionpanel \n [expanded]=\"true\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n Output Example (JSON)\n <span style=\"color: #dc3545; font-size: 0.8em; font-weight: normal;\">\u2022 Required for object output type</span>\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px;\">\n @if (EditMode) {\n <mj-code-editor \n [(ngModel)]=\"record.OutputExample\"\n name=\"outputExample\"\n language=\"json\"\n placeholder=\"Enter JSON example structure...\"\n style=\"width: 100%; height: 200px; border: 1px solid #dee2e6; border-radius: 4px;\">\n </mj-code-editor>\n <div style=\"margin-top: 8px; color: #6c757d; font-size: 0.85em;\">\n <i class=\"fa-solid fa-info-circle\"></i> Provide a JSON example that defines the expected structure for object output validation.\n </div>\n } @else if (record.OutputExample) {\n <div style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; font-family: 'Courier New', monospace; font-size: 0.9em; white-space: pre-wrap; overflow: auto; max-height: 250px;\">{{ record.OutputExample }}</div>\n } @else {\n <div style=\"background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 12px; color: #856404; text-align: center;\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i> Output example is required when output type is 'object'\n </div>\n }\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Execution History Expansion Panel -->\n @if (record.IsSaved) {\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-history\" style=\"color: #6c757d;\"></i>\n Execution History\n @if (executionHistory.length > 0) {\n <span style=\"color: #6c757d; font-weight: normal;\">({{ executionHistory.length }})</span>\n }\n </span>\n </ng-template>\n \n <!-- Custom Execution History Viewer -->\n <div style=\"padding: 16px;\">\n @if (isLoadingHistory) {\n <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; margin-bottom: 12px;\"></i>\n <p>Loading execution history...</p>\n </div>\n } @else if (executionHistory.length === 0) {\n <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n <i class=\"fa-solid fa-history\" style=\"font-size: 3em; margin-bottom: 12px; opacity: 0.3;\"></i>\n <p>No execution history yet</p>\n <p style=\"font-size: 0.9em;\">Run this prompt to see execution history here</p>\n </div>\n } @else {\n <!-- Sort Controls -->\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\n <div style=\"color: #6c757d; font-size: 0.9em;\">\n Showing {{ executionHistory.length }} executions\n </div>\n <div style=\"display: flex; gap: 8px; align-items: center;\">\n <span style=\"color: #6c757d; font-size: 0.85em;\">Sort by:</span>\n <kendo-buttongroup selection=\"single\">\n <button kendoButton \n [selected]=\"historySortField === 'runAt'\"\n (click)=\"changeHistorySort('runAt')\"\n size=\"small\">\n Date\n @if (historySortField === 'runAt') {\n <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\" \n style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n }\n </button>\n <button kendoButton \n [selected]=\"historySortField === 'executionTime'\"\n (click)=\"changeHistorySort('executionTime')\"\n size=\"small\">\n Duration\n @if (historySortField === 'executionTime') {\n <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\" \n style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n }\n </button>\n <button kendoButton \n [selected]=\"historySortField === 'tokens'\"\n (click)=\"changeHistorySort('tokens')\"\n size=\"small\">\n Tokens\n @if (historySortField === 'tokens') {\n <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\" \n style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n }\n </button>\n <button kendoButton \n [selected]=\"historySortField === 'cost'\"\n (click)=\"changeHistorySort('cost')\"\n size=\"small\">\n Cost\n @if (historySortField === 'cost') {\n <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\" \n style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n }\n </button>\n </kendo-buttongroup>\n </div>\n </div>\n \n <!-- Execution History Table -->\n <div style=\"border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden;\">\n <table style=\"width: 100%; border-collapse: collapse;\">\n <thead>\n <tr style=\"background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Status</th>\n <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Date & Time</th>\n <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Model</th>\n <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Duration</th>\n <th style=\"padding: 12px; text-align: right; font-weight: 600; color: #495057;\">Tokens</th>\n <th style=\"padding: 12px; text-align: right; font-weight: 600; color: #495057;\">Cost</th>\n <th style=\"padding: 12px; text-align: center; font-weight: 600; color: #495057;\">Type</th>\n <th style=\"padding: 12px; text-align: center; font-weight: 600; color: #495057;\">Actions</th>\n </tr>\n </thead>\n <tbody>\n @for (run of executionHistory; track run.ID; let i = $index) {\n <tr class=\"history-row\"\n [class.even-row]=\"i % 2 === 0\"\n style=\"border-bottom: 1px solid #f1f3f5;\">\n <td style=\"padding: 12px;\">\n <span style=\"display: flex; align-items: center; gap: 6px;\">\n <i [class]=\"'fa-solid ' + getExecutionStatusIcon(run.Success)\" \n [style.color]=\"getExecutionStatusColor(run.Success)\"></i>\n <span [style.color]=\"getExecutionStatusColor(run.Success)\" style=\"font-weight: 500;\">\n {{ run.Success === true ? 'Success' : run.Success === false ? 'Failed' : 'Running' }}\n </span>\n </span>\n </td>\n <td style=\"padding: 12px; color: #495057;\">\n {{ run.RunAt | date:'short' }}\n </td>\n <td style=\"padding: 12px; color: #495057;\">\n <span style=\"display: flex; align-items: center; gap: 6px;\">\n <i class=\"fa-solid fa-microchip\" style=\"color: #6c757d;\"></i>\n {{ run.Model || 'Unknown' }}\n </span>\n </td>\n <td style=\"padding: 12px; color: #495057;\">\n {{ formatDuration(run.ExecutionTimeMS) }}\n </td>\n <td style=\"padding: 12px; text-align: right; color: #495057;\">\n {{ formatTokens(run.TokensUsed) }}\n </td>\n <td style=\"padding: 12px; text-align: right; color: #495057;\">\n {{ formatCost(run.TotalCost || run.Cost) }}\n </td>\n <td style=\"padding: 12px; text-align: center;\">\n @if (run.RunType) {\n <span style=\"padding: 4px 8px; border-radius: 12px; background: #e9ecef; \n color: #495057; font-size: 0.85em; font-weight: 500;\">\n {{ run.RunType }}\n </span>\n }\n </td>\n <td style=\"padding: 12px; text-align: center;\">\n <button kendoButton \n fillMode=\"flat\"\n size=\"small\"\n (click)=\"navigateToPromptRun(run.ID)\"\n title=\"View details\">\n <i class=\"fa-solid fa-external-link\"></i>\n </button>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Cache Expansion Panel -->\n @if (record.IsSaved && record.EnableCaching) {\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-database\" style=\"color: #6c757d;\"></i>\n Result Cache\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px 0;\">\n <mj-user-view-grid \n [Params]=\"BuildRelationshipViewParamsByEntityName('AI Result Cache','AIPromptID')\" \n [NewRecordValues]=\"NewRecordValues('AI Result Cache')\"\n [AllowLoad]=\"true\"\n [EditMode]=\"GridEditMode()\" \n style=\"height: 300px;\">\n </mj-user-view-grid>\n </div>\n </kendo-expansionpanel>\n }\n\n <!-- Related Items Expansion Panel -->\n @if (record.IsSaved) {\n <kendo-expansionpanel \n [expanded]=\"false\"\n style=\"margin-bottom: 12px;\">\n <ng-template kendoExpansionPanelTitleDirective>\n <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n <i class=\"fa-solid fa-link\" style=\"color: #6c757d;\"></i>\n Related Items\n </span>\n </ng-template>\n \n <!-- Direct Content Projection -->\n <div style=\"padding: 16px 0;\">\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n <!-- AI Agents -->\n <div>\n <h6 style=\"margin: 0 0 12px 0; color: #495057;\">AI Agents Using This Prompt</h6>\n <mj-user-view-grid \n [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Agent Prompts','PromptID')\" \n [NewRecordValues]=\"NewRecordValues('MJ: AI Agent Prompts')\"\n [AllowLoad]=\"true\"\n [EditMode]=\"GridEditMode()\" \n style=\"height: 200px;\">\n </mj-user-view-grid>\n </div>\n \n <!-- Result Selector References -->\n <div>\n <h6 style=\"margin: 0 0 12px 0; color: #495057;\">Prompts Using This as Result Selector</h6>\n <mj-user-view-grid \n [Params]=\"BuildRelationshipViewParamsByEntityName('AI Prompts','ResultSelectorPromptID')\" \n [NewRecordValues]=\"NewRecordValues('AI Prompts')\"\n [AllowLoad]=\"true\"\n [EditMode]=\"GridEditMode()\" \n style=\"height: 200px;\">\n </mj-user-view-grid>\n </div>\n </div>\n </div>\n </kendo-expansionpanel>\n }\n </div>\n </div>\n </form>\n\n \n <!-- AI Prompt Test Harness -->\n @if (showTestHarness) {\n <kendo-window \n [width]=\"1200\" \n [height]=\"800\" \n [minWidth]=\"800\"\n [minHeight]=\"600\"\n [draggable]=\"true\"\n [resizable]=\"true\"\n [state]=\"'default'\"\n (close)=\"onTestHarnessVisibilityChanged(false)\"\n title=\"Run AI Prompt - {{ record.Name || 'Untitled' }}\">\n <mj-ai-test-harness\n [entity]=\"record\"\n [mode]=\"'prompt'\"\n [isVisible]=\"showTestHarness\"\n (visibilityChange)=\"onTestHarnessVisibilityChanged($event)\">\n </mj-ai-test-harness>\n </kendo-window>\n }\n</div>", styles: [".record-form-container {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n padding: 10px;\n}\n\n.custom-toolbar-actions {\n margin-left: auto;\n}\n\n.status-badge {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n font-weight: 500;\n letter-spacing: 0.02em;\n}\n\n.config-summary {\n position: sticky;\n top: 0;\n max-height: 600px;\n overflow-y: auto;\n}\n\n.config-item {\n padding: 8px 0;\n border-bottom: 1px solid #e9ecef;\n}\n\n.config-item:last-child {\n border-bottom: none;\n}\n\n.template-tab-content {\n background: #fff;\n}\n\n.template-header h5 {\n font-size: 1.1em;\n}\n\n.loading-state,\n.no-template-state,\n.invalid-template-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.no-template-state i,\n.invalid-template-state i {\n opacity: 0.6;\n}\n\n.template-editor-container {\n background: #fff;\n border-radius: 6px;\n}\n\n/* Grid layout adjustments */\n@media (max-width: 1200px) {\n .record-form-container .mj-tab-body > div {\n grid-template-columns: 1fr !important;\n gap: 20px;\n }\n \n .config-summary {\n order: -1;\n position: static;\n max-height: none;\n }\n}\n\n/* Responsive toolbar */\n@media (max-width: 768px) {\n .custom-toolbar-actions {\n flex-direction: column;\n gap: 4px !important;\n }\n \n .status-badge {\n align-self: flex-start;\n }\n}\n\n/* Ensure proper spacing in form sections */\n.record-form-container mj-form-section {\n padding: 16px;\n}\n\n/* Smooth transitions for better UX */\n.status-badge,\n.config-item,\n.template-header {\n transition: all 0.2s ease;\n}\n\n.config-item:hover {\n background-color: rgba(0,0,0,0.02);\n border-radius: 4px;\n margin: 0 -8px;\n padding: 8px;\n}\n\n/* Execution History Table Styles */\n.history-row {\n transition: background 0.2s;\n}\n\n.history-row:not(.even-row) {\n background: #f8f9fa;\n}\n\n.history-row.even-row {\n background: white;\n}\n\n.history-row:hover {\n background: #e9ecef !important;\n}\n\n/* Template Parameters Styles */\n.parameter-card {\n position: relative;\n overflow: hidden;\n}\n\n.parameter-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background: inherit;\n transition: width 0.2s;\n}\n\n.parameter-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n.parameter-card:hover::before {\n width: 6px;\n}\n\n.type-badge {\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n transition: transform 0.2s;\n}\n\n.parameter-card:hover .type-badge {\n transform: scale(1.05);\n}\n\n/* Parameter type icons animation */\n.parameter-card i.fa-solid {\n transition: transform 0.3s;\n}\n\n.parameter-card:hover i.fa-solid {\n transform: rotate(360deg);\n}\n\n/* Grid responsive behavior */\n@media (max-width: 768px) {\n .parameter-card {\n margin-bottom: 8px;\n }\n \n .parameter-card h6 {\n font-size: 0.95em;\n }\n \n .type-badge {\n font-size: 0.7em !important;\n }\n}"] }]
2592
2614
  }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.AITestHarnessDialogService }, { type: i0.ViewContainerRef }], { templateEditor: [{
2593
2615
  type: ViewChild,
2594
2616
  args: ['templateEditor']