mirror of https://github.com/wu736139669/hapi.git synced 2026-08-05 06:24:37 +00:00

Files

T

weishu 6d401fb9ec feat: add syncing banner and smart scroll behavior for chat thread

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

2025-12-24 14:05:55 +08:00

public

feat: implement progressive web app support with offline capabilities

2025-12-18 13:40:36 +08:00

src

feat: add syncing banner and smart scroll behavior for chat thread

2025-12-24 14:05:55 +08:00

.gitignore

ignore dev_dist

2025-12-19 15:26:33 +08:00

index.html

server: add SSE events stream for webapp

2025-12-19 21:28:53 +08:00

package.json

feat(web): integrate TanStack React Router for client-side routing

2025-12-20 16:49:10 +08:00

postcss.config.cjs

init

2025-12-16 15:03:50 +08:00

README.md

docs: rebrand Happy to HAPI and add component documentation

2025-12-21 18:49:04 +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 Vite dev server proxy configuration for local development

2025-12-19 11:43:11 +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, 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.