@pega/sdk 0.0.14 → 0.0.15

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 (130) hide show
  1. package/README.md +46 -6
  2. package/dist/index.js +50 -24
  3. package/package.json +42 -3
  4. package/templates/angular-sdk-reference/angular.json +1 -2
  5. package/templates/angular-sdk-reference/extra-webpack.config.cjs +23 -0
  6. package/templates/angular-sdk-reference/index.html +12 -0
  7. package/templates/angular-sdk-reference/package.json +0 -1
  8. package/templates/angular-sdk-reference/src/app/app.component.ts +15 -232
  9. package/templates/angular-sdk-reference/src/app/pconnect-renderer.component.ts +153 -0
  10. package/templates/angular-sdk-reference/src/components/fields/auto-complete/auto-complete.component.ts +58 -21
  11. package/templates/angular-sdk-reference/src/components/fields/checkbox/checkbox.component.ts +8 -3
  12. package/templates/angular-sdk-reference/src/components/fields/currency/currency.component.ts +22 -7
  13. package/templates/angular-sdk-reference/src/components/fields/date-input/date-input.component.ts +19 -6
  14. package/templates/angular-sdk-reference/src/components/fields/dropdown/dropdown.component.ts +24 -7
  15. package/templates/angular-sdk-reference/src/components/fields/email/email.component.ts +19 -6
  16. package/templates/angular-sdk-reference/src/components/fields/integer/integer.component.ts +19 -6
  17. package/templates/angular-sdk-reference/src/components/fields/phone/phone.component.ts +19 -6
  18. package/templates/angular-sdk-reference/src/components/fields/radio-buttons/radio-buttons.component.ts +16 -5
  19. package/templates/angular-sdk-reference/src/components/fields/text-area/text-area.component.ts +19 -6
  20. package/templates/angular-sdk-reference/src/components/fields/text-input/text-input.component.ts +19 -6
  21. package/templates/angular-sdk-reference/src/components/fields/url-input/url-input.component.ts +26 -7
  22. package/templates/angular-sdk-reference/src/components/helpers/sdk-helpers.ts +93 -0
  23. package/templates/angular-sdk-reference/src/components/infra/case-summary/case-summary.component.ts +8 -9
  24. package/templates/angular-sdk-reference/src/components/infra/case-view/case-view.component.ts +24 -12
  25. package/templates/angular-sdk-reference/src/components/infra/root-container/root-container.component.ts +21 -15
  26. package/templates/angular-sdk-reference/src/components/infra/stages/stages.component.ts +21 -10
  27. package/templates/angular-sdk-reference/src/components/infra/view/view.component.ts +14 -9
  28. package/templates/angular-sdk-reference/src/components/templates/default-form/default-form.component.ts +12 -8
  29. package/templates/angular-sdk-reference/tsconfig.app.json +13 -0
  30. package/templates/angular-sdk-reference/tsconfig.json +2 -5
  31. package/templates/react-sdk-reference/.ai-common/agents/embedded-flow-expert.md +65 -31
  32. package/templates/react-sdk-reference/.ai-common/agents/implementation-expert.md +74 -38
  33. package/templates/react-sdk-reference/.ai-common/global/ai-agent-instructions-embedded.md +33 -1
  34. package/templates/react-sdk-reference/.ai-common/global/ai-agent-instructions.md +57 -22
  35. package/templates/react-sdk-reference/.ai-common/instructions/embedded-component.md +25 -10
  36. package/templates/react-sdk-reference/.ai-common/prompts/add-component.md +40 -19
  37. package/templates/react-sdk-reference/.ai-common/prompts/component-manifest.json +55 -1
  38. package/templates/react-sdk-reference/.ai-common/prompts/embedded-component-manifest.md +26 -4
  39. package/templates/react-sdk-reference/.ai-common/prompts/generate-all-components.md +82 -33
  40. package/templates/react-sdk-reference/.ai-common/prompts/generate-dse-components.md +46 -26
  41. package/templates/react-sdk-reference/.ai-common/prompts/generate-embedded-components.md +28 -15
  42. package/templates/react-sdk-reference/.ai-common/prompts/generate-field-components.md +24 -6
  43. package/templates/react-sdk-reference/.ai-common/prompts/generate-infra-components.md +24 -6
  44. package/templates/react-sdk-reference/.ai-common/prompts/generate-template-components.md +24 -6
  45. package/templates/react-sdk-reference/.ai-common/prompts/generate-widget-components.md +24 -6
  46. package/templates/react-sdk-reference/.ai-common/prompts/identify-components.md +2 -0
  47. package/templates/react-sdk-reference/.ai-common/prompts/replace-design-system.md +44 -17
  48. package/templates/react-sdk-reference/.ai-common/skills/connect-pega-server.md +14 -1
  49. package/templates/react-sdk-reference/.ai-common/skills/design-system-extension-skills/AssignmentHeader.md +79 -0
  50. package/templates/react-sdk-reference/.ai-common/skills/design-system-extension-skills/Toast.md +96 -0
  51. package/templates/react-sdk-reference/.ai-common/skills/design-system-extension.md +56 -35
  52. package/templates/react-sdk-reference/.ai-common/skills/embedded-flow/analyze-customer-repo.md +29 -3
  53. package/templates/react-sdk-reference/.ai-common/skills/embedded-flow/run-and-verify-integration.md +97 -37
  54. package/templates/react-sdk-reference/.ai-common/skills/embedded-flow/wire-integration.md +91 -60
  55. package/templates/react-sdk-reference/.ai-common/skills/field-components.md +13 -1
  56. package/templates/react-sdk-reference/.ai-common/skills/infra-components.md +13 -1
  57. package/templates/react-sdk-reference/.ai-common/skills/portal-flow/run-and-verify-portal.md +290 -0
  58. package/templates/react-sdk-reference/.ai-common/skills/template-components.md +13 -1
  59. package/templates/react-sdk-reference/.ai-common/skills/widget-components.md +13 -1
  60. package/templates/react-sdk-reference/assets/icons/trash.svg +3 -0
  61. package/templates/react-sdk-reference/index.html +0 -1
  62. package/templates/react-sdk-reference/package.json +2 -2
  63. package/templates/react-sdk-reference/package.minimal.json +2 -2
  64. package/templates/react-sdk-reference/sdk-config.json +3 -3
  65. package/templates/react-sdk-reference/src/FallbackComponent.tsx +1 -1
  66. package/templates/react-sdk-reference/src/MashupApp.tsx +33 -78
  67. package/templates/react-sdk-reference/src/PortalApp.tsx +23 -100
  68. package/templates/react-sdk-reference/src/components/component-map.ts +15 -1
  69. package/templates/react-sdk-reference/src/components/designSystemExtension/AssignmentHeader/AssignmentHeader.tsx +15 -0
  70. package/templates/react-sdk-reference/src/components/designSystemExtension/AssignmentHeader/index.tsx +1 -0
  71. package/templates/react-sdk-reference/src/components/designSystemExtension/FieldGroup/FieldGroup.tsx +1 -1
  72. package/templates/react-sdk-reference/src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx +1 -1
  73. package/templates/react-sdk-reference/src/components/designSystemExtension/FieldValueList/FieldValueList.tsx +16 -4
  74. package/templates/react-sdk-reference/src/components/designSystemExtension/ModalDialog/ModalDialog.tsx +26 -0
  75. package/templates/react-sdk-reference/src/components/designSystemExtension/ModalDialog/index.tsx +1 -0
  76. package/templates/react-sdk-reference/src/components/designSystemExtension/Toast/Toast.tsx +35 -0
  77. package/templates/react-sdk-reference/src/components/designSystemExtension/Toast/index.tsx +1 -0
  78. package/templates/react-sdk-reference/src/components/field/AutoComplete/AutoComplete.tsx +362 -24
  79. package/templates/react-sdk-reference/src/components/field/CancelAlert/CancelAlert.tsx +1 -1
  80. package/templates/react-sdk-reference/src/components/field/Checkbox/Checkbox.tsx +3 -1
  81. package/templates/react-sdk-reference/src/components/field/Currency/Currency.tsx +6 -3
  82. package/templates/react-sdk-reference/src/components/field/Date/Date.tsx +2 -1
  83. package/templates/react-sdk-reference/src/components/field/DateTime/DateTime.tsx +2 -1
  84. package/templates/react-sdk-reference/src/components/field/Decimal/Decimal.tsx +4 -3
  85. package/templates/react-sdk-reference/src/components/field/Dropdown/Dropdown.tsx +2 -0
  86. package/templates/react-sdk-reference/src/components/field/Email/Email.tsx +2 -1
  87. package/templates/react-sdk-reference/src/components/field/EmbeddedDataMulti/EmbeddedDataMulti.tsx +121 -0
  88. package/templates/react-sdk-reference/src/components/field/EmbeddedDataMulti/config-ext.json +7 -0
  89. package/templates/react-sdk-reference/src/components/field/EmbeddedDataMulti/index.tsx +1 -0
  90. package/templates/react-sdk-reference/src/components/field/Integer/Integer.tsx +2 -1
  91. package/templates/react-sdk-reference/src/components/field/Location/Location.tsx +1 -1
  92. package/templates/react-sdk-reference/src/components/field/Multiselect/Multiselect.tsx +40 -20
  93. package/templates/react-sdk-reference/src/components/field/ObjectReference/ObjectReference.tsx +554 -49
  94. package/templates/react-sdk-reference/src/components/field/ObjectReference/utils.ts +111 -20
  95. package/templates/react-sdk-reference/src/components/field/Percentage/Percentage.tsx +4 -3
  96. package/templates/react-sdk-reference/src/components/field/Phone/Phone.tsx +2 -1
  97. package/templates/react-sdk-reference/src/components/field/SelectableCard/SelectableCard.tsx +2 -1
  98. package/templates/react-sdk-reference/src/components/field/TextArea/TextArea.tsx +2 -1
  99. package/templates/react-sdk-reference/src/components/field/TextInput/TextInput.tsx +2 -1
  100. package/templates/react-sdk-reference/src/components/field/Time/Time.tsx +2 -1
  101. package/templates/react-sdk-reference/src/components/field/URL/URL.tsx +2 -1
  102. package/templates/react-sdk-reference/src/components/field/UserReference/UserReference.tsx +1 -1
  103. package/templates/react-sdk-reference/src/components/helpers/field-utils.ts +44 -0
  104. package/templates/react-sdk-reference/src/components/helpers/simpleTableHelpers.ts +19 -7
  105. package/templates/react-sdk-reference/src/components/infra/ModalViewContainer/DataViewActionButtons/DataViewActionButtons.tsx +97 -0
  106. package/templates/react-sdk-reference/src/components/infra/ModalViewContainer/DataViewActionButtons/index.tsx +1 -0
  107. package/templates/react-sdk-reference/src/components/infra/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx +53 -0
  108. package/templates/react-sdk-reference/src/components/infra/ModalViewContainer/ListViewActionButtons/index.tsx +1 -0
  109. package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/SearchGroups.tsx +2 -2
  110. package/templates/react-sdk-reference/src/components/template/CaseSummary/CaseSummary.tsx +3 -1
  111. package/templates/react-sdk-reference/src/components/template/DataReference/SearchForm.tsx +4 -4
  112. package/templates/react-sdk-reference/src/components/template/HierarchicalForm/HierarchicalForm.tsx +2 -2
  113. package/templates/react-sdk-reference/src/components/template/InlineDashboard/InlineDashboard.tsx +1 -1
  114. package/templates/react-sdk-reference/src/components/template/ListView/ListView.tsx +7 -3
  115. package/templates/react-sdk-reference/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx +173 -99
  116. package/templates/react-sdk-reference/src/components/template/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx +63 -56
  117. package/templates/react-sdk-reference/src/components/widget/ToDo/ToDo.tsx +1 -1
  118. package/templates/react-sdk-reference/vite.config.ts +26 -4
  119. package/templates/angular-sdk-reference/pega-constellationjs-0.26.3-local.tgz +0 -0
  120. package/templates/angular-sdk-reference/src/helpers/event-utils.ts +0 -18
  121. package/templates/angular-sdk-reference/src/helpers/utils.ts +0 -38
  122. package/templates/angular-sdk-reference/src/helpers/versionHelpers.ts +0 -14
  123. package/templates/react-sdk-reference/.ai-common/instructions/dse-component.md +0 -47
  124. package/templates/react-sdk-reference/.ai-common/instructions/field-component.md +0 -50
  125. package/templates/react-sdk-reference/.ai-common/instructions/infra-component.md +0 -76
  126. package/templates/react-sdk-reference/.ai-common/instructions/template-component.md +0 -43
  127. package/templates/react-sdk-reference/.ai-common/instructions/widget-component.md +0 -45
  128. package/templates/react-sdk-reference/.ai-common/skills/embedded-flow/authenticate.md +0 -311
  129. package/templates/react-sdk-reference/pega-constellationjs-0.26.3-local.tgz +0 -0
  130. package/templates/react-sdk-reference/pega-sdk-react-0.1.0.tgz +0 -0
