Skip to content

Editor Integration

PlatanoGames edited this page Feb 27, 2026 · 4 revisions

Editor Integration -- 25 Panels, One Framework

The Problem

Most UE5 frameworks are invisible. You add them to your project, write C++, compile, and debug through log messages and breakpoints. There is no way to answer basic questions without reading code:

  • "Is the save system initialized?"
  • "What game flow state is active right now?"
  • "How many shaders has PSO compiled?"
  • "Which Data Assets did the registry discover?"
  • "What messages were broadcast in the last 10 seconds?"

Every answer requires adding a log statement, recompiling, running the game, and reading output. Multiply this by 13 subsystems and a designer who does not write C++, and you have a productivity problem that no amount of documentation solves.

PGX takes the opposite approach: every system ships with its own dockable editor panel, Content Browser integration, toolbar shortcuts, and console commands. You can inspect, configure, and debug the entire framework without opening a source file.


The 25 NomadTabs

PGX registers 25 dockable editor panels (NomadTabs) that can be opened from the toolbar, pinned to the layout, and arranged alongside your viewport and Details panel.

Infrastructure Panels (5)

Panel Purpose
Hub Central dashboard with cards for all systems
System Observer Live subsystem states, health indicators, sparklines
Config Dashboard All Config Data Assets grouped by system
Test Dashboard Run system tests, color-coded pass/fail results
Platform Health Platform budget enforcement status across systems

System Inspector Panels (10)

Panel System Key Content
Profile Inspector Profile v2.0 5-layer model, platform resolution
GameFlow Inspector GameFlow v1.0 8 channels, current tags, history
Log Inspector Log v3.0 Active sinks, polymorphic trace viewer
Save Inspector Save v1.0 Slots, contexts, domains, auto-save
PSO Inspector PSO v2.0 Compilation state, progress, contexts
Loading Inspector Loading v1.0 Screen state, progress, profiles
LevelFlow Inspector LevelFlow v1.0 Transitions, sub-levels, pending loads
Audio Inspector Audio v1.1 Channels, backends, pool, music state
Message Inspector Message v1.0 Active channels, listeners, history
Event Debugger EventHandler Handler browser, telemetry, blackbox

Data Panels (2)

Panel Purpose
Data Registry Browser All databases with entries, search, filter
Registry Validation 18-rule validation, 3-pane issues, auto-fix

Tool Panels (6)

Panel Tool Purpose
Docs Viewer Documentation v1.1 Native Slate markdown renderer
Version Control Version Control v1.0 Source control integration
Simulation Harness Sim Harness v2.0 Deep injection test environment
Visual Showcase Visual Construction Design token gallery + widgets
Scaffold Scaffold v0.2 Automated project setup wizard

The Hub: Everything at a Glance

The Hub is the framework's home screen. It displays 12 cards, one per major system or tool, arranged in a grid:

+-----------------------------------------------------------------------+
|  PGX FRAMEWORK HUB                                                    |
|                                                                       |
|  +----------------+  +----------------+  +----------------+           |
|  |  PROFILE       |  |  GAMEFLOW      |  |  SAVE          |          |
|  |  v2.0          |  |  v1.0          |  |  v1.0          |          |
|  |  Platform-     |  |  8 channels    |  |  Multi-slot    |          |
|  |  aware config  |  |  Tag-driven    |  |  Domain-based  |          |
|  |  [Open]        |  |  [Open]        |  |  [Open]        |          |
|  +----------------+  +----------------+  +----------------+           |
|                                                                       |
|  +----------------+  +----------------+  +----------------+           |
|  |  PSO           |  |  AUDIO         |  |  LOADING       |          |
|  |  v2.0          |  |  v1.1          |  |  v1.0          |          |
|  |  Shader warm-  |  |  Dual backend  |  |  6-state       |          |
|  |  up pipeline   |  |  Sound pool    |  |  Deterministic |          |
|  |  [Open]        |  |  [Open]        |  |  [Open]        |          |
|  +----------------+  +----------------+  +----------------+           |
|                                                                       |
|  +----------------+  +----------------+  +----------------+           |
|  |  DATA REGISTRY |  |  EVENT HANDLER |  |  MESSAGE       |          |
|  |  v2.0          |  |  v1.0          |  |  v1.0          |          |
|  |  DataTable-    |  |  Behavior      |  |  Pub/sub       |          |
|  |  first catalog |  |  resolution    |  |  message bus   |          |
|  |  [Open]        |  |  [Open]        |  |  [Open]        |          |
|  +----------------+  +----------------+  +----------------+           |
|                                                                       |
|  +----------------+  +----------------+                               |
|  |  SIM HARNESS   |  |  SCAFFOLD      |                              |
|  |  PSPH v2.0     |  |  v0.2.0        |                              |
|  |  Deep inject   |  |  Project       |                              |
|  |  test env      |  |  scaffolding   |                              |
|  |  [Open]        |  |  [Open]        |                              |
|  +----------------+  +----------------+                               |
+-----------------------------------------------------------------------+

