Implement two key UX improvements: 1. Syncing banner with visibility tracking: - New useSyncingState hook manages syncing state with safety timeout - Banner shows when SSE connects/reconnects - Auto-hides after 10s to prevent stuck spinner - Smart visibility detection to suppress banner when returning from background 2. Smart scroll behavior for chat thread: - Only auto-scrolls when user is near bottom (<120px threshold) - Shows "X new messages" indicator when user is reading history - Smooth scroll to bottom with indicator button - Resets state on session change Files: - New: useSyncingState hook for syncing state management - New: SyncingBanner component for non-blocking indicator - Modified: App.tsx integrates syncing with SSE handling - Modified: HappyThread implements smart scroll with dynamic autoScroll - Modified: index.css adds spinner and bounce-in animations
hapi
HAPI means "哈皮," a Chinese transliteration of happy, great credit to the original Happy project.
Run Claude Code / Codex / Coding Agent sessions locally and control them remotely through a Web / PWA / Telegram mini App.
Quickstart (single executable)
-
Download the prebuilt
hapibinary for your platform and put it on your PATH. -
Start the server on a machine you control:
export CLI_API_TOKEN="shared-secret"
export WEBAPP_URL="https://your-domain.example" # required for Telegram Mini App
export TELEGRAM_BOT_TOKEN="..."
export ALLOWED_CHAT_IDS="12345678"
hapi server
If you only want the web app + CLI, you can skip TELEGRAM_BOT_TOKEN and ALLOWED_CHAT_IDS.
To enable Telegram later, set TELEGRAM_BOT_TOKEN and WEBAPP_URL, start the server, send /start
to the bot to get your chat ID, set ALLOWED_CHAT_IDS, and restart the server.
- If the server has no public IP, expose it over HTTPS:
- Cloudflare Tunnel docs: https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/
- Tailscale docs: https://tailscale.com/kb/
- Telegram Mini Apps require HTTPS.
- Run the CLI on the machine where you want sessions:
# If the server is not on localhost:3006
export HAPI_BOT_URL="https://your-domain.example"
hapi
The CLI will prompt for CLI_API_TOKEN and save it locally.
- Open the UI:
- In Telegram, run
/appin the bot chat. - In a browser, open
WEBAPP_URLand log in withCLI_API_TOKEN.
CLI config file
You can store the token in ~/.hapi/settings.json instead of an env var.
Environment variables take priority over the file.
Example:
{
"cliApiToken": "shared-secret"
}
Requirements
- Claude CLI installed and logged in (
claudeon PATH). - A Telegram bot token from @BotFather (for Mini App access).
- Bun if building from source.
Build from source
bun install
bun run build
Build a single binary with embedded web assets:
bun run build:single-exe
Build CLI-only binaries:
bun run build:cli:exe
bun run build:cli:exe:all
Docs
cli/README.md- CLI usage and configserver/README.md- server setup and architectureweb/README.md- web app behavior and dev workflow