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
 
-```
-┌─────────────────────────────────────────────────────┐
-│                    PinchChat (Browser)               │
-│                                                      │
-│  ┌──────────┐  ┌───────────┐  ┌──────────────────┐  │
-│  │  Login    │→ │  App.tsx   │→ │  Chat + Sidebar  │  │
-│  │  Screen   │  │ (router)  │  │  (main UI)       │  │
-│  └──────────┘  └─────┬─────┘  └────────┬─────────┘  │
-│                      │                  │            │
-│                ┌─────▼──────────────────▼─────┐      │
-│                │     useGateway (hook)         │      │
-│                │  WebSocket state machine      │      │
-│                │  auth · sessions · messages   │      │
-│                └─────────────┬────────────────┘      │
-└──────────────────────────────┼───────────────────────┘
-                               │ WebSocket (JSON frames)
-                               ▼
-                    ┌─────────────────────┐
-                    │  OpenClaw Gateway   │
-                    │  (ws://host:18789)  │
-                    └─────────────────────┘
+```mermaid
+graph TD
+    subgraph Browser["🌐 PinchChat (Browser)"]
+        Login["LoginScreen<br/><i>credentials</i>"]
+        App["App.tsx<br/><i>router</i>"]
+        UI["Chat + Sidebar<br/><i>main UI</i>"]
+        Hook["useGateway<br/><i>WebSocket state machine</i><br/>auth · sessions · messages"]
+
+        Login --> App --> UI
+        App & UI --> Hook
+    end
+
+    Hook <-->|"WebSocket (JSON frames)"| Gateway["🔌 OpenClaw Gateway<br/><code>ws://host:18789</code>"]
+    Gateway <-->|API| LLM["🤖 LLM Provider<br/><i>Anthropic, OpenAI, etc.</i>"]
 ```
 
 ### Key Components