wushenghua/hapi
1
0
Fork 0
mirror of https://github.com/wu736139669/hapi.git synced 2026-08-05 06:24:37 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
9dc69d1e80d78d4f8ea962e91723a43825348023
hapi/web
T
History
weishu cb69001385 fix: prevent continuous "Load More" triggering in message virtualization 
The IntersectionObserver's useEffect had handleLoadMore in its dependency
array, but handleLoadMore depended on isLoadingMoreMessages. When loading
completed, isLoadingMoreMessages changed, causing handleLoadMore to be
recreated and the observer to rebuild, immediately firing again and
triggering continuous load requests.

Fixed by storing handleLoadMore in a ref and removing it from the
IntersectionObserver's dependency array, allowing it to rebuild only when
hasMoreMessages or isLoadingMessages change.
2026-01-08 09:09:53 +08:00
..
public
feat: new PWA icon
2025-12-29 14:36:24 +08:00
src
fix: prevent continuous "Load More" triggering in message virtualization
2026-01-08 09:09:53 +08:00
.gitignore
ignore dev_dist
2025-12-19 15:26:33 +08:00
index.html
feat: unify app name
2025-12-29 14:36:24 +08:00
package.json
chore: migrate to AGPL-3.0-only
2026-01-04 20:45:15 +08:00
postcss.config.cjs
refactor: upgrade to Tailwind CSS v4 and update dependencies
2025-12-25 23:13:44 +08:00
README.md
feat: add namespace-based multi-user isolation
2025-12-31 21:56:01 +08:00
tailwind.config.ts
refactor(web): unify max-width constraints with tailwind content class
2025-12-23 18:40:51 +08:00
tsconfig.json
feat: add web vibration api fallback for haptic feedback
2025-12-18 12:53:11 +08:00
vite.config.ts
feat: add web push notifications support
2026-01-02 19:19:40 +08:00

README.md

hapi-web

React Mini App / PWA for monitoring and controlling hapi sessions.

What it does

  • Session list with status, pending approvals, todos, and summaries.
  • Chat view with streaming updates and message sending.
  • Permission approval and denial workflows.
  • Permission mode and model selection.
  • Machine list and remote session spawn.
  • File browser and git status/diff views.
  • PWA install prompt and offline banner.

Runtime behavior

  • When opened inside Telegram, auth uses Telegram WebApp init data.
  • When opened in a normal browser, you can log in with CLI_API_TOKEN:<namespace> (or CLI_API_TOKEN for the default namespace).
  • The login screen includes a top-right server picker; if unset, the app uses the same origin it was loaded from.
  • Live updates come from the server via SSE.

Routes

See src/router.tsx for route definitions.

  • / - Redirect to /sessions.
  • /sessions - Session list.
  • /sessions/$sessionId - Chat interface.
  • /sessions/new - Create new session.
  • /sessions/$sessionId/files - File browser with git status.
  • /sessions/$sessionId/file - File viewer with diff support.

Features

Session list (src/components/SessionList.tsx)

  • Active/inactive status indicator.
  • Session title from name, summary, or path.
  • Todo progress display.
  • Pending permission request count.
  • Agent flavor label (claude/codex/gemini).
  • Model mode display.

Chat interface (src/components/SessionChat.tsx)

  • Message thread with infinite scroll.
  • Composer for sending messages.
  • Permission mode toggle (default/acceptEdits/bypassPermissions/plan).
  • Model selection (default/sonnet/opus).
  • Session abort and mode switch controls.
  • Context size display.

File browser (src/routes/sessions/files.tsx)

  • Git status view (staged/unstaged files).
  • File search with ripgrep.
  • Navigate to file viewer.

File viewer (src/routes/sessions/file.tsx)

  • File content display with syntax highlighting.
  • Staged/unstaged diff view.

New session (src/components/NewSession.tsx)

  • Machine selector.
  • Directory input with recent paths.
  • Agent type selector (claude/codex/gemini).

Authentication

See src/hooks/useAuth.ts and src/hooks/useAuthSource.ts.

  • Telegram Mini App: Uses initData from WebApp SDK.
  • Browser: Uses CLI_API_TOKEN from login prompt.
  • JWT tokens with auto-refresh.

Data fetching

See src/hooks/queries/ for query hooks and src/hooks/mutations/ for mutations.

  • Sessions, messages, machines via TanStack Query.
  • Git status and file operations.
  • Optimistic updates for message sending.

Real-time updates

See src/hooks/useSSE.ts.

  • SSE connection to /api/events.
  • Session/message/machine update events.
  • Automatic cache invalidation on events.

Stack

React 19 + Vite + TanStack Router/Query + Tailwind + @assistant-ui/react.

Source structure

  • src/router.tsx - Route definitions.
  • src/components/ - UI components.
  • src/hooks/ - Data fetching and state hooks.
  • src/api/client.ts - API client.
  • src/types/api.ts - Type definitions.

Development

From the repo root:

bun install
bun run dev:web

If testing in Telegram, set:

  • WEBAPP_URL to the public HTTPS URL of the dev server.
  • CORS_ORIGINS to include the dev server origin.

Build

bun run build:web

The built assets land in web/dist and are served by hapi-server. The single executable can embed these assets.

Standalone hosting

You can host web/dist on a static host (GitHub Pages, Cloudflare Pages) and point it at any hapi server:

  1. Build the web app. If your static host uses a subpath, set the Vite base:
bun run build:web -- --base /<repo>/
  1. Deploy web/dist to your static host.
  2. Set server CORS to allow the static origin (WEBAPP_URL or CORS_ORIGINS).
  3. Open the static site, click the top-right Server button on the login screen, and enter the hapi server origin.

Clear the server override in the same dialog to return to same-origin behavior.

Reference in New Issue View Git Blame Copy Permalink