Multi-domain Dashboard Architecture: One React Template, Six Domains, Consistent UX

```html

April 5, 2026 | 8-10 minute read

Multi-domain Dashboard Architecture: One React Template, Six Domains, Consistent UX

Building ARKONA, my autonomous multi-agent AI ecosystem, presented a unique challenge: managing six distinct operational domains – CoreOps, BizOps, COMET, DevOps, REOps, and Rango – each with its own set of services, data models, and user interactions. The initial impulse was to build separate dashboards for each. However, that quickly felt like a scalability and maintainability nightmare. I needed a unified approach that delivered a consistent user experience while allowing for domain-specific customization. This article details the architectural decisions and technical implementations I used to achieve this with a single React template.

The Problem: Dashboard Sprawl and Cognitive Load

Imagine needing to monitor 47 microservices across 23 ports. Initially, even with robust monitoring tools, glancing between six different dashboards to correlate information would be exhausting and error-prone. Users would suffer from cognitive overload, and the cost of maintaining separate codebases would quickly spiral. A central tenet of ARKONA’s design is minimizing human intervention; a fragmented UI undermines that goal. Furthermore, a consistent UX is essential for COMET, my AI governance domain, which relies on a 7-step human-AI delegation framework (grounded in IEEE and NIST standards). A jarring shift in interface between agent-presented information and human controls would introduce unacceptable friction.

The Solution: A Single-Page Application with Dynamic Components

I opted for a Single-Page Application (SPA) built with React. The core principle is a shared “shell” – a consistent layout, navigation, theming, and authentication layer – combined with dynamically rendered components specific to each domain. This is achieved through a combination of:

Component Library: A central repository of reusable React components (buttons, charts, data tables, forms, etc.) built using a component-driven development approach.
Routing: React Router handles navigation between domains.
State Management: Redux Toolkit manages global application state, including user authentication, domain context, and data fetching status.
Dynamic Component Loading: Based on the active domain and user permissions, the application dynamically loads and renders the appropriate components.

Think of it as a modular system. The “shell” is the physical chassis, and the domain-specific components are interchangeable modules.

Technical Implementation Details

The system operates using HTTPS delivered via Tailscale. Each domain's services expose APIs on specific ports. For example:

CoreOps (Cyber-Physical RE): Services running on ports 8001-8005
BizOps (Business Management): Ports 8006-8010
REOps (Reverse Engineering): CIPHER pipeline, integrated with Ghidra, runs on ports 8015-8018
COMET (AI Governance): Monitoring and control on ports 8020-8022. This domain is critical and benefits greatly from the unified UX for human-AI interaction.

Data is fetched from these services using a custom hook that handles authentication (WebAuthn/Face ID) and data transformation. The hook uses a centralized configuration to define the API endpoints for each domain, which allows for easy updates and configuration management. Here's a simplified example:


import { useQuery } from 'react-query';
import { apiConfig } from './apiConfig'; // Domain-specific API endpoints

const useDomainData = (domain, endpoint) => {
  const apiUrl = `${apiConfig[domain].baseUrl}:${apiConfig[domain].port}/${endpoint}`;

  const fetchData = async () => {
    const response = await fetch(apiUrl, {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('authToken')}`,
        'Content-Type': 'application/json'
      }
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  };

  return useQuery([domain, endpoint], fetchData);
};

export default useDomainData;

The `apiConfig` object is JSON file structured like this:


{
  "CoreOps": {
    "baseUrl": "https://coreops.tailscale.net",
    "port": 8001
  },
  "BizOps": {
    "baseUrl": "https://bizops.tailscale.net",
    "port": 8006
  },
  // ... other domains
}

This configuration simplifies API access and maintains separation of concerns. The Redux store holds the current domain context, allowing components to access the appropriate API configuration. I also implemented a feature flagging system, allowing me to roll out new components and features to specific domains without affecting others. This is crucial for a constantly evolving ecosystem like ARKONA, where I’m currently pushing 240 commits per week.

Provenance and Security

Ecosystem-wide SHA-256 provenance signing is a key security feature. All data transmitted between services and displayed in the dashboard is digitally signed to ensure integrity and authenticity. This signature is verified client-side before rendering any data. This aligns with MITRE ATT&CK framework principles for data validation and integrity monitoring.

MuXD Integration and Token Savings

ARKONA leverages MuXD, a hybrid LLM router that intelligently routes requests to either local Ollama models (currently running 5 models on my dual Tesla P40 GPUs) or cloud-based Claude. The dashboard incorporates MuXD by allowing agents within each domain to request LLM assistance with tasks like data analysis, report generation, and anomaly detection. The dashboard also visually displays MuXD’s token savings optimization, highlighting how much cost is being reduced by leveraging local models.

The Agent Ecosystem and Battle Rhythm

The 26 autonomous agents operating on a battle rhythm are heavily integrated with the dashboard. The dashboard provides real-time visibility into agent activity, including task status, performance metrics, and generated reports. The 5-agent newsroom editorial pipeline, complete with fact-checking, uses the dashboard to manage and approve content before publication. The NIST 800-30 grounded risk evaluation engine displays its findings directly in the BizOps domain of the dashboard, providing a comprehensive risk assessment.

Challenges and Lessons Learned

The biggest challenge was balancing consistency with flexibility. Overly rigid components would stifle innovation and limit domain-specific customization. I found that a carefully designed abstraction layer, combined with a robust component library and dynamic loading, struck the right balance. Another challenge was managing the complexity of the Redux store. Keeping the state organized and predictable required careful planning and the use of Redux Toolkit’s best practices.

The key takeaway? Don't underestimate the power of a unified UX. In a complex system like ARKONA, consistency reduces cognitive load, improves usability, and ultimately enables more effective collaboration between humans and AI. Building a single React template, while initially challenging, has proven to be a scalable and maintainable solution for managing six distinct domains.

```

Blog