Constellation Copilot for Pega

Pega Constellation debugger: DX API inspector, UI Inspector toggle, component picker, Redux viewer and Dev Studio helpers.

Constellation Copilot is a debugging and inspection toolkit built specifically for Pega Constellation developers. If you spend your days tracking down DX API errors, figuring out why a component is rendering wrong, or hunting for Redux state — this extension puts every tool you need into a single, always-open side panel. ─────────────────────────────────────────── WHY CONSTELLATION COPILOT EXISTS ─────────────────────────────────────────── Debugging Constellation apps without the right tools means juggling Chrome DevTools, browser console, the Pega UI Inspector, and manually reading raw JSON responses from /api/application/v2/. It is slow and error-prone. Constellation Copilot captures everything in real time, names it, colour-codes it, and gives you one-click access to the detail that actually matters: field-level errorDetails, the eTag/If-Match cycle, what views and data pages the server returned, which component owns which property, and what the Redux store looks like at this exact moment. It stays open in the side panel while you navigate the portal, click through cases, and trigger actions. You do not have to go back to DevTools every time. ─────────────────────────────────────────── THREE WAYS TO OPEN IT ─────────────────────────────────────────── ① Docked side panel — click the toolbar icon. Copilot opens docked on the right side of Chrome and follows whichever tab you switch to. Drag the edge to resize it or move it to the left using Chrome's side-panel menu. ② Pop-out window — click ⧉ in the side panel header to detach the current tab's view into its own floating window. Put it on a second monitor. It stays pinned to that tab. ③ DevTools panel — press F12 and open the Constellation tab. Dock it wherever DevTools allows. This view adds the Inspect $0 button so you can immediately inspect the last element you clicked in the Elements panel. ─────────────────────────────────────────── FEATURES AT A GLANCE ─────────────────────────────────────────── ◆ OVERVIEW TAB Pega UI Inspector toggle — turns Pega's built-in UI Inspector on or off by calling PCore.getDebugger().toggleInspector(). Works on Infinity 24 and later (including Pega 26). The extension reads Pega's actual localStorage key and shows the real on/off state — so it stays in sync even when you toggle from the browser console. On older builds, it falls back to the X-Ray toggle. Copilot Component Overlay — walks the live React tree and draws a coloured border around every component that exposes getPConnect(). Views get a blue outline, regions get purple, fields get green (optional). Each label shows the component name. Click any label to inspect that component in the Inspector tab. Element picker — click Pick Element and then click any part of the portal. Copilot identifies which Pega component owns that pixel. Inspect $0 — available in the DevTools panel. Instantly inspects whichever element you last selected in the Elements tab. Reload / Hard-Reload — one click reloads the tab; a second button forces a hard reload to bypass cache. Clear caches — individual buttons to clear localStorage, sessionStorage, and PCore data-page caches. Each button asks for a second click to confirm, so you never accidentally wipe the wrong thing. Environment card — shows DEV / QA / UAT / STAGE / PROD (auto-detected from the hostname or from your own rules), application name and version, operator and access group, portal, locale and time zone, PCore version, Constellation static-asset version, and every field that PCore.getEnvironmentInfo() exposes. No more digging through the console to find out what version of Constellation you are actually running. ◆ DX API TAB Captures every fetch and XHR call to /api/application/v2/ (as well as /api/v1/ and /prweb/api/) from the moment the panel is open. Each call is named automatically: • Open case • Assignment action · ActionName • Data view · D_ViewName • Case refresh • Submit / Save • … and more Calls are colour-coded at a glance: • Green — 2xx OK • Yellow — Validation (400 / 422) • Orange — Conflict or eTag mismatch (409 / 412 / 428) • Red — Security (401 / 403) or server error (5xx) The detail pane for any selected call shows: • Field-level errorDetails from the response body — not just the HTTP status code • The If-Match header you sent vs. the eTag the server last returned — makes stale-eTag conflicts instantly visible • Case info (case ID, class, status) • All views and data pages returned in uiResources • Full request JSON and response JSON, each in a collapsible tree Additional controls: copy as cURL (auth headers are redacted automatically), export all captured calls to a JSON file, pause capture, filter by text, filter by status type. ◆ INSPECTOR TAB Select any element — via the picker, $0, or by clicking a component overlay label — and the Inspector tab shows you everything Pega knows about it: • The full outer → inner component path • Component type and view name • Label and property name • Class name • Nearest enclosing view • Context path and page reference • Case ID • Data pages in scope • getConfigProps() — the configuration the component received • getRawMetadata() — the raw rule metadata before component resolution ◆ REDUX TAB Takes a live snapshot of PCore.getStore().getState(). You can enter an optional sub-path to drill into a specific slice, and run a key/value search that returns the full dot-notation path to every matching node. Use this when you need to verify that a data page has loaded, that an assignment property is set, or that a context is correct — without writing console code. ◆ DEV STUDIO TAB Passively builds a list of every rule referenced during your session: views, properties, data pages, case types, and flow actions. For each rule you can: • Copy the rule name • Copy it in RuleType ClassName Name format (ready to paste into Dev Studio search) • Copy and open Dev Studio directly at that rule Also holds a DSS watchlist (Dynamic System Settings cannot be read by a browser extension, so the watchlist copies the lookup query for you), your Dev Studio URL, and environment rules you define. ─────────────────────────────────────────── WORKS ACROSS FRAMES AND PORTALS ─────────────────────────────────────────── The injected agent runs in every frame on the page and automatically finds whichever frame holds window.PCore — including portals embedded in a design-time shell or Pega-in-an-iframe setups. The Environment card tells you which frame it found (Frame: top or Frame: iframe · /path). DX calls are captured from every frame simultaneously. ─────────────────────────────────────────── SAFE AND READ-ONLY BY DESIGN ─────────────────────────────────────────── Constellation Copilot never modifies rules, never changes case data, and never sends any information outside your browser. The only changes it can make are: • Turning the Pega UI Inspector on or off (a local toggle) • Clearing localStorage / sessionStorage / PCore data-page caches (with confirmation) • Reloading the current tab Authorization tokens, session cookies, and bearer headers are automatically redacted before they appear anywhere in the UI. Captured DX API calls are safe to share as screenshots or exported JSON. There is no account, no sign-in, no cloud backend, and no data collection of any kind. ─────────────────────────────────────────── INSTALL IN 2 MINUTES ─────────────────────────────────────────── 1. Download and unzip constellation-copilot.zip 2. Open chrome://extensions in Chrome 3. Switch on Developer mode (top right toggle) 4. Click Load unpacked and select the unzipped folder 5. Open (or reload) your Constellation portal 6. Click the Constellation Copilot toolbar icon, or press F12 and open the Constellation tab If a Pega tab was already open when you installed the extension, DX calls are captured from the moment you open the panel. Reload the tab to capture calls from the initial page load. ─────────────────────────────────────────── REQUIREMENTS ─────────────────────────────────────────── - Google Chrome 116 or newer (desktop) - A running Pega Infinity Constellation portal (any deployment: on-prem, cloud, or PDC) - No Pega version restriction — the overlay and Inspector work on any build; UI Inspector toggle requires Infinity 24+ ─────────────────────────────────────────── PERMISSIONS USED ─────────────────────────────────────────── - storage — saves your settings and Dev Studio URL locally in Chrome - scripting — injects the DX API capture agent into the Pega portal page - tabs — reads the current tab URL to follow navigation - sidePanel — enables the docked side panel Host permissions (<all_urls>) are required because Constellation portals run on customer-specific hostnames that cannot be predicted in advance. ─────────────────────────────────────────── VERSION HISTORY ─────────────────────────────────────────── v1.3.0 (current) + Docked side panel with pop-out window + Environment card (full PCore.getEnvironmentInfo() surface) + Copilot component overlay (views, regions, fields) + DX API detail pane: errorDetails, eTag/If-Match, uiResources, request/response trees + Copy as cURL with auth redaction + Export captured calls to JSON + Multi-frame support + DSS watchlist in Dev Studio tab + Clear localStorage / sessionStorage / PCore cache buttons + Pega UI Inspector toggle with real on/off state sync v1.2.0 + Redux viewer with sub-path and key/value search + Component Inspector tab v1.1.0 + DX API capture and call list + DevTools panel v1.0.0 + Initial release: X-Ray toggle and environment info ─────────────────────────────────────────── BUILT FOR PEGA PROFESSIONALS ─────────────────────────────────────────── Constellation Copilot was built by a Pega Certified Lead System Architect with 13+ years of Constellation, DX API, and enterprise Pega delivery experience. Every feature exists because it solved a real debugging problem on a real project. If you are a Pega developer, architect, or QA engineer working on Constellation applications, this extension is built for your exact workflow.