| # 🏗️ 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' } |
| } |
| }; |
