diff --git a/README.md b/README.md index 1f6206cc..1cf2aec2 100644 --- a/README.md +++ b/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. diff --git a/docs/guide/how-it-works.md b/docs/guide/how-it-works.md index 05ff0fcd..aedb5f55 100644 --- a/docs/guide/how-it-works.md +++ b/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 diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md index 0dda463d..439c0b07 100644 --- a/docs/guide/quick-start.md +++ b/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 diff --git a/website/src/components/AppShowcase.tsx b/website/src/components/AppShowcase.tsx index 8f82d21d..d2fca04c 100644 --- a/website/src/components/AppShowcase.tsx +++ b/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')}

+ +
+
+
+ +
+

{t('showcase.modeSwitch.title')}

+
+

+ {t('showcase.modeSwitch.desc')} +

+
diff --git a/website/src/locales/en.json b/website/src/locales/en.json index f5f57bff..31f694a4 100644 --- a/website/src/locales/en.json +++ b/website/src/locales/en.json @@ -19,8 +19,8 @@ }, "showcase": { "handoff": "Seamless Handoff", - "title": "Start on Desktop.
Continue on Mobile.", - "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.
Continue Anywhere. Switch Back Anytime.", + "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", diff --git a/website/src/locales/zh.json b/website/src/locales/zh.json index 43b25950..7cdfc822 100644 --- a/website/src/locales/zh.json +++ b/website/src/locales/zh.json @@ -19,8 +19,8 @@ }, "showcase": { "handoff": "无缝切换", - "title": "始于桌面，
续于指尖。", - "subtitle": "会话驻留在你的电脑上，手机只是一个窗口。离开办公桌，保持编程状态，上下文完全同步。", + "title": "始于桌面，
续于任何地方，随时切回。", + "subtitle": "会话驻留在你的电脑上，手机只是一个窗口。本地就是原生 Claude Code 或 Codex，外出时切换到手机，双空格键瞬间切回本地。", "localCore": { "title": "本地核心", "desc": "繁重的计算在你的高性能桌面上完成。没有云端限制。" @@ -29,6 +29,10 @@ "title": "远程控制", "desc": "通过 PWA 或即时通讯应用访问一切。零延迟体验。" }, + "modeSwitch": { + "title": "自由切换", + "desc": "在终端和手机之间无缝切换。双空格键切回本地。会话状态完美同步。" + }, "screenshots": { "startAnywhere": { "title": "随时开始",