EVR-0022 · CANONICAL /DOCS REPORT

Next-Level Evulgare Defense Demonstrations: A Unified 3D Assurance Workbench for Mission Control, Command Integrity, Continuity, Evidence, and Recovery

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, e…

Source qualification: Author-supplied product and interface research preserved byte-for-byte. Public audit observations and browser-support assertions remain source claims or design inferences until independently reproduced on the current deployed release and representative devices.
SHA-256f752799889d405f78ccef9e88209b8ad7b9592ba5e8bbee8327fccfa857937fdCanonical filedocs/reports/evulgare-defense-workbench-architecture.md.uai memory.uai/reports/evulgare-defense-workbench-architecture.uaiOpen raw Markdown

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.

  1. 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.
  2. Maritime Safety and Continuity: Simulates uncrewed surface vessel navigational governance during hostile GPS spoofing and jamming, utilizing the uncertainty field to visualize probabilistic positioning.
  3. Satellite Health and Recovery: Demonstrates automated collision avoidance and orbital reprovisioning proofs, highlighting the mathematical latency of ground-station command loops versus onboard sovereignty.
  4. Machine-Sovereign Command: Traces authority chains when human-in-the-loop (HITL) communication is severed, proving the agent’s adherence to prior cryptographic mandates.
  5. Authority under Partition: Analyzes the deterministic execution of pre-authorized rules of engagement during absolute network isolation, isolating the logic that dictates weapon safing.
  6. 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.
  7. Software Attestation: Visualizes the cryptographic bill of materials (SBOM) locking a deployed model’s state, mathematically linking visual entity behavior to specific software commits.
  8. Compartment Breach: Models the cascade failure and automated containment protocols of an internal subsystem compromise, showing isolation bulkheads dropping in logical topology space.
  9. Recovery Baseline Registry: Evaluates automated failover procedures returning an agent to the last known cryptographically clean state following an aggressive memory-corruption simulation.
  10. Continuity Drill Orchestrator: A simulated wargame comparing baseline human reaction times against bounded machine responses, generating statistical proofs of required automation thresholds.
  11. Campaign Review Board: Post-mission reconstruction that aggregates multi-agent, decentralized behavior into a single causal timeline for institutional audit.
  12. 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

  1. NASA Human Systems Integration Handbook - NASA Technical Reports Server (NTRS), https://ntrs.nasa.gov/citations/20210010952
  2. 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/
  3. Governance Lifecycle and Qualified-Human Gates Assurance Workbench | Evulgare, https://evulgare.com/simulations/governance-lifecycle
  4. MIL-STD-1472H UI/UX Guidelines - KIWI Flight Systems, https://docs.kiwidrone.com.ua/mil-std-1472h-uiux.html
  5. Privacy | KillChains.com, https://killchains.com/privacy.php
  6. 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
  7. SP-2010-3407 NASA/ NASA SPECIAL PUBLICATION HUMAN DESIGN - EverySpec, https://everyspec.com/NASA/NASA-SP-PUBS/SP-2010-3407_30301/
  8. [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
  9. NASA SPACE MISSION ARCHITECTURE FRAMEWORK (SMAF) HANDBOOK FOR UNCREWED SPACE MISSIONS | Standards, https://standards.nasa.gov/standard/NASA/NASA-HDBK-1005