feat: add Docker support and update README_TH with Mermaid/Docker info

Author: JonusNattapong

Dockerfile

@@ -0,0 +1,36 @@
+# Build stage
+FROM node:22-slim AS builder
+
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy source and build
+COPY . .
+# We don't strictly need a build here if we are running dev mode, 
+# but let's keep it for completeness if we wanted to change to production mode later.
+# RUN npm run build
+
+# Runtime stage
+FROM node:22-slim
+
+WORKDIR /app
+
+# Install openclaw globally so the bridge can use it
+RUN npm install -g openclaw@latest
+
+# Copy built files and dependencies from builder
+COPY --from=builder /app /app
+
+# Expose Vite dev port and Bridge port
+EXPOSE 5173
+EXPOSE 18790
+
+# Environmental variable to ensure openclaw knows where to look 
+# (though it defaults to ~/.openclaw anyway)
+ENV OPENCLAW_DIR=/root/.openclaw
+
+# Run dev mode (Vite + Bridge concurrently)
+CMD ["npm", "run", "dev", "--", "--host"]

README.md

@@ -172,8 +172,26 @@ You need the "engine" to run this app. You have two choices:
 
    *This command runs both the Vite frontend and the Node.js bridge server concurrently.*
 
+### 🐳 Docker Deployment (Optional)
+
+If you prefer to run ClawWizard in a container:
+
+1. **Build and Start**:
+   ```bash
+   docker-compose up -d
+   ```
+
+2. **Access the App**:
+   Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+> [!NOTE]
+> The Docker setup automatically mounts `~/.openclaw` to persist your configurations.
+
+---
+
 4. Open [http://localhost:5173](http://localhost:5173) in your browser.
 
+
 ---
 
 ## 🎭 Workspace Templates

README_TH.md

@@ -1,6 +1,6 @@
 # 🦞 ClawWizard (ภาษาไทย)
 
-**ClawWizard** คือเครื่องมือติดตั้งแบบโต้ตอบ (Interactive Setup Wizard) ระดับพรีเมียมสำหรับ [OpenClaw](https://github.com/openclaw/openclaw) ผู้ช่วย AI ส่วนตัวของคุณ โดยตัวเครื่องมือนี้มาพร้อมกับหน้าจอ GUI ที่สวยงามและใช้งานง่าย เพื่อช่วยในการตั้งค่า OpenClaw Gateway ตั้งแต่การเลือกโมเดล, ช่องทางการสื่อสาร ไปจนถึงทักษะต่าง ๆ ของเอเจนต์
+**ClawWizard** คือเครื่องมือติดตั้งแบบโต้ตอบ (Interactive Setup Wizard) ระดับพรีเมียมสำหรับ [OpenClaw](https://github.com/openclaw/openclaw) ผู้ช่วย AI ส่วนตัวของคุณ โดยตัวเครื่องมือนี้มาพร้อมกับหน้าจอ GUI ที่สวยงามและใช้งานง่าย เพื่อช่วยในการตั้งค่า OpenClaw Gateway ตั้งแต่การเลือกผู้ให้บริการโมเดล, ช่องทางการสื่อสาร, พื้นที่ทำงานเอเจนต์ (Workspace), เทมเพลตบุคลิก และการกดติดตั้ง (Deploy) เพียงครั้งเดียว
 
 <p align="center">
   <img src="/public/banner.png" alt="ClawWizard Banner" width="700">
@@ -9,13 +9,95 @@
 ## ✨ คุณสมบัติเด่น
 
 - **🎯 ระบบติดตั้งแบบโต้ตอบ**: ให้คำแนะนำแบบเป็นขั้นตอน เหมาะสำหรับทั้งมือใหม่และมือโปร
-- **🤖 ระบบเลือกผู้ให้บริการและโมเดล**: รองรับผู้ให้บริการ LLM กว่า 19 ราย เช่น Anthropic, OpenAI, Kilocode, Ollama และอื่น ๆ
-- **💬 การจัดการช่องทางสื่อสาร**: ตั้งค่า WhatsApp, Telegram, Discord, Slack และอื่น ๆ อีกกว่า 10 แพลตฟอร์มได้ง่าย ๆ
+- **🤖 ระบบเลือกผู้ให้บริการและโมเดล**: รองรับผู้ให้บริการ LLM กว่า 20+ ราย เช่น Anthropic, OpenAI, Kilocode, Ollama, OpenRouter, Groq, Gemini, DeepSeek, Mistral และอื่น ๆ
+- **💬 การจัดการช่องทางสื่อสาร**: ตั้งค่าได้ง่ายกว่า **20+ แพลตฟอร์ม** — WhatsApp, Telegram, Discord, Slack, Signal, iMessage, BlueBubbles, LINE, Matrix, Nextcloud Talk, Microsoft Teams, Feishu, Mattermost, Google Chat, Tlon, Nostr, IRC, Twitch, Zalo, Synology Chat
+- **👥 รองรับแชทกลุ่ม**: ควบคุมการเข้าถึงรายกลุ่มด้วย `groupPolicy` (allowlist/blocklist/public) และตั้งค่า `requireMention` รายกลุ่มได้
+- **🔐 ระบบ Pairing**: ขั้นตอนการจับคู่สำหรับแชทส่วนตัวที่ปลอดภัย (ผ่านคำสั่ง `openclaw pairing approve`)
+- **🎭 เทมเพลตเอเจนต์ (Workspace Templates)**: มีเทมเพลตสำเร็จรูปกว่า 15+ แบบสำหรับทุกไฟล์ของ OpenClaw (`AGENTS.md`, `SOUL.md`, `IDENTITY` ฯลฯ) ครอบคลุมทั้งแนว AI-agent สายเทพ, บอทปั่นๆ ตลกๆ และแบบมืออาชีพ
 - **🛠️ เครื่องมือและทักษะ**: เลือกและตั้งค่ากลุ่มเครื่องมือ (Tool Groups) สำหรับเอเจนต์ AI ของคุณ
-- **🚀 การติดตั้งจริง**: เขียนไฟล์การตั้งค่าลงเครื่องที่ `~/.openclaw/` และจัดการจังหวะการรัน OpenClaw ได้โดยตรงจากเบราว์เซอร์
+- **🚀 การติดตั้งจริง (One-click Deploy)**: เขียนไฟล์การตั้งค่าลงเครื่องที่ `~/.openclaw/` อัตโนมัติ พร้อมรัน Gateway และ **เปิดหน้า Dashboard กับ TUI (Terminal UI)** ให้คุณทันที
 - **🛰️ การแสดง Log แบบ Real-time**: รับชมการทำงานของเอเจนต์ AI ผ่านหน้าจอ Terminal บนเว็บแบบสด ๆ
 - **💎 ดีไซน์ระดับพรีเมียม**: อินเตอร์เฟซสไตล์ Glassmorphism โหมดมืด พร้อมแอนิเมชันที่ไหลลื่น
 
+---
+
+## 🗺️ ขั้นตอนการทำงาน (Wizard Flow)
+
+```mermaid
+flowchart TD
+    A([🦞 เริ่ม ClawWizard]) --> B
+
+    subgraph STEP1["ขั้นตอนที่ 1 · ยินดีต้อนรับ"]
+        B[เลือกรูปแบบการใช้งาน\nส่วนตัว / เขียนโค้ด / วิจัย\nอัตโนมัติ / เทรดดิ้ง / กำหนดเอง]
+        B --> B2[เลือกเทมเพลตสำเร็จรูป\nหรือเริ่มจากหน้าว่าง]
+    end
+
+    B2 --> C
+
+    subgraph STEP2["ขั้นตอนที่ 2 · โมเดลและสิทธิ์"]
+        C[เลือกค่าย AI (Provider)\nมีให้เลือกกว่า 20 ค่าย]
+        C --> C2{ใช้ API Key ไหม?}
+        C2 -- ใช่ --> C3[กรอก API Key\nหรือข้ามไปก่อน]
+        C2 -- ไม่ใช่ --> C4[เชื่อมต่อผ่าน OAuth / รันในเครื่อง\nเช่น Ollama, Qwen]
+    end
+
+    C3 & C4 --> D
+
+    subgraph STEP3["ขั้นตอนที่ 3 · พื้นที่ทำงานและบุคลิก"]
+        D[แก้ไขไฟล์ระบบ OpenClaw]
+        D --> D1[SOUL.md · บุคลิกและการตอบโต]
+        D --> D2[AGENTS.md · กฎการทำงาน]
+        D --> D3[IDENTITY · ชื่อและอิโมจิ]
+        D --> D4[ไฟล์อื่นๆ · BOOT / HEARTBEAT / TOOLS / USER]
+        D1 & D2 & D3 & D4 --> D5[🎭 ผสมผสานเทมเพลต\nเลือกแทรกเนื้อหาหรือทับใหม่รายไฟล์]
+    end
+
+    D5 --> E
+
+    subgraph STEP4["ขั้นตอนที่ 4 · Gateway"]
+        E[ตั้งค่าระเบียง (Gateway)\nPort / Bind / Tailscale / ระบบยืนยันตัวตน]
+    end
+
+    E --> F
+
+    subgraph STEP5["ขั้นตอนที่ 5 · ช่องทางสื่อสาร"]
+        F[เปิดใช้งานโซเชียลต่างๆ\nWhatsApp · Telegram · Discord · Slack\nSignal · Matrix · LINE · Zalo · ...]
+        F --> F2{ใช้ในกลุ่มไหม?}
+        F2 -- ใช่ --> F3[เลือกกลุ่มเป้าหมาย (allowlist)\nบังคับแท็กบอท / หา ID กลุ่มผ่าน CLI]
+        F2 -- ไม่ใช่ --> F4[ตั้งค่าแชทส่วนตัว\nเน้นการจับคู่ (Pairing) หรือสาธารณะ]
+    end
+
+    F3 & F4 --> G
+
+    subgraph STEP6["ขั้นตอนที่ 6 · เครื่องมือ"]
+        G[เลือกกลุ่มเครื่องมือ (Tool Groups)\nจัดการไฟล์ · เบราว์เซอร์ · รันโค้ด\nเมมโมรี่ · งานตั้งเวลา (Cron)]
+    end
+
+    G --> H
+
+    subgraph STEP7["ขั้นตอนที่ 7 · สรุปและรัน"]
+        H[ตรวจสอบไฟล์ openclaw.json]
+        H --> I{เลือกวิธีรัน?}
+        I -- รันทันที (Live Deploy) --> J[🚀 เขียนไฟล์ลงเครื่อง\nสั่งเริ่ม Gateway\nตรวจสอบสถานะ]
+        I -- ใส่โค้ดเอง (Manual) --> K[📋 ก๊อปปี้คำสั่ง CLI\nหรือโหลดไฟล์ไปวางเอง]
+    end
+
+    J --> L[✅ บอทออนไลน์แล้ว!\nเปิดระบบหลังบ้าน (Dashboard) 🌐\nเปิดหน้าจอควบคุม (TUI) 💻]
+    K --> M[⚙️ พิมพ์: openclaw onboard\nตามด้วย: openclaw pairing approve]
+
+    style A fill:#ff6b35,color:#fff,stroke:none
+    style L fill:#22c55e,color:#fff,stroke:none
+    style STEP1 fill:#1a1a2e,stroke:#ff6b35,color:#fff
+    style STEP2 fill:#1a1a2e,stroke:#ff6b35,color:#fff
+    style STEP3 fill:#1a1a2e,stroke:#ff6b35,color:#fff
+    style STEP4 fill:#1a1a2e,stroke:#ff6b35,color:#fff
+    style STEP5 fill:#1a1a2e,stroke:#ff6b35,color:#fff
+    style STEP6 fill:#1a1a2e,stroke:#ff6b35,color:#fff
+    style STEP7 fill:#1a1a2e,stroke:#ff6b35,color:#fff
+```
+
+---
+
 ## 💡 คู่มือสำหรับมือใหม่ (ฉบับไม่เก่งคอมก็ทำได้!)
 
 หากคุณไม่เคยใช้โปรแกรมเขียนโค้ด หรือไม่รู้จักว่า "Terminal" คืออะไร ไม่ต้องตกใจครับ! ทำตามขั้นตอนนี้ทีละสั้นๆ คุณจะสามารถเปิดใช้งาน ClawWizard ได้แน่นอน
@@ -52,7 +134,7 @@
 
 - หลังจากพิมพ์คำสั่งสุดท้าย เบราว์เซอร์ของคุณจะเปิดขึ้นมาที่หน้าจอสวยๆ (ถ้าไม่เปิด ให้ก๊อปปี้ลิงก์ `http://localhost:5173` ไปแปะใน Chrome)
 - **ทำตามคำแนะนำในหน้าจอ**: ระบบจะถามคำถามคุณทีละข้อ แค่กรอกข้อมูลตามที่มันบอก
-- **จุดสำคัญ**: เมื่อถึงหน้าสุดท้าย ถ้าคุณติดตั้งโปรแกรม OpenClaw ไว้ในเครื่องแล้ว คุณแค่กดปุ่ม **"Deploy Now"** สีม่วงๆ ตัวโปรแกรมจะจัดการทุกอย่างให้คุณเองโดยไม่ต้องพิมพ์โค้ดอีกเลย!
+- **จุดสำคัญ**: เมื่อถึงหน้าสุดท้าย กดปุ่มสีม่วงๆ **"Deploy Now"** ตัวโปรแกรมจะจัดการเขียนไฟล์การตั้งค่าให้, สั่งรันบอทให้ และจะส่งหน้าจอ **Dashboard** กับ **Terminal UI** มาให้คุณใช้งานทันที สะดวกสุดๆ ครับ!
 
 ---
 
@@ -72,7 +154,7 @@
 1. คลอนโปรเจกต์ (Clone repository):
 
    ```bash
-   git clone https://github.com/yourusername/ClawWizard.git
+   git clone https://github.com/openkrab/ClawWizard.git
    cd ClawWizard
    ```
 
@@ -90,6 +172,23 @@
 
    *คำสั่งนี้จะรันทั้ง Vite frontend และ Node.js bridge พร้อมกัน*
 
+### 🐳 การใช้งานผ่าน Docker (ทางเลือก)
+
+หากคุณต้องการรัน ClawWizard ผ่าน Container:
+
+1. **สร้างและรัน**:
+   ```bash
+   docker-compose up -d
+   ```
+
+2. **เข้าใช้งาน**:
+   เปิด [http://localhost:5173](http://localhost:5173) ผ่านเบราว์เซอร์ของคุณ
+
+> [!NOTE]
+> ระบบ Docker จะทำการเชื่อมโยง (Mount) โฟลเดอร์ `~/.openclaw` อัตโนมัติเพื่อให้การตั้งค่าของคุณยังคงอยู่แม้จะลบ Container ไปแล้ว
+
+---
+
 4. เปิดเบราว์เซอร์ไปที่ [http://localhost:5173](http://localhost:5173)
 
 ---

docker-compose.yml

@@ -0,0 +1,17 @@
+version: '3.8'
+
+services:
+  clawwizard:
+    build: .
+    container_name: clawwizard
+    ports:
+      - "5173:5173"
+      - "18790:18790"
+    volumes:
+      # Map the local openclaw directory to keep configs persistent
+      # Change this path if you are on Windows to your user profile directory
+      # e.g., - C:\Users\Admin\.openclaw:/root/.openclaw
+      - ~/.openclaw:/root/.openclaw
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=development