@pega/sdk 0.0.12 → 0.0.14

package/README.md

@@ -134,13 +134,29 @@ The generated project is ready to run and includes:
 
 The scaffolded project ships with `sdk-config.json` and a generated MCP config file
 both intentionally blank/placeholder — connection details are never collected at
-scaffold time. There are two ways to fill them in:
-
-- **AI coding assistant (recommended)** — the first time you ask it to do something
-  that needs a live Pega server (e.g. generating components from your app's real
-  portals/case types), it asks you for the server URL, application alias, OAuth
-  client ID, and MCP rule details in chat, then writes them into both files itself.
-- **Manual** — edit `sdk-config.json` in the project root yourself:
+scaffold time. The same setup applies to full-portal and embedded projects.
+
+**AI coding assistant (recommended):** the first workflow that needs a live Pega
+server checks the active `sdk-config.json`, the generated MCP config, and project-root
+`.env*` files. It asks once for every missing non-secret value. You can provide those
+values in chat or update an allowed file yourself; the assistant then synchronizes
+all applicable destinations and asks again only for values that remain missing.
+
+**Manual or environment setup:** configure the following non-secret values in any
+applicable source:
+
+| Value                 | Environment key example | `sdk-config.json`                                           | MCP config                             |
+| --------------------- | ----------------------- | ----------------------------------------------------------- | -------------------------------------- |
+| Pega server URL       | `PEGA_INFINITY_URL`     | `serverConfig.infinityRestServerUrl`                        | `{InfinityURL}` in the URL             |
+| Application alias     | `PEGA_APP_ALIAS`        | `serverConfig.appAlias`                                     | `{AppAlias}` in the URL                |
+| MCP rule name         | `PEGA_MCP_RULE_NAME`    | —                                                           | `{MCPRuleName}` in the server key      |
+| MCP rule instance key | `PEGA_MCP_RULE_INS_KEY` | —                                                           | `{MCPRuleInsKey}` in the URL           |
+| OAuth client ID       | `PEGA_CLIENT_ID`        | `authConfig.mashupClientId` and `authConfig.portalClientId` | Cursor's `auth.clientId`, when present |
+
+For full-portal projects, use the scaffolded application `sdk-config.json`. For
+embedded projects, use the copy in the host framework's browser-served static
+directory (for example `public/sdk-config.json`), not a stale same-named root copy.
+Its relevant structure is:
 
 ```jsonc
 {
@@ -163,10 +179,15 @@ scaffold time. There are two ways to fill them in:
 - `appAlias` — the application alias to load
 - `mashupClientId` / `portalClientId` — OAuth 2.0 client IDs registered in Pega
 
-You'll also need to fill in the generated MCP config file (`.vscode/mcp.json` for
-Copilot, `.cursor/mcp.json` for Cursor, or `.mcp.json` for Claude Code) — replace
-its `{InfinityURL}`/`{AppAlias}`/`{MCPRuleName}`/`{MCPRuleInsKey}` markers the same
-way if editing manually.
+The generated MCP file is `.vscode/mcp.json` for Copilot, `.cursor/mcp.json` for
+Cursor, or `.mcp.json` for Claude Code. Copilot and Claude Code use URL-only MCP
+configuration and do not require a client secret. Cursor's authenticated MCP entry
+also requires `auth.clientId` and `auth.clientSecret`. The Pega MCP client secret
+must come from a private project-root environment variable such as
+`PEGA_CLIENT_SECRET`; never provide it in chat, use a browser-exposed environment
+name (`VITE_*`, `NEXT_PUBLIC_*`, `REACT_APP_*`, or `EXPO_PUBLIC_*`), or put it in
+browser-served `sdk-config.json`. The assistant reads the private environment value
+and writes it only to Cursor's `auth.clientSecret`.
 
 ## Available Scripts
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/sdk",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Scaffold a Pega SDK application project",
   "type": "module",
   "bin": {

package/templates/angular-sdk-reference/angular.json

@@ -19,12 +19,13 @@
             "tsConfig": "tsconfig.json",
             "assets": ["src/assets", "src/sdk-config.json"],
             "styles": ["src/styles.css"],
-            "scripts": []
+            "scripts": ["../../node_modules/@pega/constellationjs/dist/constellation-core-web.js"]
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
+            "buildTarget": "angular-sdk-reference:build",
             "port": 3501
           }
         }

package/templates/angular-sdk-reference/package.json

@@ -17,6 +17,7 @@
     "@angular/platform-browser": "^21.2.0",
     "@angular/platform-browser-dynamic": "^21.2.0",
     "@angular/router": "^21.2.0",
+    "@pega/constellationjs": "file:pega-constellationjs-0.26.3-local.tgz",
     "@pega/sdk-angular": "^0.1.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",

package/templates/angular-sdk-reference/src/app/app.component.ts

@@ -1,25 +1,72 @@
-import { Component, OnInit } from '@angular/core';
+/**
+ * Angular Mashup sample — demonstrates @pega/sdk-core + @pega/sdk-angular
+ * in embedded/mashup mode using PegaRuntimeService.
+ *
+ * Flow:
+ *   1. PegaRuntimeService.initialize() handles auth + bootstrap
+ *   2. Subscribe to state$ for reactive isReady/isLoading/error
+ *   3. Show "Create Case" button
+ *   4. On click → PCore.getMashupApi().createCase()
+ *   5. PConnectRendererComponent renders the case form tree
+ */
+
+import { ChangeDetectorRef, Component, NgZone, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { PegaRuntimeService, PConnectBridgeComponent, type RuntimeState } from '@pega/sdk-angular';
+import { registerSampleAngularComponents } from '../components/component-map';
+import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
+import { compareSdkPCoreVersions } from '../helpers/versionHelpers';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, PConnectBridgeComponent],
   template: `
