Design.md

🏗️ System Design Document

Project: AI-Robotic Orchestrator (AG1-Sample) Design Pattern: Frontend Single Page Application (SPA) / State Machine

---

1. Core Architecture

The application is a pure HTML/CSS/JS frontend application. It utilizes a centralized State Object to manage server roles and permissions, ensuring the UI updates reactively based on user interaction.

---

2. State Management (state object)

The entire simulation relies on a single JavaScript object stored in memory:

let state = {
    servers: {
        'Server1': { role: 'Primary', canWrite: true, cssClass: 'status-primary' },
        'Server2': { role: 'Secondary', canWrite: false, cssClass: 'status-secondary' },
        'Server3': { role: 'Secondary', canWrite: false, cssClass: 'status-excluded' }
    }
};