Constellation Copilot for Pega

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…