-    <div *ngIf="!isReady" class="loading-container">
-      <span class="loading-text">Authenticating and loading Pega...</span>
+    <!-- Loading state -->
+    <div *ngIf="!isPegaReady" class="loading-container">
+      <span class="loading-text">
+        {{ errorMessage ? errorMessage : 'Authenticating and loading Pega...' }}
+      </span>
     </div>
-    <div *ngIf="isReady" id="pega-root">
+
+    <!-- Main UI -->
+    <div *ngIf="isPegaReady" id="pega-root">
+      <!-- Header -->
       <div class="header">
-        <span class="header-title">Pega SDK — Angular Reference</span>
+        <span class="header-title">Pega SDK — Angular Mashup Sample</span>
+        <button type="button" class="btn-logout" (click)="logout()">Logout</button>
       </div>
-      <div class="content">
-        <p>Pega SDK Angular app is ready. Implement your components here.</p>
+
+      <div class="main-content">
+        <!-- Create Case button -->
+        <div *ngIf="!showForm" class="create-case-section">
+          <h2>Ready to go</h2>
+          <p class="subtitle">Click below to create a new case and see the Pega form components in action.</p>
+          <button type="button" class="btn-create" (click)="handleCreateCase()">Create Case</button>
+        </div>
+
+        <!-- Pega form area -->
+        <div class="form-container">
+          <div *ngIf="loading" class="loading-form">Loading case form...</div>
+          <pconnect-bridge *ngIf="!loading && rootPConnect" [getPConnect]="rootPConnectGetter!"></pconnect-bridge>
+        </div>
       </div>
     </div>
   `,
   styles: [
     `
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        font-family: system-ui, sans-serif;
+      }
+      .loading-text {
+        color: #64748b;
+        font-size: 1rem;
+      }
       .header {
         padding: 1rem 1.5rem;
         background: #1e293b;
@@ -31,24 +78,194 @@ import { CommonModule } from '@angular/common';
       .header-title {
         font-weight: 600;
       }
-      .content {
+      .btn-logout {
+        background: transparent;
+        border: 1px solid #64748b;
+        color: #94a3b8;
+        padding: 0.375rem 0.75rem;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        font-size: 0.8125rem;
+      }
+      .main-content {
         max-width: 720px;
         margin: 2rem auto;
         padding: 0 1.5rem;
+        font-family: system-ui, sans-serif;
+      }
+      .create-case-section {
+        text-align: center;
+        margin-bottom: 2rem;
+      }
+      .create-case-section h2 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+      }
+      .subtitle {
+        color: #64748b;
+        margin-bottom: 1.5rem;
+      }
+      .btn-create {
+        background: #2563eb;
+        color: #fff;
+        border: none;
+        padding: 0.625rem 1.5rem;
+        border-radius: 0.375rem;
+        font-size: 0.9375rem;
+        font-weight: 500;
+        cursor: pointer;
+      }
+      .form-container {
+        background: #fff;
+        border: 1px solid #e2e8f0;
+        border-radius: 0.75rem;
+        padding: 1.5rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+      }
+      .loading-form {
+        text-align: center;
+        padding: 2rem;
+        color: #64748b;
       }
     `,
   ],
 })
-export class AppComponent implements OnInit {
-  isReady = false;
+export class AppComponent implements OnInit, OnDestroy {
+  isPegaReady = false;
+  rootPConnect: typeof PConnect | null = null;
+  rootPConnectGetter: (() => typeof PConnect) | null = null;
+  showForm = false;
+  loading = false;
+  errorMessage: string | undefined;
+
+  private runtime = new PegaRuntimeService();
+  private stateSub: Subscription | undefined;
+  private cancelSubId = 'angularMashup-cancel';
+  private doneSubId = 'angularMashup-assignmentDone';
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
 
-  constructor() {}
+  ngOnInit(): void {
+    this.stateSub = this.runtime.state$.subscribe((state: RuntimeState) => {
+      console.log('Runtime state update:', state);
+      this.ngZone.run(() => {
+        this.isPegaReady = state.isReady;
+        this.errorMessage = state.error;
+
+        if (state.isReady && state.bootstrapResult) {
+          const rootProps = state.bootstrapResult.rootProps as Record<string, unknown> | undefined;
+          const getPConnect = rootProps?.['getPConnect'] as (() => typeof PConnect) | undefined;
+          this.rootPConnect = getPConnect?.() ?? null;
+          this.rootPConnectGetter = getPConnect ?? null;
+          this.subscribeToPubSub();
+        }
+
+        this.cdr.detectChanges();
+      });
+    });
+
+    this.bootstrap();
+  }
+
+  ngOnDestroy(): void {
+    this.stateSub?.unsubscribe();
+
+    if (this.isPegaReady) {
+      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, this.cancelSubId);
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
+        this.doneSubId,
+      );
+    }
+  }
+
+  async bootstrap(): Promise<void> {
+    const sdkConfig = await getSdkConfig();
+    const config = sdkConfig as Record<string, Record<string, unknown>>;
+
+    await this.runtime.initialize(
+      {
+        serverConfig: {
+          infinityRestServerUrl: config['serverConfig']['infinityRestServerUrl'] as string,
+          appAlias: config['serverConfig']['appAlias'] as string,
+        },
+        authConfig: {
+          clientId: (config['authConfig']['mashupClientId'] ?? '') as string,
+          authorizeUri: (config['authConfig']['authorizeUri'] ?? '') as string,
+          tokenUri: (config['authConfig']['tokenUri'] ?? '') as string,
+          revokeUri: (config['authConfig']['revokeUri'] ?? '') as string,
+          redirectUri: (config['authConfig']['redirectUri'] ?? '') as string,
+        },
+      },
+      'pega-root',
+      {
+        onPCoreReady: () => {
+          console.log('PCore is ready, running onPCoreReady callback');
+          // Register component creator so PCore uses our bridge
+          PCore.registerComponentCreator((c11nEnv: unknown) => c11nEnv);
+          registerSampleAngularComponents();
+          compareSdkPCoreVersions();
+
+          // Initialize container session gates (required by ViewContainer/FlowContainer)
+          sessionStorage.setItem('hasViewContainer', 'false');
+          sessionStorage.setItem('okToInitFlowContainer', 'true');
+        },
+      },
+    );
+  }
+
+  private subscribeToPubSub(): void {
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
+      () => {
+        this.ngZone.run(() => {
+          this.showForm = false;
+        });
+      },
+      this.cancelSubId,
+    );
+
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
+      () => {
+        this.ngZone.run(() => {
+          this.showForm = false;
+        });
+      },
+      this.doneSubId,
+    );
+  }
+
+  async handleCreateCase(): Promise<void> {
+    this.loading = true;
+    this.showForm = true;
 
-  async ngOnInit() {
     try {
-      this.isReady = true;
+      const sdkConfig = await getSdkConfig();
+      const mashupCaseType = (sdkConfig as Record<string, Record<string, unknown>>).serverConfig[
+        'appMashupCaseType'
+      ] as string;
+
+      await PCore.getMashupApi().createCase(mashupCaseType, PCore.getConstants().APP.APP, {
+        pageName: 'pyEmbedAssignment',
+        startingFields: {},
+      });
     } catch (err) {
-      console.error('Failed to initialize Pega SDK:', err);
+      console.error('Error creating case:', err);
+      this.showForm = false;
+    } finally {
+      this.ngZone.run(() => {
+        this.loading = false;
+        this.cdr.detectChanges();
+      });
     }
   }
+
+  logout(): void {
+    this.runtime.authClient.logout();
+  }
 }

package/templates/angular-sdk-reference/src/components/component-map.ts

@@ -0,0 +1,90 @@
+/**
+ * Angular sample component map — maps Pega component names to Angular component classes.
+ *
+ * Mirrors the getSampleComponentMap() pattern from @pega/sdk-react.
+ */
+
+import type { Type } from '@angular/core';
+import { registerAngularComponentMap } from '@pega/sdk-angular';
+
+// Infrastructure
+import { RootContainerComponent } from './infra/root-container/root-container.component';
+import { ViewContainerComponent } from './infra/view-container/view-container.component';
+import { FlowContainerComponent } from './infra/flow-container/flow-container.component';
+import { AssignmentComponent } from './infra/assignment/assignment.component';
+import { ViewComponent } from './infra/view/view.component';
+import { ReferenceComponent } from './infra/reference/reference.component';
+import { RegionComponent } from './infra/region/region.component';
+import { CaseViewComponent } from './infra/case-view/case-view.component';
+import { CaseSummaryComponent } from './infra/case-summary/case-summary.component';
+import { StagesComponent } from './infra/stages/stages.component';
+
+// Templates
+import { DefaultFormComponent } from './templates/default-form/default-form.component';
+import { OneColumnComponent } from './templates/one-column/one-column.component';
+import { TwoColumnComponent } from './templates/two-column/two-column.component';
+import { NarrowWideComponent } from './templates/narrow-wide/narrow-wide.component';
+import { WideNarrowComponent } from './templates/wide-narrow/wide-narrow.component';
+
+// Fields
+import { TextInputComponent } from './fields/text-input/text-input.component';
+import { TextAreaComponent } from './fields/text-area/text-area.component';
+import { DropdownComponent } from './fields/dropdown/dropdown.component';
+import { CheckboxComponent } from './fields/checkbox/checkbox.component';
+import { RadioButtonsComponent } from './fields/radio-buttons/radio-buttons.component';
+import { CurrencyComponent } from './fields/currency/currency.component';
+import { DateInputComponent } from './fields/date-input/date-input.component';
+import { EmailComponent } from './fields/email/email.component';
+import { PhoneComponent } from './fields/phone/phone.component';
+import { IntegerComponent } from './fields/integer/integer.component';
+import { URLInputComponent } from './fields/url-input/url-input.component';
+import { AutoCompleteComponent } from './fields/auto-complete/auto-complete.component';
+
+function getSampleAngularComponentMap(): Record<string, Type<unknown>> {
+  return {
+    // Fields
+    TextInput: TextInputComponent,
+    TextArea: TextAreaComponent,
+    Dropdown: DropdownComponent,
+    Checkbox: CheckboxComponent,
+    RadioButtons: RadioButtonsComponent,
+    Currency: CurrencyComponent,
+    Date: DateInputComponent,
+    Email: EmailComponent,
+    Phone: PhoneComponent,
+    Integer: IntegerComponent,
+    URL: URLInputComponent,
+    AutoComplete: AutoCompleteComponent,
+
+    // Templates
+    DefaultForm: DefaultFormComponent,
+    OneColumn: OneColumnComponent,
+    TwoColumn: TwoColumnComponent,
+    NarrowWide: NarrowWideComponent,
+    WideNarrow: WideNarrowComponent,
+
+    // Infrastructure
+    Assignment: AssignmentComponent,
+    RootContainer: RootContainerComponent,
+    ViewContainer: ViewContainerComponent,
+    FlowContainer: FlowContainerComponent,
+    View: ViewComponent,
+    Region: RegionComponent,
+    CaseView: CaseViewComponent,
+    CaseSummary: CaseSummaryComponent,
+    Stages: StagesComponent,
+
+    // Aliases — PCore may use different name variants
+    AppShell: RootContainerComponent,
+    CaseViewContainer: ViewContainerComponent,
+    SubTabs: ViewContainerComponent,
+    DeferLoad: ViewContainerComponent,
+    reference: ReferenceComponent,
+  };
+}
+
+function registerSampleAngularComponents(): void {
+  registerAngularComponentMap(getSampleAngularComponentMap());
+}
+
+export { getSampleAngularComponentMap, registerSampleAngularComponents };