feat: update website with new components

public/index.html

@@ -25,6 +25,8 @@
             <div class="container">
                 <a href="#overview">Overview</a>
                 <a href="#spore">Core</a>
+                <a href="#gateway">Gateway</a>
+                <a href="#registry">Registry</a>
                 <a href="#ui">UI</a>
                 <a href="#apps">Apps</a>
                 <a href="#docs">Docs</a>
@@ -133,6 +135,199 @@ void loop() {
             </div>
         </section>
 
+        <section id="gateway" class="content-section alt">
+            <div class="container">
+                <h2>Gateway</h2>
+                <p class="subtitle">Gateway service providing UDP-based node discovery, cluster management, and API endpoints</p>
+                <p class="repo-link"><a href="https://git.dcentral.systems/iot/spore-gateway" target="_blank" rel="noopener">Repository: spore-gateway</a></p>
+
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h3>Node Discovery</h3>
+                        <p>UDP-based discovery listens for heartbeat messages from SPORE nodes on port 4210 with automatic cluster membership</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>Cluster Management</h3>
+                        <p>Real-time node status tracking, primary node selection, and automatic failover for high availability</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>WebSocket Server</h3>
+                        <p>Real-time cluster updates and event broadcasting to all connected WebSocket clients</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>MQTT Integration</h3>
+                        <p>Subscribe to all MQTT topics and forward messages to WebSocket clients for unified event streaming</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>Rollout System</h3>
+                        <p>Orchestrated firmware updates across multiple nodes with parallel processing and progress tracking</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>Proxy API</h3>
+                        <p>Generic proxy calls to SPORE node capabilities with automatic failover and load balancing</p>
+                    </div>
+                </div>
+
+                <div class="content-block">
+                    <h3>Architecture & Integration</h3>
+                    <p>SPORE Gateway acts as the central orchestrator for the SPORE cluster, bridging the gap between SPORE nodes and the UI. It integrates seamlessly with the SPORE ecosystem and external systems through multiple protocols.</p>
+                </div>
+
+                <div class="content-block">
+                    <h3>Core Components</h3>
+                    <ul>
+                        <li><strong>UDP Discovery:</strong> Listens on port 4210 for node heartbeats and maintains cluster membership in real-time</li>
+                        <li><strong>HTTP API Server:</strong> RESTful endpoints for cluster management, node control, and firmware operations</li>
+                        <li><strong>WebSocket Server:</strong> Broadcasts cluster updates, events, and rollout progress to all connected clients</li>
+                        <li><strong>MQTT Client:</strong> Optional integration to subscribe to MQTT brokers and forward messages via WebSocket</li>
+                        <li><strong>Registry Proxy:</strong> Integrates with spore-registry for firmware storage and retrieval</li>
+                        <li><strong>Failover Logic:</strong> Automatic primary node switching when nodes go offline</li>
+                    </ul>
+                </div>
+
+                <div class="content-block">
+                    <h3>MQTT Integration</h3>
+                    <p>Enable MQTT integration to stream events from external IoT devices and systems:</p>
+                    <pre><code class="language-bash"># Start gateway with MQTT integration
+./spore-gateway -mqtt tcp://localhost:1883
+
+# With authentication
+MQTT_USER=username MQTT_PASSWORD=password \
+  ./spore-gateway -mqtt tcp://broker.example.com:1883</code></pre>
+                    <p>When enabled, the gateway subscribes to all MQTT topics (#) and forwards messages to connected WebSocket clients, allowing the UI to display both SPORE cluster events and external MQTT events in real-time.</p>
+                </div>
+
+                <div class="content-block">
+                    <h3>Rollout Orchestration</h3>
+                    <p>The rollout system manages parallel firmware updates across multiple SPORE nodes:</p>
+                    <ul>
+                        <li><strong>Automatic Node Discovery:</strong> Identifies matching nodes based on firmware labels and current versions</li>
+                        <li><strong>Parallel Processing:</strong> Updates multiple nodes simultaneously using goroutines</li>
+                        <li><strong>Real-time Progress:</strong> WebSocket broadcasts show update status for each node</li>
+                        <li><strong>Error Recovery:</strong> Continues rollout even if individual nodes fail</li>
+                        <li><strong>Registry Integration:</strong> Seamless integration with spore-registry for firmware storage</li>
+                    </ul>
+                </div>
+
+                <div class="content-block">
+                    <h3>Technology Stack</h3>
+                    <ul>
+                        <li><strong>Language:</strong> Go (Golang)</li>
+                        <li><strong>Framework:</strong> Standard library net/http with Go 1.22 ServeMux</li>
+                        <li><strong>WebSocket:</strong> gorilla/websocket for real-time communication</li>
+                        <li><strong>MQTT:</strong> Eclipse Paho MQTT client library</li>
+                        <li><strong>Logging:</strong> Structured logging with logrus</li>
+                        <li><strong>Concurrency:</strong> Goroutines and channels for parallel operations</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <section id="registry" class="content-section">
+            <div class="container">
+                <h2>Registry</h2>
+                <p class="subtitle">Storage backend and update server for managing versioned firmware binaries</p>
+                <p class="repo-link"><a href="https://git.dcentral.systems/iot/spore-registry" target="_blank" rel="noopener">Repository: spore-registry</a></p>
+
+                <div class="feature-grid">
+                    <div class="feature-card">
+                        <h3>Hierarchical Storage</h3>
+                        <p>Firmware binaries stored in hierarchical structure: registry/{name}/{version}/firmware.bin with semantic versioning support</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>SQLite Metadata</h3>
+                        <p>Metadata storage with labels for flexible querying, version management, and deployment tracking</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>REST API</h3>
+                        <p>Simple HTTP endpoints for upload, listing, download, and update operations with full CRUD support</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>Rollout Integration</h3>
+                        <p>Seamlessly integrated with Gateway for orchestrated firmware deployment across cluster nodes</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>Version Management</h3>
+                        <p>Semantic versioning support with unique name-version constraints and version history tracking</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>Label System</h3>
+                        <p>Flexible key-value labels for organizing and querying firmware by app, role, or custom attributes</p>
+                    </div>
+                </div>
+
+                <div class="content-block">
+                    <h3>Architecture & Role</h3>
+                    <p>SPORE Registry serves as the central firmware storage and management system for the SPORE ecosystem. It provides versioned storage for firmware binaries, enabling the Gateway to orchestrate firmware rollouts across cluster nodes. The registry integrates seamlessly with the Gateway's rollout system, providing the firmware binaries needed for over-the-air updates.</p>
+                </div>
+
+                <div class="content-block">
+                    <h3>Storage Structure</h3>
+                    <p>Firmware is stored hierarchically in the file system:</p>
+                    <pre><code class="language-text">registry/
+├── base/
+│   ├── 1.0.0/
+│   │   └── firmware.bin
+│   └── 1.1.0/
+│       └── firmware.bin
+└── sensor/
+    └── 2.0.0/
+        └── firmware.bin</code></pre>
+                    <p>This structure allows easy organization and access to firmware versions by name and version number.</p>
+                </div>
+
+                <div class="content-block">
+                    <h3>Integration with Gateway</h3>
+                    <p>The registry is tightly integrated with the Gateway's rollout system:</p>
+                    <ul>
+                        <li><strong>Firmware Lookup:</strong> Gateway queries the registry to find matching firmware for deployment</li>
+                        <li><strong>Label Matching:</strong> Firmware can be organized with labels (app, role, target) for automated deployment</li>
+                        <li><strong>Version Tracking:</strong> Registry maintains version history for rollback and audit purposes</li>
+                        <li><strong>Binary Distribution:</strong> Gateway proxies firmware downloads to nodes during rollout</li>
+                        <li><strong>Deployment Automation:</strong> Full integration with Gateway's rollout orchestration for cluster-wide updates</li>
+                    </ul>
+                </div>
+
+                <div class="content-block">
+                    <h3>Usage Examples</h3>
+                    <pre><code class="language-bash"># Upload firmware
+curl -X POST http://localhost:3002/firmware \
+  -F "metadata={\"name\":\"base\",\"version\":\"1.0.0\",\"labels\":{\"app\":\"base\"}}" \
+  -F "firmware=@firmware.bin"
+
+# List firmware
+curl http://localhost:3002/firmware
+
+# Download firmware
+curl http://localhost:3002/firmware/base/1.0.0 -o firmware.bin
+
+# Health check
+curl http://localhost:3002/health</code></pre>
+                </div>
+
+                <div class="content-block">
+                    <h3>Environment Configuration</h3>
+                    <p>The registry supports the following configuration via environment variables:</p>
+                    <ul>
+                        <li><strong>PORT:</strong> Server port (default: 3002)</li>
+                        <li><strong>DB_PATH:</strong> Database file path (default: ./registry.db)</li>
+                        <li><strong>REGISTRY_PATH:</strong> Firmware storage directory (default: registry)</li>
+                        <li><strong>MAX_UPLOAD_SIZE:</strong> Maximum upload size in bytes (default: 32MB)</li>
+                    </ul>
+                </div>
+
+                <div class="content-block">
+                    <h3>Technology Stack</h3>
+                    <ul>
+                        <li><strong>Language:</strong> Go (Golang)</li>
+                        <li><strong>Database:</strong> SQLite for metadata storage</li>
+                        <li><strong>Storage:</strong> File system for firmware binaries</li>
+                        <li><strong>API:</strong> HTTP REST API with standard library net/http</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
         <section id="ui" class="content-section alt">
             <div class="container">
                 <h2>UI</h2>
@@ -144,6 +339,10 @@ void loop() {
                         <img src="assets/cluster.png" alt="Cluster monitoring view">
                         <p>Real-time cluster member overview with auto-discovery</p>
                     </div>
+                    <div class="screenshot">
+                        <img src="assets/events.png" alt="Events visualization">
+                        <p>Real-time event flow visualization with interactive graph</p>
+                    </div>
                     <div class="screenshot">
                         <img src="assets/topology.png" alt="Network topology visualization">
                         <p>Network topology visualization with node relationships</p>
@@ -162,6 +361,8 @@ void loop() {
                     <h3>Features</h3>
                     <ul>
                         <li>Cluster monitoring with real-time status updates</li>
+                        <li>Events visualization showing real-time event flow as an interactive force-directed graph</li>
+                        <li>Event tracking with animated golden dots showing data flow through cluster topics</li>
                         <li>Node details including running tasks and available endpoints</li>
                         <li>Direct HTTP API access to all nodes in the cluster</li>
                         <li>Over-the-air firmware updates for entire cluster</li>
@@ -182,7 +383,7 @@ void loop() {
             </div>
         </section>
 
-        <section id="apps" class="content-section">
+        <section id="apps" class="content-section alt">
             <div class="container">
                 <h2>Apps</h2>
                 <p class="subtitle">Application suite built on SPORE</p>
@@ -275,11 +476,30 @@ void loop() {
                         <h3>SPORE UI</h3>
                         <ul>
                             <li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/README.md" target="_blank" rel="noopener">Getting Started</a> - Installation and setup</li>
+                            <li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/docs/Events.md" target="_blank" rel="noopener">Events View</a> - Real-time event visualization</li>
                             <li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/docs/DISCOVERY.md" target="_blank" rel="noopener">UDP Auto Discovery</a> - Network discovery protocol</li>
                             <li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/api/openapi.yaml" target="_blank" rel="noopener">API Spec</a> - Backend API reference (OpenAPI)</li>
                             <li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/docs/FRAMEWORK_README.md" target="_blank" rel="noopener">Component Framework</a> - Custom UI architecture</li>
                         </ul>
                     </div>
+                    <div class="doc-card">
+                        <h3>SPORE Gateway</h3>
+                        <ul>
+                            <li><a href="https://git.dcentral.systems/iot/spore-gateway/src/branch/main/README.md" target="_blank" rel="noopener">Getting Started</a> - Installation and usage</li>
+                            <li><a href="https://git.dcentral.systems/iot/spore-gateway/src/branch/main/docs/MQTT.md" target="_blank" rel="noopener">MQTT Integration</a> - MQTT message forwarding</li>
+                            <li><a href="https://git.dcentral.systems/iot/spore-gateway/src/branch/main/docs/Rollout.md" target="_blank" rel="noopener">Rollout Process</a> - Firmware rollout orchestration</li>
+                            <li><a href="https://git.dcentral.systems/iot/spore-gateway/src/branch/main/api/openapi.yaml" target="_blank" rel="noopener">API Spec</a> - Gateway API reference (OpenAPI)</li>
+                        </ul>
+                    </div>
+                    <div class="doc-card">
+                        <h3>SPORE Registry</h3>
+                        <ul>
+                            <li><a href="https://git.dcentral.systems/iot/spore-registry/src/branch/main/README.md" target="_blank" rel="noopener">Getting Started</a> - Installation and usage</li>
+                            <li><a href="https://git.dcentral.systems/iot/spore-registry/src/branch/main/docs/ARCHITECTURE.md" target="_blank" rel="noopener">Architecture</a> - System design and structure</li>
+                            <li><a href="https://git.dcentral.systems/iot/spore-registry/src/branch/main/api/openapi.yaml" target="_blank" rel="noopener">API Spec</a> - Registry API reference (OpenAPI)</li>
+                            <li><a href="https://git.dcentral.systems/iot/spore-ui/src/branch/main/docs/FIRMWARE_REGISTRY_INTEGRATION.md" target="_blank" rel="noopener">UI Integration</a> - Registry integration with UI</li>
+                        </ul>
+                    </div>
                     <div class="doc-card">
                         <h3>SPORE LEDLab</h3>
                         <ul>
@@ -302,6 +522,26 @@ void loop() {
                             <pre><code># Build and flash firmware
 ./ctl.sh build target esp01
 ./ctl.sh flash target esp01</code></pre>
+                        </div>
+                        <div class="start-card">
+                            <h4>SPORE Gateway</h4>
+                            <pre><code># Build and start
+go mod tidy
+go build
+./spore-gateway
+
+# With MQTT integration
+./spore-gateway -mqtt tcp://localhost:1883</code></pre>
+                        </div>
+                        <div class="start-card">
+                            <h4>SPORE Registry</h4>
+                            <pre><code># Build and start
+go mod download
+go run main.go
+
+# Or build and run
+go build -o spore-registry
+./spore-registry</code></pre>
                         </div>
                         <div class="start-card">
                             <h4>SPORE UI</h4>
@@ -333,6 +573,8 @@ http://localhost:3000</code></pre>
             <p>
                 Source: 
                 <a href="https://git.dcentral.systems/iot/spore" target="_blank" rel="noopener">spore</a> · 
+                <a href="https://git.dcentral.systems/iot/spore-gateway" target="_blank" rel="noopener">spore-gateway</a> · 
+                <a href="https://git.dcentral.systems/iot/spore-registry" target="_blank" rel="noopener">spore-registry</a> · 
                 <a href="https://git.dcentral.systems/iot/spore-ui" target="_blank" rel="noopener">spore-ui</a> · 
                 <a href="https://git.dcentral.systems/iot/spore-ledlab" target="_blank" rel="noopener">spore-ledlab</a>
             </p>