Each card shows the system name, version, a brief description, and a button that opens the corresponding inspector panel. Cards are color-coded by system (see the Color Conventions section below).

The Hub is the recommended starting point for developers new to the framework.


System Observer: Live Dashboard

The System Observer is a real-time monitoring panel that shows the state of every active subsystem in a single scrollable view:

+-----------------------------------------------------------------------+
|  SYSTEM OBSERVER                                          [Refresh]   |
|                                                                       |
|  PROFILE            Active   | Targets: 3 | Budget violations: 0     |
|  |||||||||||||||     ~~~~~~~~~ sparkline: budget usage over time       |
|                                                                       |
|  GAMEFLOW           Active   | Channels: 8 | Transitions: 47         |
|  |||||||||||||||     ~~~~~~~~~ sparkline: transition rate              |
|                                                                       |
|  LOG                Active   | Sinks: 3 | Entries: 12,847            |
|  |||||||||||||||                                                      |
|                                                                       |
|  SAVE               Active   | Slots: 4 | Last save: 2m ago          |
|  |||||||||||||||                                                      |
|                                                                       |
|  PSO                Complete | Compiled: 120/120 | Time: 2.3s         |
|  |||||||||||||||     ~~~~~~~~~ sparkline: compilation throughput       |
|                                                                       |
|  AUDIO              Active   | Playing: 7 | Pool: 12/64              |
|  |||||||||||||||                                                      |
|                                                                       |
|  DATA REGISTRY      Active   | Databases: 5 | Entries: 234           |
|  |||||||||||||||                                                      |
|                                                                       |
|  MESSAGE            Active   | Channels: 8 | Listeners: 23           |
|  |||||||||||||||                                                      |
|                                                                       |
|  EVENT HANDLER      Active   | Handlers: 15 | Cache: 8/128           |
|  |||||||||||||||     ~~~~~~~~~ sparkline: execution rate               |
|                                                                       |
|  MGOS               Active   | GC runs: 34 | Tracked: 1,247          |
|  |||||||||||||||     ~~~~~~~~~ sparkline: memory allocation rate       |
+-----------------------------------------------------------------------+

Health indicators use color-coded dots (green/yellow/red) based on configurable thresholds. Sparkline graphs show trends over the last 60 seconds. The panel auto-refreshes on a configurable polling interval.


Content Browser Integration

PGX injects a dedicated "PGX FRAMEWORK" section into the Content Browser's right-click "Add New" menu and the Add button dropdown. This section contains 58 Data Asset types organized by system:

Content Browser > Right-click > PGX FRAMEWORK
|
+-- Save
|   +-- Save Config
|   +-- Save Slot Template
|   +-- ...
|
+-- GameFlow
|   +-- GameFlow Config
|   +-- Flow Rules Config
|   +-- ...
|
+-- Audio
|   +-- Audio Config
|   +-- Sound Definition
|   +-- Music Playlist
|   +-- Dialogue Config
|   +-- Channel Config
|   +-- Mix Preset
|   +-- Audio Settings
|
+-- PSO
|   +-- PSO Warm-Up Config
|   +-- PSO Settings
|
+-- Loading
|   +-- Loading Config
|   +-- Loading Profile
|
+-- LevelFlow
|   +-- LevelFlow Config
|
+-- Data Registry
|   +-- Registry Definition
|   +-- PGX DataTable
|
+-- Construction
|   +-- Actor Construction
|   +-- Pawn Construction
|   +-- Character Construction
|   +-- HUD Construction
|   +-- Widget Construction
|   +-- GameMode Construction
|   +-- GameState Construction
|   +-- PlayerState Construction
|
+-- ... (remaining systems)

