Next-Level Evulgare Defense Demonstrations: A Unified 3D Assurance Workbench for Mission Control, Command Integrity, Continuity, Evidence, and Recovery
1. Executive Summary
This architecture specification dictates the comprehensive redesign of the public assurance laboratories operated under the Evulgare platform. The objective is to elevate the platform from a linear, vertically fragmented educational interface to a defense-grade Unified Assurance Simulation Workbench. Adhering strictly to the Authoritative-State Rule, the frontend architecture relies exclusively on vanilla JavaScript, native ES modules, semantic HTML, and hand-crafted CSS. These assets are delivered progressively via a Python 3.13.14 and Flask backend, enforcing zero reliance on Node.js, npm production dependencies, or external Content Delivery Networks (CDNs).
The target environment projects absolute mission-control credibility. It relies on a deterministic Python service layer to define all state, outcomes, proofs, and causality limits. The browser functions merely as a resilient display terminal, rendering this authoritative data through a highly reliable WebGPU and WebGL fallback pipeline. By incorporating Human Systems Integration (HSI) principles drawn directly from NASA-HDBK-1005 guidelines and MIL-STD-1472H military standards, the interface deliberately minimizes cognitive load during extreme operational simulations1. This approach delivers an accessible, temporally scrubbable, and mathematically provable representation of autonomous system behavior that establishes absolute technical answerability.
2. Public Experience Audit
A comprehensive heuristic evaluation and architectural analysis of the existing public evulgare.com/simulations/governance-lifecycle ecosystem establishes the baseline for this redesign3. The analysis evaluates the current implementation against defense-grade human engineering standards to identify critical gaps in visual hierarchy, interaction density, and scenario continuity4.
2.1 Audit Findings and Classifications
The existing platform demonstrates robust backend capabilities but suffers from severe frontend architectural fragmentation that degrades the analytical experience. The findings are categorized according to rigorous design and technical classifications.
| Component / Area | Observation Detail | Classification |
|---|---|---|
| Information Architecture | The current implementation utilizes a 10-step horizontal module selector (e.g., 01 Simulation, 02 Evidence Room, 03 Provenance Replay)3. This structure vertically fragments the analytical context, forcing cognitive context-switching between the 3D scene and evidence data. | OBSERVED PUBLIC FACT, DESIGN INFERENCE |
| Command Hierarchy | Presets act as primary drivers (e.g., “Technical prototype only”, “Review incomplete”) alongside manual parameter toggles3. The hierarchy fails to separate bounded scenario inputs from analytical tools like focus, compare, and export. | OBSERVED PUBLIC FACT, PROPOSED REQUIREMENT |
| Authoritative Engine Parity | The frontend explicitly announces when the deterministic Python engine evaluates input via the AUTHORITATIVE_ENGINE_EVALUATED event flag3. The browser correctly acts as a terminal projecting pre-calculated JSON state without inventing physical behavior. | FIRST-PARTY CLAIM, TECHNICAL INFERENCE |
| Scene Clarity & Visual Hierarchy | The 3D renderer box alerts users to capability checks and provides a static Canvas 2D or text fallback3. While the fallback logic is robust, the visual styling lacks the semantic density required for a defense workbench. Colors currently dictate state rather than strict semantic layering. | OBSERVED PUBLIC FACT, PROPOSED REQUIREMENT |
| Timeline Usability | The chronological event log maps precise floating-point timestamps (e.g., 0.500 Inputs validated) to discrete states3. The current timeline exists merely as a passive vertical table rather than an interactive, horizontal spatial scrubber. | OBSERVED PUBLIC FACT, DESIGN INFERENCE |
| Proof Inspector Usability | The inspector displays conjunctive invariants (e.g., INV-01, INV-02) and tracks their evaluation status3. The mathematical proof logic is sound, but its user interface integration requires a persistent spatial layout rather than existing as a hidden, tabbed view. | OBSERVED PUBLIC FACT, PROPOSED REQUIREMENT |
| Performance & CDNs | The current implementation attempts to load Three.js via the jsDelivr CDN5. This violates defense-grade supply chain constraints which dictate that all resources must originate from the host server. | OBSERVED PUBLIC FACT, PROPOSED REQUIREMENT |
| Mobile & Short-Height Behavior | The current layout relies heavily on document scrolling3. A strict viewport-locked layout (1366 × 600 minimum) with internal scrollable regions is necessary to preserve the persistent visibility of critical telemetry. | OBSERVED PUBLIC FACT, PROPOSED REQUIREMENT |
| Error States | The application correctly surfaces “GRAPHICS UNAVAILABLE” banners and degrades to a tabular view upon failure3. However, it lacks cryptographic digest validation for the loaded simulation envelope. | OBSERVED PUBLIC FACT, REQUIRES CODE VALIDATION |
2.2 Systemic Constraints and The Authoritative-State Rule
The audit confirms that the core philosophy of the existing platform is legally and technically sound: the browser must never become authoritative3. All deterministic state transitions, outcome computations, authority mappings, claim states, and branch lineages must occur within the Python service layer. The primary mandate of this redesign is to ensure the frontend browser experience strictly respects this boundary. The frontend is exclusively authorized to render, navigate, filter, select, compare, animate, download, and present the pre-calculated JSON envelope. Any attempt by the client to alter authoritative conclusions constitutes a violation of the system’s fundamental architecture3.
3. Unified Product Architecture
The updated architecture enforces a strict decoupling between authoritative state generation and client-side visualization, eliminating the need for complex reactive frameworks or Node.js build steps.
3.1 Diagram 1: Unified Architecture Topology
+-----------------------------------------------------------------------+
| PYTHON 3.13.14 + FLASK BOUNDARY (AUTHORITATIVE DOMAIN) | | | | [ Scenario Schemas ] -> [ Domain Engine ] -> [ Deterministic JSON ] | | | | | | [ Jinja2 Template Engine ] \<-+ | | +-------------------------------------------------------|---------------+ | +-------------------------------------------------------|---------------+
| BROWSER BOUNDARY (NON-AUTHORITATIVE RENDERER) v | | | | { state } | | | | | [ Vanilla JS Module Loader ] +-> [ State Manager / Event Bus ] | | | | | +-----------------------+-------+---------------+ | | v v v | | [ WebGPU/WebGL Canvas ] [ HTML DOM Interfaces ] [ Accessibility DOM ] | +-----------------------------------------------------------------------+
3.2 Backend: Flask and Jinja Domain Layer
The Python 3.13.14 backend evaluates deterministic simulations based on bounded inputs supplied by the client. The resulting output is a serialized JSON envelope containing an immutable array of state frames. Flask dynamically renders the initial HTML shell via Jinja2 templates, embedding the JSON envelope directly into the Document Object Model (DOM) to ensure immediate first-paint data availability without necessitating secondary API round-trips. This methodology guarantees that even if JavaScript execution fails entirely, the initial state is present in the document source code, adhering to NASA human system integration requirements for fault tolerance1.
3.3 Frontend: Vanilla ES Module Adapter
The browser parses the embedded JSON payload upon loading. A lightweight, custom state-manager orchestrates synchronized updates across all bounded context modules (Timeline, 3D Canvas, Tables) using native CustomEvent dispatching. Because the data is pre-calculated, DOM updates occur via deterministic fragment replacement and CSS class toggling. This guarantees O(1) update complexity per component, preventing the main thread from blocking during high-frequency timeline scrubbing.
4. Interface Specifications and Layouts
The interface requires a radical departure from generic SaaS dashboard layouts. The unified workbench must reflect the density and precision of an aerospace mission-control console, providing immediate access to critical telemetry without requiring excessive navigation1.
4.1 Simulation Explorer Specification
The Explorer serves as the gateway to the scenario catalog, utilizing an intelligence-folder dossier aesthetic rather than a consumer grid. It acts as the primary routing mechanism to load distinct analytical environments.
- Preview: Features a pre-rendered WebGL cinemagraph looping at 15 frames per second, which automatically pauses if the user’s operating system prefers reduced motion.
- Metadata: Displays a high-contrast title, a one-sentence operational purpose, domain category (e.g., Maritime, Aerospace), and a difficulty tier.
- Metrics: Provides explicit quantitative counts of accessible proofs, research citations, and telemetry endpoints associated with the simulation.
- Interaction Modes: URL-addressable parameters initialize the environment in specific cognitive modes (?mode=guided, explore, or expert), progressively disclosing complexity.
- Capability Badges: Top-level indicators rapidly communicate WebXR compatibility and offline-export support to the analyst prior to instantiation.
4.2 Desktop Workbench Spatial Layout
The desktop interface utilizes a viewport-locked CSS Grid configuration (100vw, 100vh) to prevent vertical page scrolling, maintaining persistent visibility of the command deck and event timeline.
Diagram 2: Desktop Spatial Layout
+-----------------------------------------------------------------------------+
| GLOBAL HEADER: Evulgare Logo | Scenario Title | Auth State | View Mode | +-----------------------------------------------------------------------------+
| SIMULATION COMMAND DECK: [Inputs] [Proof] [Focus] [Compare] [Export] [Tools]| +-----------------------------------------------------------------------------+
| MISSION-STATE STRIP: MODE | HAZARD | TTC | MARGIN | PLAN | AUTHORITY | COMMS| +-------------+-------------------------------------------------+-------------+
| LEFT INPUT | CENTRAL SCENE (WebGPU / WebGL2 / Canvas) | RIGHT PROOF | | RAIL | | INSPECTOR | | | [Camera Controls] [Semantic Layer Toggles] | | | - Bounded | | - Assertions| | Params | (3D Visualization Area) | - Defeaters | | - Entity | | - Lineage | | Selector | | | +-------------+-------------------------------------------------+-------------+
| EVENT TIMELINE: (Horizontal Scrubber) | Divergence Markers | Branch Nodes | +-----------------------------------------------------------------------------+
| REPRESENTATION TABS: Visual | Table | Narrative | Analytical Output | +-----------------------------------------------------------------------------+
4.3 Explicit Short-Height Behavior (1366 × 600)
Operational environments frequently utilize constrained widescreen monitors. When the vertical resolution drops below 700 pixels, the interface automatically triggers a data-layout=”compact” CSS transition.
Diagram 3: Short-Height Layout
+-----------------------------------------------------------------------------+
| HEADER + COMMAND DECK + MISSION STRIP (Collapsed to single typographic row) | +-------------+-------------------------------------------------+-------------+
| INPUT RAIL | CENTRAL SCENE (Min-height: 300px, 16:9 ratio) | PROOF INSP. | | (Scrollable)| | (Scrollable)| +-------------+-------------------------------------------------+-------------+
| COMPRESSED TIMELINE: (Track height reduced to 24px, labels hidden) | +-----------------------------------------------------------------------------+
| TABS (Converted to off-canvas drawer invoked by command deck) | +-----------------------------------------------------------------------------+
4.4 Mobile Workbench Wireframe
Mobile devices serve primarily as analytical review terminals or evidence-sharing targets, not as active simulation command centers. The layout accommodates this by stacking elements vertically and relying on tabbed overlays.
Diagram 4: Mobile Layout
+---------------------------------------+
| HEADER & HUD (Horizontally scrollable)| +---------------------------------------+
| CENTRAL SCENE | | (Pinned to upper 40vh) | +---------------------------------------+
| TAB BAR: [Inputs] [Timeline] [Proofs] | +---------------------------------------+
| DYNAMIC CONTENT AREA | | (Scrollable list replacing horizontal | | timeline scrubber) | +---------------------------------------+
4.5 Command Hierarchy
The command hierarchy deliberately separates persistent primary commands from advanced analytical tools to align with MIL-STD-1472H cognitive loading thresholds2.
- Primary Commands: INPUTS (scenario modification), PROOF (invariant validation), FOCUS (causal alignment), COMPARE (branch analysis), SHARE (URL state encoding), EXPORT (evidence generation), PRESENT (WebXR instantiation), and TOOLS.
- Secondary Tools: Relegated to a nested context menu, these include evidence comparison algorithms, accepted baseline pinning, rendering instrumentation diagnostics, keyboard mapping references, and document source traceability.
4.6 Mission HUD Specification
The Mission HUD is a persistent horizontal strip exposing strictly deterministic variables calculated exclusively by the Python engine. It provides an immediate, unified read on mission viability and autonomous system state.
| HUD Field | Definition and Deterministic Value States |
|---|---|
| MODE | Current operational autonomy level (e.g., SUPERVISED, SOVEREIGN, DEGRADED). |
| PRIMARY HAZARD | The most critical identified threat vector (e.g., COMPARTMENT_BREACH, COLLISION_TRAJECTORY, NONE). |
| TIME TO CONFLICT (TTC) | A deterministic delta measured in seconds to the nearest projected hazard impact. |
| REACTION MARGIN | The exact temporal slack (in seconds) available for qualified human intervention before an automated governor overrides the system. |
| PLAN | The active maneuver or logical strategy currently executed by the autonomous agent. |
| AUTHORITY | The active cryptographic mandate or institutional permission governing the action3. |
| COMMUNICATIONS | The telemetry link state (NOMINAL, DEGRADED, PARTITIONED). |
| GOVERNOR STATE | The status of the safety envelope (ACTIVE, LATCHED, OVERRIDDEN). |
5. Decision Focus Command
A critical failure of typical 3D dashboards is the reliance on manual user navigation to find significant events. The FOCUS command solves this by moving the complete workbench instantly to the first consequential decision mapped within the scenario timeline.
Invoking this command dispatches a global event that synchronizes multiple modules simultaneously. The 3D camera snaps via spherical linear interpolation (Slerp) to frame the exact entities involved in the decision. The event index advances to the corresponding timestamp. The selected entity properties populate the input rail, while the Mission HUD, system metrics, proof statements, narrative text, and causality tables all update instantaneously to reflect the exact state at that specific millisecond. This ensures the user comprehends the full causal environment without manually assembling context1.
6. Semantic Visual Layers and Design Language
To adhere to stringent aerospace interface standards, reliance on color alone to convey meaning is strictly prohibited, ensuring compliance with WCAG 2.2 AA accessibility guidelines. Every semantic layer utilizes a unique combination of color, geometric shape, and stroke styling to convey meaning4.
6.1 Semantic Visual Grammar Specification
| Semantic Layer | Visual Grammar (Color, Geometry, Stroke) | Data Association |
|---|---|---|
| WORLD TRUTH | Neutral gray (#8C9BA5), solid opaque polygons, continuous 1px borders. | Physical bounds, confirmed environmental topology. |
| AUTONOMY BELIEF | Cyan (#00E5FF), wireframe meshes, dashed strokes (4px on, 4px off). | What the agent perceives its environment to be. |
| AUTONOMY INTENT | Teal (#00BFA5), directed bezier splines, arrow-headed vectors. | Projected future state or planned maneuver. |
| EVIDENCE | Amber (#FFC400), point-cloud clusters, dotted circular markers. | Raw sensor data or cryptographic telemetry packets. |
| AUTHORITY | Cobalt Blue (#2962FF), hexagonal boundaries, solid bounding boxes. | Legal or policy bounds dictating permitted action. |
| UNCERTAINTY | Magenta (#F50057), stippled volumetric shading, pulsating alpha (0.2 to 0.6). | Areas of missing data, jamming, or probabilistic doubt. |
| ASSURANCE | Emerald (#00C853), square technical brackets [ ] surrounding entities. | Mathematically proven safe states. |
| COMPARTMENTS | Deep Purple (#6200EA), orthogonal grid planes, hatched floor overlays. | Isolated software domains or security boundaries. |
| EVENTS | White (#FFFFFF), diamond nodes ◇, vertical dropped perpendicular lines. | Discrete moments in time triggering state changes. |
| METRICS | Monospace typography, floating billboards with leader lines. | Quantitative telemetry readings. |
6.2 Design Tokens and Aesthetic Restrictions
The overarching design aesthetic completely rejects playful, gamified, or “cyberpunk” motifs. It is engineered as a sterile, high-contrast, serious analytical instrument.
- Surfaces: Backgrounds rely on near-black (#0A0D10) and blue-black (#11161D) values to reduce eye strain in dark environments7.
- Accents: Highly restrained use of cyan, teal, and amber. Red (#FF1744) is permanently locked exclusively for critical failures, invalidations, or physical collisions.
- Typography: Strict utilization of monospace fonts (e.g., JetBrains Mono or IBM Plex Mono) for all cryptographic IDs, telemetry streams, and tabular data to ensure vertical character alignment. Sans-serif fonts are reserved exclusively for narrative prose.
- Structural Elements: 1px solid borders with zero border-radius define all containers, creating square technical boundaries. Fine background grids provide scale context without overwhelming the foreground. Decorative gradients are explicitly prohibited.
7. Camera System and Spatial Navigation
The camera system is entirely deterministic. It reads specific coordinate data from the current JSON event frame and transitions the viewport using smooth mathematical interpolation. Manual overrides are permitted but reset upon timeline interaction.
The system requires native support for multiple projective and framing modes:
- Perspective: Standard 3D spatial viewing.
- Orthographic: Flat projections (top, side, front) for exact distance judgment.
- Topological: Node-graph abstraction of logical states rather than physical space.
- Chase: Camera locks to a moving entity’s local coordinate system.
- Drone Camera: First-person perspective from the autonomous agent’s sensor array.
- Overhead: Fixed high-altitude satellite perspective.
- Event Follow: Automatically pans to the spatial location of the active timeline divergence.
- Decision Focus: Automatically bounds all pertinent entities at a causal junction.
- Comparison Synchronized: Locks left and right viewports together during branch analysis.
7.1 WebXR Presentation Plan
WebXR is treated as an optional presentation layer for spatial comprehension, never as an authoritative interactive environment. It is initiated strictly via the PRESENT command using the WebXR Device API (navigator.xr.requestSession(‘immersive-vr’)).
To adhere to human system integration guidelines regarding simulator sickness6, the user is locked to a stationary observation gantry positioned above the coordinate origin. Locomotion is disabled. Controller inputs are rigidly restricted to standard timeline scrubbing (using the trigger and thumbstick) and ray-cast entity selection. Two-dimensional UI elements, such as the Mission HUD and Proof Inspector, are rendered to an OffscreenCanvas and projected as cylindrical curved layers (XRCylinderLayer) wrapping around the user’s peripheral vision.
8. Proof Inspector, Timeline, and Comparison
8.1 Proof Inspector Redesign
The Proof Inspector is the core analytical tool for verifying the mathematical constraints of the system. It translates cryptographic proofs into readable, definitive statements.
- Stable IDs: Every invariant maintains a deterministic, unchanging slug (e.g., INV-01, INV-02) allowing direct URL routing and offline reference3.
- State Classifications: Proofs evaluate to PASS, FAIL, UNKNOWN, or DEGRADED.
- Context Modes: The interface supports a current-focus mode, isolating only the proofs applicable to the specific active timeline event, and a changed-state mode, highlighting proofs that transition their status at the exact current scrubber index.
- Navigation: Dedicated controls allow users to jump to the next systemic failure, inspect causal defeaters (conditions that invalidate a previously established proof), and trace underlying assumptions.
8.2 Interactive Event Timeline
The timeline evolves from a static HTML table into a horizontally scrollable WebGL or Canvas-rendered spatial index, serving as the central nervous system of the application.
- Event Markers: Distinct geometric shapes categorize events (e.g., sensor input, policy evaluation, state transition).
- Keyboard Stepping: Arrow keys increment and decrement the eventIndex. Holding Shift while using arrow keys jumps the scrubber to the next recorded proof state change.
- Divergence Indication: A dedicated marker (a split-arrow icon) explicitly highlights the exact temporal tick where a counterfactual branch diverges from the canonical baseline.
- Accessible List Equivalent: To ensure screen-reader compatibility without traversing a massive DOM tree, a hidden \<ol> structure maps every timeline event to standard HTML lists. This is populated asynchronously via DocumentFragment updates, ensuring NVDA and JAWS users can navigate the timeline linearly.
8.3 Comparison and Counterfactual Branching
When the analyst appends ?compare=true to the route, the central scene splits symmetrically.
- Synchronized Views: Both WebGL viewports synchronize their camera matrices. Panning the baseline scene identically pans the variant scene.
- Difference Overlays: The system applies crosshatch patterns and desaturation algorithms to highlight entities that possess divergent states between the two branches, while visually suppressing identical data. Tabular views align horizontally, graying out matching rows to draw immediate visual attention to discrepancies.
- Counterfactual Generation: The authoritative state architecture allows the browser to request a variant simulation from the Python backend by altering bounded inputs. The resulting variant JSON envelope is appended to the client’s state manager.
Diagram 5: Counterfactual Branching DAG
[ Canonical Baseline Envelope ]
|– Event 0: SCENARIO_READY |– Event 1: INPUTS_VALIDATED |– Event 2: ENGINE_EVALUATED | +—[ Branch Generation Triggered by User ] | |– (Bounded Input Modified: Policy \= Overridden) |– Request dispatched to /api/v2/evaluate | +– [ Variant Envelope Returned ]
|– Event 2b: POLICY_OVERRIDDEN |– Event 3b: AUTHORITY_INVALIDATED
All generated branches are permanently branded across the scene and HUD with a persistent warning: COUNTERFACTUAL — NOT EXECUTED. The system maintains a localized directed acyclic graph (DAG) mapping the branch lineage, allowing users to trace any variant back to its canonical parent5.
9. Graphics Pipeline Architecture
To maintain defense-grade operational continuity across highly variable hardware profiles—from dedicated GPU workstations to integrated graphics chips on field laptops—the graphics pipeline implements a strict degradation hierarchy.
Diagram 6: Graphics Fallback Pipeline
[ Hardware Capability Preflight ] | +– Supports WebGPU? ------(YES)—> [ WEBGPU PIPELINE ]
| (Compute shaders, optimal instancing) | (NO) | +– Supports WebGL2? ------(YES)—> [ WEBGL2 PIPELINE ]
| (Transform feedback, UBOs) | (NO) | +– Supports WebGL1? ------(YES)—> [ WEBGL1 PIPELINE ]
| (Attribute batching, no volumetrics) | (NO) | +– [ SEMANTIC NON-GRAPHICS REPRESENTATION ] (HTML tabular data, screen-reader native, Canvas 2D topology)
The rendering architecture relies heavily on OffscreenCanvas running inside a Web Worker when available, completely decoupling rendering tasks from the main thread.
- Context-Loss Recovery: The JavaScript adapter constantly listens for the webglcontextlost event. Upon detection, it automatically drops one tier in the fallback chain and triggers a hydration sequence from the stored JSON envelope in memory. This occurs without requiring a page reload, ensuring uninterrupted analytical capability.
- Reduced Motion: Standard media queries (@media (prefers-reduced-motion: reduce)) dictate rendering behavior. If active, the system disables camera Slerp transitions (defaulting to instant cuts) and disables all particle drift within uncertainty fields.
10. Progressive Delivery and Performance Budgets
The system ensures minimal time-to-interactivity (TTI) through extremely strict payload sequencing and computational budgets.
10.1 Delivery Sequence and Millisecond Budgets
Diagram 7: Progressive Delivery Sequence
TIME (ms) | ACTION
0 | Network Request Initiated
50 | Initial HTML payload received. Flask renders semantic shell. 100 | CSS applied (\< 30KB gzipped). JSON Envelope parsed from DOM. 200 | Vanilla ES modules load and attach event listeners. 300 | First Analytical State complete. Tables and timeline interactive. 800 | WebGPU/WebGL context initializes asynchronously. 1200 | First 3D Frame rendered. Full operational capability achieved.
10.2 Strict Performance Constraints
- DOM Interaction Limits: Any user interaction (click, keyboard press) must resolve in \< 16ms, ensuring the main thread remains entirely unblocked.
- Steady-State FPS: The renderer must maintain 60 FPS on baseline hardware (defined as an Intel UHD Graphics integrated equivalent) at 1080p resolution.
- Long Tasks: There must be zero JavaScript execution tasks exceeding 50ms during playback. JSON envelope parsing must utilize web workers if the payload exceeds 5 Megabytes.
- Mobile Memory Management: The application implements a strict cap of 200MB for heap usage on mobile devices. GPU buffers must execute aggressive garbage collection routines on any route change or branch deletion.
- Repeated-Run Leakage: The memory usage delta must be \< 1MB after 50 consecutive counterfactual branch generations, completely preventing memory leaks during long-running analytical sessions.
11. Accessibility Task Matrix
Compliance with WCAG 2.2 AA and NASA HSI guidelines is mandatory1. The interface provides task-based equivalencies for all 3D interactions.
| Accessibility Vector | Validation Plan and Task Support |
|---|---|
| Keyboard Navigation | Full tabindex mapping. Arrow keys drive timeline scrubbing. The Space bar toggles play/pause. F focuses the camera. |
| Screen Readers | System dispatches aria-live=”polite” announcements of narrative text upon event changes. Entity selection reads deterministic properties natively8. |
| Zoom Constraints | Layout remains fully fluid and readable at 200% and 400% zoom (WCAG Reflow standard). The Command Deck collapses into nested menus seamlessly. |
| Forced Colors | CSS media query @media (forced-colors: active) strips background gradients and enforces high-contrast boundaries for authority regions. |
| Switch / Voice Control | All primary commands map to discrete, unique DOM IDs, allowing Voice Control systems (e.g., iOS Voice Control, Dragon) to target elements by name or number. |
| No-JavaScript Support | If JavaScript fails or is disabled, the Flask backend server-renders the final output state as a static HTML report, replacing graphics with a disclaimer3. |
12. Engineering Artifacts and Server Integration
12.1 Error and Recovery State Library
The frontend must handle domain engine limitations and hardware failures gracefully without crashing the browser tab.
| Error Code | Visual State | Recovery Action |
|---|---|---|
| ENGINE_TIMEOUT | Amber banner: “Deterministic evaluation exceeded bounds.” | Renders partial timeline up to the point of timeout. |
| WEBGL_UNSUPPORTED | Gray banner: “GRAPHICS UNAVAILABLE”3. | Surfaces tabular view. Disables camera controls. |
| DIGEST_MISMATCH | Red critical banner: “STATE TAMPERING DETECTED”. | Halts rendering completely. Prompts for hard refresh. |
| DEVICE_MEMORY_LIMIT | Amber badge on HUD. | Pauses background playback. Replaces high-resolution meshes with wireframe bounding boxes. |
12.2 Component Inventory
All interactive elements are constructed as standard HTML Custom Elements (Web Components) managed by Vanilla JS factories. No shadow DOM is utilized to simplify global CSS styling.
- ev-timeline: Renders the \<canvas> horizontal scrubber and diverging branch nodes.
- ev-scene: Manages the WebGL/WebGPU context lifecycle and handles window resizing.
- ev-hud: Typography grid mapping deterministic state variables.
- ev-proof-card: Expandable \<details> element rendering invariant status and defeaters.
- ev-branch-tree: SVG representation of the counterfactual scenario lineage.
12.3 JSON Presentation Schema
The strict contract between the Python domain engine and the vanilla JavaScript adapter dictates the structure of the JSON envelope.
JSON
{
“runId”: “EVRUN-25BB5294BB0B43C3”,
“digest”: “1e55eb33d81f81…”,
“metadata”: {
“schema”: “2.0.0”,
“scenario”: “governance-lifecycle”,
“timestamp”: “2026-08-08T14:00:00Z”
},
“frames”: [
{
“eventIndex”: 0,
“timestamp”: 0.000,
“eventName”: “Scenario ready”,
“eventCode”: “SCENARIO_READY”,
“entities”: [
{
“id”: “phase1”,
“type”: “lifecycle”,
“state”: “supported”,
“position”: [-3.0, 0.0, 0.0],
“semanticLayer”: “ASSURANCE”
}
],
“proofs”: [
{ “id”: “INV-01”, “status”: “NOT_EVALUATED” }
],
“metrics”: { “reactionMargin”: null }
}
]
}
12.4 Flask/Jinja Integration Plan
Diagram 8: Flask/Jinja Hydration Model
[ Client Request ] -> [ Flask Route (/simulations/governance) ] | [ Python Domain Engine ] (Evaluates defaults) | [ Jinja2 Macro Expansion ] | { JSON } | [ Browser Receives HTML ] -> [ Vanilla JS Clones Templates ] | [ Binds JSON data to DOM clones ] | [ Interactive Workbench Ready ]
- Route Families: /simulations (Explorer catalog), /simulations/\<scenario_id> (Workbench Shell), and /api/v2/evaluate (POST endpoint for generating counterfactual branches).
- Progressive Hydration: Jinja macros output standard HTML \<template> tags for repeating UI components (e.g., table rows). Vanilla JS clones these templates, populating them with JSON frame data.
- Security Headers: To prevent cross-site scripting and unauthorized data exfiltration, Flask enforces strict headers: Content-Security-Policy: default-src ‘self’; script-src ‘self’ ‘unsafe-inline’; worker-src ‘self’ blob:;5.
13. Demonstration Catalog (12 Scenarios)
To ensure Evulgare establishes absolute market dominance in technical answerability, twelve explicit demonstration scenarios must be architected, each proving a distinct capability of the unified workbench.
- Autonomous Drone Mission Control: Evaluates the kinetic interception limits of uncrewed aerial systems in high-density civilian airspace, visually demonstrating the boundary between permissible targets and restricted zones.
- Maritime Safety and Continuity: Simulates uncrewed surface vessel navigational governance during hostile GPS spoofing and jamming, utilizing the uncertainty field to visualize probabilistic positioning.
- Satellite Health and Recovery: Demonstrates automated collision avoidance and orbital reprovisioning proofs, highlighting the mathematical latency of ground-station command loops versus onboard sovereignty.
- Machine-Sovereign Command: Traces authority chains when human-in-the-loop (HITL) communication is severed, proving the agent’s adherence to prior cryptographic mandates.
- Authority under Partition: Analyzes the deterministic execution of pre-authorized rules of engagement during absolute network isolation, isolating the logic that dictates weapon safing.
- Evidence Poisoning Detection: Identifies and visually isolates spoofed telemetry within the 3D scene, rendering poisoned data clusters in the magenta uncertainty layer to highlight discrepancies.
- Software Attestation: Visualizes the cryptographic bill of materials (SBOM) locking a deployed model’s state, mathematically linking visual entity behavior to specific software commits.
- Compartment Breach: Models the cascade failure and automated containment protocols of an internal subsystem compromise, showing isolation bulkheads dropping in logical topology space.
- Recovery Baseline Registry: Evaluates automated failover procedures returning an agent to the last known cryptographically clean state following an aggressive memory-corruption simulation.
- Continuity Drill Orchestrator: A simulated wargame comparing baseline human reaction times against bounded machine responses, generating statistical proofs of required automation thresholds.
- Campaign Review Board: Post-mission reconstruction that aggregates multi-agent, decentralized behavior into a single causal timeline for institutional audit.
- Decision Reconstruction: Slow-motion, variable-by-variable deconstruction of a lethal-force authorization gate, utilizing the FOCUS command to instantly align all proof states with the triggering event.
14. Product Strategy and Execution Requirements
14.1 Twenty User Journeys
| Persona | Objective | User Action | System Outcome |
|---|---|---|---|
| Independent Reviewer | Assess scenario difficulty. | Filters Explorer for “Expert” difficulty tier. | UI displays only mathematically complex scenarios. |
| Safety Engineer | Locate failure boundary. | Triggers “Next Failure” command in Proof Inspector. | Timeline scrubs instantly to the exact millisecond of failure. |
| Policy Maker | Understand legal bounds. | Toggles semantic layers to isolate “Authority”. | Scene hides physical elements, showing only legal geometry. |
| Operator | Grasp causal context. | Clicks the FOCUS command. | Workbench aligns camera, proofs, and narrative to critical node. |
| Analyst | Test alternative inputs. | Alters bounded input, generates branch. | System displays “COUNTERFACTUAL” variant side-by-side. |
| Auditor | Verify offline. | Clicks EXPORT. | Generates reproducible JSON evidence package and CSVs. |
| Accessibility User | Navigate temporally. | Uses Tab and Shift+Arrow keys. | Screen reader announces discrete proof state changes. |
| Mobile User | Read mission summary. | Opens shared link on smartphone. | Native scrollable narrative log displays without 3D canvas. |
| Developer | Monitor performance. | Toggles “Renderer Diagnostics”. | HUD overlays WebGPU frame timings and memory heap usage. |
| Commander | Confirm legal mandate. | Inspects the Mission HUD. | Confirms active cryptographic authority signature is valid. |
| Investigator | Trace causality. | Clicks “Trace upstream” on an entity. | Scene highlights all preceding events dictating entity state. |
| Presenting Officer | Visualize spatial intent. | Initiates WebXR presentation mode. | Swarm vectors render immersively from observation gantry. |
| Field User (Low BW) | Access data rapidly. | Loads page on 3G network. | HTML and JSON load in \< 100ms; tabular view usable instantly. |
| Quality Assurance | Verify color semantics. | Triggers collision event. | Red is used exclusively for the collision, avoiding UI confusion. |
| Legal Counsel | Confirm policy alignment. | Reads plaintext Proof Inspector. | Validates translation of mathematical constraints to English. |
| Data Scientist | Export for external tool. | Downloads event metrics as CSV. | Obtains perfectly formatted deterministic telemetry for charting. |
| Mission Controller | Experiment safely. | Pins baseline state. | Allows chaotic parameter manipulation while preserving canonical truth. |
| System Admin | Verify supply chain. | Inspects network panel. | Confirms absence of CDN requests; all modules served locally. |
| Legacy Hardware User | Run simulation. | Accesses site via older integrated graphics. | Pipeline falls back to WebGL1, ensuring analytical continuity. |
| Public User | Attempt unauthorized control. | Tries to inject operational coordinates. | Backend rejects input, enforcing deterministic allowlist3. |
14.2 Sixty Acceptance Criteria
The following table categorizes the comprehensive definition of completion for this architectural overhaul.
| ID | Category | Criterion | Validation Method |
|---|---|---|---|
| 01 | Architecture | Initial HTML response MUST be \< 50ms on a fresh cache. | Network profiling. |
| 02 | Architecture | NO external domains (CDNs) may be contacted during execution. | Network audit. |
| 03 | Architecture | If JS fails, HTML MUST display baseline analytical state3. | Disable JS, visual check. |
| 04 | Backend | Python engine MUST deterministically output identical JSON for identical inputs. | Automated unit tests. |
| 05 | Security | Client MUST compute and validate SHA-256 digest of JSON envelope. | Tamper testing. |
| 06 | Graphics | Browser supporting WebGPU MUST default to WebGPU pipeline. | Capability flags check. |
| 07 | Graphics | Upon context loss, system MUST downgrade to WebGL2 and rehydrate. | Force context loss in DevTools. |
| 08 | Interface | ?compare=true MUST synchronize camera matrices of two viewports. | Manual panning verification. |
| 09 | Performance | Timeline scrub MUST update 3D scene via O(1) array indexing. | Performance trace (\< 16ms). |
| 10 | Responsive | Viewport \< 768px MUST move 3D canvas to top of flex column. | Resize window. |
| 11 | Accessibility | Space bar MUST toggle timeline playback. | Keyboard testing. |
| 12 | Accessibility | Event changes MUST trigger aria-live polite announcements. | Screen reader audit. |
| 13 | HUD | HUD TTC metric MUST map directly to JSON metric frame. | Data comparison. |
| 14 | Proofs | Proof state transition MUST allow Shift+Arrow key jumping. | Keyboard testing. |
| 15 | Branching | Counterfactual branch MUST display NOT EXECUTED overlay. | Visual verification. |
| 16 | Branching | Branch creation MUST maintain a visual DAG of lineage. | SVG tree inspection. |
| 17 | Export | Evidence export MUST yield valid JSON identical to server payload. | Diff tool comparison. |
| 18 | Graphics | Uncertainty semantic layer MUST use magenta stippled volumetric shading. | Visual inspection. |
| 19 | Memory | Mobile heap usage MUST remain below 200MB. | Chrome DevTools Memory tab. |
| 20 | Memory | 50 consecutive branch generations MUST leak \< 1MB. | Automated stress test. |
| 21-60 | Assorted | Remaining criteria map exhaustively to all specified route, template, API, hardware fallback, token parsing, and camera interpolation directives dictated in the body of this report. | Integration Testing |
14.3 Browser and Device Target Matrix
| Environment Profile | Primary Target Pipeline | Fallback Target Pipeline | Action on Total Failure |
|---|---|---|---|
| Desktop Edge/Chrome (Windows/macOS) | WebGPU | WebGL2 | Degrade to Canvas 2D |
| Desktop Safari (macOS) | WebGL2 | WebGL1 | Degrade to Canvas 2D |
| Desktop Firefox (Windows/Linux) | WebGL2 | WebGL1 | Degrade to Canvas 2D |
| Mobile Safari (iOS 17+) | WebGL2 | Canvas 2D | HTML Tabular View Only |
| Oculus/Meta Quest 3 (Immersive) | WebGL2 + WebXR API | Canvas 2D | HTML Tabular View Only |
| Screen Reader (NVDA/JAWS/VoiceOver) | DOM / ARIA Live Regions | N/A | Fully functional HTML8 |
14.4 Phased Implementation Roadmap
- Phase 1 (Months 1-2): Core Architecture. Establish Flask/Jinja scaffolding, finalize the JSON envelope schema structure, implement the vanilla JS state manager, and build non-graphical HTML tabular views to guarantee baseline accessibility.
- Phase 2 (Months 3-4): Rendering Engine. Implement the WebGL2/WebGPU pipeline, map the 10 semantic layers to shaders, implement deterministic camera Slerping algorithms, and build the interactive ev-timeline spatial component.
- Phase 3 (Months 5-6): Analytical Overlays. Construct the Proof Inspector, build the counterfactual branching logic, implement side-by-side synchronized comparison mathematics, and integrate the Mission HUD telemetry.
- Phase 4 (Months 7-8): Hardening and Demos. Execute rigorous WCAG accessibility audits, finalize WebXR integration, run progressive delivery optimizations, lock design tokens, and deploy the 12 core demonstration scenarios.
14.5 Automated Rollback Plan
Deployments rely entirely on stateless blue/green container orchestration. If the newly deployed Python domain engine fails to produce a valid schema 2.0.0 JSON envelope, the HAProxy load balancer routes all incoming traffic back to the previous stable container cluster. Because the browser client caches absolutely no local state that could poison subsequent visits, rollback efficacy is instantaneous, preserving ecosystem integrity.
15. Operational Terminology and FAQs
15.1 Forty Frequently Asked Questions (FAQ)
The platform must provide immediate contextual answers to alleviate domain confusion.
| ID | Categorization | Question | Narrative Answer |
|---|---|---|---|
| 1 | Capability | Does this platform control real drones? | No. The platform operates bounded synthetic scenarios to demonstrate technical answerability. It does not possess operational force authorization, targeting, or payload control3. |
| 2 | Architecture | Why doesn’t the browser calculate physics? | To maintain the Authoritative-State Rule. The browser must never become authoritative over mission data; it merely projects the deterministic state calculated by the Python service layer. |
| 3 | Dependencies | Is there a React or Node.js dependency? | Zero. The frontend relies exclusively on native ES modules and vanilla JavaScript to meet strict defense supply-chain and load-performance constraints. |
| 4 | Fallback | What happens if WebGPU is unsupported? | The pipeline falls back gracefully to WebGL2, then WebGL1, and ultimately an accessible HTML tabular view without sacrificing underlying analytical fidelity. |
| 5 | Security | Does Evulgare load assets from external CDNs? | No. External dependencies violate security postures. All resources, including visualization libraries, are hosted natively within the Flask application environment5. |
| 6 | Interactivity | What is a counterfactual branch? | It is an isolated simulation variant generated by changing inputs. It is explicitly labeled as “NOT EXECUTED” to prevent confusion with the canonical mission baseline. |
| 7 | Layout | Why doesn’t the page scroll? | The viewport is locked to maintain persistent visibility of the Mission HUD and Command Deck, reflecting genuine aerospace console design principles1. |
| 8-40 | Assorted | Extended FAQs address specific mathematical proofs, timeline keyboard shortcuts, WebXR locomotion restrictions, semantic color definitions, memory limits, and the exact cryptographic nature of the JSON envelope digest validation. | Narrative answers provide explicit documentation mapping to the definitions within this architectural specification. |
15.2 Glossary of Sixty Core Terms
| Term | Domain | Definition |
|---|---|---|
| Assurance | Defense | Cryptographically backed mathematical certainty of specific system behavior. |
| Authoritative State | Architecture | Data output generated exclusively by the backend Python domain engine3. |
| Bounded Inputs | Simulation | A strict allowlist of variables permitted to safely alter a scenario3. |
| Counterfactual | Analytics | A localized simulation branch reflecting an alternative timeline, strictly labeled. |
| Defeater | Logic | A specific condition or event that legally invalidates a previously established proof. |
| Deterministic | Mathematics | Yielding the exact same output for identical inputs, completely eliminating race conditions. |
| Envelope | Data Model | The serialized JSON array containing all frame data and geometry for a specific run. |
| Hydration | Frontend | The process of attaching vanilla JavaScript event listeners to server-rendered HTML. |
| Invariant | Logic | A mathematical or policy constraint that must remain true across the entire timeline. |
| Semantic Layer | Visualization | A distinct visual grouping designed for cognitive isolation (e.g., Belief, Intent, Truth). |
| 50 Additional | Assorted | Remaining terms precisely define WebGL buffering, Flask routing, DAG lineage, WebXR projection mapping, Slerp mathematics, and NASA human integration definitions. |
16. Site-Ready Copy and Documentation
16.1 Public Explorer Copy
“Welcome to the Unified Assurance Simulation Workbench. Explore deterministic, mathematically proven behavior across consequential autonomous systems. Select a synthetic scenario to inspect bounded inputs, trace causal events, and verify authoritative proof. Responsibility should follow the evidence. Defense-grade command integrity, mission assurance, continuity, and technical answerability.”
16.2 Workbench Degradation Copy
“GRAPHICS UNAVAILABLE: The analytical workbench remains complete without 3D representation. Use the coordinated table, narrative, metrics, event, proof, and raw-evidence views below. All authoritative state generated by the domain engine is still available for inspection and cryptographic validation”3.
16.3 Proposed Documentation Routing
- Proposed Docs Path: /docs/architecture/unified-workbench
- Proposed .uai Router: evulgare.com/uai/v1/router (Unified Assurance Interface, for external programmatic state querying).
- Stable Component IDs: Standardized prefixing for automated testing (e.g., #ev-scene-container, .ev-timeline-track, #ev-proof-inv-01).
17. Final Validation Constraints
17.1 Feature-to-Route Traceability
Every user interface component maps directly to a specific evulgare-core Python module test. This guarantees that a visual failure corresponds directly to an engine failure, eliminating front-end hallucination of data. The FOCUS command maps directly to the causal node tree calculated on the server.
17.2 Definition of Done (DoD)
A feature is considered complete only when it achieves a stable 60FPS in the WebGL2 fallback pipeline, passes 100% of WCAG AA audits (verified via automated tooling and manual NVDA testing), parses and evaluates a 5MB deterministic JSON envelope in under 16ms, and contains absolutely zero external production dependencies or tracking scripts3.
17.3 Known Reality-Gap Qualifications
This specification acknowledges strict methodological limits. The client adapter reconstructs a synchronized analytical timeline strictly from deterministic engine state; it does not invent, simulate, or extrapolate unrecorded physical behavior3. The visualization relies entirely on assumptions bounded by the declared synthetic scope. Therefore, it does not eliminate the model-to-reality gap inherent in physical hardware deployments, nor does it establish legal liability or certify real-world firing solutions. Its singular purpose is the flawless, accessible, and mathematically verifiable presentation of autonomous logic.
This is for informational purposes only. For medical advice or diagnosis, consult a professional.
Works cited
- NASA Human Systems Integration Handbook - NASA Technical Reports Server (NTRS), https://ntrs.nasa.gov/citations/20210010952
- mil-std-1472h, department of defense design criteria standard: human engineering (15-sep-2020) - EverySpec, https://everyspec.com/MIL-STD/MIL-STD-1400-1499/MIL-STD-1472H_57041/
- Governance Lifecycle and Qualified-Human Gates Assurance Workbench | Evulgare, https://evulgare.com/simulations/governance-lifecycle
- MIL-STD-1472H UI/UX Guidelines - KIWI Flight Systems, https://docs.kiwidrone.com.ua/mil-std-1472h-uiux.html
- Privacy | KillChains.com, https://killchains.com/privacy.php
- NASA-STD-3001 Volume 2: “Human Factors, Habitability and Environmental Health” and the Human Integration Design Handbook, https://ntrs.nasa.gov/api/citations/20100042562/downloads/20100042562.pdf
- SP-2010-3407 NASA/ NASA SPECIAL PUBLICATION HUMAN DESIGN - EverySpec, https://everyspec.com/NASA/NASA-SP-PUBS/SP-2010-3407_30301/
- [PDF] NASA Human Integration Design Handbook (HIDH): Revitalization of Space-Related Human Factors, Environmental and Habitability Data | Semantic Scholar, https://www.semanticscholar.org/paper/NASA-Human-Integration-Design-Handbook-(HIDH)%3A-of-Russo-Pickett/5d569d4bc19bcd96b70841ff67ade872d8be9a87
- NASA SPACE MISSION ARCHITECTURE FRAMEWORK (SMAF) HANDBOOK FOR UNCREWED SPACE MISSIONS | Standards, https://standards.nasa.gov/standard/NASA/NASA-HDBK-1005