docs: add Seamless Handoff documentation and showcase

Introduce comprehensive documentation of HAPI's Seamless Handoff feature:

- README: Add Seamless Handoff to Features section
- how-it-works: Add complete Seamless Handoff guide with local/remote modes and switching workflow
- quick-start: Add Seamless Handoff link to Next steps
- AppShowcase: Add third card featuring "Switch Freely" mode switching capability
- Locales: Update English and Chinese translations for showcase content

README.md

@@ -8,6 +8,7 @@ Run Claude Code / Codex / Gemini sessions locally and control them remotely thro
 
 ## Features
 
+- **Seamless Handoff** - Work locally with native Claude Code or Codex, switch to remote when needed, switch back anytime.
 - Start AI coding sessions from any machine.
 - Monitor and control sessions from your phone or browser.
 - Approve or deny tool permissions remotely.

docs/guide/how-it-works.md

@@ -166,3 +166,56 @@ For remote access outside your local network:
 - **Cloudflare Tunnel** (recommended) - Free, secure, reliable
 - **Tailscale** - Mesh VPN for private networks
 - **ngrok** - Quick setup for testing
+
+## Seamless Handoff
+
+HAPI's defining feature is the ability to seamlessly hand off control between local terminal and remote devices without losing session state.
+
+### Local Mode
+
+When working in local mode, you have the full terminal experience — it is native Claude Code or Codex:
+
+- Direct keyboard input with instant response
+- Full terminal UI with syntax highlighting
+- Best for focused, uninterrupted coding sessions
+- All AI processing happens locally on your machine
+
+### Remote Mode
+
+Switch to remote mode when you need to step away:
+
+- Control via Web/PWA/Telegram from any device
+- Approve permissions on the go
+- Monitor progress while away from your desk
+- Session continues running on your local machine
+
+### How Switching Works
+
+```
+┌─────────────────┐                    ┌─────────────────┐
+│   Local Mode    │◄──────────────────►│   Remote Mode   │
+│   (Terminal)    │                    │   (Phone/Web)   │
+└─────────────────┘                    └─────────────────┘
+        │                                      │
+        │  ┌────────────────────────────┐      │
+        └─►│  Same Session, Same State  │◄─────┘
+           └────────────────────────────┘
+```
+
+**Local → Remote:**
+- Receive a message from phone/web
+- Session automatically switches to remote mode
+- Terminal shows "Remote mode - waiting for input"
+
+**Remote → Local:**
+- Press double-space in terminal
+- Instantly regain local control
+- Continue typing as if you never left
+
+### Use Cases
+
+1. **Remote Control While Away** - Start a session at your desk, continue from your phone during commute or coffee break
+
+2. **Permission Approval** - AI requests file access, you get notified on phone, approve with one tap, session continues
+
+3. **Multi-Device Collaboration** - View session progress on your phone while your desktop does the heavy lifting

docs/guide/quick-start.md

@@ -52,6 +52,7 @@ Enter your access token to log in.
 
 ## Next steps
 
+- [Seamless Handoff](/guide/how-it-works#seamless-handoff) - Switch between terminal and phone seamlessly
 - [Remote access](/guide/installation#remote-access) - Access HAPI from anywhere
 - [Notifications](/guide/installation#telegram-setup) - Set up Telegram notifications
 - [Install the app](/guide/pwa) - Add HAPI to your home screen

website/src/components/AppShowcase.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
-import { Laptop, Smartphone, RefreshCw, Wifi } from "lucide-react";
+import { Laptop, Smartphone, RefreshCw, Wifi, ArrowLeftRight } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 export default function AppShowcase() {
@@ -91,6 +91,18 @@ export default function AppShowcase() {
                     {t('showcase.remoteControl.desc')}
                   </p>
                 </div>
+
+                <div className="p-6 rounded-2xl bg-card border-2 border-border shadow-hard hover:translate-y-1 transition-transform">
+                  <div className="flex items-center gap-4 mb-3">
+                    <div className="p-3 rounded-xl bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400">
+                      <ArrowLeftRight className="h-6 w-6" />
+                    </div>
+                    <h3 className="font-bold text-xl">{t('showcase.modeSwitch.title')}</h3>
+                  </div>
+                  <p className="text-muted-foreground">
+                    {t('showcase.modeSwitch.desc')}
+                  </p>
+                </div>
               </div>
             </div>
 

website/src/locales/en.json

@@ -19,8 +19,8 @@
   },
   "showcase": {
     "handoff": "Seamless Handoff",
-    "title": "Start on Desktop. <br class=\"hidden md:block\" /> <span class=\"text-primary\">Continue on Mobile.</span>",
-    "subtitle": "Your session lives on your machine. Your phone is just a window. Walk away from your desk and keep the coding vibe alive, context fully synced.",
+    "title": "Start on Desktop. <br class=\"hidden md:block\" /> <span class=\"text-primary\">Continue Anywhere. Switch Back Anytime.</span>",
+    "subtitle": "Your session lives on your machine. Your phone is just a window. Work locally with native Claude Code or Codex, switch to remote when away, double-space to switch back instantly.",
     "localCore": {
       "title": "Local Core",
       "desc": "Heavy lifting happens on your powerful desktop machine. No cloud limits."
@@ -29,6 +29,10 @@
       "title": "Remote Control",
       "desc": "Access everything via PWA or messaging apps. Zero latency feel."
     },
+    "modeSwitch": {
+      "title": "Switch Freely",
+      "desc": "Move between terminal and mobile seamlessly. Double-space to return to local. Session state stays perfectly synced."
+    },
     "screenshots": {
       "startAnywhere": {
         "title": "Start Anywhere",

website/src/locales/zh.json

@@ -19,8 +19,8 @@
   },
   "showcase": {
     "handoff": "无缝切换",
-    "title": "始于桌面，<br class=\"hidden md:block\" /> <span class=\"text-primary\">续于指尖。</span>",
-    "subtitle": "会话驻留在你的电脑上，手机只是一个窗口。离开办公桌，保持编程状态，上下文完全同步。",
+    "title": "始于桌面，<br class=\"hidden md:block\" /> <span class=\"text-primary\">续于任何地方，随时切回。</span>",
+    "subtitle": "会话驻留在你的电脑上，手机只是一个窗口。本地就是原生 Claude Code 或 Codex，外出时切换到手机，双空格键瞬间切回本地。",
     "localCore": {
       "title": "本地核心",
       "desc": "繁重的计算在你的高性能桌面上完成。没有云端限制。"
@@ -29,6 +29,10 @@
       "title": "远程控制",
       "desc": "通过 PWA 或即时通讯应用访问一切。零延迟体验。"
     },
+    "modeSwitch": {
+      "title": "自由切换",
+      "desc": "在终端和手机之间无缝切换。双空格键切回本地。会话状态完美同步。"
+    },
     "screenshots": {
       "startAnywhere": {
         "title": "随时开始",