Each entry is color-coded by system. The colors match across the entire editor -- Content Browser thumbnails, toolbar icons, Hub cards, and inspector panel accent bars all use the same system color. When you see cyan, you know it is Data Registry. When you see magenta, you know it is Loading.

Selecting an entry creates the corresponding Data Asset in the current folder and opens it in the Details panel. No wizard, no dialog, no configuration step.


Toolbar: 28 Icons, Quick Access, Tools Menu

PGX adds a toolbar section to the UE5 main toolbar with three components:

1. Quick Access Bar (25 Pins)

Each system inspector can be pinned to the toolbar for one-click access. The developer toggles pins through Editor Settings. When pinned, the system's SVG icon appears in the toolbar. Clicking it opens (or focuses) the corresponding panel.

Toolbar:  [PGX v] [Hub] [Profile] [Save] [Audio] [PSO] [Registry] [Observer] ...
                    |
                    +-- pinned icons (configurable per developer)

2. Tools Submenu

The "PGX" dropdown provides access to all panels, organized by category:

PGX v
+-- Hub
+-- System Observer
+-- -----------------
+-- Profile Inspector
+-- GameFlow Inspector
+-- Log Inspector
+-- Save Inspector
+-- PSO Inspector
+-- Audio Inspector
+-- Loading Inspector
+-- LevelFlow Inspector
+-- -----------------
+-- Message Inspector
+-- Event Debugger
+-- Data Registry Browser
+-- Config Dashboard
+-- Registry Validation
+-- -----------------
+-- Test Dashboard
+-- Platform Health
+-- Simulation Harness
+-- Visual Showcase
+-- Scaffold
+-- Docs Viewer
+-- Version Control

3. Custom SVG Icons

PGX includes 28 custom SVG icons, one per system and tool. These icons are designed at 20x20 and 40x40 pixel sizes for standard and high-DPI displays. They appear in:

  • The toolbar quick-access bar
  • The Content Browser asset thumbnails
  • The Hub cards
  • The inspector panel title bars
  • The Tools submenu

Every icon follows a consistent design language: single-color silhouettes on transparent backgrounds, optimized for readability at small sizes.


Visual Construction System

All 25 panels share a consistent visual language enforced by a design token system. Instead of each panel author choosing their own fonts, colors, spacing, and widget styles, every visual decision is centralized:

Design Tokens

A single source-of-truth file defines all visual constants:

Fonts:
  Title       14pt Bold
  Header      11pt Bold
  Body        10pt Regular
  Small       8pt Regular
  Monospace   9pt Mono

Colors (per system):
  Profile     (255, 193,   7)   Yellow
  GameFlow    (255, 152,   0)   Orange
  Save        ( 76, 175,  80)   Green
  PSO         (  0, 188, 212)   Cyan
  Loading     (233,  30,  99)   Magenta
  Audio       (255, 152,   0)   Orange
  Registry    (  0, 204, 255)   Cyan
  MGOS        (127,   0, 255)   Purple
  Construction(  0, 128, 128)   Teal
  ...

Semantic Colors:
  Success     Green
  Warning     Amber
  Error       Red
  Info        Blue
  Muted       Gray

Atomic Widgets

11 reusable widget components enforce consistency across panels:

Widget Purpose
Accent Bar Colored left border identifying the system
Panel Header Title + version + system icon, standardized layout
Section Divider Labeled horizontal rule between content sections
Footer Bar Status text + timestamp at the bottom of each panel
KPI Chip Small colored badge showing a key metric
Status Badge State indicator (Active/Inactive/Error) with color
Empty State Placeholder when no data is available
Table Row Standardized row for list views
Sparkline Inline trend graph for time-series data
Health Dots Color-coded dot indicators for system health
Graph Legend Labeled legend for sparkline and graph widgets