@@ -8,6 +8,7 @@
8
8
  import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
9
9
  import type { OnInit, OnDestroy } from '@angular/core';
10
10
  import { CommonModule } from '@angular/common';
11
+ import { PegaBridgeService } from '@pega/sdk-angular';
11
12
  import type { Unsubscribe } from '@pega/sdk-angular';
12
13
 
13
14
  @Component({
@@ -15,7 +16,10 @@ import type { Unsubscribe } from '@pega/sdk-angular';
15
16
  standalone: true,
16
17
  imports: [CommonModule],
17
18
  template: `
18
- <div *ngIf="stages.length > 0" style="display: flex; gap: 0.25rem; margin-bottom: 1rem;">
19
+ <div
20
+ *ngIf="stages.length > 0"
21
+ style="display: flex; gap: 0.25rem; margin-bottom: 1rem;"
22
+ >
19
23
  <div
20
24
  *ngFor="let stage of stages"
21
25
  [style.flex]="1"
@@ -24,10 +28,18 @@ import type { Unsubscribe } from '@pega/sdk-angular';
24
28
  [style.fontSize]="'0.75rem'"
25
29
  [style.fontWeight]="stage.visited_status === 'active' ? '600' : '400'"
26
30
  [style.background]="
27
- stage.visited_status === 'completed' ? '#dcfce7' : stage.visited_status === 'active' ? '#dbeafe' : '#f3f4f6'
31
+ stage.visited_status === 'completed'
32
+ ? '#dcfce7'
33
+ : stage.visited_status === 'active'
34
+ ? '#dbeafe'
35
+ : '#f3f4f6'
28
36
  "
29
37
  [style.color]="
30
- stage.visited_status === 'completed' ? '#166534' : stage.visited_status === 'active' ? '#1d4ed8' : '#6b7280'
38
+ stage.visited_status === 'completed'
39
+ ? '#166534'
40
+ : stage.visited_status === 'active'
41
+ ? '#1d4ed8'
42
+ : '#6b7280'
31
43
  "
32
44
  [style.borderRadius]="'0.25rem'"
33
45
  >
@@ -42,7 +54,7 @@ export class StagesComponent implements OnInit, OnDestroy {
42
54
  stages: Array<{ name: string; visited_status?: string }> = [];
43
55
 
44
56
  private pConn: any;
45
- private observable: any;
57
+ private bridge = new PegaBridgeService();
46
58
  private storeUnsub: Unsubscribe | undefined;
47
59
 
48
60
  constructor(
@@ -52,23 +64,22 @@ export class StagesComponent implements OnInit, OnDestroy {
52
64
 
53
65
  ngOnInit(): void {
54
66
  this.pConn = this.props.getPConnect();
55
- // @ts-ignore
56
- const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
57
- this.observable = new PConnectObservable(this.pConn);
58
67
  this.updateSelf();
59
68
 
60
- this.storeUnsub = this.observable.subscribe(() => {
69
+ const subscription = this.bridge.observe(this.pConn).subscribe(() => {
61
70
  this.updateSelf();
62
71
  });
72
+ this.storeUnsub = () => subscription.unsubscribe();
63
73
  }
64
74
 
65
75
  ngOnDestroy(): void {
66
76
  this.storeUnsub?.();
67
- this.observable?.destroy();
68
77
  }
69
78
 
70
79
  private updateSelf(): void {
71
- const configProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps());
80
+ const configProps = this.pConn.resolveConfigProps(
81
+ this.pConn.getConfigProps(),
82
+ );
72
83
  this.stages = configProps.stages ?? this.props.stages ?? [];
73
84
 
74
85
  this.ngZone.run(() => {
@@ -12,8 +12,12 @@
12
12
  import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
13
13
  import type { OnInit, OnDestroy, Type } from '@angular/core';
14
14
  import { CommonModule } from '@angular/common';
15
+ import { PegaBridgeService } from '@pega/sdk-angular';
15
16
  import type { Unsubscribe } from '@pega/sdk-angular';
16
- import { PConnectBridgeComponent, getAngularComponent } from '@pega/sdk-angular';
17
+ import {
18
+ PConnectBridgeComponent,
19
+ getAngularComponent,
20
+ } from '@pega/sdk-angular';
17
21
 
18
22
  const NO_HEADER_TEMPLATES = [
19
23
  'SubTabs',
@@ -45,7 +49,9 @@ const NO_HEADER_TEMPLATES = [
45
49
 
46
50
  <!-- Template mode: render the named template component directly (NOT through bridge) -->
47
51
  <ng-container *ngIf="templateComponent">
48
- <ng-container *ngComponentOutlet="templateComponent; inputs: templateInputs"></ng-container>
52
+ <ng-container
53
+ *ngComponentOutlet="templateComponent; inputs: templateInputs"
54
+ ></ng-container>
49
55
  </ng-container>
50
56
 
51
57
  <!-- No template: render children directly -->
@@ -70,7 +76,7 @@ export class ViewComponent implements OnInit, OnDestroy {
70
76
  childGetters: Array<() => typeof PConnect> = [];
71
77
 
72
78
  private pConn: any;
73
- private observable: any;
79
+ private bridge = new PegaBridgeService();
74
80
  private storeUnsub: Unsubscribe | undefined;
75
81
 
76
82
  constructor(
@@ -81,23 +87,22 @@ export class ViewComponent implements OnInit, OnDestroy {
81
87
  ngOnInit(): void {
82
88
  this.pConn = this.props.getPConnect();
83
89
 
84
- // @ts-ignore
85
- const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
86
- this.observable = new PConnectObservable(this.pConn);
87
90
  this.updateSelf();
88
91
 
89
- this.storeUnsub = this.observable.subscribe(() => {
92
+ const subscription = this.bridge.observe(this.pConn).subscribe(() => {
90
93
  this.updateSelf();
91
94
  });
95
+ this.storeUnsub = () => subscription.unsubscribe();
92
96
  }
93
97
 
94
98
  ngOnDestroy(): void {
95
99
  this.storeUnsub?.();
96
- this.observable?.destroy();
97
100
  }
98
101
 
99
102
  private updateSelf(): void {
100
- const configProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps());
103
+ const configProps = this.pConn.resolveConfigProps(
104
+ this.pConn.getConfigProps(),
105
+ );
101
106
  const inheritedProps = this.pConn.getInheritedProps?.() ?? {};
102
107
 
103
108
  this.templateName = configProps.template ?? '';
@@ -11,6 +11,8 @@
11
11
  import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
12
12
  import type { OnInit, OnDestroy } from '@angular/core';
13
13
  import { CommonModule } from '@angular/common';
14
+ import { PegaBridgeService } from '@pega/sdk-angular';
15
+ import { getInstructions } from '../../helpers/sdk-helpers';
14
16
  import type { Unsubscribe } from '@pega/sdk-angular';
15
17
  import { PConnectBridgeComponent } from '@pega/sdk-angular';
16
18
 
@@ -24,7 +26,11 @@ import { PConnectBridgeComponent } from '@pega/sdk-angular';
24
26
  style="margin-bottom: 0.75rem; color: #6b7280; font-size: 0.875rem;"
25
27
  [innerHTML]="instructions"
26
28
  ></div>
27
- <div [style.display]="'grid'" [style.gridTemplateColumns]="gridColumns" [style.gap]="'1rem'">
29
+ <div
30
+ [style.display]="'grid'"
31
+ [style.gridTemplateColumns]="gridColumns"
32
+ [style.gap]="'1rem'"
33
+ >
28
34
  <div *ngFor="let getter of childGetters">
29
35
  <pconnect-bridge [getPConnect]="getter"></pconnect-bridge>
30
36
  </div>
@@ -39,7 +45,7 @@ export class DefaultFormComponent implements OnInit, OnDestroy {
39
45
  childGetters: Array<() => typeof PConnect> = [];
40
46
 
41
47
  private pConn: any;
42
- private observable: any;
48
+ private bridge = new PegaBridgeService();
43
49
  private storeUnsub: Unsubscribe | undefined;
44
50
 
45
51
  constructor(
@@ -49,25 +55,23 @@ export class DefaultFormComponent implements OnInit, OnDestroy {
49
55
 
50
56
  ngOnInit(): void {
51
57
  this.pConn = this.props.getPConnect();
52
- // @ts-ignore
53
- const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
54
- this.observable = new PConnectObservable(this.pConn);
55
58
  this.updateSelf();
56
59
 
57
- this.storeUnsub = this.observable.subscribe(() => {
60
+ const subscription = this.bridge.observe(this.pConn).subscribe(() => {
58
61
  this.updateSelf();
59
62
  });
63
+ this.storeUnsub = () => subscription.unsubscribe();
60
64
  }
61
65
 
62
66
  ngOnDestroy(): void {
63
67
  this.storeUnsub?.();
64
- this.observable?.destroy();
65
68
  }
66
69
 
67
70
  private updateSelf(): void {
68
71
  const configProps = this.pConn.getConfigProps();
69
72
  const numCols = configProps.NumCols ?? '1';
70
- this.instructions = configProps.instructions ?? '';
73
+ this.instructions =
74
+ getInstructions(this.pConn, configProps.instructions) ?? '';
71
75
 
72
76
  switch (numCols) {
73
77
  case '2':
@@ -0,0 +1,13 @@
1
+ {
2
+ "extends": "./tsconfig.json",
3
+ "compilerOptions": {
4
+ "outDir": "./out-tsc/app",
5
+ "types": [],
6
+ "noPropertyAccessFromIndexSignature": false
7
+ },
8
+ "files": ["src/main.ts"],
9
+ "include": [
10
+ "src/**/*.d.ts",
11
+ "../../node_modules/@pega/pcore-pconnect-typedefs/index.d.ts"
12
+ ]
13
+ }
@@ -1,12 +1,11 @@
1
1
  {
2
2
  "compileOnSave": false,
3
3
  "compilerOptions": {
4
- "rootDir": "../..",
5
4
  "outDir": "./dist/out-tsc",
6
5
  "forceConsistentCasingInFileNames": true,
7
6
  "strict": true,
8
7
  "noImplicitOverride": true,
9
- "noPropertyAccessFromIndexSignature": false,
8
+ "noPropertyAccessFromIndexSignature": true,
10
9
  "noImplicitReturns": true,
11
10
  "noFallthroughCasesInSwitch": true,
12
11
  "sourceMap": true,
@@ -22,9 +21,7 @@
22
21
  "@pega/sdk-angular": ["../../packages/sdk-angular/src/index.ts"],
23
22
  "@pega/sdk-types": ["../../packages/sdk-types/src/index.ts"]
24
23
  },
25
- "ignoreDeprecations": "5.0",
26
- "typeRoots": ["../../node_modules/@types", "../../node_modules/@pega"],
27
- "types": ["pcore-pconnect-typedefs"]
24
+ "ignoreDeprecations": "5.0"
28
25
  },
29
26
  "angularCompilerOptions": {
30
27
  "enableI18nLegacyMessageIdFormat": false,
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  ai-name: Embedded Flow Expert
3
- ai-description: "Use when the user wants to embed a Pega case flow into their existing application — analyzes their codebase, generates Pega components that render with their design system and read like their own code, and wires the integration. Handles trigger phrases like 'embed a case in my app', 'generate pega components for my app', 'analyze my design system', 'integrate pega into my application', 'create pega components matching my app'."
3
+ ai-description: "Use when the user wants to embed a Pega case flow into their existing application — analyzes their codebase, generates Pega components that render with their design system and read like their own code, and wires the integration. Handles trigger phrases like 'embed a case in my app', 'generate pega components for my app', 'analyze my design system', 'integrate pega into my application', 'create pega components matching my app'. Also handles plain requests such as 'add the service request form to my app', 'show the Pega form inside my page', 'learn how my app looks', 'connect the form to my app', 'check the form works', and 'my app's look changed, update the form'."
4
4
  ---
5
5
 
6
6
  You are the **Embedded Flow Expert**. You help customers embed Pega case flows into their existing applications by:
@@ -19,17 +19,17 @@ You execute the workflows defined in this repository's skill and prompt files
19
19
  **If the user's message is vague, a greeting, or says "help"**, respond with:
20
20
 
21
21
  1. A one-paragraph summary of what you do (analyze customer apps, generate matching Pega components, wire integration).
22
- 2. A bulleted menu of supported flows:
23
- - **Analyze my app** — "scan my codebase and create a Design Profile"
24
- - **Generate Pega components** — "generate these components matching my app's design system"
25
- - **Full embedded flow** — "embed [case type] into my app" (runs analysis + generation + wiring + runtime verification)
26
- - **Wire integration** — "how do I connect the generated components to my app"
27
- - **Verify the integration** — "run my app and check the Pega flow works"
28
- - **Update components** — "my design system changed, regenerate the pega components"
29
- 3. Ask the user to clarify:
22
+ 2. A bulleted menu of supported flows. Lead each item with the plain label and keep the flow name in brackets:
23
+ - **Learn how my app looks** (Analyze my app) — "look at my app and note its style"
24
+ - **Build the form pieces in my app's style** (Generate Pega components) — "build a date picker and a dropdown that match my app"
25
+ - **Add a Pega form to my app, start to finish** (Full embedded flow) — "add the service request form to my app" (runs analysis + generation + wiring + runtime verification)
26
+ - **Connect the form to my app** (Wire integration) — "how do I connect the form to my app"
27
+ - **Check the form works** (Verify the integration) — "run my app and check the Pega form works"
28
+ - **Refresh the form pieces after a restyle** (Update components) — "my app's look changed, update the form"
29
+ 3. Ask the user to clarify (offer the plain labels above, then map the answer back to the flow name in brackets):
30
30
  - **Flow**: Analyze only | Generate components | Full embedded flow | Wire integration | Verify integration | Update/regenerate
31
- - **Component list** (only for the standalone "Generate components" flow): the Pega component names to generate. Do not ask for this in the full embedded flow — Step 0 resolves it from the server
32
- - **Case type** (only for "Full embedded flow"): the Pega case type to embed. If the user does not name one, do not press for it — Step 0 presents the case types the server returns
31
+ - **Component list** (only for the standalone "Generate components" flow): the Pega component names to generate. Ask for it in plain words — "Which pieces do you want? Describe them in your own words, like 'date picker' or 'the buttons at the bottom'" — and resolve each through the `aliases` and `behaviorClasses` in `{{PROMPT_DIR}}/component-manifest.json`, confirming the matches with the user. Do not ask for this in the full embedded flow — Step 0 resolves it from the server
32
+ - **Case type** (only for "Full embedded flow"): the Pega case type to embed. If the user does not name one, do not press for it — Step 0 presents the case types the server returns. The user may name it in plain words ("service request") — Step 0.2 matches that against the server's names
33
33
  - **Launch point and render target** (for "Full embedded flow" and "Wire integration"): what opens the case flow, and where it appears
34
34
 
35
35
  Do not start reading files or generating anything until intent and required inputs are confirmed.
@@ -38,16 +38,18 @@ Do not start reading files or generating anything until intent and required inpu
38
38
 
39
39
  Determine which workflow governs the request, then execute it by reading the referenced files.
40
40
 
41
- | Request shape | Action |
42
- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
43
- | "Analyze my app / scan my codebase / create a design profile" | Read and execute `{{SKILL_DIR}}/embedded-flow/analyze-customer-repo.md` |
44
- | "Generate these Pega components for my app" (component list provided, Design Profile exists) | Read and execute `{{PROMPT_DIR}}/generate-embedded-components{{PROMPT_EXT}}` |
45
- | "Generate these Pega components for my app" (component list provided, NO Design Profile) | Execute analysis first → then generation |
46
- | "Embed [case type] in my app" / "Full embedded flow" / "Integrate pega sdk" / "open workflow" | Execute Step 0 (resolve the case type and components) → analysis → Step 0 of `{{SKILL_DIR}}/embedded-flow/wire-integration.md` → generation → the remaining wiring steps → verification per `{{SKILL_DIR}}/embedded-flow/run-and-verify-integration.md` |
47
- | "How do I wire / connect / integrate this" | Read and present `{{SKILL_DIR}}/embedded-flow/wire-integration.md` |
48
- | "Run my app / verify the flow works / check the integration" | Read and execute `{{SKILL_DIR}}/embedded-flow/run-and-verify-integration.md` |
49
- | "My design system changed / regenerate / update pega-components" | Re-run analysis (overwrite existing profile) → re-run generation for previously generated components |
50
- | Component list provided without explicit flow request | Assume "Generate components" flow; check for Design Profile existence |
41
+ | Request shape | Action |
42
+ | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
43
+ | "Analyze my app / scan my codebase / create a design profile" | Read and execute `{{SKILL_DIR}}/embedded-flow/analyze-customer-repo{{SKILL_EXT}}` |
44
+ | "Generate these Pega components for my app" (component list provided, Design Profile exists) | Read and execute `{{PROMPT_DIR}}/generate-embedded-components{{PROMPT_EXT}}` |
45
+ | "Generate these Pega components for my app" (component list provided, NO Design Profile) | Execute analysis first → then generation |
46
+ | "Embed [case type] in my app" / "Full embedded flow" / "Integrate pega sdk" / "open workflow" | Execute Step 0 (resolve the case type and components) → analysis → Step 0 of `{{SKILL_DIR}}/embedded-flow/wire-integration{{SKILL_EXT}}` → generation → the remaining wiring steps → verification per `{{SKILL_DIR}}/embedded-flow/run-and-verify-integration{{SKILL_EXT}}` |
47
+ | "How do I wire / connect / integrate this" | Read and present `{{SKILL_DIR}}/embedded-flow/wire-integration{{SKILL_EXT}}` |
48
+ | "Run my app / verify the flow works / check the integration" | Read and execute `{{SKILL_DIR}}/embedded-flow/run-and-verify-integration{{SKILL_EXT}}` |
49
+ | "My design system changed / regenerate / update the generated Pega components" | Re-run analysis (overwrite existing profile) → re-run generation for previously generated components |
50
+ | Component list provided without explicit flow request | Assume "Generate components" flow; check for Design Profile existence |
51
+
52
+ Plain requests route the same way: "learn how my app looks" is analysis; "add the [name] form to my app" or "show the Pega form inside my page" is the full embedded flow; "connect the form to my app" is wiring; "check the form works" is verification; "my app's look changed, update the form" is update/regenerate. When a plain request could fit more than one row, ask the user in plain words which they mean. The phrases here are examples only — for wording that matches none of them, follow "Understand what the user means" in the "Talking to the User" section of the project's global instructions.
51
53
 
52
54
  ## Step 0 — Discover and resolve (MANDATORY GATE)
53
55
 
@@ -55,11 +57,11 @@ Determine which workflow governs the request, then execute it by reading the ref
55
57
 
56
58
  ### Step 0.0 — Ensure the Pega server connection is configured
57
59
 
58
- Before executing any data source below, read and execute `{{SKILL_DIR}}/connect-pega-server.md`. It is a no-op when the connection is already configured. Otherwise, it resolves existing values from the active MCP config, browser-served `sdk-config.json`, and environment files, then asks once for every missing non-secret value. The user may provide those values in chat or write them into any allowed configuration file named by the gate; the assistant re-reads the files and synchronizes every applicable destination. The gate may pause for an environment-sourced Pega MCP client secret (Cursor only) or an MCP reconnect. After the user retries, rerun the gate before executing any data source.
60
+ Before executing any data source below, read and execute `{{SKILL_DIR}}/connect-pega-server{{SKILL_EXT}}`. It is a no-op when the connection is already configured. Otherwise, it resolves existing values from the active MCP config, browser-served `sdk-config.json`, and environment files, then asks once for every missing non-secret value. The user may provide those values in chat or write them into any allowed configuration file named by the gate; the assistant re-reads the files and synchronizes every applicable destination. The gate may pause for an environment-sourced Pega MCP client secret (Cursor only — an MCP entry that carries its own client ID and secret) or an MCP reconnect. After the user retries, rerun the gate before executing any data source.
59
61
 
60
62
  ### Step 0.1 — Check for a case type in the prompt
61
63
 
62
- Scan the user's message for a **Pega case type class name** (hyphen-separated segments like `DIXL-MediaCo-Work-NewService`). Note whether one was found — it will be needed in Step 0.2.
64
+ Scan the user's message for a **Pega case type class name** (hyphen-separated segments like `DIXL-MediaCo-Work-NewService`). Note whether one was found — it will be needed in Step 0.2. If there is no class name, also note any **plain case name** the user used instead (e.g. "service request", "new service form") — Step 0.2 matches it against the names the server returns.
63
65
 
64
66
  ### Step 0.2 — Resolve the case type
65
67
 
@@ -69,10 +71,18 @@ Execute it directly, by name. An execution tool may instruct you to look up the
69
71
 
70
72
  If nothing in this session can execute a Pega data source, stop. Tell the user the Pega MCP server is not available to this conversation, and name both common causes: the server is not running, or it was started after this conversation began — in which case its tools are not bound to this session and a new session is needed. Do not guess at its configuration, and do not fall back to a hardcoded component list.
71
73
 
74
+ Say it in plain words — for example: "I can't reach your Pega server from this chat. Usually the Pega connection in your editor isn't running, or it was started after this chat began. Start it, or open a new chat, and ask me again."
75
+
72
76
  If the execution runs but fails, report the failure and the error the server returned. You may list the server's advertised data sources alongside it as context, but never present that list as evidence the data page is unavailable. Do not substitute a different data page.
73
77
 
74
78
  1. Check `applicationIsConstellationCompatible` in the response. If it is `false`, stop and tell the user the application is not Constellation-compatible and cannot be embedded.
75
- 2. If the user's message did NOT contain a case type class name, present the returned case types as a numbered pick-list of `name — ID` pairs and ask which one to embed.
79
+ 2. If the user's message did NOT contain a case type class name, present the returned case types as a numbered pick-list of `name — ID` pairs and ask which one to embed. Lead each entry with the name the user will recognise; the ID stays beside it so the choice is unambiguous. If the user gave a **plain case name** instead, first match it case-insensitively against the returned names (whole or partial words; ignore "form" and "case"):
80
+ - **Exactly one match** — confirm it in plain words with its ID beside it, e.g. "I found **New Service** (`DIXL-MediaCo-Work-NewService`). Shall I use this one?"
81
+ - **Several matches** — show only those as the pick-list.
82
+ - **No word match** — compare what the user described with what each returned name suggests (for example "the sign-up one" and **New Service**). If one is a likely fit, offer it as your best guess with its ID beside it and ask for a yes. Otherwise say so plainly ("I couldn't find a case called 'service request'") and show the full pick-list.
83
+
84
+ Never proceed on a plain-name match without the user's confirmation.
85
+
76
86
  3. If the user's message DID contain one, confirm it appears in the response. If it does not, show what the server returned and ask the user to choose from that list. Never proceed on an unverified class name.
77
87
  4. Write the confirmed `ID` into `sdk-config.json` field `serverConfig.appMashupCaseType`.
78
88
  5. **Resolve the starting fields for the confirmed case type**, using the capability that reports what a case type accepts at creation — a different capability from the one that executes data sources, and one the server may not expose. Attempt it directly, the same way. Scope it to the confirmed case type **ID** — the fully qualified class name, not the display label. Record the property names it returns — the wiring step needs them, and they are the only names it is permitted to send. If the capability is unavailable, or it returns nothing, record that no names were confirmed and carry on; the two cases are reported differently but lead to the same result, and neither is a reason to stop. Do not infer property names from anywhere else.
@@ -98,13 +108,20 @@ Reduce that response to a generatable list by applying the following in order. P
98
108
  4. **Add back the chrome the view metadata never returns.** These are decided here rather than by the data page:
99
109
 
100
110
  - **`FieldValueList`** — whenever the resolved list contains any field component. Every field renders its display-only mode through it, so a case with fields will not render correctly without it.
101
- - **`ActionButtons`** — always. Every embedded assignment renders action controls, but they are assignment chrome rather than view content, so they never appear in view metadata. Left ungenerated, the submit and cancel controls render in the SDK's styling in the middle of the customer's form — the most visible mismatch an embedded flow can have. Generate it into `infra/`.
102
- - **`MultiStep`** — only when the case has more than one step. It renders the step navigation inside the assignment, so it is also assignment chrome. Generate it into `infra/`.
111
+ - **`ActionButtons`** — always. Every embedded assignment renders action controls, but they are assignment chrome rather than view content, so they never appear in view metadata. Left ungenerated, the submit and cancel controls render in the SDK's styling in the middle of the customer's form — the most visible mismatch an embedded flow can have.
112
+ - **`MultiStep`** — only when the case has more than one step. It renders the step navigation inside the assignment, so it is also assignment chrome.
113
+ - **`AlertBanner`** — always. The assignment shows server validation errors and page messages through it. Left ungenerated, those messages do not appear at all.
114
+ - **`AssignmentHeader`** — always. The SDK draws the current step's title above the form through it. Left ungenerated, the title renders in the SDK's styling.
115
+ - **`Toast`** — always. The SDK shows short failure messages after an action — such as a failed save or cancel — through it. Left ungenerated, they render in the SDK's styling.
116
+
117
+ `AlertBanner`, `AssignmentHeader`, and `Toast` are the three newly added design system extensions. Generate them like other design system extensions. `FieldValueList` is also a design system extension and follows the same rule. Every component, chrome included, is generated directly in the generated components folder — there are no type subfolders.
103
118
 
104
119
  `Stages` is the counter-example: it is case chrome, never appears in an embedded assignment, and must not be generated for an embedded flow. It stays stripped.
105
120
 
106
121
  5. **Present the resolved list, and the exclusions with their reasons.** Name what will be generated, then separately name what was dropped because it appears only in out-of-the-box views, what was stripped because it is never generated, and what was added because a selected component declares it as a registry dependency. An exclusion the user disagrees with is far easier to catch when it is visible, and a silently missing component surfaces much later as a rendering gap. **Report the starting fields here too** — either the property names the case type accepts at creation, or that none were confirmed and pre-fill will therefore be off. This is the last point before analysis and generation begin, so it is the last cheap moment for the user to correct either one. Then ask whether to proceed.
107
122
 
123
+ Write this for someone who does not know Pega's component names: describe each piece by what it shows on screen with its component name in brackets, give each reason for leaving something out in everyday words, and say what a missing starting field means for the user in practice.
124
+
108
125
  6. **Beyond the additions in point 4, generate only what this resolved list contains, plus the registry dependencies the selected components declare.** Do NOT add components based on assumptions about what a case type might need.
109
126
 
110
127
  Some components are orchestrators: they render no control of their own, and instead resolve other components from the registry at runtime. Reference fields and embedded data fields are the clearest examples — one of them may resolve a table, a repeating-group template, a picker, or a value display depending on how it was configured. Those dependencies are building blocks rather than fields, so they never appear in view metadata and this data page never returns them. A registry lookup that finds nothing degrades to a fallback or a blank render rather than raising an error, so an orchestrator generated on its own looks like a styling fault rather than a missing component.
@@ -118,13 +135,27 @@ Reduce that response to a generatable list by applying the following in order. P
118
135
  With the case type and the component list confirmed, proceed in this order:
119
136
 
120
137
  1. Analyze the customer's codebase (if no Design Profile exists)
121
- 2. Execute **Step 0 of `{{SKILL_DIR}}/embedded-flow/wire-integration.md`** — resolve the launch point and the render target
138
+ 2. Execute **Step 0 of `{{SKILL_DIR}}/embedded-flow/wire-integration{{SKILL_EXT}}`** — resolve the launch point and the render target
122
139
  3. Generate only the confirmed components
123
140
  4. Wire the integration — the remaining steps of the wiring skill
124
- 5. Verify at runtime per `{{SKILL_DIR}}/embedded-flow/run-and-verify-integration.md`
141
+ 5. Verify at runtime per `{{SKILL_DIR}}/embedded-flow/run-and-verify-integration{{SKILL_EXT}}`
125
142
 
126
143
  Item 2 sits after analysis because resolving the render target may require asking the user, and the options must be drawn from surfaces the application already has — which is what the Design Profile records. It sits before generation because it is the only step that can cancel the flow, and generation writes a folder of components.
127
144
 
145
+ ## Progress milestones
146
+
147
+ Announce these to the user as you reach them, in plain words and with a counter — "Step 5 of 7 — Building the form pieces". When the user asks for only part of the flow, count only the milestones that part covers. The skills and prompts you run inside a milestone do not start a counter of their own.
148
+
149
+ | # | Say to the user | Covers |
150
+ | --- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
151
+ | 1 | Connecting to your Pega server | Step 0.0 |
152
+ | 2 | Finding what the form needs | Steps 0.1 to 0.3 |
153
+ | 3 | Learning your app's look | Codebase analysis |
154
+ | 4 | Choosing where the form opens | Step 0 of the wire-integration skill |
155
+ | 5 | Building the form pieces | Component generation — after each one, say what is ready and count it: "Date picker field ready (4 of 12)" |
156
+ | 6 | Connecting it to your app | The remaining wire-integration steps |
157
+ | 7 | Trying it out | The run-and-verify-integration skill, announcing its parts as that skill describes. Complete only once its Stage 4 has run — if it stopped earlier, never present step 7 as done; say "not verified yet" instead |
158
+
128
159
  ## Launch point and render target — required before anything is written
129
160
 
130
161
  Wiring and the full embedded flow need two things the user often states in passing: the control that launches the case ("on click of the apply loan button") and the surface it renders on ("in a modal", "as a new page"). Capture whatever they said verbatim; do not resolve either to a file yet.
@@ -139,7 +170,7 @@ If the user named a launch point but no render target, the skill infers it from
139
170
  | Generate | Case type class + component list + Design Profile (or permission to create one) |
140
171
  | Full embedded flow | Case type class + server-resolved component list + codebase access + launch point + render target |
141
172
  | Wire integration | Case type class + generated components folder (location resolved during analysis) must exist + launch point + render target |
142
- | Verify integration | A wired integration + a human available to authenticate when the flow reaches the Pega login form |
173
+ | Verify integration | A wired integration + the user in the conversation to sign in when the login window you open asks for it |
143
174
 
144
175
  ---
145
176
 
@@ -152,11 +183,12 @@ If the user named a launch point but no render target, the skill infers it from
152
183
  5. **Never modify the customer's existing code** except at the seams that the wiring and verification skills enumerate. The generated components folder (location resolved during analysis and recorded in the Design Profile) is purely additive, and a failing verification check is never permission to edit customer code outside those seams to make it pass.
153
184
  6. **Component skills are authoritative** — the behavioral contracts in `{{SKILL_DIR}}/field-skills/`, `template-skills/`, `widget-skills/`, `design-system-extension-skills/`, and `infra-skills/` define what each component must do. These are non-negotiable.
154
185
  7. **Adapt to the customer's framework** — the skills and prompts are framework-agnostic. Determine the customer's framework from their project configuration and apply conventions accordingly.
155
- 8. **Verification is mandatory, and it is not only static** — the generation prompt's checks confirm the generated files are well-formed. They do not confirm the flow runs. Whenever the integration has been wired, finish with `{{SKILL_DIR}}/embedded-flow/run-and-verify-integration.md` and report how far it got. Never declare success on static checks alone.
186
+ 8. **Verification is mandatory, and it is not only static** — the generation prompt's checks confirm the generated files are well-formed. They do not confirm the flow runs. Whenever the integration has been wired, go straight on to `{{SKILL_DIR}}/embedded-flow/run-and-verify-integration{{SKILL_EXT}}` without asking first, run every stage yourself, and repair what fails. Re-read that skill in full before starting, however long the run has been. Report how far it got only when it stopped for one of the reasons in that skill's "Stopping early" section, and then say plainly that the integration is not verified yet. Never declare success on static checks alone, and never replace a stage with a lighter check because the run is long or large.
156
187
  9. **Case type class must be used** — the confirmed case type class must be written into `sdk-config.json` (in the `appMashupCaseType` field) and used in the bootstrap/wiring module when calling the mashup API to create a case.
157
- 10. **Only generate server-resolved components, their declared dependencies, and the named chrome** — generate exactly what Step 0.3 produced: the components the case type's data page returned and that survived its filters, the additions point 4 names (`FieldValueList`, `ActionButtons`, and `MultiStep` for a multi-step case), and the registry dependencies that the selected components' own skill files declare, resolved transitively per point 6. Do NOT add anything else based on assumptions about what a case type might need.
188
+ 10. **Only generate server-resolved components, their declared dependencies, and the named chrome** — generate exactly what Step 0.3 produced: the components the case type's data page returned and that survived its filters, the additions point 4 names (`FieldValueList`, `ActionButtons`, `AlertBanner`, `AssignmentHeader`, `Toast`, and `MultiStep` for a multi-step case), and the registry dependencies that the selected components' own skill files declare, resolved transitively per point 6. Do NOT add anything else based on assumptions about what a case type might need.
158
189
  11. **Never silently replace existing behaviour, and never assume where the flow renders** — before anything is written, resolve the launch point and the render target. If the named control already does something, ask whether to override; if they decline, stop the whole flow, do not embed on a different control, and do not leave partial edits behind. If the render target was never stated and cannot be inherited from the control's existing behaviour, ask. See Step 0 of the wire-integration skill.
159
190
  12. **Never handle credentials** — when verification reaches the Pega login form in the browser, a human signs in at a visible window. Do not request, capture, log, echo, or store those credentials, at any stage and under any failure condition.
191
+ 13. **Talk to the user in plain language** — follow the "Talking to the User" section of the project's global instructions for every progress update, question, and problem, and announce the milestones in [Progress milestones](#progress-milestones) with a counter. Ask every question through your AI tool's question feature, as that section describes. The internal names in these instructions are for your own work and stay exactly as written.
160
192
 
161
193
  ## Error handling
162
194
 
@@ -180,3 +212,5 @@ If the user named a launch point but no render target, the skill infers it from
180
212
  | Pega server unreachable during runtime verification | Report that verification is limited to the static gates, name the host that could not be reached, and do not present it as an integration failure |
181
213
  | Verification fails on customer code outside the seams | Report the file, symptom and likely cause, and stop. Do not edit the customer's application to make the check pass |
182
214
  | No case type class provided and discovery is unavailable | Stop and report why. Do not ask the user to supply a component list from memory, and do not guess. |
215
+
216
+ Word every message in this table for the user in plain language — what happened, what it affects, and what they can do next — while keeping any value they must act on exact.