# 🏗️ 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:

```javascript
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' }
    }
};