These widgets are used 167+ times across the 25 panels. A panel author composes their layout from these building blocks, and the token system guarantees that a "Section Divider" in the Save Inspector looks identical to one in the Audio Inspector.

UX Design Dogmas

The visual system is governed by 10 design dogmas (D1-D10) that serve as permanent design law:

ID Dogma
D1 Every panel has exactly one accent bar in its system color
D2 Headers use the standard Panel Header widget
D3 Section breaks use Section Divider, never manual lines
D4 KPI values use KPI Chip, never raw text
D5 System colors come from tokens, never hardcoded
D6 Fonts come from tokens, never from platform defaults
D7 Empty states use the Empty State widget with guidance text
D8 Footers show last-updated timestamp via Footer Bar
D9 Tables use Table Row for consistent row height and padding
D10 Sparklines share the same height token and render settings

Console Commands

Every system registers console commands during initialization. These provide text-based access to the same information shown in the inspector panels, useful for automated testing, remote debugging, and CI/CD pipelines.

PROFILE
  pgx.profile.status          Budget summary and active platform
  pgx.profile.layers          Show 5-layer resolved profile

GAMEFLOW
  pgx.gameflow.state          Current tag per channel
  pgx.gameflow.history        Recent state transitions
  pgx.gameflow.channels       List all 8 channels with current values

SAVE
  pgx.save.status             Active slots, contexts, last operation
  pgx.save.slots              List all save slots with metadata

PSO
  pgx.pso.status              Compilation state and progress
  pgx.pso.contexts            Active precache contexts

AUDIO
  pgx.audio.status            Backend, active sounds, pool usage
  pgx.audio.channels          Channel volumes and mute states

LOADING
  pgx.loading.status          Current screen state and progress

LEVELFLOW
  pgx.levelflow.status        Active transitions and pending loads

DATA REGISTRY
  pgx.registry.list           All databases with entry counts
  pgx.registry.stats          Detailed per-database statistics
  pgx.registry.export         Export database metadata as JSON
  pgx.registry.validate       Run 18-rule validation suite

MESSAGE
  pgx.message.status          Channel count, listener count, history size
  pgx.message.channels        Active channels with listener counts
  pgx.message.history         Recent message broadcast log

EVENT HANDLER
  pgx.event.status            Registered handlers, cache usage
  pgx.event.list              All registered event tags with classes
  pgx.event.telemetry         Per-tag execution statistics
  pgx.event.blackbox          Recent execution records
  pgx.event.report            Export full markdown report

MGOS
  pgx.mgos.status             GC tracking summary
  pgx.mgos.profile            Memory allocation profile

The naming convention is always pgx.{system}.{command}. If you know the system name, you can guess the command.


Inspector Panel Details by System

System Live Data Controls Graphs
Profile 5 layers, platform, budgets Simulate platform Budget usage
GameFlow 8 channel tags, transition count Revert state Transition rate
Log Sinks, entries, verbosity Filter, export --
Save Slots, contexts, domains Force save/load --
PSO State, progress, contexts Pause/resume Compilation progress
Loading Screen state, progress Force show/hide Progress + PSO
LevelFlow Transitions, sub-levels Cancel transition --
Audio Channels, pool, music state Play/stop test --
Message Channels, listeners, history Broadcast test --
EventHandler Handlers, telemetry, blackbox Execute test Execution time
Registry Databases, entries, cache Invalidate cache --
MGOS GC runs, tracked objects Force GC Memory + GC rate

Color Conventions

Every system has an assigned color that appears consistently across all editor surfaces:

System Color Used In
Profile Yellow Accent bar, CB thumbnail, Hub card, icon
GameFlow Orange Accent bar, CB thumbnail, Hub card, icon
Save Green Accent bar, CB thumbnail, Hub card, icon
PSO Cyan Accent bar, CB thumbnail, Hub card, icon
Loading Magenta Accent bar, CB thumbnail, Hub card, icon
Audio Orange Accent bar, CB thumbnail, Hub card, icon
Data Registry Cyan Accent bar, CB thumbnail, Hub card, icon
Construction Teal Accent bar, CB thumbnail, Hub card, icon
MGOS Purple Accent bar, CB thumbnail, Hub card, icon
Config Dashboard Green Accent bar, Hub card
Scaffold Amber Accent bar, CB thumbnail, Hub card, icon

The color is defined once in the design token system and derived everywhere else. No panel, no factory, no toolbar icon hardcodes a color value.


The Test Dashboard

The Test Dashboard provides a centralized view of framework health:

+-----------------------------------------------------------------------+
|  PGX TEST DASHBOARD                                                   |
|                                                                       |
|  System          | Tests | Passed | Failed | Status                  |
|  ----------------+-------+--------+--------+--------                  |
|  Profile         |   7   |   7    |   0    |  PASS                   |
|  GameFlow        |   7   |   7    |   0    |  PASS                   |
|  Save            |   7   |   7    |   0    |  PASS                   |
|  PSO             |   7   |   7    |   0    |  PASS                   |
|  Audio           |   7   |   7    |   0    |  PASS                   |
|  Loading         |   7   |   7    |   0    |  PASS                   |
|  LevelFlow       |   7   |   7    |   0    |  PASS                   |
|  Data Registry   |   7   |   7    |   0    |  PASS                   |
|  Message         |   7   |   7    |   0    |  PASS                   |
|  EventHandler    |   7   |   7    |   0    |  PASS                   |
|  MGOS            |   7   |   7    |   0    |  PASS                   |
|                                                                       |
|  [Run All]  [Run Selected]  [Export Report]                           |
+-----------------------------------------------------------------------+

Each system's Test Utility provides 7 standard test functions. The dashboard collects results and displays them with color-coded status indicators. Failed tests show error details inline. Results can be exported as a markdown report.


The Simulation Harness (PSPH)

The Simulation Harness is a deep-injection testing tool that populates the entire framework with synthetic data:

  • Demo Mode: Creates 20 sample Data Assets across 7 categories, populating the Content Browser with a working example project. Useful for onboarding and evaluation.

  • Harness Mode: Injects live data into all 13 subsystems -- save slots, game flow history, PSO contexts, registry entries, message broadcasts, event handler executions. Covers approximately 90% of the runtime API surface (~160 calls).

  • Live Simulation: A ticker that continuously exercises subsystem APIs, producing realistic data flow across all three communication buses. Useful for stress testing inspector panels and observing system interactions.


The Scaffold Tool

The Scaffold tool automates project setup for new PGX-based projects:

  1. Template Selection: Choose from 4 built-in templates (minimal, standard, full, custom) that determine which plugins and configurations are created.

  2. Configuration: Set project-specific values -- project name, target platforms, feature flags. The tool validates configuration against Profile budgets.

  3. Plan Review and Execution: See exactly what will be created (folders, Data Assets, configurations) before executing. All operations are wrapped in a transaction for undo support. A JSON audit trail records every action.


Key Takeaways

  1. Every system is observable. 25 dockable panels, 40+ console commands, live dashboards. You never need to add a log statement to understand system state.

  2. Content Browser is the entry point. 58 Data Asset types organized by system, color-coded, one click to create. No wizards, no dialogs.

  3. Visual consistency is enforced. A design token system and 11 atomic widgets guarantee that all 25 panels look like they belong to the same framework. Ten design dogmas prevent visual drift.

  4. Toolbar is customizable. 25 pinnable shortcuts, 28 custom SVG icons, a tools submenu with everything. Each developer configures their own quick-access bar.

  5. Testing is built-in. Test Dashboard runs all system tests from one panel. The Simulation Harness populates the entire framework with synthetic data for integration testing. The Registry Validation tool runs 18 rules with auto-fix.

  6. Colors are meaningful. Each system's color is consistent across every editor surface -- Content Browser, toolbar, Hub, inspector, accent bars. Visual identification is instant.

Clone this wiki locally