wushenghua/hapi

Fork 0

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

Files

T

f7a40bd573 feat(web): polish chat rendering and fix remote session interactions (#567 )

* feat(web): polish chat rendering

Refresh the web chat presentation across user messages, tool cards, code blocks, diffs, reasoning, and Mermaid diagrams.\n\nAdd focused regression coverage for bubble/status behavior, code and diff rendering, clipboard output, Mermaid theming, and message-window updates.

* fix(web): stabilize chat tool rendering

Preserve manual scroll anchors while older messages and tool dialogs update, and align code, diff, and tool result rendering with chat typography.

Add chat font-weight settings, ignore local Playwright CLI artifacts, document the Angular commit-message convention, and cover the scroll, result, code, diff, and settings behavior with focused tests.

Constraint: User requested committing all current workspace diffs with Angular-style commit messaging

Tested: bun run typecheck:web && bun run test:web && git diff --check

Co-authored-by: OmX <omx@oh-my-codex.dev>

* style(tool-card): polish question and permission card styles

Align AskUserQuestion option surfaces and permission action hierarchy with the existing tool card visual language while preserving interaction logic. Extract shared option presentation helpers and theme-driven hover/muted colors to reduce duplication.

Constraint: Frontend style-only polish; preserve existing permission and answer submission behavior

Rejected: Keep screenshot artifacts in the repo | they are local visual review output, not source

Confidence: high

Scope-risk: narrow

Tested: git diff --check; bun run typecheck:web; bun run test:web; bun run build:web

Not-tested: manual cross-browser visual QA beyond local Playwright inspection

Co-authored-by: OmX <omx@oh-my-codex.dev>

* fix(cli): keep Claude remote plan prompts actionable

Handle Claude remote /plan locally so HAPI switches plan permission mode before forwarding any prompt text. This avoids Claude Code treating /plan as an unknown skill and ending with only a ready event.

Constraint: Claude SDK result messages are not conversation log entries, so command handling must happen before the prompt reaches Claude.\nRejected: surfacing SDK result summaries in web chat | would expose transport-level summaries broadly instead of fixing the slash-command path.\nConfidence: high\nScope-risk: narrow\nDirective: Keep Claude remote slash commands that alter runtime mode in the CLI special-command parser.\nTested: bun test cli/src/parsers/specialCommands.test.ts; bun typecheck; git diff --check\nNot-tested: Manual GitHub-hosted runner deployment.

* fix(web): polish tool result rendering

* fix(web): preserve collapsed session order

* fix(chat): settle initial thread scroll

* fix(settings): remove chat font weight option

* fix(web): remove font weight bootstrap code

* chore: remove unrelated branch artifacts

* test(web): update consumed message invocation test

* fix(chat): cancel initial scroll settling on manual scroll

---------

Co-authored-by: huhaoyu.hahahu <huhaoyu.hahahu@bytedance.com>
Co-authored-by: OmX <omx@oh-my-codex.dev>

2026-05-06 09:18:27 +08:00

4.4 KiB

Raw Blame History

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 hub picker; if unset, the app uses the same origin it was loaded from.
Live updates come from the hub 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.
/sessions/$sessionId/terminal - Terminal interface.
/settings - Application settings.

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/sonnet[1m]/opus/opus[1m]).
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.

Terminal (`src/routes/sessions/terminal.tsx`)

Remote terminal via xterm.js
Real-time via Socket.IO
Resize handling

Voice assistant

ElevenLabs integration (@elevenlabs/react)
Real-time voice control

New session (`src/components/NewSession/`)

Modular session creation:

Machine selector
Directory input with recent paths
Agent type selector
Model selector
Permission mode toggle (YOLO mode)

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 + xterm.js + @elevenlabs/react + socket.io-client + workbox + shiki.

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:

HAPI_PUBLIC_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-hub. 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 hub:

Build the web app. If your static host uses a subpath, set the Vite base:

bun run build:web -- --base /<repo>/

Deploy web/dist to your static host.
Set hub CORS to allow the static origin (HAPI_PUBLIC_URL or CORS_ORIGINS).
Open the static site, click the top-right Hub button on the login screen, and enter the hapi hub origin.

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

4.4 KiB Raw Blame History