docs: default to --relay for simplified remote access with E2EE

Update documentation across README, installation, and quick-start guides
to highlight the new relay-based access method with WireGuard + TLS
end-to-end encryption. Changes include:
- Recommend `hapi server --relay` as the default startup command
- Explain URL and QR code generation in terminal for instant access
- Note end-to-end encryption for security assurance
- Reorganize self-hosted tunnel options (Cloudflare, Tailscale, IP)
- Update website installation steps and add E2EE badge

README.md

@@ -18,13 +18,15 @@ Run Claude Code / Codex / Gemini sessions locally and control them remotely thro
 ## Getting Started
 
 ```bash
-npx @twsxtd/hapi server # start the server locally
+npx @twsxtd/hapi server --relay  # start server with E2E encrypted relay
 npx @twsxtd/hapi                 # run claude code
 ```
 
-Open `http://<server-ip>:3006` and login with the token, if you need to access it remotely, see [Remote access](docs/guide/installation.md#remote-access)
+The terminal will display a URL and QR code. Scan the QR code with your phone or open the URL to access.
 
-More options: [Quick Start](docs/guide/quick-start.md) | [Installation](docs/guide/installation.md)
+> The relay uses WireGuard + TLS for end-to-end encryption. Your data is encrypted from your device to your machine.
+
+For self-hosted options (Cloudflare Tunnel, Tailscale), see [Installation](docs/guide/installation.md)
 
 ## Docs
 

docs/guide/installation.md

@@ -60,10 +60,24 @@ The server can be deployed on:
 - **Local desktop** (default) - Run on your development machine
 - **Remote server** - Deploy on a VPS, cloud server, or any machine with network access
 
-Start the server:
+### Default: Public Relay (recommended)
+
+```bash
+hapi server --relay
+```
+
+The terminal displays a URL and QR code. Scan to access from anywhere.
+
+- **End-to-end encrypted** with WireGuard + TLS
+- No configuration needed
+- Works behind NAT, firewalls, and any network
+
+### Local Only
 
 ```bash
 hapi server
+# or
+hapi server --no-relay
 ```
 
 The server listens on `http://localhost:3006` by default.
@@ -130,19 +144,18 @@ Each machine gets a unique ID stored in `~/.hapi/settings.json`. This allows:
 
 ## Operations
 
-### Remote access
+### Self-hosted tunnels
 
-If the server is deployed on a machine with a **public IP**, you can access it directly via `http://your-server-ip:3006`. Use HTTPS (via reverse proxy like Nginx or Caddy) for production.
+If you prefer not to use the public relay (e.g., for lower latency or self-managed infrastructure), you can use these alternatives:
-
-If the server is behind NAT, use one of these options:
 
 <details>
-<summary>Cloudflare Tunnel (recommended for NAT)</summary>
+<summary>Cloudflare Tunnel</summary>
 
 https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/
 
 ```bash
 export WEBAPP_URL="https://your-tunnel.trycloudflare.com"
+hapi server
 ```
 </details>
 
@@ -153,6 +166,7 @@ https://tailscale.com/download
 
 ```bash
 sudo tailscale up
+hapi server
 ```
 
 Access via your Tailscale IP:
@@ -163,11 +177,11 @@ http://100.x.x.x:3006
 </details>
 
 <details>
-<summary>ngrok</summary>
+<summary>Public IP / Reverse Proxy</summary>
 
-```bash
+If the server has a public IP, access directly via `http://your-server-ip:3006`.
-ngrok http 3006
+
-```
+Use HTTPS (via Nginx, Caddy, etc.) for production.
 </details>
 
 ### Telegram setup

docs/guide/quick-start.md

@@ -25,11 +25,15 @@ Other install options: [Installation](./installation.md)
 ## Start the server
 
 ```bash
-hapi server
+hapi server --relay
 ```
 
 On first run, HAPI prints an access token and saves it to `~/.hapi/settings.json`.
 
+The terminal will display a URL and QR code for remote access.
+
+> End-to-end encrypted with WireGuard + TLS.
+
 ## Start a coding session
 
 ```bash
@@ -40,11 +44,7 @@ This starts Claude Code wrapped with HAPI. The session appears in the web UI.
 
 ## Open the UI
 
-Open your browser:
+Open the URL shown in the terminal, or scan the QR code with your phone.
-
-```
-http://<your-ip>:3006
-```
 
 Enter your access token to log in.
 

website/src/locales/en.json

@@ -110,10 +110,12 @@
   },
   "installation": {
     "title": "Get Started in Seconds",
+    "e2ee": "🔒 End-to-end encrypted with WireGuard + TLS",
     "npm": {
       "step1": "1. Start the Server",
       "step2": "2. Start a Coding Session",
-      "step3": "3. Open the UI"
+      "step3": "3. Open the URL",
+      "step3Hint": "URL and QR code shown in terminal"
     }
   },
   "cta": {

website/src/locales/zh.json

@@ -110,10 +110,12 @@
   },
   "installation": {
     "title": "几秒钟内开始",
+    "e2ee": "🔒 WireGuard + TLS 端对端加密",
     "npm": {
       "step1": "1. 启动服务器",
       "step2": "2. 启动编码会话",
-      "step3": "3. 打开 UI"
+      "step3": "3. 打开 URL",
+      "step3Hint": "终端中显示 URL 和二维码"
     }
   },
   "cta": {

website/src/pages/Home.tsx

@@ -274,8 +274,8 @@ export default function Home() {
                   <h3 className="font-bold">{t('installation.npm.step1')}</h3>
                 </div>
                 <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
-                  <code>npx @twsxtd/hapi server</code>
+                  <code>npx @twsxtd/hapi server --relay</code>
-                  <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npx @twsxtd/hapi server", "server")}>
+                  <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("npx @twsxtd/hapi server --relay", "server")}>
                     {copied === "server" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                   </Button>
                 </div>
@@ -297,15 +297,13 @@ export default function Home() {
                 <div className="flex justify-between items-center">
                   <h3 className="font-bold">{t('installation.npm.step3')}</h3>
                 </div>
-                <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm flex justify-between items-center border-2 border-slate-800">
+                <div className="bg-slate-950 text-slate-50 p-4 rounded-xl font-mono text-sm border-2 border-slate-800">
-                  <code>http://&lt;your-ip&gt;:3006</code>
+                  <code className="text-slate-400">{t('installation.npm.step3Hint')}</code>
-                  <Button variant="ghost" size="icon" className="text-slate-400 hover:text-white hover:bg-slate-800" onClick={() => copyToClipboard("http://localhost:3006", "ui")}>
-                    {copied === "ui" ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-                  </Button>
                 </div>
               </div>
             </CardContent>
           </Card>
+          <p className="text-center mt-4 text-sm text-muted-foreground">{t('installation.e2ee')}</p>
         </div>
       </section>