Claude Code PWA — cli.jonahtebaa.com

Claude Code PWA — cli.jonahtebaa.com

Last updated: 2026-04-19 (Brian)
Status: live at https://cli.jonahtebaa.com/

What it is

The v3 Claude Code PWA (cli-pwa) — a web UI for Jonah to use Claude Code from any browser, with session management, voice dictation, subagents panel, and a live "working…" typing indicator above the input bar.

Previously served at cc.jonahtebaa.com/v3/. Migrated to cli.jonahtebaa.com/ (served at root) on 2026-04-19. The /v3/ path on cc.jonahtebaa.com has been removed.

Architecture

Browser → Caddy (cli.jonahtebaa.com:443)
        → reverse_proxy host.docker.internal:8111
        → cli-pwa-backend (systemd) serves:
            /api/*          → REST (sessions, skills, commands, enhance, archived)
            /ws/sessions/:id → WebSocket (session event stream)
            /               → Static files from /opt/agent/cli-pwa/frontend/dist

• Backend: /opt/agent/cli-pwa/backend/ (Node/Fastify). Spawns Claude Code CLI subprocesses via execa, pipes stream-JSON events to the client over WS. Managed by systemd unit cli-pwa-backend.
• Frontend: /opt/agent/cli-pwa/frontend/ (Vite + React). Built with npx tsc -b && npx vite build. Served as static files from backend.
• Auth: Caddy gate (shared snippet gate_auth + gate_check). Same cookie-based gate used by other *.jonahtebaa.com apps.
• Caddy config: /opt/agent/caddy/Caddyfile, block starting cli.jonahtebaa.com {.

Key files

Session status machine (live indicator)

Status is driven by WebSocket event types in SessionView.tsx:

The "working…" indicator (italic muted text above the input bar, absolutely positioned at bottom: 68px) renders when connected === true AND status is thinking (shows working + animated 1→2→3 dots via pure-CSS @keyframes brian-typing-dots animating content on .brian-typing-dots::after) or awaiting_permission (shows waiting for you...).

Deploy / rebuild

cd /opt/agent/cli-pwa/frontend && npx tsc -b && npx vite build
# Backend auto-serves the new dist. Restart only if backend code changed:
systemctl restart cli-pwa-backend

Caddy reload:

docker exec agent-caddy caddy reload --config /etc/caddy/Caddyfile

Operations

• Health: systemctl is-active cli-pwa-backend → active.
• Port: backend listens on 127.0.0.1:8111.
• Caddy log: /data/caddy-cli.log (inside agent-caddy container).
• Backend logs: journalctl -u cli-pwa-backend --since "5 min ago".
• TLS cert: auto-obtained via Caddy ACME on first request.

Migration notes (2026-04-19)

Removed from Caddyfile:

# was inside cc.jonahtebaa.com { ... }
handle_path /v3/* {
    reverse_proxy host.docker.internal:8111 { flush_interval -1 }
}

Added:

cli.jonahtebaa.com {
    header { ... security headers, microphone=(self) allowed ... }
    import gate_auth
    import gate_check
    log { output file /data/caddy-cli.log ... }
    reverse_proxy host.docker.internal:8111 { flush_interval -1 }
}

Frontend changes to drop /v3/ prefix: vite base → /, api.ts BASE → /api, ws.ts URL → /ws/sessions/..., main.tsx router basename → /, index.html favicon → /favicon.svg.

Known limitations

• Sessions run as Claude SDK subprocesses (not tmux panes). A true terminal-mirror view (like the old cli-pwa-v4.backup) was considered but rejected — would require rewriting session management on a tmux hub with bidirectional xterm.js streaming. The chat UI + events-based working indicator is the current design.
• Voice dictation requires Permissions-Policy: microphone=(self) — set inline in the Caddy block (not via shared snippet which sets microphone=()).