Files
hapi/web
weishu 7f2a36117c feat: add Spinner and LoadingState components for unified loading UX
Introduces two reusable loading components to standardize loading states:
- Spinner: Base spinner with accessibility support (role, aria-label)
- LoadingState: Semantic loading indicator combining spinner and label

Updates loading patterns across the app:
- Full-screen/block loading now uses LoadingState (App, router, files, file)
- Inline button loading states show spinner + text with aria-busy
- Message list loading replaced with MessageSkeleton component
- Removes duplicate SpinnerIcon definition from PermissionFooter

Improves UX and accessibility:
- Loading screens centered and full-height
- Consistent ellipsis character (…)
- Semantic accessibility (role="status", aria-live, aria-busy)
- Adds CSS variables for banner styling
2025-12-24 17:23:39 +08:00
..
2025-12-19 15:26:33 +08:00
2025-12-16 15:03:50 +08:00

hapi-web

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

What it does

  • Session list with status, pending approvals, and summaries.
  • Chat view with streaming updates and message sending.
  • Permission approval and denial workflows.
  • 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 the shared CLI_API_TOKEN.
  • Live updates come from the server via SSE.

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.

Stack

React 19 + Vite + TanStack Router/Query + Tailwind.