docs: replace ASCII architecture diagram with Mermaid

README.md

@@ -84,27 +84,20 @@ All configuration is optional — credentials are entered at runtime via the log
 
 ## 🏗 Architecture
 
-```
+```mermaid
-┌─────────────────────────────────────────────────────┐
+graph TD
-│                    PinchChat (Browser)               │
+    subgraph Browser["🌐 PinchChat (Browser)"]
-│                                                      │
+        Login["LoginScreen<br/><i>credentials</i>"]
-│  ┌──────────┐  ┌───────────┐  ┌──────────────────┐  │
+        App["App.tsx<br/><i>router</i>"]
-│  │  Login    │→ │  App.tsx   │→ │  Chat + Sidebar  │  │
+        UI["Chat + Sidebar<br/><i>main UI</i>"]
-│  │  Screen   │  │ (router)  │  │  (main UI)       │  │
+        Hook["useGateway<br/><i>WebSocket state machine</i><br/>auth · sessions · messages"]
-│  └──────────┘  └─────┬─────┘  └────────┬─────────┘  │
+
-│                      │                  │            │
+        Login --> App --> UI
-│                ┌─────▼──────────────────▼─────┐      │
+        App & UI --> Hook
-│                │     useGateway (hook)         │      │
+    end
-│                │  WebSocket state machine      │      │
+
-│                │  auth · sessions · messages   │      │
+    Hook <-->|"WebSocket (JSON frames)"| Gateway["🔌 OpenClaw Gateway<br/><code>ws://host:18789</code>"]
-│                └─────────────┬────────────────┘      │
+    Gateway <-->|API| LLM["🤖 LLM Provider<br/><i>Anthropic, OpenAI, etc.</i>"]
-└──────────────────────────────┼───────────────────────┘
-                               │ WebSocket (JSON frames)
-                               ▼
-                    ┌─────────────────────┐
-                    │  OpenClaw Gateway   │
-                    │  (ws://host:18789)  │
-                    └─────────────────────┘
 ```
 
 ### Key Components