mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
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
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_URLto the public HTTPS URL of the dev server.CORS_ORIGINSto 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.