{“content”:”---\nname: jakephone-web-pwa\ndescription: Build a Progressive Web App for Jakephone - connects Hermes API Server to a installable mobile UI\n---\n\n# Jakephone Web PWA 建設計劃\n\n## 背景\n- 用戶：Sozo（中文用戶）\n- Bot：Jakephone（Telegram Bot，在手機上運行）\n- 目標：建一個獨立的 Web PWA，連接到 Hermes API Server\n- 選擇：Progressive Web App（可安裝到主畫面），不需要原生 App，不需要付費\n\n## 架構\n\n手機（主要執行環境）\n├── Hermes Agent + Gateway\n├── API Server (port 8642, OpenAI compatible)\n├── Web PWA（Next.js）→ 部署在 Vercel（免費）\n└── Cloudflare Tunnel（暴露 API Server）\n\n手機瀏覽器（客戶端）\n└── Web PWA（可「加入主畫面」安裝，感覺像原生 App）\n\n\n## Phase 1 建設計劃\n位置：~/.hermes/plans/2026-04-17_090000-jakephone-web-ui-v1.md\n\n### Step 1：啟動 Hermes API Server\n在 Termux 執行：\nbash\n# 找到 gateway.yaml 設定檔位置\nfind /data/data/com.termux/files/usr -name \"gateway.yaml\" 2>/dev/null\n\n# 啟動時加上 --api 參數\npython -m agents.gateway --api --port 8642\n\n\n### Step 2：建立 Next.js PWA 項目\nbash\ncd ~\nnpx create-next-app@latest jakephone-web --typescript --tailwind --app --no-src-dir --import-alias \"@/*\"\ncd jakephone-web\n\n# 安裝依賴\nnpm install @openai/react话音客户端\nnpm install next-pwa\nnpm install lucide-react\n\n\n### Step 3：核心頁面結構\n- /app/page.tsx - 主聊天介面\n- /app/api/chat/route.ts - 對接 Hermes API\n- /components/ChatBubble.tsx - 聊天訊息\n- /components/VoiceInput.tsx - 語音輸入\n- /components/StatusPanel.tsx - 狀態面板\n\n### Step 4：PWA 設定\nmanifest.json + Service Worker（快取策略）\n\n### Step 5：部署到 Vercel\nbash\nnpm i -g vercel\nvercel --prod\n\n\n## 重要約定\n- 所有程式碼放在用戶手機的 Termux 環境\n- Vercel 部署，公開 URL\n- 不需要獨立域名\n”}